implement-design

Stage 5 of /implement-design. For one implemented component, scopes its work to the output location — for a published package it writes Vitest tests, enriches the story, writes website docs, adds a changeset, and runs i18n extraction; for an example it just enriches the story. Reads the finished component source as the source of truth; does not change the implementation.

Reads a design manifest produced by design-analyst and proposes a component decomposition tree with per-component public APIs. Read-only, no tool calls except reading the manifest schema.

Scaffolds and implements one new component (Lit or Angular) from a decomposition spec, design screenshot, and Code Connect snippet. Stage 3 of the /implement-design pipeline. Loads the chosen framework's skill on demand. Writes the component plus a basic Storybook story; leaves tests and docs to Stage 5.

Final-pass reviewer over a generated SLDS component — source, CSS, tests, stories, docs together. Stage 6 of /implement-design. Emits a prioritized punch list separating critical fixes (route back to implementer) from non-critical notes (PR comments). Read-only.

Ingests a Figma node via the Figma MCP calls and produces a structured design manifest. Returns BLOCKED_ON_CODE_CONNECT if unconnected nodes are detected.

Turn a Figma URL into fully implemented components — scaffolded, styled with tokens, visually validated against the design, tested, documented, and reviewed. Supports Lit and Angular.

Angular implementation conventions for the /implement-design pipeline. Loaded on demand by component-implementer (and component-author) when the chosen framework is Angular.

Lit/LitElement implementation conventions for the /implement-design pipeline. Loaded on demand by component-implementer (and component-author) when the chosen framework is Lit.