Skill Claude CodeCodex
End state: a Figma page named Icons containing the relevant icon set as scalable, well-named components, ready to be consumed by components (skill 4) and swapped via instance properties.
Skill Claude CodeCodex
Turns the user's working folder into a scalable monorepo and advances their version-control stage. Defaults: pnpm + Turborepo, with a layout ready to grow into a full app.
Skill Claude CodeCodex
Sequences a brownfield retrofit through the safe seven-phase order (with docs inserted as a gated Phase 6.5), gating each phase on a human confirmation. Like component-pipeline, this skill holds zero domain logic of its own — it is a sequencer that invokes the real skills and the phase work, and only updates the…
Skill Claude CodeCodex
Builds the code half of the component library: real components consuming the synced tokens, stories documenting them, Chromatic for visual regression, and Code Connect tying Figma to code when available.
Skill Claude CodeCodex
Creates a two-tier design token system as Figma variables. Each tier is split into one collection per category (color, spacing, type, radius, border) so every category owns its own modes — see Step 1 for why. Within a collection, Figma variables are grouped with / and omit the category prefix (the collection already…
Skill Claude CodeCodex
Builds the backbone artifact of a brownfield retrofit: crosswalk.json, a persistent three-way map of new token ↔ old Figma variable ↔ old code identifier. It drives the code retrofit and the tokens:validate CI gate. This skill also installs the canonical scripts into the user's repo and wires the gate.
Skill Claude CodeCodex
Creates a polished visual reference of the design system's tokens and styles on a dedicated Figma page called Foundations. This is the artifact designers and stakeholders actually look at — so it must be beautiful and on-brand, not a utilitarian dump of swatches.
Skill Claude CodeCodex
Compiles Figma variables into code. The pipeline is one-directional — Figma is the source of truth for token values; code consumes generated artifacts that are never hand-edited.
Agent
Plans a build stage on the deep tier and emits a transcription-grade spec addressed in stable identifiers (component/page/token/style names, never nodeIds). Reads existing Figma state read-only to plan against it; it does not write. Dispatched concurrency-1 because it touches the single Figma bridge.
Agent
Transcribes code or generated output from a complete, transcription-grade spec and verifies its own build. Dispatched on the fast tier for mechanical, parallel-safe code-gen (per-adapter token output, per-component stories, SVGR transforms). Not for planning or design decisions — those belong to the dispatcher or the…
Agent
Runs an architect's Figma spec — resolves stable names to nodeIds at run time, builds into a named working frame, read-back-verifies structure (asserts a real COMPONENTSET, not frames), and finalizes by build-verify-then-replace. Defaults to the balanced tier for a real component build; fast only for trivial…
Agent
Reviews a completed unit of work for spec compliance and quality before it is combined or landed. Two modes — code-diff review (a git diff) and Figma-visual review (screenshot then analyze). Dispatched on the balanced tier, scaled to the diff's risk. Reports a verdict; does not fix.