Component request workflow
How a new component goes from one screen's need to the shared kit, without a second copy of something that already exists.
Check first
Most requests are an existing component with a different variant. Search this hub and the shared components folder before asking for a new one. Two components for one concept drift apart within weeks.
The workflow
- Describe the need. Name the screen, the job the operator is doing, and why no existing component fits. Attach a screenshot of the gap.
- Design in the kit. Build it in the Figma kit on existing variables, with its variant matrix: sizes, states and touch boundary.
- Build it once, shared. Implement under @/shared/components, on tokens only. One component per concept; no feature-local copy.
- Register it. Add its entry to the catalog and a preview to the playground, then run tokens:build so these docs pick it up.
- Pass the gates. The compliance script and the docs gate pass, and the help tour anchors on any screen it replaced still resolve.
Definition of done
- One implementation, imported everywhere it is used.
- A catalog entry in
catalog.jsonwith purpose, use, avoid, touch and constraints. - A live preview on its Dev Hub page, with code for all five platforms.
- Matching Figma variables and a variant matrix entry.