---
name: design-critique
description: Systematic interface critique skill for analyzing UI designs and delivering specific, actionable feedback on visual design, interface design, interaction consistency, and user context. Based on Josh Puckett's Interface Craft methodology. Trigger on: "critique", "review", "feedback", "audit", "what's wrong", "improve", "polish", "refine", "redesign", "analyze this UI", "look at this", or when the user pastes a screenshot/image for evaluation.
---

# Design Critique

Analyze UI designs using systematic critique methodology.

## When to Use

- User asks for feedback on a design
- User pastes a screenshot of UI
- User wants to "critique", "review", "audit", "improve", "polish", or "refine" a design
- Before finalizing any design deliverable

## Input Modes

1. **Screenshot** — User attaches/pastes an image. Use `read` or `image` tool.
2. **File Path** — User provides path to HTML/JSX/component. Use `read` tool.
3. **Live URL** — User provides URL. Use `web_fetch` tool.

## How to Critique

**Before critiquing, load the full methodology:**
```
Read skills/design-critique/references/methodology.md
```

Then follow the 5-step process:

### Step 0: Context
- What is this? (app type, screen purpose)
- Who is it for? (target user)
- Emotional context? (stressful? routine? high-stakes?)

### Step 1: First Impressions
- One paragraph gut reaction
- What stands out? What feels off?

### Step 2: Visual Design
Audit: color intentionality, typographic hierarchy, shadow quality, visual weight vs importance, spacing/alignment, icon consistency

### Step 3: Interface Design
Audit: focusing mechanism, progressive disclosure, information density, expectation setting, feedback/reward, redundancy

### Step 4: Consistency & Conventions
Audit: pattern consistency, platform conventions, component reuse, visual language cohesion

### Step 5: User Context
- How does this make the user feel?
- What is their state of mind?
- Does the interface respect that state?
- What would "uncommon care" look like?

## Output Format

```
## Context
[What this is, who it's for, emotional context]

## First Impressions
[1 paragraph gut reaction]

## Visual Design
- **Issue Name** — Observation. Impact. Opportunity.
- ...

## Interface Design
- **Missed Opportunity** — [specific opportunity]
- ...

## Consistency & Conventions
[Pattern issues]

## User Context
[Empathy-driven observations]

## Top Opportunities
[3-5 highest-impact changes, ranked]
```

## Voice Rules

**BE:** Specific, decisive, factual first, impact-aware, constructive, quantitative

**DO NOT:** Hedge, apologize, be vague, prescribe without reasoning, add praise padding, use unexplained jargon

**Tone:** Senior designer reviewing work with a junior they respect. Direct, analytical, honest — but wanting the work to be great.

## Severity Ranking

1. **Structural** (information architecture, missing functionality, wrong mental model)
2. **Behavioral** (how interface responds, flows, communicates)
3. **Visual** (color, type, spacing, shadows)

Fix structural first, then behavioral, then visual polish.

## Example Critique Language

**Good:**
> **Muddy shadows** — The card shadows use a large blur radius with low opacity, creating a hazy, unfocused look rather than crisp depth. This makes the cards feel like they're floating in fog rather than sitting on a surface. Tighter, more directional shadows would give the layout a cleaner sense of elevation.

**Good:**
> **No focusing mechanism** — All four content areas compete equally for attention. There's no visual entry point — no element says "start here." The user's eye bounces between the sidebar, the header stats, the chart, and the table with no clear priority. A stronger size or weight differential on the primary content area would give the layout a clear narrative.

## Integration with Design Workflow

**When triggered during design creation:**
1. Generate landing page / mockup
2. Critique the output
3. Create `critique.md` with findings
4. Iterate on design based on critique
5. Include critique summary in final deliverable

**When triggered by user request:**
- Provide critique only (no changes unless requested)
- Offer to implement top 3-5 opportunities if user wants
