Design Review Skill

---

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

Pre-Work: Read Before Building

1. Read the project's guidelines

2. Research before designing

- 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

Aaron's Core Principles

Reference Files

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

For sub-agents

Pre-Flight Checklist

Run this EVERY TIME before presenting work to Aaron.

Step 1: Visual verification

Step 2: Design audit

Step 3: Honesty check

Step 4: Run verification scripts

if you have access to the scripts directory, run these before presenting:

# 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

Updating This Skill