---
name: design-review-critique
description: Run systematic design reviews: Nielsen's heuristics, visual hierarchy scoring, accessibility checks, and prioritized fix plans with concrete remedies.
---

# Design Review & Critique

Structured evaluation — heuristic scoring, anti-pattern detection, fix plans

Run structured design reviews that produce actionable, prioritized feedback — not vague opinions. Every finding should have a location, a problem, a severity, and a fix.

## The Review Framework

### Step 1: Understand the Intent

Before critiquing, answer:
- **What is this trying to do?** (inform, convert, onboard, entertain)
- **Who is it for?** (specific human, not "users")
- **What should success look like?** (metric, behavior, feeling)

If you can't answer these, the design has no target to hit. Flag that first.

### Step 2: Heuristic Evaluation (Nielsen's 10)

Score each heuristic 0–4:

| # | Heuristic | What to check |
|---|-----------|---------------|
| 1 | **Visibility of system status** | Does the user always know what's happening? Loading states, success confirmations, error messages. |
| 2 | **Match between system and real world** | Does the language, layout, and flow match how the user thinks? Or does it expose implementation details? |
| 3 | **User control and freedom** | Can the user undo? Escape a modal? Go back? Or are they trapped? |
| 4 | **Consistency and standards** | Do similar things look similar? Are platform conventions followed? |
| 5 | **Error prevention** | Does the design prevent mistakes? Confirmation dialogs, input constraints, smart defaults. |
| 6 | **Recognition over recall** | Is information visible? Or does the user have to remember something from another screen? |
| 7 | **Flexibility and efficiency** | Can experts go faster? Keyboard shortcuts, saved preferences, bulk actions? |
| 8 | **Aesthetic and minimalist design** | Is every element necessary? Or is there decoration that adds noise? |
| 9 | **Help users recover from errors** | When things go wrong, is the error clear and the fix obvious? |
| 10 | **Help and documentation** | Is help findable? Is it specific to the context? |

Score: 0 = not present, 1 = poor, 2 = fair, 3 = good, 4 = excellent.

### Step 3: Visual Hierarchy Audit

Check these in order:

1. **Primary action**: Is there ONE clear action per screen? Can you find it in 2 seconds?
2. **Heading hierarchy**: Do headings create a scannable outline? Or is everything the same size?
3. **Contrast ratio**: Does the most important element have the most contrast? Or is everything equally loud?
4. **Whitespace**: Is there breathing room around key elements? Or is everything crammed together?
5. **Color usage**: Does color draw attention to what matters? Or is it decorative?
6. **Typography**: Are there distinct levels (heading, body, caption)? Or does everything look the same?

### Step 4: Accessibility Check

Run through the accessibility audit skill's checklist:
- Contrast: every text/background pair ≥ 4.5:1.
- Keyboard: every interactive element reachable via Tab.
- Focus: visible focus indicators on all interactive elements.
- ARIA: correct roles, labels, and states.
- Motion: `prefers-reduced-motion` respected.

### Step 5: Responsive Check

- 320px: all content accessible, no horizontal scroll.
- 768px: layout reflows appropriately.
- 1440px: content doesn't stretch too wide.
- 200% zoom: content reflows, no overlapping text.

## The Output Format

Every finding follows this structure:

```
### [Severity] Finding title

**Location**: [page/section/component]
**Problem**: [what's wrong and why it matters]
**Fix**: [specific, actionable remedy]
**Effort**: [trivial / small / medium / large]
```

Severity levels:
- **P0 — Critical**: Blocks task completion. Fix before merge.
- **P1 — Major**: Significantly degrades experience. Fix before release.
- **P2 — Minor**: Polish issue. Fix in next sprint.
- **P3 — Suggestion**: Nice-to-have improvement.

### Example Findings

```
### [P0] Error message doesn't explain what went wrong

**Location**: Login form → password error
**Problem**: "Invalid credentials" doesn't tell the user if the email is wrong or the password. They can't recover.
**Fix**: Split into "No account found with this email" and "Incorrect password. Try again or reset it."
**Effort**: Trivial

### [P1] No focus indicator on navigation links

**Location**: Global navigation
**Problem**: Tab through the page — you can't see which nav link has focus. Keyboard users are lost.
**Fix**: Add `:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }` to nav links.
**Effort**: Trivial

### [P1] Three primary actions on dashboard

**Location**: Dashboard → hero section
**Problem**: "Create project", "Invite team", and "View analytics" are all styled as primary buttons. No clear priority.
**Fix**: Make "Create project" the primary button. "Invite team" becomes secondary (ghost). "View analytics" becomes a text link.
**Effort**: Small

### [P2] Inconsistent border radius

**Location**: Cards and buttons
**Problem**: Cards use `border-radius: 0.5rem`, buttons use `border-radius: 0.25rem`. The visual language is inconsistent.
**Fix**: Unify to `--radius-md: 0.5rem` for both. Or create separate `--radius-card` and `--radius-button` tokens with intentional difference.
**Effort**: Small
```

## The Review Checklist

Before declaring a review complete, verify you've checked:

- [ ] **Purpose**: Does the design have a clear goal?
- [ ] **Hierarchy**: Can you identify the primary action in 2 seconds?
- [ ] **Contrast**: All text passes 4.5:1?
- [ ] **Keyboard**: Tab through the entire page?
- [ ] **States**: Default, hover, active, focus, disabled, loading, error, empty?
- [ ] **Responsive**: 320px, 768px, 1440px, 200% zoom?
- [ ] **Motion**: `prefers-reduced-motion` respected?
- [ ] **Copy**: Button labels specific? Error messages actionable?
- [ ] **Consistency**: Same patterns used throughout?
- [ ] **Performance**: No layout thrashing? Animations GPU-composited?

## Anti-Patterns in Reviews

- **Vague feedback**: "This feels off" without specifying what or why.
- **Opinion without reasoning**: "I don't like blue" is not a finding. "Blue primary on blue background fails 2.1:1 contrast" is.
- **Fixating on aesthetics without checking function**: A beautiful interface that doesn't work is still broken.
- **Reviewing without context**: You can't evaluate a dashboard without knowing who uses it and what they're trying to do.
- **Listing every possible improvement**: Prioritize. 3 P0 findings are more useful than 20 P3 suggestions.
- **Reviewing your own work without distance**: Wait a day, or have someone else review. You'll see different things.

## The Mandate

A review is only useful if the designer can act on it. Every finding must be:
1. **Specific** — point to the exact element.
2. **Actionable** — describe the fix, not just the problem.
3. **Prioritized** — P0 before P3.
4. **Evidence-based** — reference a heuristic, a WCAG rule, or a usability principle.