Design Craft Reviewer

Run a structured audit covering component states, interaction feedback, spacing scales, typography hierarchy, color usage, motion, and accessibility. This reviewer checks changed files against a quality checklist and reports findings with P1-P3 severity and specific fixes.

It checks for missing loading, empty, and error states, absent hover and focus feedback, arbitrary spacing values off the 4/8/16 scale, orphan hex colors, flat typography hierarchy, missing transitions, small touch targets, and missing ARIA attributes.

It activates only when the Verification Contract includes design_craft_check in its required evidence, typically for epics with a ui_surface. It skips CLI tools, libraries, and backend services without UI, reporting a skipped status instead.

Yes, it audits changed files in .tsx, .jsx, .vue, .svelte, .html, and CSS formats including Tailwind classes and CSS-in-JS. The evaluation criteria are framework-agnostic, focusing on states, spacing, motion, and accessibility.

The review verifies aria-label on icon-only buttons, aria-pressed on toggles, aria-valuenow on range controls, 44x44px touch targets, and WCAG AA contrast ratios of 4.5:1 for text and 3:1 for large text and UI components.

It only reviews files changed in the current epic and does not propose redesigns or alternative designs. It flags specific fixable issues against the project's existing design system rather than imposing a new one.