What problem does it solve? Adding a component to this design system requires many coordinated steps — writing the typed React file, the token-only CSS, the Storybook stories, registering it in the build-enforced registry, and documenting it — and missing any one fails the build. This Skill walks through the entire flow so nothing is skipped. ## Core Features & Use Cases - Three-file scaffolding: Creates the typed React component (forwardRef, own-props split, BEM ds- classes), a semantic-token-only CSS file, and a Storybook stories file following the repo's enforced API contract. - Build-enforced registration: Adds the component to src/components/registry.json, regenerates derived surfaces (barrels, README counts, prop API, site corpus), and documents it in design.md. - Quality gates: Runs the design-qa skill before registration and hands off the website showcase page via the component-doc-page skill. - Use Case: Ask to "add a Tooltip component" and get a fully registered, documented, build-passing component with stories, tokens-compliant CSS, and a registry entry. ## Quick Start Ask the assistant to add a new component by name, for example: create a Tooltip component for the design system.
