What problem does it solve? New or refactored components often enter a design system with drifted specs, inconsistent token usage, incomplete stories, or unverified visual and UX behavior. This Skill enforces a pre-merge quality gate so no half-finished component reaches packages/design-system/src/components/. ## Core Features & Use Cases - Four-phase checklist review: Walks a 35-item checklist covering Spec (12 items), Code (13 items), Stories (6 items), and Ship (4 items), with fail-closed routing when any item fails. - Mandatory six-dimension audit: Chains visual, performance, UX, and design-principle audits (including npm run visual-audit, tsc -b, and story canonical-drift checks) before sign-off. - Use Case: Before merging a new DatePicker component into the design system, run the gate to verify its spec rationale, cva variants, token discipline, Storybook stories, TypeScript build, and visual audit all pass, then receive a signed receipt summarizing each phase. ## Quick Start Ask the assistant to run the component quality gate on your finished component, for example by saying "this component is done, check if it is ready to merge into the design system".
