new-componentlisted

# new-component Scaffold a new design system component: the three component files plus the build-enforced registration steps. ## When invoked Use this skill any time you are asked to add or create a new component to the design system — phrases like "add a [Name] component", "create a [Name] component", "scaffold [Name]". ## Instructions 1. **Ask** for the component name (PascalCase) and a one-sentence description of its purpose, if not already provided. 2. **Read these reference files before writing anything:** - `src/components/Button/Button.tsx` — structural reference for a button-or-anchor component (own-props split, forwardRef, rest spread, BEM class usage, conditional rendering) - `src/components/Input/Input.tsx` — structural reference for a form control (native `onChange` + `onValueChange` convenience callback, label/helper/error wiring) - `src/components/Badge/Badge.css` — CSS token reference (no raw hex/pixels, semantic token usage) - `src/components/Badge/Badge.stories.tsx` — stories file reference (`satisfies Meta`, `StoryObj`, autodocs) - `src/tokens/registry.json` — the generated index of every semantic token by category (colour and spacing live in `tokens-light.css`, typography and motion in their own files; the registry is the one place that lists all of them) - `.claude/skills/design-qa/SKILL.md` — read its "The craft checks" rubric **before writing any CSS** (and "The eye" for when the component lands on a page): the component faces tha