design-handoff

Install

$ curl -fsSL -L https://tetsukod.ai/api/skills/design-handoff/download | tar -xz -C ~/.claude/skills/

Drops the design-handoff/ skill folder into ~/.agent/skills/. Once it lands, /design-handoff <handoff-path> is available in any Claude Code session.

What it does

Implements a Claude Design handoff — the HTML/CSS/JS prototype Anthropic's Claude Design tool exports as a high-fidelity reference — by wrapping /aide with handoff-specific context and installing project rules that bind the pipeline's QA phase to a Playwright MCP visual-diff pass. The handoff is treated as a byte-exact, read-only source of truth — visible copy, design tokens, layout values, and interactions are contracts, not suggestions — while the production code is decomposed using the 1fpf agent-readable-code disciplines.

• Reads the handoff README and promotes its Acceptance criteria checklist verbatim into the AIDE spec's outcomes.desired, so every downstream agent works from the locked contract.
• Installs three project rules into .claude/rules/handoff/ — handoff source-of-truth, Playwright visual-QA, and pixel-fidelity acceptance — that the wrapped /aide pipeline reads at every phase.
• Self-bootstraps AIDE via npx @aidemd-mcp/server@latest sync when the target project doesn't have it wired yet, so a fresh project gets AIDE + rules + the orchestrator pipeline as one continuous flow.
• Detects AIDE, Playwright MCP, and the 1fpf skill independently and surfaces install choices via AskUserQuestion instead of prose halts, so missing preconditions get resolved without copy-paste.
• Hands off to /aide with a primed args payload — the spec-writer reads the handoff README as primary intent, the architect applies the 1fpf disciplines, and QA appends a Playwright visual-diff pass that pixel-matches every implemented route against its design_reference/*.html prototype at named viewports.

What's inside

The package ships with the SKILL.md orchestrator and three project rule files under reference/rules/. On install the orchestrator copies the rules into the target project's .claude/rules/handoff/ directory, where /aide's subagents read them at the start of every phase. handoff-source-of-truth.md locks the handoff folder as a read-only verbatim contract; playwright-visual-qa.md binds the QA phase to a Playwright MCP visual-diff pass at named viewports; pixel-fidelity-acceptance.md promotes the handoff's Acceptance criteria checklist into the AIDE outcomes contract.

When to reach for it

Reach for this skill when you have a Claude Design handoff folder — typically named design_handoff_* with a README.md, an optional landing-page-brief.md, and a design_reference/ subfolder of HTML/CSS/JS prototypes — and you need to translate it into production code without losing pixel fidelity, byte-exact copy, or interaction contracts. Skip it when you're writing a brand-new design from scratch (use /landing-page or /frontend-design instead), re-running QA on an already-implemented handoff (use /aide:qa directly), or refactoring existing production code (use /1fpf or /aide:refactor).