$npx -y skills add heyhank-app/heyhank --skill critiqueEvaluate design effectiveness from a UX perspective. Assesses visual hierarchy, information architecture, emotional resonance, and overall design quality with actionable feedback.
| 1 | 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. |
| 2 | |
| 3 | **First**: Use the frontend-design skill for design principles and anti-patterns. |
| 4 | |
| 5 | ## Design Critique |
| 6 | |
| 7 | Evaluate the interface across these dimensions: |
| 8 | |
| 9 | ### 1. AI Slop Detection (CRITICAL) |
| 10 | |
| 11 | **This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? |
| 12 | |
| 13 | 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. |
| 14 | |
| 15 | **The test**: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem. |
| 16 | |
| 17 | ### 2. Visual Hierarchy |
| 18 | - Does the eye flow to the most important element first? |
| 19 | - Is there a clear primary action? Can you spot it in 2 seconds? |
| 20 | - Do size, color, and position communicate importance correctly? |
| 21 | - Is there visual competition between elements that should have different weights? |
| 22 | |
| 23 | ### 3. Information Architecture |
| 24 | - Is the structure intuitive? Would a new user understand the organization? |
| 25 | - Is related content grouped logically? |
| 26 | - Are there too many choices at once? (cognitive overload) |
| 27 | - Is the navigation clear and predictable? |
| 28 | |
| 29 | ### 4. Emotional Resonance |
| 30 | - What emotion does this interface evoke? Is that intentional? |
| 31 | - Does it match the brand personality? |
| 32 | - Does it feel trustworthy, approachable, premium, playful—whatever it should feel? |
| 33 | - Would the target user feel "this is for me"? |
| 34 | |
| 35 | ### 5. Discoverability & Affordance |
| 36 | - Are interactive elements obviously interactive? |
| 37 | - Would a user know what to do without instructions? |
| 38 | - Are hover/focus states providing useful feedback? |
| 39 | - Are there hidden features that should be more visible? |
| 40 | |
| 41 | ### 6. Composition & Balance |
| 42 | - Does the layout feel balanced or uncomfortably weighted? |
| 43 | - Is whitespace used intentionally or just leftover? |
| 44 | - Is there visual rhythm in spacing and repetition? |
| 45 | - Does asymmetry feel designed or accidental? |
| 46 | |
| 47 | ### 7. Typography as Communication |
| 48 | - Does the type hierarchy clearly signal what to read first, second, third? |
| 49 | - Is body text comfortable to read? (line length, spacing, size) |
| 50 | - Do font choices reinforce the brand/tone? |
| 51 | - Is there enough contrast between heading levels? |
| 52 | |
| 53 | ### 8. Color with Purpose |
| 54 | - Is color used to communicate, not just decorate? |
| 55 | - Does the palette feel cohesive? |
| 56 | - Are accent colors drawing attention to the right things? |
| 57 | - Does it work for colorblind users? (not just technically—does meaning still come through?) |
| 58 | |
| 59 | ### 9. States & Edge Cases |
| 60 | - Empty states: Do they guide users toward action, or just say "nothing here"? |
| 61 | - Loading states: Do they reduce perceived wait time? |
| 62 | - Error states: Are they helpful and non-blaming? |
| 63 | - Success states: Do they confirm and guide next steps? |
| 64 | |
| 65 | ### 10. Microcopy & Voice |
| 66 | - Is the writing clear and concise? |
| 67 | - Does it sound like a human (the right human for this brand)? |
| 68 | - Are labels and buttons unambiguous? |
| 69 | - Does error copy help users fix the problem? |
| 70 | |
| 71 | ## Generate Critique Report |
| 72 | |
| 73 | Structure your feedback as a design director would: |
| 74 | |
| 75 | ### Anti-Patterns Verdict |
| 76 | **Start here.** Pass/fail: Does this look AI-generated? List specific tells from the skill's Anti-Patterns section. Be brutally honest. |
| 77 | |
| 78 | ### Overall Impression |
| 79 | A brief gut reaction—what works, what doesn't, and the single biggest opportunity. |
| 80 | |
| 81 | ### What's Working |
| 82 | Highlight 2-3 things done well. Be specific about why they work. |
| 83 | |
| 84 | ### Priority Issues |
| 85 | The 3-5 most impactful design problems, ordered by importance: |
| 86 | |
| 87 | For each issue: |
| 88 | - **What**: Name the problem clearly |
| 89 | - **Why it matters**: How this hurts users or undermines goals |
| 90 | - **Fix**: What to do about it (be concrete) |
| 91 | - **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) |
| 92 | |
| 93 | ### Minor Observations |
| 94 | Quick notes on smaller issues worth addressing. |
| 95 | |
| 96 | ### Questions to Consider |
| 97 | Provocative questions that might unlock better solutions: |
| 98 | - "What if the primary action were more prominent?" |
| 99 | - "Does this need to feel this complex?" |
| 100 | - "What would a confident version of this look like?" |
| 101 | |
| 102 | **Remember**: |
| 103 | - Be direct—vague feedback wastes everyone's time |
| 104 | - Be specific—"the submit button" not "some elements" |
| 105 | - Say what's wrong AND why it matters to users |
| 106 | - Give concrete suggestions, |