2 Commits

Author SHA1 Message Date
33e0c2a60c Add /execute-milestones to run milestones one by one with per-milestone steering docs
- New command /execute-milestones: executes all (or selected) milestones strictly in order; for each milestone creates a separate .steering/[date]-milestone-NN-[name]/ directory, divides its features into tasks grouped by feature, implements, validates, tests, reconciles docs, and updates milestone/roadmap statuses before starting the next
- New skill milestone-execution: per-milestone steering structure, task-division rules, gate criteria between milestones, and failure handling
- plan-milestones completion message, CLAUDE.md, README, docs/milestones/README.md, and settings.json updated

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-02 11:31:54 +02:00
92d34e2814 Add milestone planning phase between /generate-app and /add-feature
- New command /plan-milestones: generates docs/milestones/ (roadmap.md + one document per milestone with its features, acceptance criteria, and ready-to-run /add-feature commands)
- New skill milestone-planning: MVP-first vertical-slice planning rules + milestone/roadmap templates
- /add-feature: reads the feature's milestone document before planning and checks the feature off (updating milestone/roadmap status) in Step 8
- Workflow diagrams, CLAUDE.md, README, and settings.json updated for the new phase

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-02 10:14:32 +02:00
12 changed files with 655 additions and 14 deletions

View File

@ -26,6 +26,7 @@ description: Implement a new feature following existing patterns, fully autonomo
1. Read `CLAUDE.md` to grasp the overall picture of the project. 1. Read `CLAUDE.md` to grasp the overall picture of the project.
2. Review the persistent documents in the `docs/` directory to understand the relevant design philosophy and architecture. 2. Review the persistent documents in the `docs/` directory to understand the relevant design philosophy and architecture.
3. If `docs/milestones/` exists, read `docs/milestones/roadmap.md` and find the milestone document that contains this feature. Use its description, related requirements, affected screens, and acceptance criteria as the basis for planning. If the feature is not in any milestone, note that it is unplanned work and proceed.
## Step 3: Investigate Existing Patterns ## Step 3: Investigate Existing Patterns
@ -149,9 +150,14 @@ If any of the following situations occur while the implementation loop is runnin
- ✅ `docs/development-guidelines.md` — add/update any new conventions, patterns, or standards established during the feature - ✅ `docs/development-guidelines.md` — add/update any new conventions, patterns, or standards established during the feature
- ✅ `docs/glossary.md` — add/update any new domain terms introduced by the feature - ✅ `docs/glossary.md` — add/update any new domain terms introduced by the feature
3. **Consistency check**: re-read each updated document and confirm it is consistent with the other documents and with the implemented code. Fix any inconsistencies found. 3. **Update the milestone documents (if `docs/milestones/` exists)**:
- In the feature's milestone document, use the `Edit` tool to check the feature off (`[ ]` → `[x]`).
- If this was the last unchecked feature of the milestone, set the milestone's status to `Completed` (in both the milestone document and `docs/milestones/roadmap.md`), fill in its "Completion Notes", and update the roadmap's current-milestone pointer to the next milestone.
- If the feature was not part of any milestone, add it to the current milestone's document as a completed (`[x]`) feature so the plan reflects reality.
4. **Once this step completes successfully, never stop; immediately proceed to the Completion Criteria.** 4. **Consistency check**: re-read each updated document and confirm it is consistent with the other documents and with the implemented code. Fix any inconsistencies found.
5. **Once this step completes successfully, never stop; immediately proceed to the Completion Criteria.**
## Completion Criteria ## Completion Criteria
@ -159,6 +165,6 @@ This workflow completes automatically once all of the following conditions are m
- Step 5: All tasks in `tasklist.md` are complete (`[x]` or skipped for a valid reason). - Step 5: All tasks in `tasklist.md` are complete (`[x]` or skipped for a valid reason).
- Step 6: The `implementation-validator` subagent's validation passes. - Step 6: The `implementation-validator` subagent's validation passes.
- Step 7: The `test`, `lint`, and `typecheck` commands all succeed without errors. - Step 7: The `test`, `lint`, and `typecheck` commands all succeed without errors.
- Step 8: Handover notes are recorded in `tasklist.md`, and all six persistent documents in `docs/` have been reconciled with the feature (updates applied, or a skip reason noted for each). - Step 8: Handover notes are recorded in `tasklist.md`, all six persistent documents in `docs/` have been reconciled with the feature (updates applied, or a skip reason noted for each), and the feature is checked off in its milestone document (if `docs/milestones/` exists).
Until these completion criteria are met, continue to think autonomously, solve problems, and carry on the work. Until these completion criteria are met, continue to think autonomously, solve problems, and carry on the work.

View File

@ -25,6 +25,8 @@ claude
/generate-app web | flutter | winui3 /generate-app web | flutter | winui3
/plan-milestones
/add-feature /add-feature
``` ```

View File

@ -0,0 +1,149 @@
---
description: Execute milestones one by one, generating separate steering documents per milestone and implementing all of its features autonomously
---
# Execute Milestones (Fully Autonomous Milestone Execution Mode)
This command works through the milestone plan in `docs/milestones/` **one milestone at a time**. For each milestone it generates a **separate set of steering documents** under `.steering/`, divides the milestone's features into concrete tasks, implements them all, validates, tests, and reconciles the documents — then immediately moves on to the next milestone.
**Important:** This workflow is designed to run fully automatically from start to finish without user intervention. Do not ask the user for confirmation between milestones.
**Target**: `$ARGUMENTS` — optional: a milestone number (e.g. `2`), a range (e.g. `1-3`), or empty to execute **all remaining milestones in order**.
## How to Run
```bash
claude
> /execute-milestones # execute all remaining milestones one by one
> /execute-milestones 1 # execute only milestone 1
> /execute-milestones 2-3 # execute milestones 2 through 3
```
## Position in the Workflow
```
/setup-project
/define-design
/generate-app web | flutter | winui3
/plan-milestones
/execute-milestones ← you are here (alternative: /add-feature per feature)
```
## Pre-Run Check
1. Confirm `docs/milestones/roadmap.md` and at least one `docs/milestones/milestone-*.md` exist. If not, stop and tell the user to run `/plan-milestones` first.
2. Check whether the design files (`docs/design/ui-blueprint.json` etc.) exist. If they do not, warn the user and suggest running `/define-design` first. Do not silently proceed without a design spec.
## Procedure
### Step 0: Build the Execution Queue
1. Read `docs/milestones/roadmap.md` and every milestone document.
2. The execution queue is the milestones selected by `$ARGUMENTS` (all of them when empty), **excluding** milestones whose status is already `Completed`, in ascending milestone number.
3. If the queue is empty, report that all selected milestones are already completed and finish.
### Step 1: Load the Skills
1. Load the **milestone-execution skill** (`Skill('milestone-execution')`) for the per-milestone steering structure, task-division rules, and the gate criteria between milestones.
2. The **steering skill** and **development-guidelines skill** apply during implementation, exactly as in `/add-feature`.
### Step 2: Milestone Loop
**This step repeats for each milestone in the queue, strictly in order. Never start a milestone before the previous one has passed its gate (Step 2.8).**
For the current milestone `[NN] [name]`:
#### 2.1 Create the Milestone Steering Directory
Create `.steering/[YYYYMMDD]-milestone-[NN]-[kebab-case-name]/` with the three files:
- `requirements.md`
- `design.md`
- `tasklist.md`
Each milestone gets its **own** directory — never reuse or append to another milestone's steering documents.
#### 2.2 Generate the Steering Documents
Following the milestone-execution skill:
- `requirements.md`: the milestone's goal, scope, and every feature with its description, related PRD requirements, affected screens, and acceptance criteria (copied and expanded from the milestone document).
- `design.md`: the implementation approach across the milestone's features — shared components, data model changes, and order of implementation — consistent with `docs/architecture.md` and `docs/design/`.
- `tasklist.md`: the milestone's features **divided into concrete tasks, grouped by feature** (one `## Feature:` section per feature, each ending with its verification tasks). Every task must be small enough to complete in one implementation-loop iteration.
#### 2.3 Check the Design Specification
Apply `/add-feature` Step 3.5 for the milestone as a whole: read all four design files before implementation; if any feature in this milestone changes the UI, update the design files first (blueprint → tokens → brief → mapping → SVGs).
#### 2.4 Implementation Loop
Work through `tasklist.md` top to bottom using the same rules as `/add-feature` Step 5:
- Use `Skill('steering')` in **implementation mode**; follow the coding standards in `Skill('development-guidelines')`.
- Mark each task `[ ]``[x]` with the `Edit` tool as it completes.
- Exception rules A (split oversized tasks) and B (strike obsolete tasks with a reason) apply.
- **Forbidden**: skipping tasks, ending the loop with unchecked tasks, or asking the user to decide.
#### 2.5 Validate the Milestone
Use the `Task` tool to launch the `implementation-validator` subagent:
- `subagent_type`: "implementation-validator"
- `description`: "Milestone implementation validation"
- `prompt`: "Please validate the quality of all changes implemented for milestone `[NN] [name]`. The target files are `[list of implemented file paths]`. Focus on coding standards, error handling, testability, consistency with existing patterns, and whether every feature's acceptance criteria in `.steering/[dir]/requirements.md` are met."
#### 2.6 Run Automated Tests
```bash
Bash('npm test')
Bash('npm run lint')
Bash('npm run typecheck')
```
If any command fails, analyze, fix, and re-run until all pass.
#### 2.7 Retrospective and Document Reconciliation
Apply `/add-feature` Step 8 for the milestone:
1. Run `Skill('steering')` in **retrospective mode**; record handover notes in this milestone's `tasklist.md`.
2. Reconcile all six persistent documents in `docs/` with everything implemented in this milestone (updates applied, or a skip reason noted for each).
3. In the milestone document: check off every feature (`[ ]``[x]`), set the status to `Completed`, and fill in the "Completion Notes".
4. In `docs/milestones/roadmap.md`: set this milestone's status to `Completed` and move the current-milestone pointer to the next milestone in the queue (or mark the roadmap complete).
#### 2.8 Milestone Gate — then Continue
The milestone is done only when: all tasks are `[x]`, validation passed, tests/lint/typecheck are green, the six documents are reconciled, and the milestone + roadmap statuses are updated.
**Once the gate passes, never stop; immediately start Step 2 for the next milestone in the queue.** If the gate genuinely cannot be passed (external blocker), record the blocker in the milestone's `tasklist.md` and in `roadmap.md`, then stop and report — this is the only permitted early stop.
### Step 3: Final Report
When the queue is empty, report per milestone: steering directory created, features implemented, test results, and document updates.
## Completion Criteria
- Every milestone in the execution queue has status `Completed` in `docs/milestones/roadmap.md`.
- Each executed milestone has its own `.steering/[date]-milestone-[NN]-[name]/` directory with all tasks `[x]`.
- Tests, lint, and typecheck pass on the final state.
- The six persistent documents reflect everything implemented.
Completion message:
```
"Milestone execution is complete!
Executed:
✅ Milestone 01 [name] — .steering/[date]-milestone-01-[name]/ ([n] features, [m] tasks)
✅ Milestone NN [name] — .steering/[date]-milestone-NN-[name]/ ([n] features, [m] tasks)
All statuses updated in docs/milestones/roadmap.md.
Next steps:
- Review the retrospectives in each milestone's tasklist.md
- Run the app and verify the milestones end-to-end
- Re-run /plan-milestones if the remaining roadmap should change
"
```

View File

@ -26,6 +26,8 @@ claude
/generate-app web | flutter | winui3 ← you are here /generate-app web | flutter | winui3 ← you are here
/plan-milestones
/add-feature /add-feature
``` ```
@ -141,6 +143,7 @@ Generated:
Next steps: Next steps:
- Run the app and verify the shell renders - Run the app and verify the shell renders
- Run /plan-milestones to break the product into milestones with a feature list each
- Use /add-feature to implement features (they will respect the design spec) - Use /add-feature to implement features (they will respect the design spec)
- Use /update-design when a feature changes the UI - Use /update-design when a feature changes the UI
" "

View File

@ -0,0 +1,142 @@
---
description: Plan development milestones and generate milestone documents with the features for each milestone
---
# Plan Milestones (Milestone Planning Phase)
This command breaks the product down into an ordered set of **milestones** and generates milestone documents under `docs/milestones/`. Each milestone document lists the features it contains, sized so that each feature can be implemented with one `/add-feature` run.
**Planning preferences (optional)**: `$ARGUMENTS` (e.g. `/plan-milestones 3 milestones, MVP in 2 weeks, auth first`)
## How to Run
```bash
claude
> /plan-milestones
> /plan-milestones 3 milestones, MVP first, payments last
```
## Position in the Workflow
```
/setup-project
/define-design
/generate-app web | flutter | winui3
/plan-milestones ← you are here
/add-feature (once per feature, milestone by milestone)
```
## Pre-Run Check
1. Confirm the persistent documents exist. If any of these are missing, stop and tell the user to run `/setup-project` first:
- `docs/product-requirements.md`
- `docs/functional-design.md`
- `docs/architecture.md`
2. Check whether the design files (`docs/design/ui-blueprint.json` etc.) exist. If they do not, warn the user that milestones will be planned without a design spec and suggest running `/define-design` first. Continue only if the user accepts.
3. Create the milestones directory if it does not exist:
```bash
mkdir -p docs/milestones
```
## Procedure
### Step 0: Read the Inputs
Read all of the following:
- `docs/product-requirements.md` (especially user stories and priorities)
- `docs/functional-design.md`
- `docs/architecture.md`
- `docs/design/ui-blueprint.json` and `docs/design/design-brief.md` (if present)
- `docs/ideas/*` (if present)
- The planning preferences provided in `$ARGUMENTS` (if any)
### Step 1: Gather Planning Preferences (ask the user once)
If `$ARGUMENTS` does not already answer these, ask the user about the following. If the user does not provide detailed preferences, **propose a sensible default** derived from the PRD priorities and confirm it before proceeding.
- **Number of milestones** (default: 24 depending on scope)
- **MVP definition** — what is the smallest product worth releasing?
- **Priorities** — features that must come first or last
- **Constraints** — deadlines, dependencies on external systems, team capacity
Collect the answers in a single round; do not pause again until generation is complete.
### Step 2: Load the Milestone Planning Skill
Load the **milestone-planning skill** (`Skill('milestone-planning')`) for the planning rules and the milestone document template.
### Step 3: Build the Feature Inventory
Derive the complete list of features from the documents:
- Every user story / requirement in the PRD (with its priority)
- Every functional module in the functional design
- Every screen and user action in `ui-blueprint.json` (if present)
Size each feature so it can be implemented with **one `/add-feature` run**. Split anything larger; merge trivial fragments.
### Step 4: Group Features into Milestones
- **Milestone 1 is the MVP**: the smallest set of features that forms a coherent, end-to-end usable product.
- Later milestones build on earlier ones, ordered by priority and dependency (a feature never lands before something it depends on).
- Every feature belongs to **exactly one** milestone. Explicitly park out-of-scope items in a final "Later / Icebox" section of the roadmap.
### Step 5: Create the Roadmap Overview
Create `docs/milestones/roadmap.md` containing:
- A table of all milestones: number, name, goal, feature count, status (`Not started` / `In progress` / `Completed`)
- The ordering rationale (why this sequence)
- A pointer to the current milestone
- The "Later / Icebox" list of consciously deferred items
### Step 6: Create One Document per Milestone
For each milestone, create `docs/milestones/milestone-[NN]-[kebab-case-name].md` (e.g. `milestone-01-mvp.md`) following the milestone-planning skill's template. Each document lists the milestone's features, and each feature includes:
- A checkbox for status tracking (`- [ ]`)
- Description and user value
- Related PRD requirements / user stories
- Affected screens from `ui-blueprint.json` (if a design spec exists)
- Acceptance criteria
- The ready-to-run command: `/add-feature [feature name]`
### Step 7: Consistency Check
Re-read all generated files and confirm:
- Every P0/P1 requirement in the PRD is covered by a milestone (or explicitly parked in the icebox).
- Every feature appears in exactly one milestone.
- Dependencies are ordered correctly across milestones.
- Milestone 1 is a coherent, usable MVP on its own.
- Each feature name works as a `/add-feature` argument.
Fix any inconsistencies found before finishing.
## Completion Criteria
- `docs/milestones/roadmap.md` exists
- One `milestone-[NN]-[name].md` per milestone exists
- Every feature is assigned to exactly one milestone with acceptance criteria
Completion message:
```
"Milestone planning is complete!
Milestone documents created:
✅ docs/milestones/roadmap.md (overview + status)
✅ docs/milestones/milestone-01-....md (MVP)
✅ docs/milestones/milestone-NN-....md
Next steps:
- Review docs/milestones/ and adjust priorities if needed
- Run /execute-milestones to implement all milestones one by one autonomously (a separate steering directory is created per milestone)
- Or go feature by feature: run /add-feature [first feature of milestone 1]
- Either way, each feature is marked complete in its milestone document as it finishes
"
```

View File

@ -10,6 +10,8 @@
"Skill(ui-design)", "Skill(ui-design)",
"Skill(design-tokens)", "Skill(design-tokens)",
"Skill(platform-ui-generation)", "Skill(platform-ui-generation)",
"Skill(milestone-planning)",
"Skill(milestone-execution)",
"Skill(steering)" "Skill(steering)"
], ],
"deny": [], "deny": [],

View File

@ -0,0 +1,92 @@
---
name: milestone-execution
description: Guide for executing milestones one by one - creating a separate steering directory per milestone, dividing the milestone's features into tasks, and enforcing gate criteria between milestones. Use when running /execute-milestones or implementing a whole milestone in one run.
allowed-tools: Read, Write, Edit, Bash
---
# Milestone Execution Skill
This skill explains how to execute the milestone plan (`docs/milestones/`) one milestone at a time. Where `/add-feature` implements **one feature** with one steering directory, milestone execution implements **one whole milestone** per steering directory — and processes milestones strictly in roadmap order.
## Core Principles
1. **One milestone = one steering directory**: every milestone gets its own `.steering/[YYYYMMDD]-milestone-[NN]-[name]/` with its own `requirements.md`, `design.md`, and `tasklist.md`. Documents are never shared or reused between milestones.
2. **Strict order, one at a time**: milestones execute in ascending number. A milestone starts only after the previous one passed its gate. Never interleave tasks from two milestones.
3. **Features divided into tasks**: the milestone's features (from its milestone document) are broken down into concrete tasks in `tasklist.md`, grouped by feature. The milestone document stays the "what"; the steering tasklist is the "how".
4. **Same discipline as `/add-feature`**: the steering skill's implementation mode, the development guidelines, the validator subagent, and the test loop all apply per milestone.
5. **Status flows upward**: task status lives in the steering `tasklist.md`; feature and milestone status live in `docs/milestones/`. When a milestone's last task completes, check off its features, mark the milestone `Completed`, and advance the roadmap pointer.
## Steering Directory per Milestone
Naming: `.steering/[YYYYMMDD]-milestone-[NN]-[kebab-case-name]/` (e.g. `.steering/20260702-milestone-01-mvp/`).
### `requirements.md`
- Milestone goal (from the milestone document)
- In/out of scope
- One section per feature: description, related PRD requirements, affected screens, acceptance criteria
- The milestone's Definition of Done
### `design.md`
- Implementation approach across the whole milestone
- Shared components and data-model changes used by multiple features (build these first)
- Feature implementation order within the milestone, with a one-line rationale
- Consistency notes against `docs/architecture.md` and `docs/design/ui-blueprint.json`
### `tasklist.md`
Tasks are **grouped by feature**, in the implementation order chosen in `design.md`:
```markdown
# Tasklist: Milestone 01 — MVP
## Shared Foundations
- [ ] [Task that multiple features depend on, e.g. data model, shared component]
## Feature: Register account
- [ ] [Task 1: data/model layer]
- [ ] [Task 2: logic/service layer]
- [ ] [Task 3: UI per affected screen]
- [ ] [Task 4: tests for the acceptance criteria]
## Feature: Log in / log out
- [ ] ...
## Milestone Verification
- [ ] All acceptance criteria in requirements.md confirmed
- [ ] npm test / lint / typecheck pass
## Post-Implementation Retrospective
_Filled at the end: completion date, plan vs. actual, lessons learned._
```
## How to Divide a Feature into Tasks
- 38 tasks per feature; each completable in **one implementation-loop iteration**.
- Slice along the natural layers the feature touches: data/model → logic/service → UI (one task per affected screen) → tests.
- Every feature's section ends with a task that verifies its acceptance criteria.
- Tasks that unblock several features go into a "Shared Foundations" section at the top — never duplicated per feature.
## Gate Criteria Between Milestones
A milestone passes its gate only when **all** of the following hold. Only then may the next milestone start:
- [ ] Every task in the milestone's `tasklist.md` is `[x]` (or struck with a technical reason).
- [ ] The `implementation-validator` subagent's validation passed.
- [ ] `npm test`, `npm run lint`, `npm run typecheck` all succeed.
- [ ] The six persistent documents in `docs/` are reconciled with the milestone's changes.
- [ ] In `docs/milestones/`: every feature is checked off, the milestone status is `Completed` with Completion Notes, and `roadmap.md` points to the next milestone.
## Failure Handling
- **A task fails repeatedly**: split it (exception rule A) or re-approach via `design.md`; do not skip it.
- **A feature turns out to be unimplementable as specified**: update the milestone document and `requirements.md` with the revised scope and reason, then continue — the plan must reflect reality.
- **An external blocker stops the milestone** (missing credential, unavailable service, a decision only the user can make): record the blocker in the milestone's `tasklist.md` and in `roadmap.md` (status stays `In progress`), then stop and report. This is the **only** permitted early stop; never silently skip to the next milestone, because later milestones depend on earlier ones.
## Consistency Checklist
Before declaring a milestone (or the whole run) complete:
- [ ] Each executed milestone has exactly one steering directory, named `[date]-milestone-[NN]-[name]`.
- [ ] Every feature of the milestone appears as a section in that `tasklist.md`.
- [ ] Feature checkboxes in the milestone document match the completed work.
- [ ] `roadmap.md` statuses and current-milestone pointer are correct.
- [ ] No task or feature from a later milestone was implemented early.

View File

@ -0,0 +1,80 @@
---
name: milestone-planning
description: Guide for planning development milestones and generating milestone documents with a feature breakdown. Use when planning milestones, a release roadmap, or deciding implementation order under docs/milestones/.
allowed-tools: Read, Write, Edit
---
# Milestone Planning Skill
This skill explains how to break a product into ordered milestones and produce milestone documents under `docs/milestones/`. The documents are the bridge between the specification (`docs/`) and implementation (`/add-feature`): every feature in every milestone is sized to be implemented with **one `/add-feature` run**.
## Core Principles
1. **MVP first**: Milestone 1 is the smallest coherent, end-to-end usable product. Not a layer (e.g. "all the models"), but a vertical slice a user could actually use.
2. **Vertical slices**: Each feature cuts through UI → logic → data. Avoid horizontal milestones like "backend milestone" / "frontend milestone".
3. **One feature = one `/add-feature` run**: If a feature needs more than one steering directory to implement, split it. If it is a one-line change, merge it into a neighbor.
4. **Dependency order**: A feature never lands in an earlier milestone than something it depends on.
5. **Exactly-once assignment**: Every feature belongs to exactly one milestone. Deliberately deferred items go to the roadmap's "Later / Icebox" — nothing silently disappears.
6. **Living documents**: Milestone documents track status. `/add-feature` checks off a feature (`[ ]``[x]`) when it completes, and the roadmap status is updated when a milestone finishes.
## Inputs
Before planning, read:
- `docs/product-requirements.md` — user stories, priorities (P0/P1/P2), success metrics
- `docs/functional-design.md` — functional modules and data flows
- `docs/architecture.md` — technical constraints and dependencies
- `docs/design/ui-blueprint.json` (if present) — screens and user actions
- `docs/ideas/*` (if present)
## Outputs
```
docs/milestones/
├── roadmap.md # Overview: milestone table, ordering rationale, icebox
├── milestone-01-[name].md # MVP
├── milestone-02-[name].md
└── milestone-NN-[name].md
```
File naming: `milestone-[NN]-[kebab-case-name].md` (e.g. `milestone-01-mvp.md`, `milestone-02-collaboration.md`).
Use the structure in `template.md` for each milestone document.
## How to Slice Features
A well-sized feature:
- Delivers observable user value (or unblocks one that does)
- Touches one primary screen/flow (may touch shared components)
- Has 37 acceptance criteria
- Can be described in one sentence starting with a verb ("Edit user profile", "Filter tasks by tag")
- Works verbatim as a command argument: `/add-feature Edit user profile`
Too big (split it): "User management" → "Register account", "Log in / log out", "Edit user profile", "Reset password".
Too small (merge it): "Change button color" → fold into the feature that owns that screen.
## How to Group Milestones
1. Tag every feature with its PRD priority and its dependencies.
2. Milestone 1 (MVP): the minimal dependency-closed set of P0 features that forms a usable product walk-through (a user can start, do the core job, and finish).
3. Following milestones: group remaining features by theme and priority, keeping each milestone a meaningful release on its own ("after milestone N ships, the user can additionally …").
4. Prefer 24 milestones with 38 features each. More than ~8 features in one milestone usually means it should be split.
## Status Tracking Rules
- Feature status lives **only** in the feature checkbox of its milestone document.
- Milestone status (`Not started` / `In progress` / `Completed`) lives in both the milestone document header and the roadmap table — keep them in sync.
- `/add-feature` Step 8 updates the feature checkbox and, when the last feature of a milestone completes, the milestone and roadmap statuses.
- Re-planning (adding/moving/removing features) must update both the milestone document(s) and `roadmap.md` in the same change.
## Consistency Checklist
Before finishing:
- [ ] Every P0/P1 PRD requirement maps to a feature in some milestone (or is explicitly in the icebox).
- [ ] Every feature appears in exactly one milestone.
- [ ] No feature precedes one of its dependencies.
- [ ] Milestone 1 is a usable end-to-end product on its own.
- [ ] Every feature has acceptance criteria and a ready-to-run `/add-feature` command line.
- [ ] `roadmap.md` table matches the milestone documents (names, counts, statuses).

View File

@ -0,0 +1,88 @@
# Milestone Document Template
Use this structure for each `docs/milestones/milestone-[NN]-[name].md`.
```markdown
# Milestone [NN]: [Name]
**Status**: Not started | In progress | Completed
**Goal**: [One sentence: what the user can do after this milestone that they could not before]
## Scope
### In Scope
- [Theme or capability included in this milestone]
### Out of Scope
- [Explicitly excluded item] → [where it lives instead: milestone NN / icebox]
## Dependencies
- [What must exist before this milestone can start: previous milestone, external system, decision]
## Features
> One `/add-feature` run per feature. Check off each feature when its run completes.
- [ ] [Feature 1 name]
- [ ] [Feature 2 name]
- [ ] [Feature 3 name]
### Feature: [Feature 1 name]
- **Description**: [What it does and the user value, 13 sentences]
- **Related requirements**: [PRD user story / requirement IDs or headings]
- **Affected screens**: [screen ids from ui-blueprint.json, or "n/a"]
- **Acceptance criteria**:
- [Criterion 1]
- [Criterion 2]
- [Criterion 3]
- **Command**: `/add-feature [Feature 1 name]`
### Feature: [Feature 2 name]
- **Description**: ...
- **Related requirements**: ...
- **Affected screens**: ...
- **Acceptance criteria**:
- ...
- **Command**: `/add-feature [Feature 2 name]`
## Definition of Done
- [ ] All features above are checked off
- [ ] `npm test`, `npm run lint`, `npm run typecheck` pass
- [ ] Persistent documents in `docs/` are reconciled with all features
- [ ] [Milestone-specific criterion, e.g. "demo flow X→Y→Z works end-to-end"]
## Completion Notes
_Filled in when the milestone completes: completion date, deviations from plan, lessons learned._
```
# Roadmap Template
Use this structure for `docs/milestones/roadmap.md`.
```markdown
# Development Roadmap
**Current milestone**: [NN — name]
## Milestones
| # | Name | Goal | Features | Status |
|---|------|------|----------|--------|
| 01 | [name] | [one-line goal] | [count] | Not started / In progress / Completed |
| 02 | [name] | [one-line goal] | [count] | Not started |
## Ordering Rationale
[Why this sequence: MVP definition, dependency chains, priority decisions made with the user]
## Later / Icebox
Consciously deferred — revisit when re-planning:
- [Deferred item] — [why deferred]
```

View File

@ -86,6 +86,11 @@ Define "what to build" and "how to build it" for the entire application:
- **screens/\*.svg** - Visual wireframes (references only) - **screens/\*.svg** - Visual wireframes (references only)
- Created by `/define-design`, updated by `/update-design`, consumed by `/generate-app` and `/add-feature` - Created by `/define-design`, updated by `/update-design`, consumed by `/generate-app` and `/add-feature`
#### Milestone Documents (`docs/milestones/`)
- **roadmap.md** - Milestone overview: table, ordering rationale, current milestone, icebox
- **milestone-[NN]-[name].md** - One per milestone: goal, scope, and the features it contains (each sized for one `/add-feature` run)
- Created by `/plan-milestones`; `/add-feature` checks features off as it completes them
### Work-Unit Documents (`.steering/`) ### Work-Unit Documents (`.steering/`)
Define "what to do this time" for a specific development task: Define "what to do this time" for a specific development task:
@ -97,8 +102,8 @@ Define "what to do this time" for a specific development task:
### Claude Code Configuration (`.claude/`) ### Claude Code Configuration (`.claude/`)
- `.claude/agents/` - Subagent definitions (doc-reviewer, implementation-validator) - `.claude/agents/` - Subagent definitions (doc-reviewer, implementation-validator)
- `.claude/commands/` - Slash commands (setup-project, define-design, generate-app, update-design, add-feature, review-docs) - `.claude/commands/` - Slash commands (setup-project, define-design, generate-app, update-design, plan-milestones, execute-milestones, add-feature, review-docs)
- `.claude/skills/` - Task-specific skills (prd-writing, functional-design, architecture-design, repository-structure, development-guidelines, glossary-creation, ui-design, design-tokens, platform-ui-generation, steering) - `.claude/skills/` - Task-specific skills (prd-writing, functional-design, architecture-design, repository-structure, development-guidelines, glossary-creation, ui-design, design-tokens, platform-ui-generation, milestone-planning, milestone-execution, steering)
## Development Process ## Development Process
@ -109,7 +114,10 @@ Define "what to do this time" for a specific development task:
3. Define the UI/UX design with `/define-design` (creates `docs/design/`) 3. Define the UI/UX design with `/define-design` (creates `docs/design/`)
4. Review and refine the UI/UX with `/update-design` (or re-run `/define-design`) until approved — before generating code 4. Review and refine the UI/UX with `/update-design` (or re-run `/define-design`) until approved — before generating code
5. Generate the initial app with `/generate-app web | flutter | winui3` 5. Generate the initial app with `/generate-app web | flutter | winui3`
6. Implement features with `/add-feature [feature]` 6. Plan milestones with `/plan-milestones` (creates `docs/milestones/` with the features for each milestone)
7. Implement, either way:
- `/execute-milestones` — execute all milestones one by one autonomously (one steering directory per milestone), or
- `/add-feature [feature]` — one feature at a time, milestone by milestone
### Day-to-Day Usage ### Day-to-Day Usage
@ -129,6 +137,12 @@ Define "what to do this time" for a specific development task:
> /generate-app web > /generate-app web
> /update-design add a profile screen > /update-design add a profile screen
# Milestone planning and execution
> /plan-milestones
> /plan-milestones 3 milestones, MVP first
> /execute-milestones
> /execute-milestones 1
# Detailed review (when a detailed report is needed) # Detailed review (when a detailed report is needed)
> /review-docs docs/product-requirements.md > /review-docs docs/product-requirements.md
``` ```

View File

@ -13,7 +13,7 @@ https://github.com/GenerativeAgents/claude-code-book
How a project goes from idea to working code with this boilerplate: How a project goes from idea to working code with this boilerplate:
``` ```
Idea → /setup-project → /define-design → refine design → /generate-app → /add-feature (repeat) Idea → /setup-project → /define-design → refine design → /generate-app → /plan-milestones → /add-feature (repeat)
``` ```
### Step 1 — Write down your idea ### Step 1 — Write down your idea
@ -42,19 +42,37 @@ This is the key design-decision gate: iterate on the design while it is still ch
Scaffolds the app shell from the approved design: theme (from tokens), routes, screens, and Scaffolds the app shell from the approved design: theme (from tokens), routes, screens, and
reusable components. No feature logic yet. reusable components. No feature logic yet.
### Step 6 — Implement features: `/add-feature <feature>` ### Step 6 — Plan milestones: `/plan-milestones`
A fully autonomous loop, one feature at a time. Each run: Breaks the product into an ordered set of milestones and generates `docs/milestones/`:
a `roadmap.md` overview plus one document per milestone listing **the features it contains**
each sized for exactly one `/add-feature` run, with acceptance criteria and a ready-to-run command.
Milestone 1 is the MVP; later milestones build on it by priority and dependency.
### Step 7 — Implement the milestones
Two ways to work through the plan:
**Option A — execute whole milestones: `/execute-milestones`**
Runs all remaining milestones **one by one, autonomously**. For each milestone it creates a
**separate steering directory** (`.steering/[date]-milestone-[NN]-[name]/`), divides the
milestone's features into concrete tasks grouped by feature, implements them all, validates,
tests, reconciles the docs, and marks the milestone completed — then immediately starts the next
milestone. Takes an optional target (`/execute-milestones 1` or `/execute-milestones 2-3`).
**Option B — one feature at a time: `/add-feature <feature>`**
A fully autonomous loop, one feature per run. Each run:
1. Creates `.steering/[YYYYMMDD]-[feature]/` (requirements, design, tasklist) 1. Creates `.steering/[YYYYMMDD]-[feature]/` (requirements, design, tasklist)
2. Reads the design spec first — and updates it first if the feature changes the UI 2. Reads the feature's milestone document and the design spec first — and updates the design first if the feature changes the UI
3. Implements every task in `tasklist.md`, checking items off as it goes 3. Implements every task in `tasklist.md`, checking items off as it goes
4. Validates quality with the `implementation-validator` subagent 4. Validates quality with the `implementation-validator` subagent
5. Runs `npm test`, `npm run lint`, `npm run typecheck` until green 5. Runs `npm test`, `npm run lint`, `npm run typecheck` until green
6. Records a retrospective and reconciles all six `docs/` documents with the feature 6. Records a retrospective, reconciles all six `docs/` documents, and checks the feature off in its milestone document
### Step 7 — Repeat and maintain ### Step 8 — Repeat and maintain
- More features → `/add-feature <feature>` (again and again) - Remaining milestones → `/execute-milestones`, or feature by feature with `/add-feature <feature>`
- UI changes → `/update-design <change>` first, then `/add-feature` - UI changes → `/update-design <change>` first, then `/add-feature`
- Re-planning → re-run `/plan-milestones` or edit `docs/milestones/` in conversation
- Document quality checks → `/review-docs <path>` - Document quality checks → `/review-docs <path>`
**A feature is "done" when**: all tasks in its tasklist are `[x]`, validation passes, **A feature is "done" when**: all tasks in its tasklist are `[x]`, validation passes,
@ -91,7 +109,9 @@ claude
> /define-design > /define-design
> /update-design [refinement] # repeat until the design is approved > /update-design [refinement] # repeat until the design is approved
> /generate-app web # or flutter | winui3 > /generate-app web # or flutter | winui3
> /add-feature [feature name] > /plan-milestones
> /execute-milestones # all milestones one by one, or:
> /add-feature [feature name] # one feature at a time
``` ```
See [Development Workflow (Step by Step)](#development-workflow-step-by-step) above for what each step does. See [Development Workflow (Step by Step)](#development-workflow-step-by-step) above for what each step does.
@ -104,5 +124,7 @@ See [Development Workflow (Step by Step)](#development-workflow-step-by-step) ab
| `/define-design` | Create the UI/UX design spec under `docs/design/` | `/define-design` | | `/define-design` | Create the UI/UX design spec under `docs/design/` | `/define-design` |
| `/update-design` | Refine the design before generation, or update it when a feature changes the UI | `/update-design add a profile screen` | | `/update-design` | Refine the design before generation, or update it when a feature changes the UI | `/update-design add a profile screen` |
| `/generate-app` | Scaffold the initial app for a target platform | `/generate-app web` | | `/generate-app` | Scaffold the initial app for a target platform | `/generate-app web` |
| `/plan-milestones` | Plan milestones and generate milestone documents with the features for each | `/plan-milestones 3 milestones, MVP first` |
| `/execute-milestones` | Execute milestones one by one, with separate steering documents per milestone | `/execute-milestones` |
| `/add-feature` | Implement a feature end-to-end (autonomous) | `/add-feature User profile editing` | | `/add-feature` | Implement a feature end-to-end (autonomous) | `/add-feature User profile editing` |
| `/review-docs` | Detailed document review via subagent | `/review-docs docs/architecture.md` | | `/review-docs` | Detailed document review via subagent | `/review-docs docs/architecture.md` |

41
docs/milestones/README.md Normal file
View File

@ -0,0 +1,41 @@
# Milestone Documents (`docs/milestones/`)
This directory holds the project's **milestone plan**: an ordered breakdown of the product into releases, with the features for each milestone. It is created by `/plan-milestones` and kept up to date by `/add-feature`.
## Structure
```
docs/milestones/
├── roadmap.md # Overview: milestone table, ordering rationale, icebox
├── milestone-01-[name].md # Milestone 1 (the MVP)
├── milestone-02-[name].md
└── milestone-NN-[name].md
```
## File purposes
### `roadmap.md`
The overview: a table of all milestones (goal, feature count, status), the ordering rationale, a pointer to the current milestone, and a "Later / Icebox" list of consciously deferred items.
### `milestone-[NN]-[name].md`
One document per milestone. Contains the milestone's goal, scope, dependencies, and its **feature list** — each feature sized for exactly one `/add-feature` run, with description, related PRD requirements, affected screens, acceptance criteria, and the ready-to-run command.
## Status tracking
- Each feature has a checkbox in its milestone document; `/add-feature` checks it off (`[ ]``[x]`) when the feature completes.
- Milestone status (`Not started` / `In progress` / `Completed`) is kept in sync between the milestone document and the roadmap table.
## Workflow
```
/setup-project → product/architecture docs
/define-design → UI/UX design spec
/generate-app → initial app shell
/plan-milestones → creates the files above
/execute-milestones → implements all milestones one by one (one steering directory per milestone), updating statuses here
/add-feature → implements one feature, then checks it off here
```
## Status
This directory is populated by running `/plan-milestones`. Until then, the files above do not exist.