qualia-framework 3.2.1 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,323 +1,468 @@
1
1
  ---
2
2
  name: qualia-new
3
- description: "Set up a new project from scratch — interactive wizard with step-by-step questioning. Use when starting any new client project."
3
+ description: "Set up a new project from scratch — deep questioning, parallel research, REQUIREMENTS.md, ROADMAP.md, approval gate. Use when starting any new client project."
4
4
  ---
5
5
 
6
- # /qualia-new — New Project Wizard
6
+ # /qualia-new — New Project
7
7
 
8
- Interactive project setup. Ask one step at a time using AskUserQuestion. Never dump all questions at once.
8
+ Comprehensive project initialization. Deep questioning 4 parallel research agents → REQUIREMENTS.md with REQ-IDs ROADMAP.md with phases → approval → scaffold → ready to plan Phase 1.
9
+
10
+ **Flags:**
11
+ - `/qualia-new` — full flow (default)
12
+ - `/qualia-new --quick` — 4-phase flat wizard (faster, less rigorous, for trivial projects)
9
13
 
10
14
  ## Process
11
15
 
12
16
  ### Step 0. Banner
13
17
 
14
- Print this FIRST, before anything else:
15
-
16
18
  ```bash
17
19
  node ~/.claude/bin/qualia-ui.js banner new
18
20
  ```
19
21
 
20
- Then say: **"Let's build something. Tell me what you're making."**
22
+ Then say: **"Let's build something. Tell me what you want to make."**
21
23
 
22
- Wait for the user's free-text answer. Do NOT use AskUserQuestion here — let them talk naturally.
24
+ Wait for free-text answer. Do NOT use AskUserQuestion here — let them talk naturally.
23
25
 
24
- ### Step 1. Project Type
26
+ ### Step 0.5. Brownfield Check
25
27
 
26
- After they describe what they want, use AskUserQuestion:
28
+ Before questioning, detect if we're in an existing codebase:
27
29
 
28
- ```
29
- question: "What type of project is this?"
30
- header: "Type"
31
- options:
32
- - label: "Website / Web App"
33
- description: "Landing page, SaaS, dashboard, marketing site, portal"
34
- - label: "AI Agent"
35
- description: "Chatbot, AI assistant, tool-calling agent, RAG system"
36
- - label: "Voice Agent"
37
- description: "Phone agent, VAPI, Retell AI, ElevenLabs call bot"
38
- - label: "Mobile App"
39
- description: "iOS, Android, React Native, Expo"
30
+ ```bash
31
+ test -f package.json && echo "HAS_PACKAGE"
32
+ test -d .git && echo "HAS_GIT"
33
+ ls *.ts *.tsx *.js *.jsx *.py 2>/dev/null | head -5
34
+ test -f .planning/codebase/README.md && echo "ALREADY_MAPPED"
40
35
  ```
41
36
 
42
- ### Step 2. Core Features
37
+ **If existing code detected AND not already mapped:**
43
38
 
44
- Based on their description, use AskUserQuestion with multiSelect: true:
39
+ - header: "Existing Code"
40
+ - question: "I see existing code here. Map the codebase first so I understand what's already built?"
41
+ - options:
42
+ - "Map codebase first" — Run /qualia-map, then continue (recommended for brownfield)
43
+ - "Skip mapping" — Treat as greenfield anyway
45
44
 
46
- ```
47
- question: "Which features do you need?"
48
- header: "Features"
49
- multiSelect: true
50
- options (pick 4 most relevant from):
51
- - "Auth & accounts" — Login, signup, user management
52
- - "Database & CRUD" — Data storage, tables, admin panel
53
- - "Payments" — Stripe, subscriptions, checkout
54
- - "AI / LLM" — Chat, completions, embeddings, RAG
55
- - "Voice calls" — Inbound/outbound calls, IVR, telephony
56
- - "Email / notifications" — Transactional email, SMS, push
57
- - "File uploads" — Images, documents, S3/storage
58
- - "Admin dashboard" — Internal tools, analytics, reporting
59
- - "API / integrations" — Third-party APIs, webhooks, CRM sync
60
- - "Real-time" — WebSockets, live updates, presence
45
+ If "Map codebase first": invoke the `qualia-map` skill inline, wait for completion, then continue to Step 1.
46
+
47
+ ### Step 1. Deep Questioning
48
+
49
+ **Load the questioning methodology as your guide:**
50
+
51
+ ```bash
52
+ cat ~/.claude/qualia-references/questioning.md 2>/dev/null
61
53
  ```
62
54
 
63
- Pick the 4 options most relevant to what they described. Always offer the most likely ones.
55
+ Follow that methodology:
56
+ - Start with their free-text answer from Step 0
57
+ - Follow energy — dig into what excited them
58
+ - Challenge vagueness — never accept fuzzy answers
59
+ - Make abstract concrete — "walk me through using this"
60
+ - Surface motivation — "what prompted this?"
61
+ - Check the 4-item context checklist mentally (what, why, who, done)
64
62
 
65
- ### Step 3. Design Direction
63
+ **Use AskUserQuestion for forks with 2-4 concrete interpretations.** Use free text when you want them to think freely.
66
64
 
67
- Use AskUserQuestion with previews:
65
+ **Decision gate** when you could write a clear PROJECT.md:
68
66
 
69
- ```
70
- question: "What's the design vibe?"
71
- header: "Design"
72
- options:
73
- - label: "Dark & Bold"
74
- description: "Dark backgrounds, neon accents, strong contrast"
75
- preview: |
76
- ┌──────────────────────────────┐
77
- │ ██████████████████████████ │
78
- │ ██ DARK BG + TEAL GLOW ██ │
79
- │ ██████████████████████████ │
80
- │ │
81
- │ ░░░░░░░░░░░░░░░░░░░░░░░░ │
82
- │ Sharp cards, glass effects │
83
- │ Neon borders, deep shadows │
84
- └──────────────────────────────┘
85
-
86
- - label: "Clean & Minimal"
87
- description: "White space, subtle shadows, refined typography"
88
- preview: |
89
- ┌──────────────────────────────┐
90
- │ │
91
- │ Clean & Minimal │
92
- │ ───────────── │
93
- │ │
94
- │ Generous whitespace │
95
- │ Subtle borders │
96
- │ Light, airy feel │
97
- └──────────────────────────────┘
98
-
99
- - label: "Colorful & Playful"
100
- description: "Gradients, rounded shapes, vibrant palette"
101
- preview: |
102
- ┌──────────────────────────────┐
103
- │ ⬢ ● ▲ ■ COLORFUL │
104
- │ │
105
- │ ╭──────╮ ╭──────╮ │
106
- │ │ Card │ │ Card │ │
107
- │ ╰──────╯ ╰──────╯ │
108
- │ Rounded, gradient fills │
109
- │ Fun, approachable │
110
- └──────────────────────────────┘
111
-
112
- - label: "Corporate / Professional"
113
- description: "Structured layouts, trust signals, enterprise feel"
114
- preview: |
115
- ┌──────────────────────────────┐
116
- │ LOGO Nav Nav [CTA] │
117
- │ ──────────────────────── │
118
- │ ┌────┐ ┌────┐ ┌────┐ │
119
- │ │Feat│ │Feat│ │Feat│ │
120
- │ └────┘ └────┘ └────┘ │
121
- │ Structured, trustworthy │
122
- │ Clear hierarchy │
123
- └──────────────────────────────┘
124
- ```
67
+ - header: "Ready?"
68
+ - question: "I think I understand what you're building. Ready to create PROJECT.md?"
69
+ - options:
70
+ - "Create PROJECT.md" — Let's move forward
71
+ - "Keep exploring" I want to share more
125
72
 
126
- ### Step 4. Stack Confirmation
73
+ Loop until "Create PROJECT.md".
127
74
 
128
- Use AskUserQuestion:
75
+ ### Step 2. Detect Project Type + Load Template
129
76
 
130
- ```
131
- question: "Stack — go with the Qualia default?"
132
- header: "Stack"
133
- options:
134
- - label: "Qualia Stack (Recommended)"
135
- description: "Next.js 16 + React 19 + TypeScript + Supabase + Vercel"
136
- - label: "Qualia + extras"
137
- description: "Default stack plus additional integrations (Stripe, VAPI, etc.)"
138
- - label: "Custom stack"
139
- description: "I have specific tech requirements"
77
+ From the questioning answers, infer project type:
78
+
79
+ - "website", "landing page", "marketing site", "SaaS", "dashboard", "portal" → `website`
80
+ - "chatbot", "AI assistant", "chat agent", "RAG", "agent" → `ai-agent`
81
+ - "voice agent", "phone agent", "call bot", "VAPI", "Retell" → `voice-agent`
82
+ - "mobile app", "iOS", "Android", "React Native", "Expo" `mobile-app`
83
+
84
+ **If a type matches:**
85
+
86
+ ```bash
87
+ cat ~/.claude/qualia-templates/projects/{type}.md
140
88
  ```
141
89
 
142
- If "Custom stack" ask what they need.
143
- If "Qualia + extras" — ask which integrations.
90
+ This template gives suggested phase structure and category names the roadmapper will use.
144
91
 
145
- ### Step 5. Scope & Client
92
+ **If no type matches:** continue without a template — the roadmapper will derive structure from requirements.
146
93
 
147
- Use AskUserQuestion:
94
+ Store `template_type` (or `null`) for use in Step 6.
148
95
 
149
- ```
150
- question: "Is this a client project or internal?"
151
- header: "Client"
152
- options:
153
- - label: "Client project"
154
- description: "External client will need handoff and credentials"
155
- - label: "Internal / Qualia"
156
- description: "Our own product or tool"
157
- - label: "Personal / Side project"
158
- description: "No formal client"
159
- ```
96
+ ### Step 3. Design Direction (frontend only)
97
+
98
+ If the project involves frontend work (most do), capture design direction:
99
+
100
+ - header: "Design"
101
+ - question: "What's the design vibe?"
102
+ - options:
103
+ - "Dark & Bold" Dark backgrounds, neon accents, strong contrast
104
+ - "Clean & Minimal" White space, subtle shadows, refined typography
105
+ - "Colorful & Playful" — Gradients, rounded shapes, vibrant palette
106
+ - "Corporate / Professional" — Structured, trust signals, enterprise feel
107
+
108
+ Also ask (free text): "Any brand colors or reference sites I should look at?"
109
+
110
+ Store these for Step 7 (DESIGN.md generation).
160
111
 
161
- If client project, ask: **"What's the client's name?"** (free text, no AskUserQuestion)
112
+ ### Step 4. Client Context
162
113
 
163
- After capturing the client name, check for saved preferences:
114
+ - header: "Client"
115
+ - question: "Client project or internal?"
116
+ - options:
117
+ - "Client project" — External client, needs handoff
118
+ - "Internal / Qualia" — Our own product
119
+ - "Personal / Side project" — No formal client
164
120
 
121
+ If client, ask their name (free text) and check for saved prefs:
165
122
  ```bash
166
- cat ~/.claude/knowledge/client-prefs.md 2>/dev/null
123
+ cat ~/.claude/knowledge/client-prefs.md 2>/dev/null | grep -A 10 "{client name}"
167
124
  ```
168
125
 
169
- If there's an entry for this client, show it to the user: *"I have notes on {client} — {preferences summary}. Applying these to the project defaults unless you say otherwise."* Then use those preferences in Step 8a (Design System) and Step 9 (Roadmap).
126
+ If prefs found, mention: *"I have notes on {client} — {summary}. Applying these to defaults unless you say otherwise."*
170
127
 
171
- ### Step 6. Confirm & Scaffold
128
+ ### Step 5. Write PROJECT.md
172
129
 
173
- Present a summary:
130
+ Create `.planning/PROJECT.md` from the template:
174
131
 
132
+ ```bash
133
+ mkdir -p .planning
134
+ cat ~/.claude/qualia-templates/project.md
175
135
  ```
176
- ⬢ QUALIA ▸ PROJECT SUMMARY
177
- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
178
-
179
- Project {name}
180
- Type {type}
181
- Client {client}
182
- Stack {stack}
183
- Features {feature list}
184
- Design {design direction}
185
- ```
186
136
 
187
- Use AskUserQuestion:
137
+ Fill in with questioning answers. Include:
138
+
139
+ ```markdown
140
+ # {Project Name}
141
+
142
+ ## Client
143
+ {name or "Internal" or "Personal"}
144
+
145
+ ## What We're Building
146
+ {one-paragraph description from questioning}
147
+
148
+ ## Core Value
149
+ {the ONE thing that must work}
150
+
151
+ ## Requirements
152
+ ### Validated
153
+ {if brownfield, inferred from codebase map; else "(none yet)"}
154
+
155
+ ### Active (hypotheses)
156
+ - [ ] {requirement 1 — from questioning}
157
+ - [ ] {requirement 2}
158
+ - [ ] {requirement 3}
159
+
160
+ ### Out of Scope
161
+ - {exclusion 1}
162
+
163
+ ## Stack
164
+ {from questioning — default: Next.js 16 + React 19 + TypeScript + Supabase + Vercel}
188
165
 
166
+ ## Design Direction
167
+ {from Step 3}
168
+
169
+ ## Decisions
170
+ | Decision | Rationale |
171
+ |----------|-----------|
172
+ | {choice from questioning} | {why} |
173
+
174
+ ---
175
+ *Created: {date}*
176
+ ```
177
+
178
+ Commit:
179
+ ```bash
180
+ git init 2>/dev/null
181
+ git add .planning/PROJECT.md
182
+ git commit -m "docs: initialize project"
189
183
  ```
190
- question: "Ready to scaffold?"
191
- header: "Confirm"
192
- options:
193
- - label: "Let's go"
194
- description: "Create the project now"
195
- - label: "Change something"
196
- description: "Go back and adjust"
184
+
185
+ ### Step 6. Create config.json
186
+
187
+ Write `.planning/config.json`:
188
+
189
+ ```json
190
+ {
191
+ "mode": "interactive",
192
+ "depth": "standard",
193
+ "template_type": "{detected or null}",
194
+ "workflow": {
195
+ "research": true,
196
+ "plan_check": true,
197
+ "verifier": true
198
+ }
199
+ }
197
200
  ```
198
201
 
199
- ### Step 7. Execute Scaffold
202
+ **If the user says "quick" or the project is clearly trivial (landing page with 2 sections, 1 form):** set `depth: "quick"` and `workflow.research: false`.
200
203
 
201
- On confirmation, scaffold:
204
+ ### Step 7. Create DESIGN.md (frontend projects)
202
205
 
206
+ If frontend work is involved, generate `.planning/DESIGN.md` from `~/.claude/qualia-templates/DESIGN.md` using the design direction from Step 3. Fill in:
207
+ - Palette (concrete hex values, not placeholders)
208
+ - Typography (distinctive fonts, NOT Inter/Roboto/system-ui)
209
+ - Spacing (8px grid)
210
+ - Motion approach
211
+ - Component patterns
212
+
213
+ Commit:
203
214
  ```bash
204
- mkdir -p .planning
215
+ git add .planning/DESIGN.md .planning/config.json
216
+ git commit -m "docs: design direction + config"
217
+ ```
205
218
 
206
- # Initialize git if needed
207
- git init 2>/dev/null
219
+ ### Step 8. Run Research (if enabled)
208
220
 
209
- # Create Next.js project (if website/ai-agent)
210
- npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir=false --import-alias="@/*" --no-git
221
+ Check `.planning/config.json` → `workflow.research`. If `true`, proceed. If `false`, skip to Step 9.
211
222
 
212
- # Or Expo project (if mobile-app)
213
- # npx create-expo-app . --template blank-typescript
223
+ **Banner:**
224
+ ```bash
225
+ node ~/.claude/bin/qualia-ui.js banner research
214
226
  ```
215
227
 
216
- Create GitHub repo:
228
+ Say: **"Running 4 parallel research agents (stack, features, architecture, pitfalls)..."**
229
+
230
+ **Create research dir:**
217
231
  ```bash
218
- gh repo create {project-name} --private --source=. --push
232
+ mkdir -p .planning/research
219
233
  ```
220
234
 
221
- Link Vercel:
222
- ```bash
223
- vercel link
235
+ **Spawn 4 researchers in parallel** (single message, 4 Agent tool calls):
236
+
237
+ ```
238
+ Agent(prompt="
239
+ Read your role: @~/.claude/agents/qualia-researcher.md
240
+
241
+ <dimension>stack</dimension>
242
+ <domain>{inferred domain from PROJECT.md}</domain>
243
+ <project_context>{PROJECT.md summary}</project_context>
244
+ <milestone_context>greenfield</milestone_context>
245
+ <output_path>.planning/research/STACK.md</output_path>
246
+ ", subagent_type="qualia-researcher", description="Stack research")
247
+
248
+ Agent(prompt="
249
+ Read your role: @~/.claude/agents/qualia-researcher.md
250
+
251
+ <dimension>features</dimension>
252
+ <domain>{inferred domain}</domain>
253
+ <project_context>{PROJECT.md summary}</project_context>
254
+ <milestone_context>greenfield</milestone_context>
255
+ <output_path>.planning/research/FEATURES.md</output_path>
256
+ ", subagent_type="qualia-researcher", description="Features research")
257
+
258
+ Agent(prompt="
259
+ Read your role: @~/.claude/agents/qualia-researcher.md
260
+
261
+ <dimension>architecture</dimension>
262
+ <domain>{inferred domain}</domain>
263
+ <project_context>{PROJECT.md summary}</project_context>
264
+ <milestone_context>greenfield</milestone_context>
265
+ <output_path>.planning/research/ARCHITECTURE.md</output_path>
266
+ ", subagent_type="qualia-researcher", description="Architecture research")
267
+
268
+ Agent(prompt="
269
+ Read your role: @~/.claude/agents/qualia-researcher.md
270
+
271
+ <dimension>pitfalls</dimension>
272
+ <domain>{inferred domain}</domain>
273
+ <project_context>{PROJECT.md summary}</project_context>
274
+ <milestone_context>greenfield</milestone_context>
275
+ <output_path>.planning/research/PITFALLS.md</output_path>
276
+ ", subagent_type="qualia-researcher", description="Pitfalls research")
224
277
  ```
225
278
 
226
- Create Supabase project (via MCP or manual).
279
+ **After all 4 complete, spawn synthesizer:**
227
280
 
228
- ### Step 8. Create Planning Files
281
+ ```
282
+ Agent(prompt="
283
+ Read your role: @~/.claude/agents/qualia-research-synthesizer.md
229
284
 
230
- **`.planning/PROJECT.md`** use template, fill from answers:
231
- - Client, description, requirements (from features), out of scope, stack, design direction, decisions
285
+ Merge the 4 research files at .planning/research/ into .planning/research/SUMMARY.md.
286
+ Include roadmap implications.
287
+ ", subagent_type="qualia-research-synthesizer", description="Synthesize research")
288
+ ```
289
+
290
+ **Commit research:**
291
+ ```bash
292
+ git add .planning/research/
293
+ git commit -m "docs: research synthesis (4 dimensions)"
294
+ ```
232
295
 
233
- ### Step 8a. Create Design System
296
+ **Show key findings:**
297
+ ```bash
298
+ node ~/.claude/bin/qualia-ui.js ok "Research complete"
299
+ ```
300
+ Display top 3 findings from SUMMARY.md (stack recommendation, table stakes, top pitfall).
234
301
 
235
- Generate **`.planning/DESIGN.md`** using `~/.claude/qualia-templates/DESIGN.md` as the template.
302
+ ### Step 9. Feature Scoping
236
303
 
237
- Fill in based on the design direction chosen in Step 3:
304
+ Read `.planning/research/FEATURES.md` (if exists) and present the feature landscape:
238
305
 
239
- **Dark & Bold:**
240
- - Palette: dark backgrounds (#0a0a0a, #141414), vibrant accent (teal #00d4aa, amber #f59e0b, etc.)
241
- - Typography: bold display font + clean body font (e.g., "Plus Jakarta Sans" + "DM Sans")
242
- - Effects: glass morphism, noise textures, glow effects
243
- - Motion: expressive — staggered fades, parallax hints
306
+ For each category, use AskUserQuestion:
244
307
 
245
- **Clean & Minimal:**
246
- - Palette: light backgrounds (#fafafa, #ffffff), single muted accent
247
- - Typography: refined serif or geometric sans (e.g., "Outfit" + "Source Serif 4")
248
- - Effects: subtle shadows, thin borders
249
- - Motion: minimal fades only, no stagger
308
+ - header: "{Category name}"
309
+ - question: "Which {category} features are in v1?"
310
+ - multiSelect: true
311
+ - options:
312
+ - Each feature from FEATURES.md with brief description
313
+ - "None for v1" — defer entire category
250
314
 
251
- **Colorful & Playful:**
252
- - Palette: vibrant multi-color, warm backgrounds
253
- - Typography: rounded friendly fonts (e.g., "Nunito" + "Quicksand")
254
- - Effects: gradients, rounded shapes, illustrations
255
- - Motion: expressive — bouncy spring easing, scale on hover
315
+ Track:
316
+ - Selected v1 requirements
317
+ - Unselected table stakes v2 (users expect these)
318
+ - Unselected differentiators out of scope
256
319
 
257
- **Corporate / Professional:**
258
- - Palette: navy/charcoal base, conservative accent (blue, green)
259
- - Typography: trustworthy geometric (e.g., "Manrope" + "IBM Plex Sans")
260
- - Effects: clean borders, subtle shadows, structured grids
261
- - Motion: subtle — smooth fades, no bounce
320
+ **If research was skipped:** Ask free text: "What are the main things users need to be able to do?" — then probe for specifics on each capability mentioned.
262
321
 
263
- **Always include in DESIGN.md:**
264
- - Concrete CSS variable values (not placeholders)
265
- - Google Fonts import URL
266
- - Spacing scale (8px grid)
267
- - Component patterns (buttons, inputs, cards)
268
- - Responsive approach
269
- - Anti-patterns to avoid
322
+ Gather any additional requirements the user wants that research missed.
270
323
 
271
- ### Step 8b. Initialize State
324
+ ### Step 10. Run Roadmapper
272
325
 
326
+ **Banner:**
273
327
  ```bash
274
- node ~/.claude/bin/state.js init --project "{name}" --client "{client}" --type "{type}" --assigned-to "{employee}" --phases '[{phases JSON array from roadmap}]'
328
+ node ~/.claude/bin/qualia-ui.js banner roadmap
275
329
  ```
276
- This creates both STATE.md and tracking.json with consistent formatting.
277
- Do NOT manually edit these files — state.js handles both.
278
330
 
279
- ### Step 9. Create Roadmap
331
+ Spawn the roadmapper agent:
280
332
 
281
- Based on project type and features, create phases in STATE.md:
333
+ ```
334
+ Agent(prompt="
335
+ Read your role: @~/.claude/agents/qualia-roadmapper.md
336
+
337
+ <task>
338
+ Create REQUIREMENTS.md and ROADMAP.md for this project.
282
339
 
283
- **Typical website:**
284
- 1. Foundation Auth, database schema, base layout
285
- 2. Core — Main features
286
- 3. Content — Pages, copy, media
287
- 4. Polish — Design, animations, responsive
340
+ User-scoped v1 features:
341
+ {list of features selected in Step 9, grouped by category}
288
342
 
289
- **Typical AI agent:**
290
- 1. Foundation Auth, database, API routes
291
- 2. Agent — AI logic, prompts, tool calling
292
- 3. Interface — Chat UI, streaming, history
293
- 4. Polish — Error handling, rate limiting, monitoring
343
+ Template type: {template_type from config.json}
344
+ If template type is set, use ~/.claude/qualia-templates/projects/{type}.md as the phase structure starting point.
294
345
 
295
- **Typical voice agent:**
296
- 1. Foundation — Webhook handler, Supabase, auth
297
- 2. Voice — VAPI/Retell config, call flow, prompts
298
- 3. Integration CRM sync, logging, analytics
299
- 4. Polish — Latency optimization, error handling
346
+ Write files immediately:
347
+ - .planning/REQUIREMENTS.md
348
+ - .planning/ROADMAP.md
349
+ - Update STATE.md via: node ~/.claude/bin/state.js init --project '{name}' --client '{client}' --type '{type}' --phases '<JSON>' --total_phases <N>
350
+ </task>
351
+ ", subagent_type="qualia-roadmapper", description="Create roadmap")
352
+ ```
300
353
 
301
- Present the roadmap. Use AskUserQuestion:
354
+ ### Step 11. Review Roadmap
355
+
356
+ Read the generated `ROADMAP.md`. Present it inline:
302
357
 
303
358
  ```
304
- question: "Does this roadmap look right?"
305
- header: "Roadmap"
306
- options:
307
- - label: "Looks good"
308
- description: "Lock it in and start planning Phase 1"
309
- - label: "Adjust phases"
310
- description: "I want to change the phase breakdown"
359
+ ## Proposed Roadmap
360
+
361
+ **{N} phases** | **{X} requirements mapped** | All v1 requirements covered ✓
362
+
363
+ | # | Phase | Goal | Requirements | Success Criteria |
364
+ |---|-------|------|--------------|------------------|
365
+ | 1 | {name} | {goal} | {REQ-IDs} | {count} |
366
+ | 2 | {name} | {goal} | {REQ-IDs} | {count} |
367
+ ...
368
+
369
+ ### Phase 1: {Name}
370
+ Goal: {goal}
371
+ Requirements: {REQ-IDs}
372
+ Success criteria:
373
+ 1. {criterion}
374
+ 2. {criterion}
375
+ 3. {criterion}
376
+
377
+ ### Phase 2: {Name}
378
+ ...
311
379
  ```
312
380
 
313
- ### Step 10. Commit & Output
381
+ ### Step 12. Approval Gate
382
+
383
+ - header: "Roadmap"
384
+ - question: "Does this roadmap work for you?"
385
+ - options:
386
+ - "Approve" — Commit and continue
387
+ - "Adjust phases" — Tell me what to change
388
+ - "Review full file" — Show raw ROADMAP.md
389
+
390
+ **If "Adjust":**
391
+ - Get the user's feedback
392
+ - Re-spawn the roadmapper with revision context
393
+ - Show revised roadmap
394
+ - Loop until approved
395
+
396
+ **If "Review full file":** `cat .planning/ROADMAP.md`, then re-ask.
397
+
398
+ **If "Approve":**
314
399
 
315
400
  ```bash
316
- git add .planning/
317
- git commit -m "init: project setup with planning files"
318
- git push -u origin main
401
+ git add .planning/REQUIREMENTS.md .planning/ROADMAP.md .planning/STATE.md
402
+ git commit -m "docs: requirements + roadmap ({N} phases)"
319
403
  ```
320
404
 
405
+ ### Step 13. Environment Setup
406
+
407
+ Check what the project needs (from PROJECT.md stack + research):
408
+
409
+ - Supabase project? Guide through `supabase link` or create new
410
+ - Vercel project? Guide through `vercel link`
411
+ - Env vars? Create `.env.local` with placeholders
412
+
413
+ Only walk through what's needed. Skip if the user says "I'll handle env myself."
414
+
415
+ Commit:
416
+ ```bash
417
+ git add .gitignore
418
+ git commit -m "chore: environment setup" 2>/dev/null
419
+ ```
420
+
421
+ ### Step 14. Done
422
+
321
423
  ```bash
322
424
  node ~/.claude/bin/qualia-ui.js end "PROJECT READY" "/qualia-plan 1"
323
425
  ```
426
+
427
+ Show summary:
428
+
429
+ ```
430
+ ⬢ PROJECT INITIALIZED
431
+
432
+ | Artifact | Location |
433
+ |----------------|-----------------------------|
434
+ | Project | .planning/PROJECT.md |
435
+ | Config | .planning/config.json |
436
+ | Requirements | .planning/REQUIREMENTS.md |
437
+ | Roadmap | .planning/ROADMAP.md |
438
+ | Design | .planning/DESIGN.md |
439
+ | Research | .planning/research/ |
440
+ | State | .planning/STATE.md |
441
+
442
+ {N} phases | {X} requirements | Ready to build
443
+
444
+ ▶ Next: /qualia-plan 1 — plan Phase 1: {phase 1 name}
445
+ ```
446
+
447
+ ## --quick Flag (Fast Path)
448
+
449
+ If invoked as `/qualia-new --quick`, run a 4-phase flat flow instead of the full comprehensive flow:
450
+
451
+ 1. Banner + "What do you want to make?"
452
+ 2. 4-step wizard (type / features / design / client)
453
+ 3. Fixed 4 phases based on project type (Foundation / Core / Content / Polish)
454
+ 4. Skip: research, REQUIREMENTS.md, plan-check
455
+ 5. Still creates: PROJECT.md, ROADMAP.md (simplified), STATE.md, DESIGN.md
456
+ 6. Route to `/qualia-plan 1`
457
+
458
+ Use `--quick` for: landing pages with 1-2 sections, throwaway prototypes, personal experiments.
459
+ Do NOT use `--quick` for: client projects, anything with compliance/regulatory stakes, anything longer than 1 week.
460
+
461
+ ## Rules
462
+
463
+ 1. **Questioning is not a checklist.** Follow the thread, don't follow a script.
464
+ 2. **Research runs automatically** unless `depth: quick` in config. Don't ask the user every time.
465
+ 3. **Approval gate is mandatory.** Never commit a roadmap the user hasn't seen.
466
+ 4. **STATE.md updates go through state.js init.** Never edit STATE.md by hand — the statusline reads tracking.json which state.js writes atomically.
467
+ 5. **Don't skip the research synthesizer.** Four research files without a synthesis = unread bloat.
468
+ 6. **Inline skill invocation.** When Step 0.5 offers `/qualia-map`, INVOKE it inline — don't exit and tell the user to re-run.