/critique

name: critique
description: "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component."
argument-hint: "[area (feature, page, component...)]"
user-invocable: false

MANDATORY PREPARATION

Invoke /frontend-design — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. Additionally gather: what the interface is trying to accomplish.

---

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.

Phase 1: 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 & Cognitive Load

> *Consult [cognitive-load](reference/cognitive-load.md) for the working memory rule and 8-item checklist*

• Is the structure intuitive? Would a new user understand the organization?
• Is related content grouped logically?
• Are there too many choices at once? Count visible options at each decision point — if >4, flag it
• Is the navigation clear and predictable?
• **Progressive disclosure**: Is complexity revealed only when needed, or dumped on the user upfront?
• **Run the 8-item cognitive load checklist** from the reference. Report failure count: 0–1 = low (good), 2–3 = moderate, 4+ = critical.

4. Emotional Journey

• 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"?
• **Peak-end rule**: Is the most intense moment positive? Does the experience end well (confirmation, celebration, clear next step)?
• **Emotional valleys**: Check for onboarding frustration, error cliffs, feature discovery gaps, or anxiety spikes at high-stakes moments (payment, delete, commit)
• **Interventions at negative moments**: Are there design interventions where users are likely to feel frustrated or anxious? (progress indicators, reassurance copy, undo options, social proof)

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?

Phase 2: Present Findings

Structure your feedback as a design director would:

Design Health Score

> *Consult [heuristics-scoring](reference/heuristics-scoring.md)*

Score each of Nielsen's 10 heuristics 0–4. Present as a table:

| # | Heuristic | Score | Key Issue | |---|-----------|-------|-----------| | 1 | Visibility of System Status | ? | [specific finding or "—" if solid] | | 2 | Match System / Real World | ? | | | 3 | User Control and Freedom | ? | | | 4 | Consistency and Standards | ? | | | 5 | Error Prevention | ? | | | 6 | Recognition Rather Than Recall | ? | | | 7 | Flexibility and Efficiency | ? | | | 8 | Aesthetic and Minimalist Design | ? | | | 9 | Error Recovery | ? | | | 10 | Help and Documentation | ? | | | **Total** | | **??/40** | **[Rating band]** |

Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20–32.

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 th