メニュー
Generic skill — spec, reference, api, build, tests. Portable layer only. Do not invoke when the host ships a binding skill. Do not use for updates to an existing component or token sync only.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/mckinsey/quantumblack-design-system --skill figma-to-react-codeコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Create or update a QBDS Figma Code Connect mapping as a template file (`code-connect/<name>.figma.ts`, MCP `figma` API, published via the Figma CLI). Use when adding a new mapping, wiring a Figma node URL, or mapping Figma component properties to a React component's API — including Figma-only props (show* booleans, slots) with no matching React prop. Triggers — "add a code connect", "create a Figma mapping", "map this component to Figma", "code connect for <component>", or a figma.com node URL alongside work in code-connect/.
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).
Match Figma specs when implementing or reviewing QBDS UI — tokens, layout, all variants/states, Code Connect, demos, registry. Use when implementing, updating, or reviewing a QBDS component against a Figma URL/node or the library spec. Triggers — "implement this Figma component", "match the Figma spec", "figma parity", "build this component from Figma", or a figma.com URL alongside work in src/components/ui/, demos, registry.json, or code-connect/.
| name | figma-to-react-code |
| description | Generic skill — spec, reference, api, build, tests. Portable layer only. Do not invoke when the host ships a binding skill. Do not use for updates to an existing component or token sync only. |
| disable-model-invocation | true |
Turn a design-tool component set into a shippable React component. Run steps in order. Each step has one concern.
For updates to an existing component, use the host parity/review skill.
spec → reference → api → build → tests → {host exit gate}
| Step | Description | Doc |
|---|---|---|
spec | Fetch the component set; alignment table + variant × state matrix | spec.md |
reference | Library recipe, primitive docs, sibling | reference.md |
api | Prop table + part list — show before build | props.md + composition.md |
build | Implement the component file | build.md |
tests | Functional smoke + behaviour | tests.md |
Ask before continuing when: a design axis has no sensible React expression, sibling contradicts library naming, or a new token is needed.