mckinsey figma-to-react-code
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}
Steps
| 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.