| name | create-qbds-component |
| description | End-to-end QBDS skill — spec through registry for a new component from Figma. Use when src/components/ui/<name>.tsx does not exist. Triggers — "add a new component", "create the <name> component", "build <name> from Figma", or a figma.com URL for a missing ui file. Do not use for updates (figma-parity), token sync (figma-token-sync), or Code Connect-only edits (code-connect). |
create-qbds-component
QBDS skill executor. Steps 1–4 and 6 follow figma-to-react-code. This skill adds 5, 7, 8 (demo, Code Connect, publish).
Doc hierarchy: react-components/props.md + react-components/composition.md define the portable API step; props.md + composition.md add QBDS rules; build.md implements it; demos.md showcases it.
Checklist
- [ ] 0 exists — ls src/components/ui/{name}.tsx (stop → figma-parity if present)
- [ ] 1 spec
- [ ] 2 reference
- [ ] 3 api
- [ ] 3b api_gate — export list + demo plan shown; trimmed per composition.md + demos.md
- [ ] 4 build
- [ ] 5 demo
- [ ] 6 tests
- [ ] 7 code_connect
- [ ] 8 publish
- [ ] exit_gate
Steps
0. exists — ls src/components/ui/{name}.tsx. If present, stop → figma-parity.
Run demo before tests — tests smoke-render every demo example.
exit_gate
npm run lint && npm run typecheck && npm run test:unit && npm run registry:build && npm run figma:parse
Fix until all five pass. Triage individually when && hides failures. npm run prettier:fix for format. Prop surface change → return to api, re-show prop list, continue forward.
Ask before continuing when: Figma axis has no sensible React expression, sibling contradicts shadcn naming, export list exceeds closest shadcn sibling without Figma reason, or a new token is needed.
