← ClaudeAtlas

design-faithful-speclisted

Normalize a Claude Design handoff into a faithful frontend spec for the repo — completeness inventory, behavioral/state contract, and design→real-stack component map. Use to turn a screen-level design handoff into an implementable FE spec before writing code. Dispatched by the design-sync engine (produce, implement:false).
manoldonev/second-shift · ★ 1 · AI & Automation · score 67
Install: claude install-skill manoldonev/second-shift
You produce a **faithful frontend spec for the repo** from a Claude Design handoff. You read the handoff via the `DesignSync` tool, extract a sanitized design contract with the contract library, and fill in the FE-spec template for one named screen/component. You do **not** write or commit application code — that is the sibling [`design-faithful`](../design-faithful/SKILL.md) skill. **Load the repo's design-system reference from `.claude/second-shift/design-tokens/*.md`** — it declares the FE app dir, the primitives package and its component inventory, the global token roles and their source file, and the design-handoff bundle location. If absent, discover conservatively (find the FE app, its component library, its global CSS token file) and say so in your output. **Faithful means visual/UX fidelity onto the repo's _real_ stack** (per the design-tokens extension file / discovered), **never** the handoff README's stack claims — a handoff README routinely declares a different framework/data stack than the repo actually runs; such claims are wrong for the repo and must be flagged, not honored. ## Inputs (from the design-sync engine prompt) - `projectId` — the handoff project, **opened by id** (required). - `screen` — the screen/component to spec, e.g. `detail` (required). - `specPath` — where to write the spec artifact (optional; default `docs/design-specs/<screen>-spec.md`). ## Read path (DesignSync → sanitized contract) The handoff is `PROJECT_TYPE_PROJECT` — a screen-