Phase Runner.
Your whole product team, not just a coding agent.
Plan → design → build → QA, with you as the PM who signs off.
A set of Claude skills that takes a product from a rough idea to shipped code. It plans the work as phases and sprints, locks a design system before any code gets written, builds in parallel waves, and runs independent verification and browser QA on every wave.
Two commands in Claude Code:
/plugin marketplace add AyeJK/phase-runner/plugin install phase-runner@phase-runner
Skills load as phase-runner:phase-planner, phase-runner:phase-builder, and so on. The planners create their own docs/ folders the first time they run.
Four steps. You sign off on each.
- 01
Idea
product-plannerTell it what you want to build. It turns the idea into a product plan: the options, how the data flows, and the open questions to settle.
- 02
Design
design-plannerLocks a design system and gives you HTML mockups of every screen before any code is written.
- 03
Plan
phase-plannerTurns the plan, design system and mockups into phase files: sprints and tasks, each with acceptance criteria.
- 04
Build
phase-builderSay “implement phase 1.” It runs the build loop and checks in when it hits a blocker or finishes the phase.
Step 4 runs on its own.
phase-builder groups sprints into parallel-safe waves and gives each sprint a fresh sub-agent. Every wave passes through the same gates before anything is marked done.
Animation of one sprint in the build loop. Attempt 1 passes implement and fails verify. The sprint re-runs from implement with the failure attached, and attempt 2 passes all four gates.
- 01Implement
A fresh sub-agent per sprint. UI sprints read your design system first.
- 02Verify
Runs your build, typecheck and tests, then reviews the diff against every acceptance criterion.
- 03Wave test
Checks UI work in a real browser against your design system.
- 04Doc sync
The only step allowed to write status back to the phase file.
A failed gate re-runs the same sprint with the failure attached. Three attempts, then the run stops and asks you. Nothing ships past you.
A live dashboard for every run.
phase-viewer shows your phases, sprints and tasks as they build: wave progress, verify failures, retries, and anything that needs you. It updates as the files change, and it only reads your project, never writes to it.
A replay of Phase 2 of the viewer's own build, failures and blocker included.
In Claude Code, say “open the viewer.” Or run it yourself from the folder that holds docs/phases/. Local sessions only: it serves on localhost.
npx phase-viewer
Built with itself.
The viewer above was built with Phase Runner: 7 phases, 26 sprints. Here's what it recorded.
What verify caught
Attempt 1 failed npm run check: the new browser test used window and document, but the TypeScript config had no DOM types. Attempt 2 fixed that and failed again, because at 375px every page scrolled sideways by 168px. Attempt 3 fixed the overflow and passed.
Attempt 1 failed typecheck: a test imported a chain of files that reached a .tsx component, and the root TypeScript build isn't set up for JSX. Attempt 2 moved the shared helper into a plain .ts file and passed.
Most of these pieces exist somewhere.
Phase Runner is the one where all of them run on their own, on every wave, inside the build loop.
| Capability | Phase Runner | Superpowers | Spec Kit | GSD | BMAD |
|---|---|---|---|---|---|
| Idea → product plan | Built into the workflow | Built into the workflow | Built into the workflow | Built into the workflow | Built into the workflow |
| Design system before code | Built into the workflow | Not included | Not included | Built into the workflow | Built into the workflow |
| Parallel build | Built into the workflow | Not included | Not documented | Built into the workflow | Not documented |
| A separate agent reviews the work | Built into the workflow | Built into the workflow | Not included | A command you run | A command you run |
| Automatic retry on failure | Built into the workflow | Built into the workflow | A command you run | A command you run | Not documented |
| Browser QA on UI work | Built into the workflow | Not included | Not included | A command you run | A command you run |
| Live dashboard of the build | Built into the workflow | Not included | Not included | A command you run | A command you run |
built into the workflow a command you run not included not documented
Every job gets its own agent.
The orchestrator never writes code, never runs your tests, and never edits the plan. Each of those happens in a sub-agent with one narrow job, and the run only advances on a structured result.
Nothing is done because an agent said so
Verify and wave test are separate passes with their own pass/fail contract. Implementation can't grade its own homework.
The plan can't drift
Only doc sync writes to the phase file, and only after every gate for that wave has passed.
Retries keep their scope
A failed sprint re-runs with the failure attached: same sprint, same acceptance criteria. No patched-together fix task.
You can read the run
The orchestrator never writes code or runs tests. Its thread is one line per gate, not pages of build logs.
Nine skills. You talk to five.
The other four are sub-agents that phase-builder runs for you. Each skill uses what your Claude session offers, and works from the files on disk when it offers less.
Skills you use
product-plannerTurns a rough idea into an HTML plan: the options considered, how the data flows, and the open questions. An optional first step.
In a Claude app session the plan also publishes as an artifact: a hosted page you can share. The file in
docs/stays the plan.design-plannerLocks a design system and writes a spec and an HTML mockup for every screen, before implementation starts.
Publishes a Design System artifact and a Design canvas with an artboard per mockup. Change the design on the page or in chat and the files follow.
phase-plannerCreates and edits the phase files in
docs/phases/: sprints and tasks, each with acceptance criteria.Copies any edits you made on the design artifacts back into the files before it plans. It reads
docs/, never an artifact.phase-builderThe orchestrator. Reads a phase file, groups sprints into parallel-safe waves, and won't advance a wave until it passes verification.
Gives every sprint a fresh Claude sub-agent and only advances on a structured result.
phase-viewerStarts the live dashboard in the background and gives you its URL. Local sessions only.
Say “open the viewer” in Claude Code. One viewer runs per project, so asking again returns the same URL.
Skills phase-builder runs for you
phase-ui-implementBuilds UI sprints. Reads your
design-system.mdfirst, generic UI patterns second.A sub-agent per UI sprint. It picks up a UI-pattern skill if you have one installed, and your design system wins where they disagree.
phase-verifyRuns your build, typecheck and tests, then reviews the diff: a verdict with evidence for every acceptance criterion, no test deleted or weakened, and changes kept inside each sprint's scope.
A separate sub-agent from the one that wrote the code. Serious findings fail the wave and trigger a retry.
phase-wave-testBrowser checks on UI sprints, against your
design-system.mdif one exists.A sub-agent that drives the browser with whatever testing skill your session has, and skips what your end-to-end specs already assert.
phase-doc-syncThe only thing allowed to write status back into the phase file. It never touches acceptance criteria or task text.
A sub-agent that runs only after every gate for the wave has passed, so the plan matches what passed.
Start (and finish) anything you can imagine.
/plugin marketplace add AyeJK/phase-runner/plugin install phase-runner@phase-runner