design-implementlisted

Use when a finished visual design has to be re-expressed in this project's stack pixel-accurately — the user says "implement this design", "here's a design handoff", "make this screen match the mockup", "design-implement", pastes a design-tool handoff prompt, or attaches an exported design HTML/zip. Runs a measured workflow: token inventory from a real headless render, reuse-vs-create recon against the project's own components, an approval gate before any code, and a pixel diff against the design as the completion criterion. NOT for ordinary styling requests (tweak a padding, change a colour, fix a hover state), NOT for building UI from a written description with no design artefact, and NOT for visual QA of an already-implemented screen.
atretyak1985/swarmery · ★ 4 · Web & Frontend · score 76

Install: claude install-skill atretyak1985/swarmery

# Purpose Six phases that carry a screen from "here is a design" to "here is a measured diff". Each phase has exactly one output, and the next phase does not start until that output exists. Two rules hold the whole workflow up: the token inventory comes from a **real headless render**, never from reading the design's CSS by eye; and completion is **a number plus an image**, never an impression. This document is the procedure only. Input shapes and what each one can promise live in `design-acquire`; the measurement procedure lives in `design-verify`; the precision rules live in `references/fidelity-checklist.md` and the named failure modes in `references/anti-patterns.md`. Nothing here repeats them. # Step 0 — Prerequisites **0.1 — Read `${CLAUDE_PROJECT_DIR}/.claude/project.json`, the `design` block.** Required: `design.tokensFile`, `design.componentsRoot`, `design.routesRoot`, `design.devUrl`, `design.verify` (both `verify.lint` and `verify.typecheck`). If the block is missing, or any required field is empty, **stop loudly**. Name the specific fields that are not filled in — not "the config is incomplete", but the list of them — and say where the form is: the project dashboard → plugins → design-pack. Do not guess a path, do not infer a components root from a directory listing, do not run on a partial block. Optional fields and their defaults: | Field | Default | Read by | |---|---|---| | `design.fontLoader` | — | Phase 3 font check (`next-font` \| `link-tag` \| `se