Add mandatory preparation to design-transformative commands

Commands now require context gathering before proceeding: - bolder: target audience, use-cases, brand personality - quieter: purpose, audience, what's working - colorize: brand colors, audience, domain appropriateness - animate: personality, performance budget, audience - delight: brand personality, emotional context, appropriateness - simplify: what's essential vs nice-to-have Each command now: 1. Gathers context from thread/codebase first 2. MUST ask user if inference confidence is medium or lower 3. MUST use frontend-design skill before proceeding 4. Has visual separator (---) as hard gate before design work This prevents AI slop by ensuring commands have proper context before making design decisions. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-09-22 02:56:52 +03:00 · 2026-01-08 15:11:05 -08:00
parent 825d936f20
commit 020ac82748
60 changed files with 1410 additions and 296 deletions
@@ -7,10 +7,27 @@ args:
    required: false
 ---

-**First**: Use the frontend-design skill for design principles and anti-patterns.
-
 Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.

+## 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), brand personality/tone (playful vs serious, energetic vs calm), and performance constraints.
+
+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 STOP and call the AskUserQuestionTool to clarify. whether you got it right.
+2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
+
+Do NOT proceed until you have answers. Guessing leads to inappropriate or excessive animation.
+
+### 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.
+
+---
+
 ## Assess Animation Opportunities

 Analyze where motion would improve the experience:
@@ -28,6 +45,8 @@ Analyze where motion would improve the experience:
   - Who's the audience? (Motion-sensitive users? Power users who want speed?)
   - What matters most? (One hero animation vs many micro-interactions?)

+If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
+
 **CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them.

 ## Plan Animation Strategy
@@ -52,7 +71,7 @@ Add motion systematically across these categories:
 - **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management

 ### Micro-interactions
- **Button feedback**: 
+- **Button feedback**:
  - Hover: Subtle scale (1.02-1.05), color shift, shadow increase
  - Click: Quick scale down then up (0.95 → 1), ripple effect
  - Loading: Spinner or pulse state
@@ -7,10 +7,27 @@ args:
    required: false
 ---

-**First**: Use the frontend-design skill for design principles and anti-patterns.
-
 Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences.

+## 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), brand personality/tone, and everything else that a great human designer would need as well.
+
+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 STOP and call the AskUserQuestionTool to clarify. whether you got it right.
+2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
+
+Do NOT proceed until you have answers. Guessing leads to generic AI slop.
+
+### 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.
+
+---
+
 ## Assess Current State

 Analyze what makes the design feel too safe or boring:
@@ -7,10 +7,27 @@ args:
    required: false
 ---

-**First**: Use the frontend-design skill for design principles and anti-patterns.
-
 Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality.

+## 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), brand personality/tone, and especially existing brand colors.
+
+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 STOP and call the AskUserQuestionTool to clarify. whether you got it right.
+2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
+
+Do NOT proceed until you have answers. Guessing leads to generic AI slop colors.
+
+### 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.
+
+---
+
 ## Assess Color Opportunity

 Analyze the current state and identify opportunities:
@@ -29,6 +46,8 @@ Analyze the current state and identify opportunities:
   - **Wayfinding**: Helping users navigate and understand structure
   - **Delight**: Moments of visual interest and personality

+If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
+
 **CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose.

 ## Plan Color Strategy
@@ -47,13 +66,13 @@ Create a purposeful color introduction plan:
 Add color systematically across these dimensions:

 ### Semantic Color
- **State indicators**: 
+- **State indicators**:
  - Success: Green tones (emerald, forest, mint)
  - Error: Red/pink tones (rose, crimson, coral)
  - Warning: Orange/amber tones
  - Info: Blue tones (sky, ocean, indigo)
  - Neutral: Gray/slate for inactive states
-  
+
 - **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.)
 - **Progress indicators**: Colored bars, rings, or charts showing completion or health

@@ -7,10 +7,27 @@ args:
    required: false
 ---

-**First**: Use the frontend-design skill for design principles and anti-patterns.
-
 Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.

+## 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), brand personality (playful vs professional vs quirky vs elegant), and what's appropriate for the domain.
+
+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 STOP and call the AskUserQuestionTool to clarify. whether you got it right.
+2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
+
+Do NOT proceed until you have answers. Delight that's wrong for the context is worse than no delight at all.
+
+### 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.
+
+---
+
 ## Assess Delight Opportunities

 Identify where delight would enhance (not distract from) the experience:
@@ -36,6 +53,8 @@ Identify where delight would enhance (not distract from) the experience:
   - **Helpful surprises**: Anticipating needs before users ask (productivity tools)
   - **Sensory richness**: Satisfying sounds, smooth animations (creative tools)

+If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
+
 **CRITICAL**: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far.

 ## Delight Principles
@@ -113,29 +132,29 @@ Add personality and joy through these methods:

 **Playful error messages**:
 ```
-❌ "Error 404"
-✅ "This page is playing hide and seek. (And winning)"
+"Error 404"
+"This page is playing hide and seek. (And winning)"

-❌ "Connection failed"
-✅ "Looks like the internet took a coffee break. Want to retry?"
+"Connection failed"
+"Looks like the internet took a coffee break. Want to retry?"
 ```

 **Encouraging empty states**:
 ```
-❌ "No projects"
-✅ "Your canvas awaits. Create something amazing."
+"No projects"
+"Your canvas awaits. Create something amazing."

-❌ "No messages"
-✅ "Inbox zero! You're crushing it today."
+"No messages"
+"Inbox zero! You're crushing it today."
 ```

 **Playful labels & tooltips**:
 ```
-❌ "Delete"
-✅ "Send to void" (for playful brand)
+"Delete"
+"Send to void" (for playful brand)

-❌ "Help"
-✅ "Rescue me" (tooltip)
+"Help"
+"Rescue me" (tooltip)
 ```

 **IMPORTANT**: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm.
@@ -179,7 +198,7 @@ Add personality and joy through these methods:
 - Streak counters with celebratory milestones
 - Progress bars that "celebrate" at 100%
 - Badge unlocks with animation
- Playful stats ("You're on fire! 🔥 5 days in a row")
+- Playful stats ("You're on fire! 5 days in a row")

 **Form interactions**:
 - Input fields that animate on focus
@@ -196,7 +215,7 @@ Add personality and joy through these methods:
 - Typing sounds for chat/messaging
 - Ambient background audio (very subtle)

-**IMPORTANT**: 
+**IMPORTANT**:
 - Respect system sound settings
 - Provide mute option
 - Keep volumes quiet (subtle cues, not alarms)
@@ -7,10 +7,27 @@ args:
    required: false
 ---

-**First**: Use the frontend-design skill for design principles and anti-patterns.
-
 Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness.

+## 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), brand personality/tone, and everything else that a great human designer would need as well.
+
+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 STOP and call the AskUserQuestionTool to clarify. whether you got it right.
+2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
+
+Do NOT proceed until you have answers. Guessing leads to generic design.
+
+### 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.
+
+---
+
 ## Assess Current State

 Analyze what makes the design feel too intense:
@@ -29,6 +46,8 @@ Analyze what makes the design feel too intense:
   - What's working? (Don't throw away good ideas)
   - What's the core message? (Preserve what matters)

+If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
+
 **CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness.

 ## Plan Refinement
@@ -7,10 +7,27 @@ args:
    required: false
 ---

-**First**: Use the frontend-design skill for design principles and anti-patterns.
-
 Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification.

+## 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), and understanding what's truly essential vs nice-to-have for this product.
+
+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 STOP and call the AskUserQuestionTool to clarify. whether you got it right.
+2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. clarifying questions first to complete your context.
+
+Do NOT proceed until you have answers. Simplifying the wrong things destroys usability.
+
+### 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.
+
+---
+
 ## Assess Current State

 Analyze what makes the design feel complex or cluttered:
@@ -29,6 +46,8 @@ Analyze what makes the design feel complex or cluttered:
   - What can be removed, hidden, or combined?
   - What's the 20% that delivers 80% of value?

+If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
+
 **CRITICAL**: Simplicity is not about removing features - it's about removing obstacles between users and their goals. Every element should justify its existence.

 ## Plan Simplification