## Demo 1: Default Output (Workflow Handbook) **Model:** Claude Opus 5 **Input:** - PROJECT_TYPE: Next.js trading dashboard - WORKFLOW_GOAL: Add a new indicator page end-to-end (UI + API + tests) without breaking existing pages - TECH_STACK: Next.js 15 + TypeScript + Tailwind + Prisma + Jest - CONSTRAINTS: One task, one diff — no opportunistic refactors, stop at done - TEAM_CONTEXT: Solo founder + 1 freelance QA **Output:** # Claude Code Workflow Generator *Project: Next.js trading dashboard | Goal: Add a new indicator page end-to-end | Stack: Next.js 15 + TS + Tailwind + Prisma + Jest | Constraints: One task, one diff | Team: Solo founder + 1 QA* ## Executive Summary **Workflow:** BUILD **Confidence:** HIGH Claude Code will run a 4-subagent build loop tailored to Next.js 15 with Prisma: Researcher maps existing page patterns, Planner writes a single-diff spec, Builder implements UI/API/tests, Critic gates on scope lock and Jest. You approve at two gates only. **Split:** Claude does mapping, planning, building, critiquing. You approve the plan and the final diff. --- ## 1. Subagent Team & Orchestration ### Team Roster | Subagent | Role | Invoked When | Input | Output | Hands Off To | |---|---|---|---|---|---| | Researcher | Pattern mapper | On /workflow | Repo file list | Existing page pattern + DB model | Planner | | Planner | Scoper | After Researcher | Pattern + goal | One-diff spec with file list (max 4 files) | Builder | | Builder | Implementer | After approval | Spec | UI + API + tests | Critic | | Critic | Scope enforcer | After Builder | Diff + spec | PASS/FAIL + fix list | Integrator | ### Hand-off Flow Researcher -> Planner (human gate 1) -> Builder -> Critic (human gate 2) -> Integrator ### Invocation Rules - Researcher and Planner run sequentially; Builder only after human approves spec; Critic auto-fires post-build; loop once if FAIL ## 2. File Tree ``` .claude/ ├── agents/ │ ├── researcher.md # Maps src/app/*/page.tsx patterns │ ├── planner.md # Scopes to ≤4 files │ ├── builder.md # Writes TS + Tailwind + Prisma + Jest │ └── critic.md # Checks one-diff + tests pass ├── commands/ │ ├── workflow.md # Main: add indicator page │ ├── review.md # Critic pass │ └── ship.md # Merge after QA └── hooks/ └── pre-commit.sh # Runs jest + typecheck ``` ## 3. Slash Commands (Copy-Paste) ### /workflow — Add indicator page ```markdown --- description: Add indicator page end-to-end without breaking existing pages agents: [researcher, planner, builder, critic] --- Input: PROJECT_TYPE Next.js dashboard, GOAL add indicator page, STACK Next.js 15/TS/Tailwind/Prisma/Jest, CONSTRAINTS one-diff, TEAM solo+QA Steps: 1. Researcher: glob src/app/*/page.tsx + prisma/schema.prisma — report pattern 2. Planner: propose max 4 files + spec — wait for approval 3. Builder: implement page, API route, Prisma query, Jest test 4. Critic: verify diff ≤4 files + `npm run test` passes → loop if fail ``` ### /review — Critic pass ```markdown --- description: Scope and test gate before ship --- Check diff vs spec: file count ≤4, no files outside spec, jest green, no refactors flagged. ``` ### /ship — Integrate and ship ```markdown --- description: Merge after QA approves --- Merge diff, run `npm run build`, push, tag release ``` ## 4. Guardrails & Constraints ### Enforcement Table | Constraint | Guardrail | Where Enforced | Failure Mode | |---|---|---|---| | One task one diff | Planner file limit 4 + Critic diff count | Planner + Critic | FAIL + re-plan | | Stop at done | No opportunistic todos | Builder prompt | Critic flags extra files | ### Human Approval Gates - ☐ Gate 1: Approve Planner spec (files + scope) - ☐ Gate 2: Approve Critic PASS before merge ## 5. Runbook ### How to Run 1. `/workflow` → Researcher maps patterns (2 min) 2. Approve plan in 30 sec 3. Builder runs (3-5 min) → Critic gates → fix loop if needed 4. QA checks Jest pass → `/ship` ### What Claude Code Does vs You | Claude Code | You | |---|---| | Maps, plans, builds, critiques, loops | Approve spec, approve ship, manual QA | ## 6. Quality Gate Loop ### Critic Rubric | Criteria | Weight | Pass | |---|---|---| | One-diff | 40% | ≤4 files | | Tests pass | 30% | jest green | | No refactors | 30% | no files outside spec | ### Loop Logic FAIL on any criteria → Builder revises once → re-critique → ship or stop ## 7. Test Plan Prompt ```markdown Run `npm run test` for indicator page covering happy path + empty state + API error. Include Prisma mock. Fail = list file + reason. ``` ## 8. First Action Today - Run `/workflow` with: Add RSI indicator page at src/app/rsi/page.tsx — reuse existing page pattern