ken/claudecode-boilerplate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Ken Yasue
2026-07-02 14:09:50 +02:00
parent 626986731a
commit 3beed8fc8e
13 changed files with 76 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.claude/commands/define-design.md
View File

@ -23,11 +23,9 @@ claude
↓
/define-design ← you are here
↓
/generate-app web | flutter | winui3
/plan-milestones (milestone 01 = app shell, generated from this design)
↓
/plan-milestones
↓
/add-feature
/execute-milestones phase1-milestones.md (or /add-feature per feature)
```
## Pre-Run Check
@ -202,7 +200,7 @@ Design documents created:
Next steps:
- Review docs/design/ (especially ui-blueprint.json)
- Refine the design with /update-design <change> (or re-run /define-design) until approved — do this BEFORE generating code
- Run /generate-app web | flutter | winui3 to generate the initial app
- Run /plan-milestones — milestone 01 (App Shell Generation) scaffolds the app from this design
- Use /update-design when a feature changes the UI
- Use /add-feature to add features (it respects the design spec)
"

3
.claude/commands/execute-milestones.md
View File

@ -29,8 +29,6 @@ claude
↓
/define-design
↓
/generate-app web | flutter | winui3
↓
/plan-milestones
↓
/execute-milestones phase1-milestones.md ← you are here (one phase file per run)
@ -58,6 +56,7 @@ claude
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`.
3. **If the milestone is the App Shell milestone (milestone 01)**, additionally load the **platform-ui-generation skill** (`Skill('platform-ui-generation')`) for the design→code mapping rules of the target platform recorded in the milestone. Its E2E verification is the `e2e/app-shell.spec.ts` smoke spec (shell renders, every blueprint route navigates).
### Step 2: Milestone Loop

154
.claude/commands/generate-app.md
View File

@ -1,154 +0,0 @@
---
description: Generate the initial application for a target platform (web | flutter | winui3) from the design spec
---
# Generate App (Platform App Generation Phase)
This command generates the **initial application** for the selected target platform, using the design files in `docs/design/` as the source of truth. It creates the app shell, theme, routes, screens, and reusable components — **not** feature logic. Features are added later with `/add-feature`.
**Target platform**: `$ARGUMENTS` — must be one of `web`, `flutter`, `winui3`.
## How to Run
```bash
claude
> /generate-app web
> /generate-app flutter
> /generate-app winui3
```
## Position in the Workflow
```
/setup-project
↓
/define-design
↓
/generate-app web | flutter | winui3 ← you are here
↓
/plan-milestones
↓
/add-feature
```
## Pre-Run Check
1. Validate the target:
- If `$ARGUMENTS` is not one of `web`, `flutter`, `winui3`, stop and ask the user to provide a valid target.
2. Confirm the design files exist. If any of these are missing, stop and tell the user to run `/define-design` first:
- `docs/design/design-brief.md`
- `docs/design/design-tokens.json`
- `docs/design/ui-blueprint.json`
- `docs/design/platform-mapping.md`
3. **Important**: Do **not** generate any platform-specific implementation before this command is executed. This command is the only place initial app scaffolding is created.
4. This command generates from the design **as-is**. Refine the design first (re-run `/define-design` or use `/update-design <change>`) if anything needs to change — it is far easier to refine before code is generated than after.
## Procedure
### Step 0: Read the Inputs
Read all of the following:
- `docs/product-requirements.md`
- `docs/functional-design.md`
- `docs/architecture.md`
- `docs/repository-structure.md`
- `docs/development-guidelines.md`
- `docs/design/design-brief.md`
- `docs/design/design-tokens.json`
- `docs/design/ui-blueprint.json`
- `docs/design/platform-mapping.md`
### Step 1: Load the Platform Generation Skill
Load the **platform-ui-generation skill** (`Skill('platform-ui-generation')`) for the mapping rules from design files to the selected platform's code.
### Step 2: Generate the App Shell
Generate the initial application for the selected target. In all cases:
- Respect the design tokens and the UI blueprint exactly.
- Create reusable UI components (do not inline everything into screens).
- Create the initial screen structure (one screen per entry in `ui-blueprint.json`).
- Create the initial route/navigation structure.
- Use semantic, accessible markup/semantics where the platform supports it.
- **Do not implement features that are not described in the current project documents.** Only the app shell, theme, routes, screens, and shared components.
### Step 3: Platform-Specific Requirements
Apply the requirements for the selected target:
#### `/generate-app web`
- Generate a Web app using the technology defined in `docs/architecture.md`.
- If no framework is specified, ask the user or choose a simple default suitable for the repository.
- Convert `design-tokens.json` into CSS variables, a Tailwind config, or an equivalent styling system.
- Convert `ui-blueprint.json` into pages, layouts, and components.
- Use semantic HTML where possible.
- Respect responsive layout requirements (use breakpoints from the tokens).
#### `/generate-app flutter`
- Generate a Flutter app.
- Convert `design-tokens.json` into:
- `ThemeData`
- `ColorScheme`
- spacing constants
- radius constants
- text styles
- Convert `ui-blueprint.json` into:
- routes
- screens
- reusable widgets
- Keep clean separation between: `screens`, `widgets`, `theme`, `models`, `services`.
#### `/generate-app winui3`
- Generate a WinUI 3 application structure.
- Convert `design-tokens.json` into:
- `ResourceDictionary`
- theme resources
- styles
- Convert `ui-blueprint.json` into:
- XAML pages
- `UserControl`s
- navigation structure
- Use C# and XAML.
- Keep UI logic separated from business logic where possible.
### Step 4: Update Repository Structure Document
If new directories/files were created, update `docs/repository-structure.md` so it reflects the generated layout.
### Step 5: Verify (including Playwright E2E)
- If the target is `web`:
- Run `npm test`, `npm run lint`, `npm run typecheck` (where present) and fix any errors caused by the generated code.
- Set up Playwright following the **e2e-testing skill** (`Skill('e2e-testing')`) if it is not set up yet, and create the app-shell smoke spec `e2e/app-shell.spec.ts` (shell renders, every blueprint route navigates, primary navigation works).
- Run `npm run test:e2e` and fix any failures caused by the generated code.
- For `flutter` / `winui3`, run the platform's available static checks and UI/integration tests if the toolchain is present (`integration_test` for Flutter, the platform's UI automation for WinUI 3); otherwise note what should be checked manually.
## Completion Criteria
- The initial app shell exists for the selected target.
- Design tokens are converted into the platform's styling system.
- The UI blueprint is converted into screens, routes, and reusable components.
- No feature logic beyond what the project documents describe has been implemented.
- `docs/repository-structure.md` has been updated if the layout changed.
Completion message:
```
"App generation is complete for target: [target]
Generated:
✅ App shell + entry point
✅ Theme / styling system (from design-tokens.json)
✅ Routes / navigation (from ui-blueprint.json)
✅ Screens (one per blueprint screen)
✅ Reusable components
✅ Playwright E2E smoke spec (e2e/app-shell.spec.ts, web target)
Next steps:
- 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 /update-design when a feature changes the UI
"
```

17
.claude/commands/plan-milestones.md
View File

@ -23,11 +23,9 @@ claude
↓
/define-design
↓
/generate-app web | flutter | winui3
↓
/plan-milestones ← you are here
↓
/execute-milestones phase1-milestones.md (one phase file at a time)
/execute-milestones phase1-milestones.md (one phase file at a time; milestone 01 generates the app shell)
```
## Pre-Run Check
@ -36,7 +34,7 @@ claude
- `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.
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 that milestone 01 (App Shell Generation) is scaffolded from that 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
@ -59,6 +57,7 @@ Read all of the following:
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.
- **Target platform** — `web`, `flutter`, or `winui3` (propose the default from `docs/architecture.md` and `docs/design/platform-mapping.md`); milestone 01 generates the app shell for this platform
- **Number of phases** (default: 2–3) and **milestones per phase** (default: 1–3)
- **MVP definition** — what is the smallest product worth releasing? (phase 1 must deliver it)
- **Priorities** — features that must come first or last
@ -83,9 +82,10 @@ Size each feature so it can be implemented with **one `/add-feature` run**. Spli
### Step 4: Group Features into Milestones, and Milestones into Phases
- Number milestones globally and consecutively across all phases (`01`, `02`, …).
- **Milestone 1 is the MVP core**: the smallest set of features that forms a coherent, end-to-end usable product.
- **Milestone 01 is always "App Shell Generation"** (there is no separate generate-app command — the shell is built as the first milestone). Following the **platform-ui-generation skill**, it scaffolds the app for the target platform from `docs/design/`: theme from `design-tokens.json`, routes/screens (one per blueprint screen) and reusable components from `ui-blueprint.json`, **no feature logic**, plus Playwright setup with the `e2e/app-shell.spec.ts` smoke spec. Its features are pre-defined in the milestone-planning skill.
- **Milestone 02 is the MVP core**: the smallest set of features that forms a coherent, end-to-end usable product on top of the shell.
- Later milestones build on earlier ones, ordered by priority and dependency (a feature never lands before something it depends on).
- **Phase 1 delivers the MVP**: it contains milestone 1 (plus any milestone needed to make the MVP releasable). Later phases group the remaining milestones by theme and priority — each phase should be a meaningful release on its own.
- **Phase 1 delivers the MVP**: it contains milestones 01 (app shell) and 02 (plus any milestone needed to make the MVP releasable). Later phases group the remaining milestones by theme and priority — each phase should be a meaningful release on its own.
- Every feature belongs to **exactly one** milestone, and every milestone to **exactly one** phase. Explicitly park out-of-scope items in a final "Later / Icebox" section of the roadmap.
### Step 5: Create the Roadmap Overview
@ -115,6 +115,7 @@ For each phase, create `docs/milestones/phase[N]-milestones.md` (e.g. `phase1-mi
Re-read all generated files and confirm:
- Milestone 01 is the App Shell milestone (target platform recorded, features per the milestone-planning skill).
- 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, and every milestone in exactly one phase file.
- Milestone numbering is global and consecutive across the phase files.
@ -136,13 +137,13 @@ Completion message:
Milestone documents created:
✅ docs/milestones/roadmap.md (overview + status)
✅ docs/milestones/phase1-milestones.md (MVP phase: milestones 01–NN)
✅ docs/milestones/phase1-milestones.md (MVP phase: milestone 01 = app shell, milestones 02–NN)
✅ docs/milestones/phase2-milestones.md (milestones NN–NN)
Next steps:
- Review docs/milestones/ and adjust priorities if needed
- Run /execute-milestones phase1-milestones.md to implement phase 1 (a separate steering directory is created per milestone)
- Or go feature by feature: run /add-feature [first feature of milestone 1]
- Or go feature by feature: run /add-feature [first feature of milestone 01 — the app shell]
- Either way, each feature is marked complete in its phase file as it finishes
"
```

4
.claude/commands/update-design.md
View File

@ -1,10 +1,10 @@
---
description: Refine the design before /generate-app, or update it when a feature changes the UI (blueprint first, then tokens, brief, and SVGs)
description: Refine the design before the app shell is generated (milestone 01), or update it when a feature changes the UI (blueprint first, then tokens, brief, and SVGs)
---
# Update Design
This command updates the design specification. It is used in two situations: (1) to refine the UI/UX **before** running `/generate-app` (e.g. adjusting screens, tokens, or layout after reviewing the initial design), and (2) to update the design when a feature changes the UI. It updates the structured design files **only** — it does **not** implement application code unless explicitly requested.
This command updates the design specification. It is used in two situations: (1) to refine the UI/UX **before** the app shell is generated by milestone 01 (e.g. adjusting screens, tokens, or layout after reviewing the initial design), and (2) to update the design when a feature changes the UI. It updates the structured design files **only** — it does **not** implement application code unless explicitly requested.
**Change description**: `$ARGUMENTS` (e.g. `/update-design add a profile screen with avatar and edit form`)