Design Review

---
name: design-review
description: >
  Core pack — always active for visual work. Quality gate for UI, components, pages,
  layouts, or frontend work. Triggers on any visual/design task automatically.
  Use before presenting work, during builds, and for design QA.
---

# Design Review Skill

## Core Pack — Always Active
This is a core skill. Apply it on ALL visual and frontend work, no exceptions. You do not need permission or a specific trigger to use this.

## When to Use
- Before presenting ANY visual or UX work.
- Treat this as a quality gate, not optional polish.
- Sub-agents doing design/frontend work MUST run this before announcing completion.

## Pre-Work: Read Before Building

### 1. Read the project's guidelines
- Read `guidelines.md` or equivalent design system doc first if it exists.
- Follow the project's existing components, tokens, and patterns before inventing anything.
- If no formal guidelines exist, inspect the existing product and match its logic.

### 2. Research before designing
- Check how similar tools solve the same problem before inventing a pattern.
- Use proven references when they exist.
- Quality bar references:
  - UX Tools — editorial restraint, typography, calm hierarchy
  - Inflight by Ridd — motion, depth, data viz polish
  - Linear — dense information, excellent hierarchy, no noise
  - Vercel dashboard — spacing, typography, dark mode discipline

### 3. Check design memory
- Read `memory/channels/{channel-name}.md` for prior design decisions.
- If memory says Aaron rejected a pattern, don't repeat it.
- If a project brain file is linked from channel memory, read that too.

## Aaron's Core Principles
- Restraint IS the design.
- Spacing is the #1 tell.
- Typography hierarchy > color for information architecture.
- Match references at pixel level before adding your own ideas.
- Existing patterns > new patterns.
- Interactive elements should feel polished, not dead.
- If the foundation is wrong, no polish fixes it.
- Good design is centripetal, not centrifugal.

## Reference Files
Read only what the task needs. Keep this SKILL lean, load detail on demand:

- `references/typography.md` — hierarchy, scale, pairing, measure
- `references/color.md` — restrained palettes, tinted neutrals, contrast, OKLCH
- `references/spacing.md` — spacing system, rhythm, grouping, layout density
- `references/motion.md` — timing, easing, reduced motion, interactive feel
- `references/anti-patterns.md` — patterns Aaron will clock instantly and reject

### For sub-agents
- Read the relevant reference files based on what you're building.
- New layout or dashboard? Read spacing + anti-patterns.
- Type-heavy screen? Read typography + spacing.
- Color or theming work? Read color + anti-patterns.
- Interactive polish? Read motion + anti-patterns.
- If in doubt, at minimum read spacing + anti-patterns.

## Pre-Flight Checklist
Run this EVERY TIME before presenting work to Aaron.

### Step 1: Visual verification
- [ ] Take a screenshot of the rendered result.
- [ ] Compare side-by-side with the reference if one exists.
- [ ] Check the target viewport, not an arbitrary devtools width.

### Step 2: Design audit
- [ ] Spacing check — enough breathing room? Default to more.
- [ ] Color check — did you add color that wasn't necessary?
- [ ] Typography check — is hierarchy clear without leaning on color?
- [ ] Pattern check — are you using the project's existing components?
- [ ] Interaction check — hover, focus, active states exist and feel intentional.
- [ ] Integrity check — no placeholders, dead states, broken assets, or missing data handling.

### Step 3: Honesty check
- [ ] Is it actually done?
- [ ] Does it meet the brief, not an adjacent brief?
- [ ] Would you be proud to show this to Aaron cold?

### Step 4: Run verification scripts
if you have access to the scripts directory, run these before presenting:

```bash
# check for common agent anti-patterns
python3 skills/design-review/scripts/anti-pattern-check.py <your-file.tsx>

# verify loading, empty, and error states exist
python3 skills/design-review/scripts/state-check.py <your-file.tsx>

# check semantic HTML, aria labels, alt text, heading hierarchy
python3 skills/design-review/scripts/accessibility-check.py <your-file.tsx>
```

fix any warnings before presenting. these are the cheapest quality checks — they catch the obvious stuff so the human review can focus on judgment calls.

for CI integration, copy `ci/design-eval.py` and `ci/design-eval.yml` into your project to run all three checks on every PR.

### Step 5: Present with evidence
- Screenshot of the result
- What you referenced
- Known gaps or uncertainties
- Link to live/deployed version if applicable

## Updating This Skill
- After Aaron gives design feedback, capture it.
- Add redirects to `references/anti-patterns.md` or the relevant reference file.
- Add project-specific decisions to channel memory.
- Goal: don't get the same design feedback twice.