---
name: critique
description: Evaluate design effectiveness from a UX perspective. Assesses visual hierarchy, information architecture, emotional resonance, and overall design quality with actionable feedback.
user-invokable: true
args:
  - name: scope
    description: Narrow the command to a specific area. Options vary per command (see below).
    required: false
author: "@firdausmntp"
---

## Intent Primacy

Read the user's request before applying this command's defaults.

1. **Exact target**: Identify the specific feature, file, or area named. If none is named, ask before acting broadly.
2. **Stated scope wins**: "/critique just the header" means only the header. Do not expand scope.
3. **User's choices bind you**: If the user specifies a framework, style, or approach, follow it even if this skill would suggest otherwise. Warn once, then comply.
4. **Proportional output**: A narrow request gets a targeted answer with only the relevant sections from this skill. A broad request gets the full protocol.
5. **No unrequested work**: Do not refactor, rename, add tests, or generate documentation the user did not ask for.
6. **Hard gates only for safety**: Accessibility AA floor and security checks override user intent. Aesthetic or stylistic preferences do not.
7. **Ask only when it matters**: Ambiguity on scope or destructive action (data loss, breaking change, deleting files) — ask once with specific options. Ambiguity on cosmetic defaults — state assumption and proceed. Never stack questions. Never ask what you can read yourself. STOP and call the `question` tool to clarify.

---

## Scope

This command accepts an optional `{{scope}}` argument. Behavior:

- `frontend` — UX, visual hierarchy, aesthetic coherence
- `backend` — API surface, DX, error messages, docs
- `copy` — UX writing, microcopy, tone, clarity
- `onboarding` — first-run, empty states, activation flow
- `(omitted)` — holistic critique

When `{{scope}}` is provided, focus EXCLUSIVELY on that area. Do not report issues outside scope. When `{{scope}}` is empty or missing, perform the comprehensive version described below.

## MANDATORY PREPARATION

Use the frontend-design skill — 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.

## 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: /adapt, /animate, /arrange, /audit, /bolder, /clarify, /colorize, /critique, /delight, /distill, /extract, /harden, /normalize, /onboard, /optimize, /overdrive, /polish, /quieter, /typeset — 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

## Worked example — sample critique

Use this as the reference format. The "UI under review" paragraph is what you would reconstruct from reading the code or looking at the screen; the critique that follows is the output shape every run of this skill should produce.

### UI under review

A marketing landing page hero: full-viewport section, centered column at `max-w-prose`. Above the heading sits a rounded icon-chip (40px, violet background tint, sparkle icon). Heading reads "Build faster with AI" set in `text-5xl font-bold` with a `bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent` fill. Subhead below it says "The AI platform for modern teams" in `text-xl text-gray-500`. Primary CTA is a pill button labeled "Get Started →" with the same blue-to-purple gradient background. Background is pure white. No imagery, no product context, no secondary action.

### Anti-Patterns Verdict — **FAIL**

This is textbook 2024-2025 AI slop. Specific tells:

- **Gradient text on the hero headline** (blue → purple bg-clip-text)
- **Blue-to-purple gradient CTA** — the most overused button treatment on the web
- **Rounded icon-chip above heading** (the "sparkle in a tinted square" pattern)
- **`max-w-prose` centered column** forcing body-text width on a display headline
- **Generic "Build faster with AI" copy** — no specificity, no proof, no point of view

If you showed this to any designer with "AI made this" as the caption, they would not even pause.

### Overall Impression

Reads as a template, not a product. Every decision is the safe default, and the safe defaults in 2025 are the same defaults everyone else shipped. The single biggest opportunity: kill the gradient, commit to a real hue, and replace the abstract promise with one concrete sentence about what the product does.

### What's Working

1. **Single CTA** — there is no competing secondary action, which is the right call for a hero.
2. **Vertical rhythm** — spacing between chip, heading, subhead, and button is consistent (looks like a scale, not ad-hoc).
3. **Short copy** — the headline is four words, which is the right order of magnitude for a hero.

### Priority Issues

1. **Gradient text on the headline**
   - **Why it matters**: it signals "AI-generated landing page" before the user reads a word, and it reduces contrast below comfortable reading for the exact element that needs the most attention.
   - **Fix**: solid ink in a committed hue (e.g. `oklch(22% 0.06 285)`). If you want emphasis, use weight and size, not gradient.
   - **Command**: `/quieter` or `/bolder` depending on which direction you commit.

2. **Generic headline copy**
   - **Why it matters**: "Build faster with AI" could sell anything. The hero is the most expensive pixels on the site; spend them on something only this product can say.
   - **Fix**: replace with a specific promise plus a concrete subject. Example: "Ship production React components in one prompt."
   - **Command**: `/clarify`.

3. **Icon-chip above heading**
   - **Why it matters**: it is decorative noise. It adds visual weight without adding meaning, and it is the single most common AI-hero ornament.
   - **Fix**: delete it. If the headline needs help, the headline is the problem.
   - **Command**: `/distill`.

4. **Centered `max-w-prose` column for display type**
   - **Why it matters**: prose width (~65ch) is the correct measure for body text, not for a display headline. The result looks cramped and template-like.
   - **Fix**: let the headline breathe to 80-90% of the viewport, keep the subhead at reading width.
   - **Command**: `/arrange`.

5. **Blue-to-purple gradient CTA**
   - **Why it matters**: same slop tell as the headline, doubled. The CTA is the element users must trust; it should look like your brand, not like a Midjourney default.
   - **Fix**: solid fill in the committed hue, white ink, no gradient. Add a subtle hover state.
   - **Command**: `/normalize`.

### Minor Observations

- `text-gray-500` on white for the subhead is on the edge of comfortable contrast; bump to `text-gray-700` or a tinted near-black.
- No focus-visible ring on the CTA is visible in the snapshot — verify keyboard accessibility.
- The hero has no imagery, no product screenshot, no proof. Consider whether the page can earn the user's next scroll without any of those.

### Scoring (out of 5 per dimension)

- Visual hierarchy: **2** — headline and CTA compete because they share the same gradient treatment
- Information architecture: **3** — order is fine, content is thin
- Emotional resonance: **1** — reads as generic AI, not as this product
- Cognitive load: **4** — genuinely low, nothing to parse
- Discoverability: **3** — CTA is obvious, but there is no secondary path for users who are not ready
- Composition: **2** — centered prose-width column wastes the viewport
- Typography: **2** — gradient fill undermines an otherwise fine scale
- Color: **1** — the palette is the slop palette
- States/edge cases: **n/a** — static hero
- Microcopy: **2** — grammatically fine, content-free

**Overall: 20/45 — Rework.** The bones are not broken; the surface is wearing the uniform of every AI landing page from the last 18 months. Strip the gradients, commit to a hue, replace the headline with something specific, and re-review.

### Questions to Consider

- What would this hero look like if you could not use any gradient anywhere?
- What does your product actually do that nothing else does? Can the headline say that out loud?
- If you deleted the icon-chip, what would you lose? If the answer is "nothing," why is it there?
- What would a confident version of this look like — one that trusted a single sentence and a single color?