Remove /generate-app: app shell is now milestone 01 of the plan

The initial app is no longer generated by a separate command. /plan-milestones
now always makes milestone 01 'App Shell Generation' (target platform asked in
the single question round): theme from design tokens, one screen per blueprint
entry, routes, reusable components — no feature logic — plus Playwright setup
and the e2e/app-shell.spec.ts smoke spec. It is executed like any other
milestone via /execute-milestones (which loads platform-ui-generation for it)
or /add-feature. Milestone 02 becomes the MVP core. All workflow diagrams,
skills, docs READMEs, CLAUDE.md, and README updated; docs/design README also
gains the screen-inventory.md entry.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-02 14:09:50 +02:00
parent 626986731a
commit 3beed8fc8e
13 changed files with 76 additions and 215 deletions

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:
```
Idea → /setup-project → /define-design → refine design → /generate-app → /plan-milestones → /execute-milestones (phase by phase)
Idea → /setup-project → /define-design → refine design → /plan-milestones → /execute-milestones (phase by phase; milestone 01 generates the app)
```
### Step 1 — Write down your idea
@ -41,18 +41,17 @@ This is the key design-decision gate: iterate on the design while it is still ch
- Re-run `/define-design` — change the overall direction
- Repeat until you approve the design (especially `ui-blueprint.json`)
### Step 5 — Generate the initial app: `/generate-app web | flutter | winui3`
Scaffolds the app shell from the approved design: theme (from tokens), routes, screens, and
reusable components. No feature logic yet.
### Step 6 — Plan milestones: `/plan-milestones`
### Step 5 — Plan milestones: `/plan-milestones`
Breaks the product into **phases** and milestones, and generates `docs/milestones/`:
a `roadmap.md` overview plus **one file per phase** (`phase1-milestones.md`,
`phase2-milestones.md`, …). Each phase file lists its milestones and **the features they
contain** — each feature sized for exactly one `/add-feature` run, with acceptance criteria and a
ready-to-run command. Phase 1 delivers the MVP; later phases build on it by priority and dependency.
ready-to-run command. **Milestone 01 is always "App Shell Generation"**: it scaffolds the initial
app from the approved design (theme from tokens, one screen per blueprint entry, routes, reusable
components — no feature logic) plus the Playwright smoke spec; there is no separate generate-app
step. Phase 1 delivers the MVP; later phases build on it by priority and dependency.
### Step 7 — Implement the milestones
### Step 6 — Implement the milestones
Two ways to work through the plan:
@ -74,7 +73,7 @@ A fully autonomous loop, one feature per run. Each run:
5. Writes Playwright E2E tests for the feature's acceptance criteria, then runs `npm test`, `npm run lint`, `npm run typecheck`, and `npm run test:e2e` until green
6. Records a retrospective, reconciles all six `docs/` documents, and checks the feature off in its phase file
### Step 8 — Repeat and maintain
### Step 7 — Repeat and maintain
- Remaining phases → `/execute-milestones <next phase file>`, or feature by feature with `/add-feature <feature>`
- UI changes → `/update-design <change>` first, then `/add-feature`
- Re-planning → re-run `/plan-milestones` or edit `docs/milestones/` in conversation
@ -87,7 +86,7 @@ in sync with the code.
## E2E Testing (Playwright)
Every verification step in this boilerplate includes end-to-end tests. The standard verification
sequence — used by `/add-feature`, `/execute-milestones`, and `/generate-app` — is:
sequence — used by `/add-feature` and `/execute-milestones` — is:
```bash
npm test # unit tests
@ -103,7 +102,7 @@ How it works (defined in the `e2e-testing` skill):
failure), and adds the `test:e2e` script.
- **Tests are derived from acceptance criteria**: each feature gets `e2e/[feature].spec.ts` with
one test per acceptance criterion, written before verification runs.
- **The app shell has a smoke spec**: `/generate-app` creates `e2e/app-shell.spec.ts`, which
- **The app shell has a smoke spec**: the App Shell milestone (milestone 01) creates `e2e/app-shell.spec.ts`, which
checks that the shell renders and every route in `ui-blueprint.json` navigates.
- **Blueprint-driven locators**: tests navigate by the blueprint's routes and use semantic
locators (`getByRole`, `getByLabel`) — no CSS/XPath tied to implementation details, no fixed waits.
@ -150,8 +149,7 @@ claude
> /setup-project
> /define-design
> /update-design [refinement] # repeat until the design is approved
> /generate-app web # or flutter | winui3
> /plan-milestones
> /plan-milestones # milestone 01 = app shell generation
> /execute-milestones phase1-milestones.md # one phase at a time, or:
> /add-feature [feature name] # one feature at a time
```
@ -165,8 +163,7 @@ See [Development Workflow (Step by Step)](#development-workflow-step-by-step) ab
| `/setup-project` | Create the six persistent documents automatically | `/setup-project` |
| `/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` |
| `/generate-app` | Scaffold the initial app for a target platform | `/generate-app web` |
| `/plan-milestones` | Plan phases and milestones; generates one `phase[N]-milestones.md` per phase | `/plan-milestones 2 phases, MVP first` |
| `/plan-milestones` | Plan phases and milestones; generates one `phase[N]-milestones.md` per phase (milestone 01 = App Shell Generation) | `/plan-milestones 2 phases, MVP first` |
| `/execute-milestones` | Execute one phase file: its milestones one by one, with separate steering documents per milestone (file argument required) | `/execute-milestones phase1-milestones.md` |
| `/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` |