@theproductguy/create-mission-control 1.0.15 → 1.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/package.json +1 -1
  2. package/src/template/agent-os/WORKFLOW.md +139 -0
  3. package/src/template/agent-os/commands/adapt/adapt.md +189 -0
  4. package/src/template/agent-os/commands/animate/animate.md +184 -0
  5. package/src/template/agent-os/commands/audit/audit.md +123 -0
  6. package/src/template/agent-os/commands/bolder/bolder.md +126 -0
  7. package/src/template/agent-os/commands/clarify/clarify.md +173 -0
  8. package/src/template/agent-os/commands/colorize/colorize.md +152 -0
  9. package/src/template/agent-os/commands/critique/critique.md +112 -0
  10. package/src/template/agent-os/commands/delight/delight.md +311 -0
  11. package/src/template/agent-os/commands/design-screen/design-screen.md +5 -0
  12. package/src/template/agent-os/commands/design-shell/design-shell.md +5 -0
  13. package/src/template/agent-os/commands/design-tokens/design-tokens.md +5 -0
  14. package/src/template/agent-os/commands/extract/extract.md +88 -0
  15. package/src/template/agent-os/commands/harden/harden.md +351 -0
  16. package/src/template/agent-os/commands/impeccable/impeccable.md +163 -0
  17. package/src/template/agent-os/commands/normalize/normalize.md +61 -0
  18. package/src/template/agent-os/commands/onboard/onboard.md +236 -0
  19. package/src/template/agent-os/commands/optimize/optimize.md +262 -0
  20. package/src/template/agent-os/commands/plan-product/3-create-roadmap.md +7 -3
  21. package/src/template/agent-os/commands/polish/polish.md +196 -0
  22. package/src/template/agent-os/commands/quieter/quieter.md +112 -0
  23. package/src/template/agent-os/commands/simplify/simplify.md +131 -0
  24. package/src/template/agent-os/commands/teach-impeccable/teach-impeccable.md +67 -0
  25. package/src/template/control-center/backend/index.js +1 -1
  26. package/src/template/control-center/frontend/src/App.tsx +250 -943
  27. package/src/template/control-center/frontend/src/components/DesignOSOverlay.tsx +38 -0
  28. package/src/template/control-center/frontend/src/components/Guidance.tsx +56 -0
  29. package/src/template/control-center/frontend/src/components/NextStepCard.tsx +115 -0
  30. package/src/template/control-center/frontend/src/components/PromptButton.tsx +43 -0
  31. package/src/template/control-center/frontend/src/components/StatusItem.tsx +38 -0
  32. package/src/template/control-center/frontend/src/components/modals/CreateSpecModal.tsx +73 -0
  33. package/src/template/control-center/frontend/src/components/modals/DeleteSpecModal.tsx +42 -0
  34. package/src/template/control-center/frontend/src/components/modals/FileEditorModal.tsx +87 -0
  35. package/src/template/control-center/frontend/src/components/modals/SettingsModal.tsx +46 -0
  36. package/src/template/control-center/frontend/src/components/ui/ToastContext.tsx +1 -1
  37. package/src/template/control-center/frontend/src/contexts/IdeContext.tsx +6 -0
  38. package/src/template/control-center/frontend/src/hooks/useFileEditor.ts +42 -0
  39. package/src/template/control-center/frontend/src/hooks/useProjectState.ts +45 -0
  40. package/src/template/control-center/frontend/src/index.css +26 -0
  41. package/src/template/control-center/frontend/src/types.ts +65 -0
  42. package/src/template/control-center/frontend/tailwind.config.js +15 -3
  43. package/src/template/control-center/product/design-system/QA/audit-report.md +34 -0
  44. package/src/template/control-center/product/mission.md +38 -0
  45. package/src/template/control-center/product/roadmap.md +10 -0
  46. package/src/template/design-system/src/lib/product-loader.ts +6 -0
  47. package/src/template/package-lock.json +2756 -134
  48. package/src/template/package.json +2 -2
  49. package/src/template/agent-os-ui/_package.json +0 -54
  50. package/src/template/agent-os-ui/package.json +0 -54
  51. package/src/template/control-center/frontend/src/components/ThemeToggle.tsx +0 -64
@@ -0,0 +1,126 @@
1
+ # COMMAND: Bolder
2
+ **Description**: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability.
3
+
4
+
5
+ Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences.
6
+
7
+ ## MANDATORY PREPARATION
8
+
9
+ ### Context Gathering (Do This First)
10
+
11
+ 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.
12
+
13
+ Attempt to gather these from the current thread or codebase.
14
+
15
+ 1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and ask the user directly to clarify what you cannot infer. whether you got it right.
16
+ 2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST ask the user directly to clarify what you cannot infer. clarifying questions first to complete your context.
17
+
18
+ Do NOT proceed until you have answers. Guessing leads to generic AI slop.
19
+
20
+ ### Use frontend-design skill
21
+
22
+ 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.
23
+
24
+ ---
25
+
26
+ ## Assess Current State
27
+
28
+ Analyze what makes the design feel too safe or boring:
29
+
30
+ 1. **Identify weakness sources**:
31
+ - **Generic choices**: System fonts, basic colors, standard layouts
32
+ - **Timid scale**: Everything is medium-sized with no drama
33
+ - **Low contrast**: Everything has similar visual weight
34
+ - **Static**: No motion, no energy, no life
35
+ - **Predictable**: Standard patterns with no surprises
36
+ - **Flat hierarchy**: Nothing stands out or commands attention
37
+
38
+ 2. **Understand the context**:
39
+ - What's the brand personality? (How far can we push?)
40
+ - What's the purpose? (Marketing can be bolder than financial dashboards)
41
+ - Who's the audience? (What will resonate?)
42
+ - What are the constraints? (Brand guidelines, accessibility, performance)
43
+
44
+ If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
45
+
46
+ **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos.
47
+
48
+ **WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the frontend-design skill before proceeding. Bold means distinctive, not "more effects."
49
+
50
+ ## Plan Amplification
51
+
52
+ Create a strategy to increase impact while maintaining coherence:
53
+
54
+ - **Focal point**: What should be the hero moment? (Pick ONE, make it amazing)
55
+ - **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane.
56
+ - **Risk budget**: How experimental can we be? Push boundaries within constraints.
57
+ - **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast)
58
+
59
+ **IMPORTANT**: Bold design must still be usable. Impact without function is just decoration.
60
+
61
+ ## Amplify the Design
62
+
63
+ Systematically increase impact across these dimensions:
64
+
65
+ ### Typography Amplification
66
+ - **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration)
67
+ - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x)
68
+ - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400
69
+ - **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default)
70
+
71
+ ### Color Intensification
72
+ - **Increase saturation**: Shift to more vibrant, energetic colors (but not neon)
73
+ - **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop
74
+ - **Dominant color strategy**: Let one bold color own 60% of the design
75
+ - **Sharp accents**: High-contrast accent colors that pop
76
+ - **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette
77
+ - **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue)
78
+
79
+ ### Spatial Drama
80
+ - **Extreme scale jumps**: Make important elements 3-5x larger than surroundings
81
+ - **Break the grid**: Let hero elements escape containers and cross boundaries
82
+ - **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry
83
+ - **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px)
84
+ - **Overlap**: Layer elements intentionally for depth
85
+
86
+ ### Visual Effects
87
+ - **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles)
88
+ - **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue)
89
+ - **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop)
90
+ - **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side)
91
+ - **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand
92
+
93
+ ### Motion & Animation
94
+ - **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays
95
+ - **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences
96
+ - **Micro-interactions**: Satisfying hover effects, click feedback, state changes
97
+ - **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect)
98
+
99
+ ### Composition Boldness
100
+ - **Hero moments**: Create clear focal points with dramatic treatment
101
+ - **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements
102
+ - **Full-bleed elements**: Use full viewport width/height for impact
103
+ - **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits
104
+
105
+ **NEVER**:
106
+ - Add effects randomly without purpose (chaos ≠ bold)
107
+ - Sacrifice readability for aesthetics (body text must be readable)
108
+ - Make everything bold (then nothing is bold - need contrast)
109
+ - Ignore accessibility (bold design must still meet WCAG standards)
110
+ - Overwhelm with motion (animation fatigue is real)
111
+ - Copy trendy aesthetics blindly (bold means distinctive, not derivative)
112
+
113
+ ## Verify Quality
114
+
115
+ Ensure amplification maintains usability and coherence:
116
+
117
+ - **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over.
118
+ - **Still functional**: Can users accomplish tasks without distraction?
119
+ - **Coherent**: Does everything feel intentional and unified?
120
+ - **Memorable**: Will users remember this experience?
121
+ - **Performant**: Do all these effects run smoothly?
122
+ - **Accessible**: Does it still meet accessibility standards?
123
+
124
+ **The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects."
125
+
126
+ Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable.
@@ -0,0 +1,173 @@
1
+ # COMMAND: Clarify
2
+ **Description**: Improve unclear UX copy, error messages, microcopy, labels, and instructions. Makes interfaces easier to understand and use.
3
+
4
+
5
+ Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use.
6
+
7
+ ## Assess Current Copy
8
+
9
+ Identify what makes the text unclear or ineffective:
10
+
11
+ 1. **Find clarity problems**:
12
+ - **Jargon**: Technical terms users won't understand
13
+ - **Ambiguity**: Multiple interpretations possible
14
+ - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file"
15
+ - **Length**: Too wordy or too terse
16
+ - **Assumptions**: Assuming user knowledge they don't have
17
+ - **Missing context**: Users don't know what to do or why
18
+ - **Tone mismatch**: Too formal, too casual, or inappropriate for situation
19
+
20
+ 2. **Understand the context**:
21
+ - Who's the audience? (Technical? General? First-time users?)
22
+ - What's the user's mental state? (Stressed during error? Confident during success?)
23
+ - What's the action? (What do we want users to do?)
24
+ - What's the constraint? (Character limits? Space limitations?)
25
+
26
+ **CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets.
27
+
28
+ ## Plan Copy Improvements
29
+
30
+ Create a strategy for clearer communication:
31
+
32
+ - **Primary message**: What's the ONE thing users need to know?
33
+ - **Action needed**: What should users do next (if anything)?
34
+ - **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?)
35
+ - **Constraints**: Length limits, brand voice, localization considerations
36
+
37
+ **IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words.
38
+
39
+ ## Improve Copy Systematically
40
+
41
+ Refine text across these common areas:
42
+
43
+ ### Error Messages
44
+ **Bad**: "Error 403: Forbidden"
45
+ **Good**: "You don't have permission to view this page. Contact your admin for access."
46
+
47
+ **Bad**: "Invalid input"
48
+ **Good**: "Email addresses need an @ symbol. Try: name@example.com"
49
+
50
+ **Principles**:
51
+ - Explain what went wrong in plain language
52
+ - Suggest how to fix it
53
+ - Don't blame the user
54
+ - Include examples when helpful
55
+ - Link to help/support if applicable
56
+
57
+ ### Form Labels & Instructions
58
+ **Bad**: "DOB (MM/DD/YYYY)"
59
+ **Good**: "Date of birth" (with placeholder showing format)
60
+
61
+ **Bad**: "Enter value here"
62
+ **Good**: "Your email address" or "Company name"
63
+
64
+ **Principles**:
65
+ - Use clear, specific labels (not generic placeholders)
66
+ - Show format expectations with examples
67
+ - Explain why you're asking (when not obvious)
68
+ - Put instructions before the field, not after
69
+ - Keep required field indicators clear
70
+
71
+ ### Button & CTA Text
72
+ **Bad**: "Click here" | "Submit" | "OK"
73
+ **Good**: "Create account" | "Save changes" | "Got it, thanks"
74
+
75
+ **Principles**:
76
+ - Describe the action specifically
77
+ - Use active voice (verb + noun)
78
+ - Match user's mental model
79
+ - Be specific ("Save" is better than "OK")
80
+
81
+ ### Help Text & Tooltips
82
+ **Bad**: "This is the username field"
83
+ **Good**: "Choose a username. You can change this later in Settings."
84
+
85
+ **Principles**:
86
+ - Add value (don't just repeat the label)
87
+ - Answer the implicit question ("What is this?" or "Why do you need this?")
88
+ - Keep it brief but complete
89
+ - Link to detailed docs if needed
90
+
91
+ ### Empty States
92
+ **Bad**: "No items"
93
+ **Good**: "No projects yet. Create your first project to get started."
94
+
95
+ **Principles**:
96
+ - Explain why it's empty (if not obvious)
97
+ - Show next action clearly
98
+ - Make it welcoming, not dead-end
99
+
100
+ ### Success Messages
101
+ **Bad**: "Success"
102
+ **Good**: "Settings saved! Your changes will take effect immediately."
103
+
104
+ **Principles**:
105
+ - Confirm what happened
106
+ - Explain what happens next (if relevant)
107
+ - Be brief but complete
108
+ - Match the user's emotional moment (celebrate big wins)
109
+
110
+ ### Loading States
111
+ **Bad**: "Loading..." (for 30+ seconds)
112
+ **Good**: "Analyzing your data... this usually takes 30-60 seconds"
113
+
114
+ **Principles**:
115
+ - Set expectations (how long?)
116
+ - Explain what's happening (when it's not obvious)
117
+ - Show progress when possible
118
+ - Offer escape hatch if appropriate ("Cancel")
119
+
120
+ ### Confirmation Dialogs
121
+ **Bad**: "Are you sure?"
122
+ **Good**: "Delete 'Project Alpha'? This can't be undone."
123
+
124
+ **Principles**:
125
+ - State the specific action
126
+ - Explain consequences (especially for destructive actions)
127
+ - Use clear button labels ("Delete project" not "Yes")
128
+ - Don't overuse confirmations (only for risky actions)
129
+
130
+ ### Navigation & Wayfinding
131
+ **Bad**: Generic labels like "Items" | "Things" | "Stuff"
132
+ **Good**: Specific labels like "Your projects" | "Team members" | "Settings"
133
+
134
+ **Principles**:
135
+ - Be specific and descriptive
136
+ - Use language users understand (not internal jargon)
137
+ - Make hierarchy clear
138
+ - Consider information scent (breadcrumbs, current location)
139
+
140
+ ## Apply Clarity Principles
141
+
142
+ Every piece of copy should follow these rules:
143
+
144
+ 1. **Be specific**: "Enter email" not "Enter value"
145
+ 2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity)
146
+ 3. **Be active**: "Save changes" not "Changes will be saved"
147
+ 4. **Be human**: "Oops, something went wrong" not "System error encountered"
148
+ 5. **Be helpful**: Tell users what to do, not just what happened
149
+ 6. **Be consistent**: Use same terms throughout (don't vary for variety)
150
+
151
+ **NEVER**:
152
+ - Use jargon without explanation
153
+ - Blame users ("You made an error" → "This field is required")
154
+ - Be vague ("Something went wrong" without explanation)
155
+ - Use passive voice unnecessarily
156
+ - Write overly long explanations (be concise)
157
+ - Use humor for errors (be empathetic instead)
158
+ - Assume technical knowledge
159
+ - Vary terminology (pick one term and stick with it)
160
+ - Repeat information (headers restating intros, redundant explanations)
161
+ - Use placeholders as the only labels (they disappear when users type)
162
+
163
+ ## Verify Improvements
164
+
165
+ Test that copy improvements work:
166
+
167
+ - **Comprehension**: Can users understand without context?
168
+ - **Actionability**: Do users know what to do next?
169
+ - **Brevity**: Is it as short as possible while remaining clear?
170
+ - **Consistency**: Does it match terminology elsewhere?
171
+ - **Tone**: Is it appropriate for the situation?
172
+
173
+ Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human.
@@ -0,0 +1,152 @@
1
+ # COMMAND: Colorize
2
+ **Description**: Add strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive.
3
+
4
+
5
+ Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality.
6
+
7
+ ## MANDATORY PREPARATION
8
+
9
+ ### Context Gathering (Do This First)
10
+
11
+ 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.
12
+
13
+ Attempt to gather these from the current thread or codebase.
14
+
15
+ 1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and ask the user directly to clarify what you cannot infer. whether you got it right.
16
+ 2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST ask the user directly to clarify what you cannot infer. clarifying questions first to complete your context.
17
+
18
+ Do NOT proceed until you have answers. Guessing leads to generic AI slop colors.
19
+
20
+ ### Use frontend-design skill
21
+
22
+ 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.
23
+
24
+ ---
25
+
26
+ ## Assess Color Opportunity
27
+
28
+ Analyze the current state and identify opportunities:
29
+
30
+ 1. **Understand current state**:
31
+ - **Color absence**: Pure grayscale? Limited neutrals? One timid accent?
32
+ - **Missed opportunities**: Where could color add meaning, hierarchy, or delight?
33
+ - **Context**: What's appropriate for this domain and audience?
34
+ - **Brand**: Are there existing brand colors we should use?
35
+
36
+ 2. **Identify where color adds value**:
37
+ - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue)
38
+ - **Hierarchy**: Drawing attention to important elements
39
+ - **Categorization**: Different sections, types, or states
40
+ - **Emotional tone**: Warmth, energy, trust, creativity
41
+ - **Wayfinding**: Helping users navigate and understand structure
42
+ - **Delight**: Moments of visual interest and personality
43
+
44
+ If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
45
+
46
+ **CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose.
47
+
48
+ ## Plan Color Strategy
49
+
50
+ Create a purposeful color introduction plan:
51
+
52
+ - **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals)
53
+ - **Dominant color**: Which color owns 60% of colored elements?
54
+ - **Accent colors**: Which colors provide contrast and highlights? (30% and 10%)
55
+ - **Application strategy**: Where does each color appear and why?
56
+
57
+ **IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more.
58
+
59
+ ## Introduce Color Strategically
60
+
61
+ Add color systematically across these dimensions:
62
+
63
+ ### Semantic Color
64
+ - **State indicators**:
65
+ - Success: Green tones (emerald, forest, mint)
66
+ - Error: Red/pink tones (rose, crimson, coral)
67
+ - Warning: Orange/amber tones
68
+ - Info: Blue tones (sky, ocean, indigo)
69
+ - Neutral: Gray/slate for inactive states
70
+
71
+ - **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.)
72
+ - **Progress indicators**: Colored bars, rings, or charts showing completion or health
73
+
74
+ ### Accent Color Application
75
+ - **Primary actions**: Color the most important buttons/CTAs
76
+ - **Links**: Add color to clickable text (maintain accessibility)
77
+ - **Icons**: Colorize key icons for recognition and personality
78
+ - **Headers/titles**: Add color to section headers or key labels
79
+ - **Hover states**: Introduce color on interaction
80
+
81
+ ### Background & Surfaces
82
+ - **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`)
83
+ - **Colored sections**: Use subtle background colors to separate areas
84
+ - **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue)
85
+ - **Cards & surfaces**: Tint cards or surfaces slightly for warmth
86
+
87
+ **Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales.
88
+
89
+ ### Data Visualization
90
+ - **Charts & graphs**: Use color to encode categories or values
91
+ - **Heatmaps**: Color intensity shows density or importance
92
+ - **Comparison**: Color coding for different datasets or timeframes
93
+
94
+ ### Borders & Accents
95
+ - **Accent borders**: Add colored left/top borders to cards or sections
96
+ - **Underlines**: Color underlines for emphasis or active states
97
+ - **Dividers**: Subtle colored dividers instead of gray lines
98
+ - **Focus rings**: Colored focus indicators matching brand
99
+
100
+ ### Typography Color
101
+ - **Colored headings**: Use brand colors for section headings (maintain contrast)
102
+ - **Highlight text**: Color for emphasis or categories
103
+ - **Labels & tags**: Small colored labels for metadata or categories
104
+
105
+ ### Decorative Elements
106
+ - **Illustrations**: Add colored illustrations or icons
107
+ - **Shapes**: Geometric shapes in brand colors as background elements
108
+ - **Gradients**: Colorful gradient overlays or mesh backgrounds
109
+ - **Blobs/organic shapes**: Soft colored shapes for visual interest
110
+
111
+ ## Balance & Refinement
112
+
113
+ Ensure color addition improves rather than overwhelms:
114
+
115
+ ### Maintain Hierarchy
116
+ - **Dominant color** (60%): Primary brand color or most used accent
117
+ - **Secondary color** (30%): Supporting color for variety
118
+ - **Accent color** (10%): High contrast for key moments
119
+ - **Neutrals** (remaining): Gray/black/white for structure
120
+
121
+ ### Accessibility
122
+ - **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components)
123
+ - **Don't rely on color alone**: Use icons, labels, or patterns alongside color
124
+ - **Test for color blindness**: Verify red/green combinations work for all users
125
+
126
+ ### Cohesion
127
+ - **Consistent palette**: Use colors from defined palette, not arbitrary choices
128
+ - **Systematic application**: Same color meanings throughout (green always = success)
129
+ - **Temperature consistency**: Warm palette stays warm, cool stays cool
130
+
131
+ **NEVER**:
132
+ - Use every color in the rainbow (choose 2-4 colors beyond neutrals)
133
+ - Apply color randomly without semantic meaning
134
+ - Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead
135
+ - Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication
136
+ - Use pure black (`#000`) or pure white (`#fff`) for large areas
137
+ - Violate WCAG contrast requirements
138
+ - Use color as the only indicator (accessibility issue)
139
+ - Make everything colorful (defeats the purpose)
140
+ - Default to purple-blue gradients (AI slop aesthetic)
141
+
142
+ ## Verify Color Addition
143
+
144
+ Test that colorization improves the experience:
145
+
146
+ - **Better hierarchy**: Does color guide attention appropriately?
147
+ - **Clearer meaning**: Does color help users understand states/categories?
148
+ - **More engaging**: Does the interface feel warmer and more inviting?
149
+ - **Still accessible**: Do all color combinations meet WCAG standards?
150
+ - **Not overwhelming**: Is color balanced and purposeful?
151
+
152
+ Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional.
@@ -0,0 +1,112 @@
1
+ # COMMAND: Critique
2
+ **Description**: Evaluate design effectiveness from a UX perspective. Assesses visual hierarchy, information architecture, emotional resonance, and overall design quality with actionable feedback.
3
+
4
+
5
+ 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.
6
+
7
+ **First**: Use the frontend-design skill for design principles and anti-patterns.
8
+
9
+ ## Design Critique
10
+
11
+ Evaluate the interface across these dimensions:
12
+
13
+ ### 1. AI Slop Detection (CRITICAL)
14
+
15
+ **This is the most important check.** Does this look like every other AI-generated interface from 2024-2025?
16
+
17
+ Review the design against ALL the **DON'T** guidelines in the frontend-design skill—they are the fingerprints of AI-generated work. Check for the AI color palette, gradient text, dark mode with glowing accents, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells.
18
+
19
+ **The test**: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem.
20
+
21
+ ### 2. Visual Hierarchy
22
+ - Does the eye flow to the most important element first?
23
+ - Is there a clear primary action? Can you spot it in 2 seconds?
24
+ - Do size, color, and position communicate importance correctly?
25
+ - Is there visual competition between elements that should have different weights?
26
+
27
+ ### 3. Information Architecture
28
+ - Is the structure intuitive? Would a new user understand the organization?
29
+ - Is related content grouped logically?
30
+ - Are there too many choices at once? (cognitive overload)
31
+ - Is the navigation clear and predictable?
32
+
33
+ ### 4. Emotional Resonance
34
+ - What emotion does this interface evoke? Is that intentional?
35
+ - Does it match the brand personality?
36
+ - Does it feel trustworthy, approachable, premium, playful—whatever it should feel?
37
+ - Would the target user feel "this is for me"?
38
+
39
+ ### 5. Discoverability & Affordance
40
+ - Are interactive elements obviously interactive?
41
+ - Would a user know what to do without instructions?
42
+ - Are hover/focus states providing useful feedback?
43
+ - Are there hidden features that should be more visible?
44
+
45
+ ### 6. Composition & Balance
46
+ - Does the layout feel balanced or uncomfortably weighted?
47
+ - Is whitespace used intentionally or just leftover?
48
+ - Is there visual rhythm in spacing and repetition?
49
+ - Does asymmetry feel designed or accidental?
50
+
51
+ ### 7. Typography as Communication
52
+ - Does the type hierarchy clearly signal what to read first, second, third?
53
+ - Is body text comfortable to read? (line length, spacing, size)
54
+ - Do font choices reinforce the brand/tone?
55
+ - Is there enough contrast between heading levels?
56
+
57
+ ### 8. Color with Purpose
58
+ - Is color used to communicate, not just decorate?
59
+ - Does the palette feel cohesive?
60
+ - Are accent colors drawing attention to the right things?
61
+ - Does it work for colorblind users? (not just technically—does meaning still come through?)
62
+
63
+ ### 9. States & Edge Cases
64
+ - Empty states: Do they guide users toward action, or just say "nothing here"?
65
+ - Loading states: Do they reduce perceived wait time?
66
+ - Error states: Are they helpful and non-blaming?
67
+ - Success states: Do they confirm and guide next steps?
68
+
69
+ ### 10. Microcopy & Voice
70
+ - Is the writing clear and concise?
71
+ - Does it sound like a human (the right human for this brand)?
72
+ - Are labels and buttons unambiguous?
73
+ - Does error copy help users fix the problem?
74
+
75
+ ## Generate Critique Report
76
+
77
+ Structure your feedback as a design director would:
78
+
79
+ ### Anti-Patterns Verdict
80
+ **Start here.** Pass/fail: Does this look AI-generated? List specific tells from the skill's Anti-Patterns section. Be brutally honest.
81
+
82
+ ### Overall Impression
83
+ A brief gut reaction—what works, what doesn't, and the single biggest opportunity.
84
+
85
+ ### What's Working
86
+ Highlight 2-3 things done well. Be specific about why they work.
87
+
88
+ ### Priority Issues
89
+ The 3-5 most impactful design problems, ordered by importance:
90
+
91
+ For each issue:
92
+ - **What**: Name the problem clearly
93
+ - **Why it matters**: How this hurts users or undermines goals
94
+ - **Fix**: What to do about it (be concrete)
95
+ - **Command**: Which command to use (`/polish`, `/simplify`, `/bolder`, `/quieter`, etc.)
96
+
97
+ ### Minor Observations
98
+ Quick notes on smaller issues worth addressing.
99
+
100
+ ### Questions to Consider
101
+ Provocative questions that might unlock better solutions:
102
+ - "What if the primary action were more prominent?"
103
+ - "Does this need to feel this complex?"
104
+ - "What would a confident version of this look like?"
105
+
106
+ **Remember**:
107
+ - Be direct—vague feedback wastes everyone's time
108
+ - Be specific—"the submit button" not "some elements"
109
+ - Say what's wrong AND why it matters to users
110
+ - Give concrete suggestions, not just "consider exploring..."
111
+ - Prioritize ruthlessly—if everything is important, nothing is
112
+ - Don't soften criticism—developers need honest feedback to ship great design