| name | component-pipeline |
| description | Take a single new component from Figma to fully-built-and-storied code, end to end — build it in Figma, sync any new tokens it introduced, then build its code component and stories. This is an orchestrator that sequences the component-builder, token-sync-layer, and storybook-chromatic-builder skills with a human confirmation between each stage. Use this when the user wants to add a new component to an existing design system, ship a component end-to-end, or run the full new-component flow. Also trigger on "/new-component" or when someone says they want one component built all the way through to code. Make sure to use this when the design system foundations already exist and the user wants to add one more component through the whole pipeline. |
Component pipeline (orchestrator)
Sequences a single new component through the whole flow: Figma → tokens →
code/stories. This skill holds zero domain logic of its own — it is a
sequencer that invokes the real skills and gates each stage on a human
confirmation. All the actual work lives in the skills it calls; this keeps it
from rotting when those skills improve.
When to use vs. the individual skills
Use this for one new component, end to end, on a system that already has
foundations (tokens, repo, sync, Storybook). For initial setup, the individual
skills run directly. This is the "I have a system; add a Tooltip and take it all
the way to a tested story" flow.
Prerequisites
Read the manifest. The pipeline assumes foundations exist: tokens built, a repo
at least local-git, sync configured, Storybook initialized. For any missing
piece, offer to run the relevant skill — but note that if a lot is missing, the
user probably wants the individual setup skills first, not this orchestrator.
The sequence (confirm between every stage)
Confirm the goal first: "New Tooltip component, right? I'll build it in Figma,
sync any new tokens, then build the code component and its stories — checking
with you between each step." Then:
Stage 1 — Build in Figma (invoke component-builder)
Invoke the component-builder skill for this one component: brainstorm its
variant matrix and slots, build it bound to tokens following the component
standards, capture its slot contract. Checkpoint: show the finished Figma
component. Get explicit confirmation before continuing.
If the build fails or the user wants changes, stop here — they still have a
valid (or fixable) Figma component and a clean place to resume. Never push a
half-built component down the pipeline.
Stage 2 — Sync new tokens (offer token-sync-layer)
The new component may have introduced new tokens (a new semantic role, a new
spacing step). Offer: "This component added a couple of new tokens — want me to
sync them to code now?" If yes, invoke token-sync-layer (which lands a
reviewable PR per its own rules). If the component introduced no new tokens, say
so and skip. Checkpoint: confirm the sync PR before continuing.
Stage 3 — Build code component + stories (offer storybook-chromatic-builder)
Offer: "Tokens are synced. Build the code component and its stories now?" If yes,
invoke storybook-chromatic-builder for this one component: build the code
counterpart implementing the captured slot contract, generate its stories
(subagent-driven), wire Code Connect if available. Checkpoint: confirm the
component renders and stories build. On approval, that skill finalizes the
component — promoting its status from draft to stable and writing the new
chip color + last-updated date back into its Figma doc card (its Step 6). Since
Figma is still connected from stage 1, the card updates live; the chip should no
longer read draft once the pipeline finishes.
Resumability
Because each stage is gated and invokes a real skill, a failure at any stage
leaves a clean resume point: the Figma component exists after stage 1, the token
PR after stage 2, the code/stories after stage 3. The user can stop after any
stage and pick up later — the manifest reflects what's done.
After completion
Confirm the component went all the way through. Update nothing the sub-skills
didn't already update (they own their manifest fields). Note the ongoing loops:
more components via this pipeline, token changes via /sync-figma-tokens.
What this skill must NOT do
- Never reimplement what the sub-skills do — only sequence them. If you find
yourself writing component-building or sync logic here, stop and invoke the
real skill instead.
- Never skip a confirmation between stages — the gates are what make it
resumable and prevent half-updated state.
- Never push a half-built or unconfirmed component to the next stage.
