design-review

Guide visual design review of rendered React/Tailwind interfaces using Playwright browser automation. Provide comprehensive reports with actionable fixes.

## Review Methodology

Use Playwright MCP tools to capture and analyze:

1. **browser_navigate**: Load the target URL
2. **browser_snapshot**: Get accessibility tree (semantic structure, ARIA, roles)
3. **browser_take_screenshot**: Capture visual state (save to `/tmp/design-review-{timestamp}.png`)
4. **browser_console_messages**: Check for JavaScript errors

## Review Criteria

### 1. Visual Harmony (Aesthetics)

Evaluate against modern minimalist principles:

**Color**
- [ ] Cohesive palette (monochromatic or analogous)
- [ ] Single accent color used sparingly
- [ ] No competing saturated colors
- [ ] Appropriate contrast between elements

**Typography**
- [ ] Consistent font family throughout
- [ ] Limited size scale (3-4 sizes)
- [ ] Clear hierarchy (headings vs body)
- [ ] Appropriate line height and letter spacing

**Spacing**
- [ ] Consistent spacing rhythm
- [ ] Generous whitespace
- [ ] Aligned elements (grid discipline)
- [ ] Balanced padding in containers

**Visual Polish**
- [ ] Subtle shadows (not harsh)
- [ ] Consistent border radius
- [ ] Refined hover/focus states
- [ ] No visual clutter

### 2. Accessibility (from Snapshot)

Analyze the accessibility tree for:

**Structure**
- [ ] Semantic HTML elements (nav, main, section, article)
- [ ] Heading hierarchy (h1 → h2 → h3, no skips)
- [ ] Landmark regions present
- [ ] Lists used appropriately

**Interactive Elements**
- [ ] Buttons have accessible names
- [ ] Links have descriptive text (not "click here")
- [ ] Form inputs have labels
- [ ] Focus indicators visible

**ARIA Usage**
- [ ] Icons have aria-label or aria-hidden
- [ ] Dynamic content has aria-live regions
- [ ] Modal/dialog roles correct
- [ ] States communicated (expanded, selected, disabled)

**Contrast & Readability**
- [ ] Text meets 4.5:1 contrast ratio
- [ ] UI elements meet 3:1 r