Fix missing context gathering and AI-slop copy in 3 skills

critique:
- Add MANDATORY PREPARATION block with context gathering and
  {{ask_instruction}} — it was the only skill with a MANDATORY
  PREPARATION section in other skills that lacked one
- Enforce frontend-design skill loading with "Do NOT proceed until..."

onboard:
- Add MANDATORY PREPARATION block — same gap as critique, onboard
  jumped straight to assessment without gathering context first
- Add frontend-design skill loading

delight:
- Replace cliched loading messages ("Herding pixels", "Teaching robots
  to dance", "Consulting the magic 8-ball") with product-specific
  examples — these are exactly the kind of AI-generated copy the
  suite's own anti-slop philosophy warns against
- Add explicit WARNING against these cliched patterns
- Change "Checkboxes that bounce" to "scale pulse" — bounce easing
  contradicts the suite's consistent stance against bounce/elastic
  curves (documented in motion-design reference and every skill
  that mentions easing)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Rahul Jordashe
2026-03-15 16:08:04 +05:30
co-authored by Claude Opus 4.6
parent 3c3ee6b4f2
commit ee9ecd570b
3 changed files with 47 additions and 9 deletions
+19 -2
View File
@@ -8,9 +8,26 @@ args:
user-invokable: true
---
Conduct a holistic design critique, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback.
## MANDATORY PREPARATION
**First**: Use the frontend-design skill for design principles and anti-patterns.
### Context Gathering (Do This First)
You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone, and what the interface is trying to accomplish.
Attempt to gather these from the current thread or codebase.
1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and {{ask_instruction}} whether you got it right.
2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST {{ask_instruction}} clarifying questions first to complete your context.
Do NOT proceed until you have answers. Critique without context produces generic feedback.
### Use frontend-design skill
Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
---
Conduct a holistic design critique, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback.
## Design Critique
+9 -7
View File
@@ -113,7 +113,7 @@ Add personality and joy through these methods:
**Loading delight**:
- Playful loading animations (not just spinners)
- Personality in loading messages ("Herding pixels..." "Teaching robots to dance...")
- Personality in loading messages (write product-specific ones, not generic AI filler)
- Progress indication with encouraging messages
- Skeleton screens with subtle animations
@@ -203,7 +203,7 @@ Add personality and joy through these methods:
**Form interactions**:
- Input fields that animate on focus
- Checkboxes that bounce when checked
- Checkboxes with a satisfying scale pulse when checked
- Success state that celebrates valid input
- Auto-grow textareas
@@ -253,13 +253,15 @@ Add personality and joy through these methods:
- Countdown with encouraging messages
```
Loading messages rotation:
- "Waking up the servers..."
- "Teaching robots to dance..."
- "Consulting the magic 8-ball..."
- "Counting backwards from infinity..."
Loading messages — write ones specific to your product, not generic AI filler:
- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
- "Preparing your dashboard..."
- "Checking for updates since yesterday..."
```
**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy — instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
### Celebration Moments
**Success celebrations**:
+19
View File
@@ -8,6 +8,25 @@ args:
user-invokable: true
---
## MANDATORY PREPARATION
### Context Gathering (Do This First)
You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), the "aha moment" you want users to reach, and what users' experience level and motivation looks like.
Attempt to gather these from the current thread or codebase.
1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and {{ask_instruction}} whether you got it right.
2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST {{ask_instruction}} clarifying questions first to complete your context.
Do NOT proceed until you have answers. Onboarding designed for the wrong audience wastes everyone's time.
### Use frontend-design skill
Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
---
Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly.
## Assess Onboarding Needs