Project design review

Run this when you want your newly-added pages, sections, or components reviewed against the kit's design system. Triggers: "review this page", "audit my dashboard", "check this against the design system", "is this on-brand", "denetle", /review, /review <path>.

The skill produces a numbered, severity-tagged report. It NEVER changes DESIGN.md itself, NEVER suggests swapping the kit's brand fonts/colors/radii, and NEVER auto-fixes — fixes happen only after you pick which findings to apply.

What it actually does

On every run the skill reads the source of truth:

1. DESIGN.md and DESIGN-DARK.md at the project root
2. app/styles/app.css — the live @theme { } block
3. app/components/ listing — what reusable primitives exist

From these it derives the review manifest in-memory: allowed colors, allowed fonts, the spacing scale, the radius scale, the type scale, and the available primitive components. There is no manifest cache file. Update DESIGN.md, run /review again, the manifest updates with you.

It then scans your target path against five dimensions:

• A. DESIGN.md fidelity — hardcoded hex values, off-scale spacing/radius/font-size, references to non-existent tokens, raw HTML where a primitive exists, repeated patterns that should be extracted
• B. Accessibility (WCAG 2.1 AA) — heading order, touch targets, contrast, alt text, aria-label on icon-only buttons, focus state, form label association
• C. Responsive health — mobile overflow, bypassed Container / Section, critical content hidden on mobile, sticky/fixed overlap with the kit header
• D. State coverage — empty / loading / error states, long-content overflow, i18n space budget
• E. UX writing — generic button labels, generic empty states, generic error messages, inconsistent case style

Findings are tagged P0 (broken / accessibility violation), P1 (drift from the kit's design system), or P2 (polish / nice-to-have).

Scope

Output

# Project design review: app/routes/dashboard.tsx

Reviewed against:
- DESIGN.md (warm-brown editorial system, Akkurat LL + Editorial New italic)
- 14 design tokens, 6 component primitives, 8px spacing scale

## Findings (12)

1. [P0] dashboard.tsx:42 — heading skips h1 → h3. Add an h2 or restructure.
2. [P0] dashboard.tsx:88 — icon-only button has no aria-label.
3. [P1] dashboard.tsx:18 — hardcoded `color: '#4a4741'`. Use `var(--color-primary)`.
4. [P1] dashboard.tsx:55 — `mt-[7px]` is off-scale. Use `mt-2` (8px) or `mt-3` (12px).
...

## What looks good
- All cards use the kit's `Card` primitive — good reuse.
- Spacing follows the 8px scale.

Every report ends with What looks good so you get signal on what NOT to change.

How to apply fixes

After the report, you have three ways to act:

1. Fix everything — reply "fix all" and the skill applies all P0 + P1 + P2 findings in order.
2. Fix selectively — reply "fix 1, 3, 5" with the numbers you want, or "fix the P0s" to apply by severity.
3. Just give me a prompt — reply "give me a prompt" and the skill outputs a single self-contained prompt you can paste into any other AI tool (Claude Code, Codex, Cursor, Gemini) to apply the fixes elsewhere.

The skill does NOT auto-fix on its own and does NOT commit anything. Edits land in your working tree; you commit when you're ready.

What it will not do

• Will not recommend changing DESIGN.md, DESIGN-DARK.md, or app/styles/app.css. Those are the design system; your code adapts to them, not the other way around.
• Will not flag the kit's intentional brand choices as anti-patterns. If DESIGN.md says "Inter," the skill will never tell you "Inter is overused".
• Will not expand scope. /review app/routes/foo.tsx reviews exactly that file.
• Will not run build, dev server, tests, or lint. It is a static read-and-report skill.