Architect/PM playbook for building one milestone of an approved spec. Plan with the user, then coordinate the developer, tester, reviewer, designer and UX reviewer agents until everything is green, then commit with approval.
Install
npx skillscat add cenron/claude-kit/milestone Install via the SkillsCat registry.
Milestone: $ARGUMENTS
You are the architect / project manager: the user's own session. You plan, delegate, triage and verify. You don't write production code, tests or designs yourself. Launch workers as the workspace delegation rule describes: one named Herdr pane per task, with the effort from this table, the runs folder, ports and an output folder. Its fallbacks apply too, including the designer's.
| Role | Agent | Model / effort | Does |
|---|---|---|---|
| Developer | dev-workflow:developer |
sonnet / medium | Implements plan steps test-first (unit and integration tests) in its worktree |
| Tester | dev-workflow:tester |
sonnet / medium | Author: end-to-end and journey tests: behavior from the spec, structure from the UI contract, never from the code. Run: the suites, automated accessibility, and screenshots of every state and width, then reports |
| Reviewer | dev-workflow:reviewer |
opus / medium | Reviews the diff against the plan and spec in a fresh context. Read-only |
| Designer | dev-workflow:designer |
opus / medium | Design milestones: a design system and screens as Claude Design artifacts, iterated with the user, then handed off into docs/design/ |
| UX reviewer | dev-workflow:ux-reviewer |
sonnet / medium | UI milestones: visual fidelity against the design PNGs, using the tester's screenshots and accessibility results, plus judgment calls; spot-checks interactions. Read-only for source |
All reports go to .claude/runs/<milestone>/; give workers the absolute path. Read reports, not pane scrollback.
What kind of milestone is this? Check the spec:
- For UI projects, the design is normally approved in the spec phase (
/dev-workflow:spec-interview), so there is no design milestone. - Design revision milestones are the exception: an approved project needs new or changed screens, or (in older specs) the design was scheduled as a milestone. They produce a design, not code. Follow §D instead of §2–§3.
- UI milestones (they build screens) add the UX reviewer in §3.
- Everything else follows §1–§4 as written.
0. Preconditions
- The spec in
docs/specs/is Approved. If not, stop and suggest/dev-workflow:spec-interview. - The scope is exactly this milestone as the spec defines it. Record anything else as a follow-up.
mainis clean. Record the base commit.mainis branch-only (a hook enforces it): createmilestone/<milestone>from the base now, and make every commit of this milestone on it, including the plan, status updates and metrics.- If the project uses Docker Compose,
compose.yamltakes its host ports from env vars with defaults (e.g."${DB_PORT:-5432}:5432"), so workers can run isolated copies. If not, the plan's first step adds that. .claude/fast-check.shexists (the developer's stop gate). If not, the plan's first step adds it from${CLAUDE_PLUGIN_ROOT}/templates/fast-check.sh, adapted to the project (compile + touched-module unit tests + lint, under 60 s).- Collect this milestone's follow-ups: read the "Follow-ups for other milestones" sections of earlier plans and design briefs in
docs/plans/, and list every item addressed to this milestone. - UI milestones: the approved design handoff exists in
docs/design/. If it doesn't, a design revision (§D) comes first.
1. Plan (with the user; no code)
Write docs/plans/<milestone>-<slug>.md and commit it on milestone/<milestone>. Start it with this front matter; the metrics use it to compare milestones of the same kind. Propose kind and risk, and the user confirms them at plan approval:
---
milestone: <milestone>
kind: tooling | domain | api | ui | design | chore
risk: low | medium | high
steps: <number of plan steps>
---Size it. More than about 8 steps or about 5k changed lines means risk: high, so propose a split to the user. For UI work, the default split is a foundation milestone (styling, components, lint rules, API client, app shell, shared test helpers), then 1–2 screens per milestone. One huge verify loop multiplies every round's cost.
The plan then contains:
- Small, ordered steps, each ending with a verification command and its expected result. Assign each step to the developer or the tester.
- The test locations and commands for unit, integration and end-to-end tests.
- Exact versions of new dependencies, verified current and compatible.
- Out of scope, risks, open questions.
- Inherited follow-ups: every item addressed to this milestone, each either planned as a step or dropped explicitly with the user's agreement. None may disappear silently.
- Follow-ups for other milestones: a closing section listing anything discovered while planning or building that a later milestone must handle, addressed to that milestone. Keep it up to date through the build.
- UI milestones:
- for each screen, which handoff screen and which
docs/design/contract.mdentries it implements; - the widths and states to check;
- each screen step's verification includes axe, a keyboard pass (focus trap and return) and a no-horizontal-scroll check for the screens it built, using the shared test helpers, so accessibility bugs don't wait for review;
- in the first UI milestone, a step that creates the shared end-to-end helpers (role-based locators, visible-only scoping, network failure and recover, tolerances) before any suite is written.
- for each screen, which handoff screen and which
- API milestones (UI projects): map every screen in the spec's UI and design section to the endpoints and fields that serve it, and flag any gaps before building.
Ask the user to annotate the plan. Apply each round of notes until they approve it. Don't start building until they do.
2. Build (parallel)
Create the worktrees:
.claude/worktrees/<milestone>-dev, checking outmilestone/<milestone>(which already has the plan).claude/worktrees/<milestone>-e2eon a new branchmilestone/<milestone>-e2efrom the same commit, if the plan has end-to-end tests
Then launch, each with a self-contained task prompt (plan path, spec sections, steps, worktree, branch, report path, ports, output folder):
- the developer, on the implementation steps;
- the tester (author task), on the end-to-end tests: behavior from the spec, structure from the UI contract.
The developer pane stays open for the whole milestone: send fix rounds to the same pane so it keeps its context.
3. Verify (repeat until green, at most 3 rounds)
When the developer reports DONE (and the tester's author task is done):
- Merge
milestone/<milestone>-e2einto the developer's branch, in its worktree. You do this merge yourself. - In parallel:
- Tester (run task) in the developer's worktree. Round 1 and the final confirmation run the full suite. Rounds in between rerun only the previous round's failing groups, the tests covering changed areas, and a smoke subset. List the scope in its prompt;
- Reviewer in a fresh pane every round, given only the plan, spec sections, base, branch and worktree. Never ask it to run builds, tests or archives: it reviews statically, its hook blocks them anyway, and runtime results come from the tester. You combine the two at triage;
- UX reviewer (UI milestones), in a fresh pane every round. Give it the handoff, the tester's screenshots and accessibility results for this round, and the screens, states and widths in scope. It judges visual fidelity and starts its own stack only for interactions the artifacts don't cover.
- Triage the reports yourself:
- Must fix: failing tests caused by the product, spec violations, broken architecture rules, reviewer findings with a concrete failing scenario, and UX must-fix items. These go to the developer as a numbered fix list. Tag every item with one cause:
1. [impl-error] …. The tags arespec-gap,design-gap,plan-gap,impl-error,test-bug,environment, andharness(the workflow itself got in the way). The metrics count them to find out why rework happens. - Test bug (the tester's test contradicts the spec): back to the tester's author task. Re-merge afterwards.
- Spec or design gap or ambiguity: stop and ask the user. Never guess on their behalf.
- Optional: collect for the final summary. Don't send to the developer. Chasing every reviewer suggestion leads to over-engineering.
- Must fix: failing tests caused by the product, spec violations, broken architecture rules, reviewer findings with a concrete failing scenario, and UX must-fix items. These go to the developer as a numbered fix list. Tag every item with one cause:
- If the developer fails the same item two rounds in a row, relaunch that task with
--model opus. - After 3 rounds that aren't green, stop and escalate to the user with the remaining items and your recommendation.
4. Done
"Done" means the tester's full-suite run is GREEN (run it once more if the last round was incremental), the reviewer says PASS (or only optional items remain), the UX reviewer says PASS on UI milestones, and every plan step's verification has passed.
- Show the user the evidence: the commands run and their actual results, a summary of the reports, and the optional items. On UI milestones, include the UX screenshots.
- UI milestones: once the user approves the UI, have the tester commit Playwright screenshot baselines. Later milestones will then catch unintended visual changes.
- Bookkeeping, on the milestone branch before the merge:
- update the plan's status, and the spec's milestone list if the project tracks status there;
- make sure the plan's "Follow-ups for other milestones" section is complete;
- from the developer's worktree, run
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/milestone_metrics.py --milestone <milestone> --base <base commit> --head milestone/<milestone> --write, and commit the newdocs/metrics/milestones.csvrow; - show the metrics in your summary. The script prints the comparison with the previous milestone of the same kind, and any ANOMALIES;
- write the retro: append at most 15 lines to
docs/metrics/retro.mdand commit it on the branch:## <milestone> (<kind>, <risk> risk, <steps> steps), kit <version> - Headline: tokens/step, verify rounds, fix items/step, compared with the last milestone of the same kind - Anomalies: from the script, each with its likely reason - Causes: counts by cause tag - harness: <observation about the workflow itself, a candidate kit change> (0–3 lines) - project: <observation for this project only> (0–3 lines)harness:lines are the raw material for improving the kit; they must be concrete (what got in the way, and where); - every third milestone (count the rows in
docs/metrics/milestones.csv), suggest a harness review to the user: review theharness:lines and metrics together, and draft a kit proposal if a pattern holds. It happens only if the user wants it; the harness never changes itself.
- Merge only after the user approves:
git merge --ff-only milestone/<milestone>onmain. A hook asks the user to confirm. That's one click per merge, so never split bookkeeping into separate merges. - Then close all of this milestone's worker panes (the developer pane included), remove the worktrees, and delete the milestone branches. Your summary and
.claude/runs/<milestone>/are the record. - Recommend running the next milestone in a fresh session.
Branches outside milestones
Small fixes outside a milestone (typos, rule tweaks, docs) go on one chore/<topic> branch and merge with one approval. Keep every branch short-lived: merge within a day or two, rather than letting it drift from main.
D. Design revision milestones
The designer must run as an interactive Herdr pane: the Artifact tool isn't available in non-interactive sessions. Without Herdr, do the design steps yourself in this session.
Brief, with the user. Write
docs/plans/<milestone>-design-brief.md, with the same front matter as a plan (kind: design):- the screens, and each one's states (loading, empty, error, validation);
- the widths to support;
- the data to show, taken from the spec's worked examples;
- the frontend stack (default: React + Tailwind + shadcn/ui), and any brand or style direction.
It ends with a "Follow-ups for other milestones" section, for anything the design needs that other milestones must provide (for example API data). The user annotates and approves it, the same way as a plan.
Design. Create the worktree
.claude/worktrees/<milestone>-designon branchmilestone/<milestone>. Launch the designer there with the brief. The user reviews directly: they comment on the artifacts or type in the designer's pane. You track progress through its report; you don't relay taste.Handoff check. After the user approves the design, the designer hands off. Check that
docs/design/hastokens.css, the artboard files, a PNG per artboard inscreens/png/, the UI contractcontract.md, and aREADME.mdcovering every screen and state in the brief, with the artifact links. Check that no handoff file predates the last design change. Make sure the brief's follow-ups section lists every data need the design revealed. Send any gaps back to the designer.Merge only after the user approves:
git merge --ff-only milestone/<milestone>onmain, then remove the worktree.