claude-design-handofflisted

# Claude Design Handoff Implementer A bundle exported from Claude Design is a prototype, not production code. Your job is two things at once, and both are required: 1. **1:1 visual fidelity.** The built UI matches the prototype exactly: tokens, type, spacing, radii, shadows, gradients, borders, charts, motion. "Close enough" is a failure. 2. **Real integration.** The UI is wired into the actual codebase: typed data contracts, live Supabase data and AI outputs, server/client split, and the states the prototype never shows (loading, empty, partial, error). A pixel-perfect page fed by hardcoded mock data is also a failure. The prototype ships scaffolding that looks like production but is not (Babel-in-browser, `window.X` globals, a design-only tweaks panel, duplicated token objects, fixture data). Porting that scaffolding verbatim is the single most common way these implementations go wrong. Recreate the *output*, not the prototype's internals. This skill is the workflow. The dense material lives in `references/`; read each file when its phase tells you to. Templates live in `assets/`. --- ## Phase 0 — Detect and orient A Claude Design handoff bundle looks like this: ``` <project-name>/ README.md # starts "CODING AGENTS: READ THIS FIRST" project/ <Primary Design>.html # the file the user had open = primary target *.jsx # shared components, loaded via <script src> from the HTML icons/ uploads/