From design-to-code
Use after design-to-code:subagent-driven-development completes. Dispatches one ac-verifier subagent per acceptance item in spec.md; failures dispatch fixer subagents. MUST be followed by design-to-code:visual-qa-from-design.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-to-code:tdd-verify-from-specThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
The main agent orchestrates verification of each acceptance item in `spec.md` by dispatching one `ac-verifier` subagent per item. Each subagent uses a shared playwright persistent profile so the login session is on disk and accessible to all subagents. Failures dispatch fixer subagents. After all items are verified, this skill hands off to `design-to-code:visual-qa-from-design`.
The main agent orchestrates verification of each acceptance item in spec.md by dispatching one ac-verifier subagent per item. Each subagent uses a shared playwright persistent profile so the login session is on disk and accessible to all subagents. Failures dispatch fixer subagents. After all items are verified, this skill hands off to design-to-code:visual-qa-from-design.
design-to-code:<skill-name>. References to superpowers:* are forbidden.docs/design-to-code/<YYYY-MM-DD>-<topic>/. Filenames are fixed: spec.md, plan.md, progress.md, verify.log.md, visual-qa.md.spec.md is immutable to the assistant; only the user may edit it. plan.md is written only by design-to-code:writing-plans. progress.md is appended only by design-to-code:subagent-driven-development. verify.log.md is written only by this skill. visual-qa.md is written only by design-to-code:visual-qa-from-design. No skill writes into another skill's artifact.main / release. A feature branch or worktree must exist first.spec.md is immutable here. The assistant MUST NOT weaken or mutate acceptance items to make verification pass.verify.log.md.spec.md defect). The classification determines the failure threshold (see below).design-to-code:*.All ac-verifier subagents use ~/.playwright-profiles/design-to-code as the persistent profile directory. This means the login session written during the pre-flight step is automatically available to every subagent — no re-login needed.
When invoked in a fresh session where the spec.md path was not passed from a previous skill:
find docs/design-to-code -name "spec.md" | sort to discover existing specs.spec.md and progress.md from the chosen directory.spec.md was found under docs/design-to-code/; ask the user to run design-to-code:brainstorming-from-design first.Pre-flight — ensure the dev server is running (if not, ask the user how to start or start it per project conventions). Ensure @playwright/cli is installed (npm install -g @playwright/cli@latest on miss).
Collect dynamic URL parameters — scan all acceptance items in spec.md for URLs or navigation paths that contain dynamic segments (e.g. /teams/:teamId, /projects/:id/issues/:issueId). For each dynamic segment:
.env.example, README, or a quick DB/API query if the project supports it).teamId = 42) for substitution into every AC that needs them.Establish browser session — run once on the main agent:
playwright open <dev-url> --headed --persistent ~/.playwright-profiles/design-to-code
Prompt the user to log in if not already authenticated. Once the authenticated page is visible, confirm with the user before dispatching subagents. This writes the session to disk so all subsequent ac-verifier subagents share it.
Per-item verification loop — for each acceptance item in spec.md, in order:
./ac-verifier-prompt.md, fill all {{...}} variables, and dispatch as a subagent.verify.log.md and proceed to next item../fixer-prompt.md). When the fixer returns, dispatch a fresh ac-verifier for the SAME acceptance item.verify.log.md.Completion — after all items pass (or are recorded as Category B), invoke design-to-code:visual-qa-from-design to run pixel-level visual fidelity verification against the original design source. Pass the spec.md path so the visual-qa skill can locate the design reference.
spec.md defect. Threshold: 2 consecutive rounds on the same acceptance item pauses the loop and reports to the user. Do NOT dispatch a fixer for Category B failures../ac-verifier-prompt.md — template for the ac-verifier subagent. Fill {{AC_ITEM}}, {{DEV_URL}}, {{PLAYWRIGHT_PROFILE_PATH}} (use ~/.playwright-profiles/design-to-code), {{RESOLVED_PARAMS}}, and {{SCREENSHOT_PATH}} before dispatching../fixer-prompt.md — sent to fixer subagents (Category A failures only).Required workflow skills:
verify.log.md (committed to git by the user's project). Per-item entry:
## Acceptance N: <item>
- Attempts: <count>
- Result: ✅ / ❌
- Category (only on ❌): A (code-in-repo) / B (out-of-repo)
- Category reasoning (only on ❌): <one-line justification>
- Evidence: <screenshot path or DOM excerpt>
- Fixes applied: <files changed by fixer, if any>
npx claudepluginhub zhangtianwei1998/design-to-code --plugin design-to-codeGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.