d2c
c2d2c:d2c — design to code, 1:1
Project parameters
Resolve parameters from C2D2C.md at the repo root (fallback: .claude/c2d2c.md). If neither exists, offer to bootstrap one from the template at ../../templates/C2D2C.template.md (plugin root; standalone installs without that file fetch https://raw.githubusercontent.com/BIAsia/c2d2c/main/templates/C2D2C.template.md): fill what the repo itself reveals (token files, gate scripts, regression routes, git host), ask for the rest. This skill uses DESIGN_FILE, TOKEN_DOCS, DS_ROUTE, GATES, MR_TOOL, DEPLOY_ORDER.
Core principles: agree on the plan before building, implement 1:1, every component gets a regression surface, finish with no loose ends. Three points where you MUST stop and wait for user confirmation: step 2 (plan), step 3 (off-system styles), step 7 (acceptance).
1. Skim + survey the current state + reuse audit
- Skim the design with Figma MCP (
get_design_context+ screenshots): structure first, no parameter-digging yet.get_metadatatends to time out on large frames; prefer design context. - In parallel, map the existing implementation: related components, data flow, animation approach (an Explore agent works well).
- Proactively enumerate reuse (don't wait to be asked): for every UI element in the design, look for an existing implementation and produce a reuse matrix (element → component → coupling → reuse strategy):
- What the design shows is usually the design frame of a real component. Assume it already exists, then try to disprove it, not the other way around.
- Coupling tiers: pure presentation (use directly) / light context (does it degrade gracefully without providers?) / heavy data coupling (data layer, runtime, store).
- A
DS_ROUTEpage or demo page rendering the component with mock props is direct evidence the presentation surface is already isolated. - Heavy coupling ≠ no reuse: the default move is to extract the pure presentation core so the live caller, the regression page, and the new surface share it. A visual replica is the last resort, unless the user explicitly wants isolation.
- Produce a diff list: structural differences between design and current state, the heavy-rework areas, and anything worth extracting as shared.