Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Use different information architecture across contexts (confusing)
Break user expectations for platform (mobile users expect mobile patterns)
Forget landscape orientation on mobile/tablet
Use generic breakpoints blindly (use content-driven breakpoints)
Ignore touch on desktop (many desktop devices have touch)
Verify Adaptations
Test thoroughly across contexts:
Real devices: Test on actual phones, tablets, desktops
Different orientations: Portrait and landscape
Different browsers: Safari, Chrome, Firefox, Edge
Different OS: iOS, Android, Windows, macOS
Different input methods: Touch, mouse, keyboard
Edge cases: Very small screens (320px), very large screens (4K)
Slow connections: Test on throttled network
Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.
From animate
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.
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.
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.
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:
Identify static areas:
Missing feedback: Actions without visual acknowledgment (button clicks, form submission, etc.)
Jarring transitions: Instant state changes that feel abrupt (show/hide, page loads, route changes)
Unclear relationships: Spatial or hierarchical relationships that aren't obvious
Lack of delight: Functional but joyless interactions
Missed guidance: Opportunities to direct attention or explain behavior
Understand the context:
What's the personality? (Playful vs serious, energetic vs calm)
What's the performance budget? (Mobile-first? Complex page?)
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
Create a purposeful animation plan:
Hero moment: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
Feedback layer: Which interactions need acknowledgment?
Transition layer: Which state changes need smoothing?
Delight layer: Where can we surprise and delight?
IMPORTANT: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
Implement Animations
Add motion systematically across these categories:
Exit animations are faster than entrances. Use ~75% of enter duration.
CSS Animations
/* Prefer for simple, declarative animations */
- transitions for state changes
- @keyframes for complex sequences
- transform + opacity only (GPU-accelerated)
JavaScript Animation
/* Use for complex, interactive animations */
- WebAnimationsAPIfor programmatic control
- FramerMotionforReact
- GSAPfor complex sequences
Performance
GPU acceleration: Use transform and opacity, avoid layout properties
will-change: Add sparingly for known expensive animations
Reduce paint: Minimize repaints, use contain where appropriate
Use durations over 500ms for feedback—it feels laggy
Animate without purpose—every animation needs a reason
Ignore prefers-reduced-motion—this is an accessibility violation
Animate everything—animation fatigue makes interfaces feel exhausting
Block interaction during animations unless intentional
Verify Quality
Test animations thoroughly:
Smooth at 60fps: No jank on target devices
Feels natural: Easing curves feel organic, not robotic
Appropriate timing: Not too fast (jarring) or too slow (laggy)
Reduced motion works: Animations disabled or simplified appropriately
Doesn't block: Users can interact during/after animations
Adds value: Makes interface clearer or more delightful
Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right.
From audit
Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates detailed report of issues with severity ratings and recommendations.
Run systematic quality checks and generate a comprehensive audit report with prioritized issues and actionable recommendations. Don't fix issues - document them for other commands to address.
First: Use the frontend-design skill for design principles and anti-patterns.
Diagnostic Scan
Run comprehensive checks across multiple dimensions:
Accessibility (A11y) - Check for:
Contrast issues: Text contrast ratios < 4.5:1 (or 7:1 for AAA)
Missing ARIA: Interactive elements without proper roles, labels, or states
Broken dark mode: Missing dark mode variants, poor contrast in dark theme
Inconsistent tokens: Using wrong tokens, mixing token types
Theme switching issues: Values that don't update on theme change
Responsive Design - Check for:
Fixed widths: Hard-coded widths that break on mobile
Touch targets: Interactive elements < 44x44px
Horizontal scroll: Content overflow on narrow viewports
Text scaling: Layouts that break when text size increases
Missing breakpoints: No mobile/tablet variants
Anti-Patterns (CRITICAL) - Check against ALL the DON'T guidelines in the frontend-design skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy).
CRITICAL: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit.
Generate Comprehensive Report
Create a detailed audit report with the following structure:
Anti-Patterns Verdict
Start here. Pass/fail: Does this look AI-generated? List specific tells from the skill's Anti-Patterns section. Be brutally honest.
Executive Summary
Total issues found (count by severity)
Most critical issues (top 3-5)
Overall quality score (if applicable)
Recommended next steps
Detailed Findings by Severity
For each issue, document:
Location: Where the issue occurs (component, file, line)
"Hard-coded colors appear in 15+ components, should use design tokens"
"Touch targets consistently too small (<44px) throughout mobile experience"
"Missing focus indicators on all custom interactive components"
Positive Findings
Note what's working well:
Good practices to maintain
Exemplary implementations to replicate elsewhere
Recommendations by Priority
Create actionable plan:
Immediate: Critical blockers to fix first
Short-term: High-severity issues (this sprint)
Medium-term: Quality improvements (next sprint)
Long-term: Nice-to-haves and optimizations
Suggested Commands for Fixes
Map issues to available commands. Prefer these: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /critique, /colorize. You may also suggest other installed skills you're sure exist, but never invent commands.
Examples:
"Use /normalize to align with design system (addresses N theming issues)"
"Use /optimize to improve performance (addresses N performance issues)"
"Use /harden to improve resilience (addresses N edge cases)"
IMPORTANT: Be thorough but actionable. Too many low-priority issues creates noise. Focus on what actually matters.
NEVER:
Report issues without explaining impact (why does this matter?)
Mix severity levels inconsistently
Skip positive findings (celebrate what works)
Provide generic recommendations (be specific and actionable)
Forget to prioritize (everything can't be critical)
Report false positives without verification
Remember: You're a quality auditor with exceptional attention to detail. Document systematically, prioritize ruthlessly, and provide clear paths to improvement. A good audit makes fixing easy.
From bolder
Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability.
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.
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.
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:
Identify weakness sources:
Generic choices: System fonts, basic colors, standard layouts
Timid scale: Everything is medium-sized with no drama
Low contrast: Everything has similar visual weight
Static: No motion, no energy, no life
Predictable: Standard patterns with no surprises
Flat hierarchy: Nothing stands out or commands attention
Understand the context:
What's the brand personality? (How far can we push?)
What's the purpose? (Marketing can be bolder than financial dashboards)
Who's the audience? (What will resonate?)
What are the constraints? (Brand guidelines, accessibility, performance)
If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify.
CRITICAL: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos.
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."
Plan Amplification
Create a strategy to increase impact while maintaining coherence:
Focal point: What should be the hero moment? (Pick ONE, make it amazing)
Personality direction: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane.
Risk budget: How experimental can we be? Push boundaries within constraints.
Hierarchy amplification: Make big things BIGGER, small things smaller (increase contrast)
IMPORTANT: Bold design must still be usable. Impact without function is just decoration.
Amplify the Design
Systematically increase impact across these dimensions:
Typography Amplification
Replace generic fonts: Swap system fonts for distinctive choices (see frontend-design skill for inspiration)
Extreme scale: Create dramatic size jumps (3x-5x differences, not 1.5x)
Weight contrast: Pair 900 weights with 200 weights, not 600 with 400
Unexpected choices: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default)
Color Intensification
Increase saturation: Shift to more vibrant, energetic colors (but not neon)
Bold palette: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop
Dominant color strategy: Let one bold color own 60% of the design
Sharp accents: High-contrast accent colors that pop
Tinted neutrals: Replace pure grays with tinted grays that harmonize with your palette
Micro-interactions: Satisfying hover effects, click feedback, state changes
Transitions: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect)
Composition Boldness
Hero moments: Create clear focal points with dramatic treatment
Diagonal flows: Escape horizontal/vertical rigidity with diagonal arrangements
Full-bleed elements: Use full viewport width/height for impact
Unexpected proportions: Golden ratio? Throw it out. Try 70/30, 80/20 splits
NEVER:
Add effects randomly without purpose (chaos ≠ bold)
Sacrifice readability for aesthetics (body text must be readable)
Make everything bold (then nothing is bold - need contrast)
Ignore accessibility (bold design must still meet WCAG standards)
Overwhelm with motion (animation fatigue is real)
Copy trendy aesthetics blindly (bold means distinctive, not derivative)
Verify Quality
Ensure amplification maintains usability and coherence:
NOT AI slop: Does this look like every other AI-generated "bold" design? If yes, start over.
Still functional: Can users accomplish tasks without distraction?
Coherent: Does everything feel intentional and unified?
Memorable: Will users remember this experience?
Performant: Do all these effects run smoothly?
Accessible: Does it still meet accessibility standards?
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."
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.
From clarify
Improve unclear UX copy, error messages, microcopy, labels, and instructions. Makes interfaces easier to understand and use.
Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use.
Assess Current Copy
Identify what makes the text unclear or ineffective:
Find clarity problems:
Jargon: Technical terms users won't understand
Ambiguity: Multiple interpretations possible
Passive voice: "Your file has been uploaded" vs "We uploaded your file"
Length: Too wordy or too terse
Assumptions: Assuming user knowledge they don't have
Missing context: Users don't know what to do or why
Tone mismatch: Too formal, too casual, or inappropriate for situation
Understand the context:
Who's the audience? (Technical? General? First-time users?)
What's the user's mental state? (Stressed during error? Confident during success?)
What's the action? (What do we want users to do?)
What's the constraint? (Character limits? Space limitations?)
CRITICAL: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets.
Plan Copy Improvements
Create a strategy for clearer communication:
Primary message: What's the ONE thing users need to know?
Action needed: What should users do next (if anything)?
Tone: How should this feel? (Helpful? Apologetic? Encouraging?)
Bad: "This is the username field"
Good: "Choose a username. You can change this later in Settings."
Principles:
Add value (don't just repeat the label)
Answer the implicit question ("What is this?" or "Why do you need this?")
Keep it brief but complete
Link to detailed docs if needed
Empty States
Bad: "No items"
Good: "No projects yet. Create your first project to get started."
Principles:
Explain why it's empty (if not obvious)
Show next action clearly
Make it welcoming, not dead-end
Success Messages
Bad: "Success"
Good: "Settings saved! Your changes will take effect immediately."
Principles:
Confirm what happened
Explain what happens next (if relevant)
Be brief but complete
Match the user's emotional moment (celebrate big wins)
Loading States
Bad: "Loading..." (for 30+ seconds)
Good: "Analyzing your data... this usually takes 30-60 seconds"
Principles:
Set expectations (how long?)
Explain what's happening (when it's not obvious)
Show progress when possible
Offer escape hatch if appropriate ("Cancel")
Confirmation Dialogs
Bad: "Are you sure?"
Good: "Delete 'Project Alpha'? This can't be undone."
Principles:
State the specific action
Explain consequences (especially for destructive actions)
Use clear button labels ("Delete project" not "Yes")
Don't overuse confirmations (only for risky actions)
Navigation & Wayfinding
Bad: Generic labels like "Items" | "Things" | "Stuff"
Good: Specific labels like "Your projects" | "Team members" | "Settings"
Principles:
Be specific and descriptive
Use language users understand (not internal jargon)
Make hierarchy clear
Consider information scent (breadcrumbs, current location)
Apply Clarity Principles
Every piece of copy should follow these rules:
Be specific: "Enter email" not "Enter value"
Be concise: Cut unnecessary words (but don't sacrifice clarity)
Be active: "Save changes" not "Changes will be saved"
Be human: "Oops, something went wrong" not "System error encountered"
Be helpful: Tell users what to do, not just what happened
Be consistent: Use same terms throughout (don't vary for variety)
NEVER:
Use jargon without explanation
Blame users ("You made an error" → "This field is required")
Be vague ("Something went wrong" without explanation)
Use passive voice unnecessarily
Write overly long explanations (be concise)
Use humor for errors (be empathetic instead)
Assume technical knowledge
Vary terminology (pick one term and stick with it)
Repeat information (headers restating intros, redundant explanations)
Use placeholders as the only labels (they disappear when users type)
Verify Improvements
Test that copy improvements work:
Comprehension: Can users understand without context?
Actionability: Do users know what to do next?
Brevity: Is it as short as possible while remaining clear?
Consistency: Does it match terminology elsewhere?
Tone: Is it appropriate for the situation?
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.
From colorize
Add strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive.
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.
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.
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:
Understand current state:
Color absence: Pure grayscale? Limited neutrals? One timid accent?
Missed opportunities: Where could color add meaning, hierarchy, or delight?
Context: What's appropriate for this domain and audience?
Brand: Are there existing brand colors we should use?
Identify where color adds value:
Semantic meaning: Success (green), error (red), warning (yellow/orange), info (blue)
Hierarchy: Drawing attention to important elements
Categorization: Different sections, types, or states
Emotional tone: Warmth, energy, trust, creativity
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
Create a purposeful color introduction plan:
Color palette: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals)
Dominant color: Which color owns 60% of colored elements?
Accent colors: Which colors provide contrast and highlights? (30% and 10%)
Application strategy: Where does each color appear and why?
IMPORTANT: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more.
Introduce Color Strategically
Add color systematically across these dimensions:
Semantic Color
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
Accent Color Application
Primary actions: Color the most important buttons/CTAs
Links: Add color to clickable text (maintain accessibility)
Icons: Colorize key icons for recognition and personality
Headers/titles: Add color to section headers or key labels
Hover states: Introduce color on interaction
Background & Surfaces
Tinted backgrounds: Replace pure gray (#f5f5f5) with warm neutrals (oklch(97% 0.01 60)) or cool tints (oklch(97% 0.01 250))
Colored sections: Use subtle background colors to separate areas
Colored headings: Use brand colors for section headings (maintain contrast)
Highlight text: Color for emphasis or categories
Labels & tags: Small colored labels for metadata or categories
Decorative Elements
Illustrations: Add colored illustrations or icons
Shapes: Geometric shapes in brand colors as background elements
Gradients: Colorful gradient overlays or mesh backgrounds
Blobs/organic shapes: Soft colored shapes for visual interest
Balance & Refinement
Ensure color addition improves rather than overwhelms:
Maintain Hierarchy
Dominant color (60%): Primary brand color or most used accent
Secondary color (30%): Supporting color for variety
Accent color (10%): High contrast for key moments
Neutrals (remaining): Gray/black/white for structure
Accessibility
Contrast ratios: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components)
Don't rely on color alone: Use icons, labels, or patterns alongside color
Test for color blindness: Verify red/green combinations work for all users
Cohesion
Consistent palette: Use colors from defined palette, not arbitrary choices
Systematic application: Same color meanings throughout (green always = success)
Temperature consistency: Warm palette stays warm, cool stays cool
NEVER:
Use every color in the rainbow (choose 2-4 colors beyond neutrals)
Apply color randomly without semantic meaning
Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead
Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication
Use pure black (#000) or pure white (#fff) for large areas
Violate WCAG contrast requirements
Use color as the only indicator (accessibility issue)
Make everything colorful (defeats the purpose)
Default to purple-blue gradients (AI slop aesthetic)
Verify Color Addition
Test that colorization improves the experience:
Better hierarchy: Does color guide attention appropriately?
Clearer meaning: Does color help users understand states/categories?
More engaging: Does the interface feel warmer and more inviting?
Still accessible: Do all color combinations meet WCAG standards?
Not overwhelming: Is color balanced and purposeful?
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.
From critique
Evaluate design effectiveness from a UX perspective. Assesses visual hierarchy, information architecture, emotional resonance, and overall design quality with actionable feedback.
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.
First: Use the frontend-design skill for design principles and anti-patterns.
Design Critique
Evaluate the interface across these dimensions:
1. AI Slop Detection (CRITICAL)
This is the most important check. Does this look like every other AI-generated interface from 2024-2025?
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.
The test: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem.
2. Visual Hierarchy
Does the eye flow to the most important element first?
Is there a clear primary action? Can you spot it in 2 seconds?
Do size, color, and position communicate importance correctly?
Is there visual competition between elements that should have different weights?
3. Information Architecture
Is the structure intuitive? Would a new user understand the organization?
Is related content grouped logically?
Are there too many choices at once? (cognitive overload)
Is the navigation clear and predictable?
4. Emotional Resonance
What emotion does this interface evoke? Is that intentional?
Does it match the brand personality?
Does it feel trustworthy, approachable, premium, playful—whatever it should feel?
Would the target user feel "this is for me"?
5. Discoverability & Affordance
Are interactive elements obviously interactive?
Would a user know what to do without instructions?
Are hover/focus states providing useful feedback?
Are there hidden features that should be more visible?
6. Composition & Balance
Does the layout feel balanced or uncomfortably weighted?
Is whitespace used intentionally or just leftover?
Is there visual rhythm in spacing and repetition?
Does asymmetry feel designed or accidental?
7. Typography as Communication
Does the type hierarchy clearly signal what to read first, second, third?
Is body text comfortable to read? (line length, spacing, size)
Do font choices reinforce the brand/tone?
Is there enough contrast between heading levels?
8. Color with Purpose
Is color used to communicate, not just decorate?
Does the palette feel cohesive?
Are accent colors drawing attention to the right things?
Does it work for colorblind users? (not just technically—does meaning still come through?)
9. States & Edge Cases
Empty states: Do they guide users toward action, or just say "nothing here"?
Loading states: Do they reduce perceived wait time?
Error states: Are they helpful and non-blaming?
Success states: Do they confirm and guide next steps?
10. Microcopy & Voice
Is the writing clear and concise?
Does it sound like a human (the right human for this brand)?
Are labels and buttons unambiguous?
Does error copy help users fix the problem?
Generate Critique Report
Structure your feedback as a design director would:
Anti-Patterns Verdict
Start here. Pass/fail: Does this look AI-generated? List specific tells from the skill's Anti-Patterns section. Be brutally honest.
Overall Impression
A brief gut reaction—what works, what doesn't, and the single biggest opportunity.
What's Working
Highlight 2-3 things done well. Be specific about why they work.
Priority Issues
The 3-5 most impactful design problems, ordered by importance:
For each issue:
What: Name the problem clearly
Why it matters: How this hurts users or undermines goals
Fix: What to do about it (be concrete)
Command: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /critique, /colorize — or other installed skills you're sure exist)
Minor Observations
Quick notes on smaller issues worth addressing.
Questions to Consider
Provocative questions that might unlock better solutions:
"What if the primary action were more prominent?"
"Does this need to feel this complex?"
"What would a confident version of this look like?"
Remember:
Be direct—vague feedback wastes everyone's time
Be specific—"the submit button" not "some elements"
Say what's wrong AND why it matters to users
Give concrete suggestions, not just "consider exploring..."
Prioritize ruthlessly—if everything is important, nothing is
Don't soften criticism—developers need honest feedback to ship great design
From delight
Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful.
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.
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.
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:
Personality in loading messages ("Herding pixels..." "Teaching robots to dance...")
Progress indication with encouraging messages
Skeleton screens with subtle animations
Success animations:
Checkmark draw animation
Confetti burst for major achievements
Gentle scale + fade for confirmation
Satisfying sound effects (subtle)
Hover surprises:
Icons that animate on hover
Color shifts or glow effects
Tooltip reveals with personality
Cursor changes (custom cursors for branded experiences)
Personality in Copy
Playful error messages:
"Error 404"
"This page is playing hide and seek. (And winning)"
"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 messages"
"Inbox zero! You're crushing it today."
Playful labels & tooltips:
"Delete"
"Send to void" (for playful brand)
"Help"
"Rescue me" (tooltip)
IMPORTANT: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm.
Illustrations & Visual Personality
Custom illustrations:
Empty state illustrations (not stock icons)
Error state illustrations (friendly monsters, quirky characters)
Loading state illustrations (animated characters)
Success state illustrations (celebrations)
Icon personality:
Custom icon set matching brand personality
Animated icons (subtle motion on hover/click)
Illustrative icons (more detailed than generic)
Consistent style across all icons
Background effects:
Subtle particle effects
Gradient mesh backgrounds
Geometric patterns
Parallax depth
Time-of-day themes (morning vs night)
Satisfying Interactions
Drag and drop delight:
Lift effect on drag (shadow, scale)
Snap animation when dropped
Satisfying placement sound
Undo toast ("Dropped in wrong place? [Undo]")
Toggle switches:
Smooth slide with spring physics
Color transition
Haptic feedback on mobile
Optional sound effect
Progress & achievements:
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")
Form interactions:
Input fields that animate on focus
Checkboxes that bounce when checked
Success state that celebrates valid input
Auto-grow textareas
Sound Design
Subtle audio cues (when appropriate):
Notification sounds (distinctive but not annoying)
Success sounds (satisfying "ding")
Error sounds (empathetic, not harsh)
Typing sounds for chat/messaging
Ambient background audio (very subtle)
IMPORTANT:
Respect system sound settings
Provide mute option
Keep volumes quiet (subtle cues, not alarms)
Don't play on every interaction (sound fatigue is real)
Easter Eggs & Hidden Delights
Discovery rewards:
Konami code unlocks special theme
Hidden keyboard shortcuts (Cmd+K for special features)
Hover reveals on logos or illustrations
Alt text jokes on images (for screen reader users too!)
Console messages for developers ("Like what you see? We're hiring!")
Seasonal touches:
Holiday themes (subtle, tasteful)
Seasonal color shifts
Weather-based variations
Time-based changes (dark at night, light during day)
Contextual personality:
Different messages based on time of day
Responses to specific user actions
Randomized variations (not same every time)
Progressive reveals with continued use
Loading & Waiting States
Make waiting engaging:
Interesting loading messages that rotate
Progress bars with personality
Mini-games during long loads
Fun facts or tips while waiting
Countdown with encouraging messages
Loading messages rotation:
- "Waking up the servers..."
- "Teaching robots to dance..."
- "Consulting the magic 8-ball..."
- "Counting backwards from infinity..."
Celebration Moments
Success celebrations:
Confetti for major milestones
Animated checkmarks for completions
Progress bar celebrations at 100%
"Achievement unlocked" style notifications
Personalized messages ("You published your 10th article!")
Force users through delightful moments (make skippable)
Use delight to hide poor UX
Overdo it (less is more)
Ignore accessibility (animate responsibly, provide alternatives)
Make every interaction delightful (special moments should be special)
Sacrifice performance for delight
Be inappropriate for context (read the room)
Verify Delight Quality
Test that delight actually delights:
User reactions: Do users smile? Share screenshots?
Doesn't annoy: Still pleasant after 100th time?
Doesn't block: Can users opt out or skip?
Performant: No jank, no slowdown
Appropriate: Matches brand and context
Accessible: Works with reduced motion, screen readers
Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct.
From distill
Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean.
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.
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.
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:
Identify complexity sources:
Too many elements: Competing buttons, redundant information, visual clutter
Excessive variation: Too many colors, fonts, sizes, styles without purpose
Information overload: Everything visible at once, no progressive disclosure
Feature creep: Too many options, actions, or paths forward
Find the essence:
What's the primary user goal? (There should be ONE)
What's actually necessary vs nice-to-have?
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
Create a ruthless editing strategy:
Core purpose: What's the ONE thing this should accomplish?
Essential elements: What's truly necessary to achieve that purpose?
Progressive disclosure: What can be hidden until needed?
Consolidation opportunities: What can be combined or integrated?
IMPORTANT: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless.
Simplify the Design
Systematically remove complexity across these dimensions:
Information Architecture
Reduce scope: Remove secondary actions, optional features, redundant information
Sacrifice accessibility for simplicity (clear labels and ARIA still required)
Make things so simple they're unclear (mystery ≠ minimalism)
Remove information users need to make decisions
Eliminate hierarchy completely (some things should stand out)
Oversimplify complex domains (match complexity to actual task complexity)
Verify Simplification
Ensure simplification improves usability:
Faster task completion: Can users accomplish goals more quickly?
Reduced cognitive load: Is it easier to understand what to do?
Still complete: Are all necessary features still accessible?
Clearer hierarchy: Is it obvious what matters most?
Better performance: Does simpler design load faster?
Document Removed Complexity
If you removed features or options:
Document why they were removed
Consider if they need alternative access points
Note any user feedback to monitor
Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."
From extract
Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library.
Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse.
Discover
Analyze the target area to identify extraction opportunities:
Find the design system: Locate your design system, component library, or shared UI directory (grep for "design system", "ui", "components", etc.). Understand its structure:
Component organization and naming conventions
Design token structure (if any)
Documentation patterns
Import/export conventions
CRITICAL: If no design system exists, ask before creating one. Understand the preferred location and structure first.
Identify patterns: Look for:
Repeated components: Similar UI patterns used multiple times (buttons, cards, inputs, etc.)
Hard-coded values: Colors, spacing, typography, shadows that should be tokens
Inconsistent variations: Multiple implementations of the same concept (3 different button styles)
Assess value: Not everything should be extracted. Consider:
Is this used 3+ times, or likely to be reused?
Would systematizing this improve consistency?
Is this a general pattern or context-specific?
What's the maintenance cost vs benefit?
Plan Extraction
Create a systematic extraction plan:
Components to extract: Which UI elements become reusable components?
Tokens to create: Which hard-coded values become design tokens?
Variants to support: What variations does each component need?
Naming conventions: Component names, token names, prop names that match existing patterns
Migration path: How to refactor existing uses to consume the new shared versions
IMPORTANT: Design systems grow incrementally. Extract what's clearly reusable now, not everything that might someday be reusable.
Extract & Enrich
Build improved, reusable versions:
Components: Create well-designed components with:
Clear props API with sensible defaults
Proper variants for different use cases
Accessibility built in (ARIA, keyboard navigation, focus management)
Documentation and usage examples
Design tokens: Create tokens with:
Clear naming (primitive vs semantic)
Proper hierarchy and organization
Documentation of when to use each token
Patterns: Document patterns with:
When to use this pattern
Code examples
Variations and combinations
NEVER:
Extract one-off, context-specific implementations without generalization
Create components so generic they're useless
Extract without considering existing design system conventions
Skip proper TypeScript types or prop documentation
Create tokens for every single value (tokens should have semantic meaning)
Migrate
Replace existing uses with the new shared versions:
Find all instances: Search for the patterns you've extracted
Replace systematically: Update each use to consume the shared version
Test thoroughly: Ensure visual and functional parity
Delete dead code: Remove the old implementations
Document
Update design system documentation:
Add new components to the component library
Document token usage and values
Add examples and guidelines
Update any Storybook or component catalog
Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently.
From frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics.
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
Design Direction
Commit to a BOLD aesthetic direction:
Purpose: What problem does this interface solve? Who uses it?
Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work—the key is intentionality, not intensity.
Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font.
DO: Use a modular type scale with fluid sizing (clamp)
DO: Vary font weights and sizes to create clear visual hierarchy
DON'T: Use overused fonts—Inter, Roboto, Arial, Open Sans, system defaults
DON'T: Use monospace typography as lazy shorthand for "technical/developer" vibes
DON'T: Put large icons with rounded corners above every heading—they rarely add value and make sites look templated
Color & Theme
→ Consult color reference for OKLCH, palettes, and dark mode.
Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
DO: Use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes
DO: Tint your neutrals toward your brand hue—even a subtle hint creates subconscious cohesion
DON'T: Use gray text on colored backgrounds—it looks washed out; use a shade of the background color instead
DON'T: Use pure black (#000) or pure white (#fff)—always tint; pure black/white never appears in nature
DON'T: Use the AI color palette: cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds
DON'T: Use gradient text for "impact"—especially on metrics or headings; it's decorative rather than meaningful
DON'T: Default to dark mode with glowing accents—it looks "cool" without requiring actual design decisions
Layout & Space
→ Consult spatial reference for grids, rhythm, and container queries.
Create visual rhythm through varied spacing—not the same padding everywhere. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis.
DO: Create visual rhythm through varied spacing—tight groupings, generous separations
DO: Use fluid spacing with clamp() that breathes on larger screens
DO: Use asymmetry and unexpected compositions; break the grid intentionally for emphasis
DON'T: Wrap everything in cards—not everything needs a container
DON'T: Nest cards inside cards—visual noise, flatten the hierarchy
DON'T: Use identical card grids—same-sized cards with icon + heading + text, repeated endlessly
DON'T: Use the hero metric layout template—big number, small label, supporting stats, gradient accent
DON'T: Center everything—left-aligned text with asymmetric layouts feels more designed
DON'T: Use the same spacing everywhere—without rhythm, layouts feel monotonous
Visual Details
DO: Use intentional, purposeful decorative elements that reinforce brand
DON'T: Use glassmorphism everywhere—blur effects, glass cards, glow borders used decoratively rather than purposefully
DON'T: Use rounded elements with thick colored border on one side—a lazy accent that almost never looks intentional
DON'T: Use sparklines as decoration—tiny charts that look sophisticated but convey nothing meaningful
DON'T: Use rounded rectangles with generic drop shadows—safe, forgettable, could be any AI output
DON'T: Use modals unless there's truly no better alternative—modals are lazy
Motion
→ Consult motion reference for timing, easing, and reduced motion.
Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
DO: Use motion to convey state changes—entrances, exits, feedback
DO: Use exponential easing (ease-out-quart/quint/expo) for natural deceleration
DO: For height animations, use grid-template-rows transitions instead of animating height directly
DON'T: Animate layout properties (width, height, padding, margin)—use transform and opacity only
DON'T: Use bounce or elastic easing—they feel dated and tacky; real objects decelerate smoothly
Make interactions feel fast. Use optimistic UI—update immediately, sync later.
DO: Use progressive disclosure—start simple, reveal sophistication through interaction (basic options first, advanced behind expandable sections; hover states that reveal secondary actions)
DO: Design empty states that teach the interface, not just say "nothing here"
DO: Make every interactive surface feel intentional and responsive
DON'T: Repeat the same information—redundant headers, intros that restate the heading
DON'T: Make every button primary—use ghost buttons, text links, secondary styles; hierarchy matters
Responsive
→ Consult responsive reference for mobile-first, fluid design, and container queries.
DO: Use container queries (@container) for component-level responsiveness
DO: Adapt the interface for different contexts—don't just shrink it
DON'T: Hide critical functionality on mobile—adapt the interface, don't amputate it
DO: Make every word earn its place
DON'T: Repeat information users can already see
The AI Slop Test
Critical quality check: If you showed this interface to someone and said "AI made this," would they believe you immediately? If yes, that's the problem.
A distinctive interface should make someone ask "how was this made?" not "which AI made this?"
Review the DON'T guidelines above—they are the fingerprints of AI-generated work from 2024-2025.
Implementation Principles
Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations.
Remember: Claude is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
From harden
Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready.
Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs.
Assess Hardening Needs
Identify weaknesses and edge cases:
Test with extreme inputs:
Very long text (names, descriptions, titles)
Very short text (empty, single character)
Special characters (emoji, RTL text, accents)
Large numbers (millions, billions)
Many items (1000+ list items, 50+ options)
No data (empty states)
Test error scenarios:
Network failures (offline, slow, timeout)
API errors (400, 401, 403, 404, 500)
Validation errors
Permission errors
Rate limiting
Concurrent operations
Test internationalization:
Long translations (German is often 30% longer than English)
RTL languages (Arabic, Hebrew)
Character sets (Chinese, Japanese, Korean, emoji)
Date/time formats
Number formats (1,000 vs 1.000)
Currency symbols
CRITICAL: Designs that only work with perfect data aren't production-ready. Harden against reality.
// ❌ Bad: Assumes short English text
<button className="w-24">Submit</button>
// ✅ Good: Adapts to content<buttonclassName="px-4 py-2">Submit</button>
RTL (Right-to-Left) support:
/* Use logical properties */margin-inline-start: 1rem; /* Not margin-left */padding-inline: 1rem; /* Not padding-left/right */border-inline-end: 1px solid; /* Not border-right *//* Or use dir attribute */[dir="rtl"].arrow { transform: scaleX(-1); }
Character set support:
Use UTF-8 encoding everywhere
Test with Chinese/Japanese/Korean (CJK) characters
Test with emoji (they can be 2-4 bytes)
Handle different scripts (Latin, Cyrillic, Arabic, etc.)
Date/Time formatting:
// ✅ Use Intl API for proper formattingnewIntl.DateTimeFormat('en-US').format(date); // 1/15/2024newIntl.DateTimeFormat('de-DE').format(date); // 15.1.2024newIntl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
