Skip to main content

/design-review

Review the UI-design level of the Productβ†’R&D handoff β€” the other half of /handoff. It confirms that what gets built is assembled only from the design system, so the designβ†’code path stays deterministic and screenshot-free. The invariant: the contract is code and tokens β€” not pixels (Product ↔ R&D Handoff).

What it reviews​

Point it at a Design Doc (docs/designs/<slug>-<cu-id>.md), a UI diff/PR, or a design reference. It runs:

  1. Design-system anchoring β€” invoke design-system:
    • Every UI element maps to a component in COMPONENTS.md (catalog ships with design-system PR #326; until then Storybook); no ad-hoc duplicate of a catalog component.
    • All color/spacing uses tokens (palette.ts), no raw hex β€” CI in design-system blocks these, this catches them earlier.
    • A gap (needed component not in the catalog) is filed as a separate /add-component task, not hand-rolled in the app.
    • Path A: any Figma component referenced has a Code Connect mapping to its catalog entry. Path B: the Claude Design output consumes catalog components, and stabilized patterns are promoted into the library.
  2. Accessibility β€” run the a11y-review skill (roles, labels, contrast, keyboard/focus, RTL).
  3. Design Doc readiness (when reviewing a Design Doc) β€” gatekeeper Mode B: Β§1–§15 completeness, traceability to the PRD, a filled Β§13 Task Breakdown. Gates draft β†’ approved.
  4. Data & reuse soundness (gatekeeper Mode B, section G) β€” for any feature that reads existing data or reuses existing capabilities, confirm explicitly:
    • Source-of-truth validated β€” every sourced (non-derived) field/metric is traced to its real backing field/query, verified against production-like sampled data, with data-owner sign-off. A source chosen by reverse-engineering is a blocker.
    • Reuse claims verified β€” every "reuse existing X" is proven to support the required capability; gaps become explicit net-new tasks.
    • Tested against real data shape β€” Β§12 validates against sampled production-like data, not only a local seed.

Outcome​

  • Pass β†’ the UI design is faithfully grounded in the system; for a Design Doc, gatekeeper may flip it to approved, unblocking /breakdown.
  • Findings β†’ grouped by severity with file:line (or doc Β§) references. A raw hex, a hand-rolled component, or a screenshot-as-spec is a blocker β€” route back with the specific fix (token name, catalog component, or /add-component).

Boundaries​

  • Does not merge or approve unilaterally beyond the gatekeeper Mode B transition it is explicitly running.
  • Pairs with /handoff (PRD level) to make the full Product↔R&D handoff perfect end-to-end.