claude-design-production-architectlisted

# Claude Design Production Architect Use this skill as the deeper layer on top of `$claude-design-handoff`. The baseline handoff skill teaches how to read Claude Design bundles and recreate visual fidelity. This skill adds the missing production work: feature-agnostic handoff generation, backend and AI wiring discovery, responsive repair, design-quality triage, and converter-assisted HTML/CSS/JSX inventory. ## Operating Rule Recreate the design output, not the prototype internals. Claude Design files are usually HTML, CSS, and browser-loaded JSX. Treat them as a visual and structural source, then build typed React/TypeScript using the target repo's routing, data, permissions, styling, and AI conventions. ## Workflow 1. Load the baseline context. - If the existing `$claude-design-handoff` skill is available, apply its Phase 0 to Phase 6 workflow first. - Then apply this skill's stricter production pass. 2. Identify the work type. - Creating a new Claude Design prompt: use `assets/CLAUDE_DESIGN_PRODUCTION_HANDOFF_PROMPT.md`. - Implementing a handoff ZIP/folder: run the scanner, read all source files, inspect the repo, then plan. - Auditing an implementation: compare the shipped code against the scanner report, handoff files, and repo contracts. 3. Run converter-assisted inventory, not blind conversion. - Use `scripts/analyze-claude-design.mjs` on an extracted design folder: `node <base_dir>/scripts/analyze-claude-design.mjs <design-folder> --out <r