create-qbds-component

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.

Step	Doc
spec	react-components/spec.md + qbds-react-components/spec.md
reference	react-components/reference.md + qbds-react-components/reference.md
api	react-components/props.md + react-components/composition.md + props.md + composition.md
api_gate	Before build: output export list (one-line purpose each) + demo plan (examples[] names and what each proves). Stop if exports exceed shadcn baseline + QBDS axes from the alignment table, or if the demo plan splits axis values or show* toggles into separate examples.
build	react-components/build.md + build.md
demo	demos.md
tests	react-components/tests.md + tests.md
code_connect	code-connect

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.