qualia-framework 5.4.0 → 5.8.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.
- package/README.md +21 -17
- package/agents/builder.md +25 -8
- package/agents/plan-checker.md +50 -2
- package/agents/planner.md +25 -1
- package/agents/research-synthesizer.md +4 -1
- package/agents/researcher.md +6 -1
- package/agents/visual-evaluator.md +1 -1
- package/bin/install.js +8 -8
- package/bin/plan-contract.js +32 -1
- package/bin/slop-detect.mjs +1 -1
- package/docs/erp-contract.md +11 -0
- package/docs/onboarding.html +623 -0
- package/guide.md +8 -9
- package/hooks/session-start.js +1 -1
- package/package.json +1 -1
- package/skills/qualia-discuss/SKILL.md +123 -9
- package/skills/qualia-feature/SKILL.md +216 -0
- package/skills/qualia-milestone/SKILL.md +73 -1
- package/skills/qualia-new/SKILL.md +52 -25
- package/skills/qualia-optimize/SKILL.md +1 -1
- package/skills/{qualia-polish-loop → qualia-polish}/REFERENCE.md +5 -5
- package/skills/qualia-polish/SKILL.md +13 -4
- package/skills/{qualia-polish-loop → qualia-polish}/scripts/loop.mjs +2 -2
- package/skills/{qualia-polish-loop → qualia-polish}/scripts/playwright-capture.mjs +1 -1
- package/skills/qualia-report/SKILL.md +8 -6
- package/skills/qualia-road/SKILL.md +10 -11
- package/templates/CONTEXT.md +3 -2
- package/templates/help.html +1 -1
- package/templates/phase-context.md +5 -4
- package/templates/project-discovery.md +83 -0
- package/templates/project.md +7 -0
- package/tests/bin.test.sh +104 -62
- package/tests/lib.test.sh +21 -0
- package/tests/slop-detect.test.sh +2 -2
- package/docs/archive/session-report-2026-04-18.md +0 -199
- package/docs/install-redesign-builder-prompt.md +0 -290
- package/docs/install-redesign-pilot.md +0 -234
- package/docs/instruction-budget-audit.md +0 -113
- package/docs/journey-demo.html +0 -1008
- package/docs/playwright-loop-builder-prompt.md +0 -185
- package/docs/playwright-loop-design-notes.md +0 -108
- package/docs/playwright-loop-tester-prompt.md +0 -213
- package/docs/polish-loop-supervised-run.md +0 -111
- package/skills/qualia-polish-loop/SKILL.md +0 -201
- package/skills/qualia-prd/SKILL.md +0 -199
- package/skills/qualia-quick/SKILL.md +0 -44
- package/skills/qualia-task/SKILL.md +0 -98
- /package/skills/{qualia-polish-loop → qualia-polish}/fixtures/broken.html +0 -0
- /package/skills/{qualia-polish-loop → qualia-polish}/fixtures/clean.html +0 -0
- /package/skills/{qualia-polish-loop → qualia-polish}/scripts/score.mjs +0 -0
|
@@ -0,0 +1,623 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>Qualia Framework: How a project flows</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
10
|
+
<style>
|
|
11
|
+
:root {
|
|
12
|
+
--bg: oklch(96.5% 0.012 78);
|
|
13
|
+
--bg-soft: oklch(94% 0.014 78);
|
|
14
|
+
--ink: oklch(22% 0.025 245);
|
|
15
|
+
--ink-soft: oklch(40% 0.025 245);
|
|
16
|
+
--muted: oklch(58% 0.018 245);
|
|
17
|
+
--rule: oklch(85% 0.02 78);
|
|
18
|
+
--rule-soft: oklch(90% 0.014 78);
|
|
19
|
+
--accent: oklch(52% 0.12 195);
|
|
20
|
+
--accent-d: oklch(38% 0.10 195);
|
|
21
|
+
--warn: oklch(58% 0.14 50);
|
|
22
|
+
--space-1: clamp(.25rem, .2rem + .25vw, .375rem);
|
|
23
|
+
--space-2: clamp(.5rem, .4rem + .5vw, .75rem);
|
|
24
|
+
--space-3: clamp(.75rem, .6rem + .75vw, 1.125rem);
|
|
25
|
+
--space-4: clamp(1rem, .8rem + 1vw, 1.5rem);
|
|
26
|
+
--space-5: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
|
|
27
|
+
--space-6: clamp(2.25rem, 1.8rem + 2.25vw, 3.5rem);
|
|
28
|
+
--space-7: clamp(3.5rem, 2.8rem + 3.5vw, 5.25rem);
|
|
29
|
+
--display: "Fraunces", "Newsreader", Georgia, serif;
|
|
30
|
+
--body: "Newsreader", Georgia, serif;
|
|
31
|
+
--mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
|
|
32
|
+
}
|
|
33
|
+
* { box-sizing: border-box; }
|
|
34
|
+
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
|
|
35
|
+
body {
|
|
36
|
+
margin: 0;
|
|
37
|
+
background: var(--bg);
|
|
38
|
+
color: var(--ink);
|
|
39
|
+
font-family: var(--body);
|
|
40
|
+
font-size: clamp(15px, 14px + .25vw, 17px);
|
|
41
|
+
line-height: 1.55;
|
|
42
|
+
font-feature-settings: "kern", "liga", "ss01", "ss02";
|
|
43
|
+
}
|
|
44
|
+
main {
|
|
45
|
+
max-width: 64rem;
|
|
46
|
+
margin: 0 auto;
|
|
47
|
+
padding: var(--space-6) var(--space-4) var(--space-7);
|
|
48
|
+
}
|
|
49
|
+
/* Header */
|
|
50
|
+
.marque {
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: baseline;
|
|
53
|
+
gap: var(--space-3);
|
|
54
|
+
border-bottom: 1px solid var(--rule);
|
|
55
|
+
padding-bottom: var(--space-3);
|
|
56
|
+
margin-bottom: var(--space-6);
|
|
57
|
+
}
|
|
58
|
+
.marque .mark {
|
|
59
|
+
font-family: var(--mono);
|
|
60
|
+
font-size: .75rem;
|
|
61
|
+
letter-spacing: .14em;
|
|
62
|
+
text-transform: uppercase;
|
|
63
|
+
color: var(--accent);
|
|
64
|
+
}
|
|
65
|
+
.marque .meta {
|
|
66
|
+
font-family: var(--mono);
|
|
67
|
+
font-size: .75rem;
|
|
68
|
+
color: var(--muted);
|
|
69
|
+
margin-left: auto;
|
|
70
|
+
}
|
|
71
|
+
/* Hero */
|
|
72
|
+
.hero h1 {
|
|
73
|
+
font-family: var(--display);
|
|
74
|
+
font-weight: 500;
|
|
75
|
+
font-size: clamp(2.25rem, 1.5rem + 4vw, 4.5rem);
|
|
76
|
+
line-height: 1;
|
|
77
|
+
letter-spacing: -.02em;
|
|
78
|
+
margin: 0 0 var(--space-3);
|
|
79
|
+
font-variation-settings: "opsz" 144;
|
|
80
|
+
}
|
|
81
|
+
.hero h1 em {
|
|
82
|
+
font-style: italic;
|
|
83
|
+
color: var(--accent-d);
|
|
84
|
+
font-weight: 400;
|
|
85
|
+
}
|
|
86
|
+
.hero p.lede {
|
|
87
|
+
font-family: var(--display);
|
|
88
|
+
font-size: clamp(1.125rem, .9rem + .9vw, 1.5rem);
|
|
89
|
+
color: var(--ink-soft);
|
|
90
|
+
line-height: 1.4;
|
|
91
|
+
max-width: 36rem;
|
|
92
|
+
margin: 0 0 var(--space-5);
|
|
93
|
+
font-variation-settings: "opsz" 36;
|
|
94
|
+
}
|
|
95
|
+
/* Section heading */
|
|
96
|
+
section { margin-top: var(--space-7); }
|
|
97
|
+
section > h2 {
|
|
98
|
+
font-family: var(--mono);
|
|
99
|
+
font-size: .75rem;
|
|
100
|
+
letter-spacing: .14em;
|
|
101
|
+
text-transform: uppercase;
|
|
102
|
+
color: var(--accent);
|
|
103
|
+
margin: 0 0 var(--space-1);
|
|
104
|
+
font-weight: 500;
|
|
105
|
+
}
|
|
106
|
+
section > h3 {
|
|
107
|
+
font-family: var(--display);
|
|
108
|
+
font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
|
|
109
|
+
font-weight: 500;
|
|
110
|
+
line-height: 1.1;
|
|
111
|
+
letter-spacing: -.015em;
|
|
112
|
+
margin: 0 0 var(--space-4);
|
|
113
|
+
}
|
|
114
|
+
section > p.intro {
|
|
115
|
+
color: var(--ink-soft);
|
|
116
|
+
max-width: 36rem;
|
|
117
|
+
margin: 0 0 var(--space-4);
|
|
118
|
+
}
|
|
119
|
+
/* Path step */
|
|
120
|
+
.step {
|
|
121
|
+
display: grid;
|
|
122
|
+
grid-template-columns: auto 1fr;
|
|
123
|
+
gap: var(--space-4);
|
|
124
|
+
align-items: baseline;
|
|
125
|
+
padding: var(--space-3) 0;
|
|
126
|
+
border-top: 1px solid var(--rule-soft);
|
|
127
|
+
}
|
|
128
|
+
.step:first-child { border-top: 1px solid var(--rule); }
|
|
129
|
+
.step:last-child { border-bottom: 1px solid var(--rule); }
|
|
130
|
+
.step .n {
|
|
131
|
+
font-family: var(--mono);
|
|
132
|
+
font-size: .85rem;
|
|
133
|
+
color: var(--muted);
|
|
134
|
+
width: 2.5rem;
|
|
135
|
+
font-variant-numeric: tabular-nums;
|
|
136
|
+
padding-top: .15rem;
|
|
137
|
+
}
|
|
138
|
+
.step .body { display: flex; flex-direction: column; gap: var(--space-1); }
|
|
139
|
+
.step .cmd {
|
|
140
|
+
font-family: var(--mono);
|
|
141
|
+
font-size: clamp(.95rem, .85rem + .25vw, 1.05rem);
|
|
142
|
+
font-weight: 500;
|
|
143
|
+
color: var(--ink);
|
|
144
|
+
}
|
|
145
|
+
.step .cmd .alt {
|
|
146
|
+
color: var(--muted);
|
|
147
|
+
font-weight: 400;
|
|
148
|
+
margin-left: .5rem;
|
|
149
|
+
}
|
|
150
|
+
.step .what {
|
|
151
|
+
font-family: var(--display);
|
|
152
|
+
font-size: clamp(1.05rem, .95rem + .25vw, 1.2rem);
|
|
153
|
+
color: var(--ink);
|
|
154
|
+
line-height: 1.35;
|
|
155
|
+
}
|
|
156
|
+
.step .why {
|
|
157
|
+
color: var(--muted);
|
|
158
|
+
font-size: .95rem;
|
|
159
|
+
line-height: 1.45;
|
|
160
|
+
}
|
|
161
|
+
/* Branch (Demo vs Project) */
|
|
162
|
+
.branch {
|
|
163
|
+
display: grid;
|
|
164
|
+
grid-template-columns: 1fr;
|
|
165
|
+
gap: var(--space-3);
|
|
166
|
+
margin-top: var(--space-4);
|
|
167
|
+
}
|
|
168
|
+
@media (min-width: 720px) {
|
|
169
|
+
.branch { grid-template-columns: 1fr 1fr; }
|
|
170
|
+
}
|
|
171
|
+
.branch article {
|
|
172
|
+
border: 1px solid var(--rule);
|
|
173
|
+
background: var(--bg-soft);
|
|
174
|
+
padding: var(--space-4);
|
|
175
|
+
display: flex;
|
|
176
|
+
flex-direction: column;
|
|
177
|
+
gap: var(--space-2);
|
|
178
|
+
}
|
|
179
|
+
.branch h4 {
|
|
180
|
+
font-family: var(--display);
|
|
181
|
+
font-size: 1.4rem;
|
|
182
|
+
font-weight: 600;
|
|
183
|
+
margin: 0;
|
|
184
|
+
line-height: 1.1;
|
|
185
|
+
}
|
|
186
|
+
.branch h4 .tag {
|
|
187
|
+
font-family: var(--mono);
|
|
188
|
+
font-size: .65rem;
|
|
189
|
+
letter-spacing: .14em;
|
|
190
|
+
text-transform: uppercase;
|
|
191
|
+
color: var(--accent);
|
|
192
|
+
display: block;
|
|
193
|
+
margin-bottom: .25rem;
|
|
194
|
+
font-weight: 500;
|
|
195
|
+
}
|
|
196
|
+
.branch p { margin: 0; color: var(--ink-soft); }
|
|
197
|
+
.branch ul {
|
|
198
|
+
margin: var(--space-2) 0 0;
|
|
199
|
+
padding: 0;
|
|
200
|
+
list-style: none;
|
|
201
|
+
border-top: 1px solid var(--rule-soft);
|
|
202
|
+
}
|
|
203
|
+
.branch li {
|
|
204
|
+
padding: .35rem 0;
|
|
205
|
+
border-bottom: 1px solid var(--rule-soft);
|
|
206
|
+
font-family: var(--mono);
|
|
207
|
+
font-size: .85rem;
|
|
208
|
+
color: var(--ink-soft);
|
|
209
|
+
display: flex;
|
|
210
|
+
gap: var(--space-2);
|
|
211
|
+
}
|
|
212
|
+
.branch li::before { content: "›"; color: var(--accent); }
|
|
213
|
+
/* Toolkit grid */
|
|
214
|
+
.kit {
|
|
215
|
+
display: grid;
|
|
216
|
+
grid-template-columns: 1fr;
|
|
217
|
+
gap: var(--space-4);
|
|
218
|
+
}
|
|
219
|
+
@media (min-width: 720px) {
|
|
220
|
+
.kit { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
|
|
221
|
+
}
|
|
222
|
+
.kit-group h4 {
|
|
223
|
+
font-family: var(--mono);
|
|
224
|
+
font-size: .75rem;
|
|
225
|
+
letter-spacing: .14em;
|
|
226
|
+
text-transform: uppercase;
|
|
227
|
+
color: var(--ink);
|
|
228
|
+
margin: 0 0 var(--space-2);
|
|
229
|
+
font-weight: 600;
|
|
230
|
+
padding-bottom: var(--space-1);
|
|
231
|
+
border-bottom: 1px solid var(--rule);
|
|
232
|
+
}
|
|
233
|
+
.kit-group dl {
|
|
234
|
+
margin: 0;
|
|
235
|
+
display: grid;
|
|
236
|
+
grid-template-columns: auto 1fr;
|
|
237
|
+
column-gap: var(--space-3);
|
|
238
|
+
row-gap: var(--space-2);
|
|
239
|
+
align-items: baseline;
|
|
240
|
+
}
|
|
241
|
+
.kit-group dt {
|
|
242
|
+
font-family: var(--mono);
|
|
243
|
+
font-size: .85rem;
|
|
244
|
+
font-weight: 500;
|
|
245
|
+
color: var(--ink);
|
|
246
|
+
white-space: nowrap;
|
|
247
|
+
}
|
|
248
|
+
.kit-group dd {
|
|
249
|
+
margin: 0;
|
|
250
|
+
color: var(--ink-soft);
|
|
251
|
+
font-size: .95rem;
|
|
252
|
+
line-height: 1.4;
|
|
253
|
+
}
|
|
254
|
+
/* Aside, callouts */
|
|
255
|
+
.callout {
|
|
256
|
+
margin-top: var(--space-4);
|
|
257
|
+
padding: var(--space-3) var(--space-4);
|
|
258
|
+
border-left: 2px solid var(--accent);
|
|
259
|
+
background: var(--bg-soft);
|
|
260
|
+
color: var(--ink-soft);
|
|
261
|
+
font-size: .95rem;
|
|
262
|
+
}
|
|
263
|
+
.callout strong { color: var(--ink); font-weight: 600; }
|
|
264
|
+
/* Footer */
|
|
265
|
+
footer {
|
|
266
|
+
margin-top: var(--space-7);
|
|
267
|
+
padding-top: var(--space-4);
|
|
268
|
+
border-top: 1px solid var(--rule);
|
|
269
|
+
display: flex;
|
|
270
|
+
justify-content: space-between;
|
|
271
|
+
align-items: baseline;
|
|
272
|
+
flex-wrap: wrap;
|
|
273
|
+
gap: var(--space-3);
|
|
274
|
+
font-family: var(--mono);
|
|
275
|
+
font-size: .8rem;
|
|
276
|
+
color: var(--muted);
|
|
277
|
+
}
|
|
278
|
+
footer a {
|
|
279
|
+
color: var(--accent);
|
|
280
|
+
text-decoration: none;
|
|
281
|
+
}
|
|
282
|
+
footer a:hover { text-decoration: underline; }
|
|
283
|
+
/* Selection */
|
|
284
|
+
::selection { background: var(--accent); color: var(--bg); }
|
|
285
|
+
/* Print */
|
|
286
|
+
@media print {
|
|
287
|
+
body { background: white; }
|
|
288
|
+
main { padding: 1.5rem; }
|
|
289
|
+
section { break-inside: avoid; }
|
|
290
|
+
}
|
|
291
|
+
</style>
|
|
292
|
+
</head>
|
|
293
|
+
<body>
|
|
294
|
+
<main>
|
|
295
|
+
|
|
296
|
+
<header class="marque">
|
|
297
|
+
<span class="mark">Qualia Framework</span>
|
|
298
|
+
<span class="meta">For Moayad & new hires · v5.5</span>
|
|
299
|
+
</header>
|
|
300
|
+
|
|
301
|
+
<section class="hero">
|
|
302
|
+
<h1>How a project flows<br><em>from idea to shipped.</em></h1>
|
|
303
|
+
<p class="lede">
|
|
304
|
+
You do not need to remember thirty commands. You need to remember <em>one path</em>.
|
|
305
|
+
The path takes a project from a vague client conversation to a deployed,
|
|
306
|
+
handed-off, billed product. Everything else is a side road you take when
|
|
307
|
+
something specific happens.
|
|
308
|
+
</p>
|
|
309
|
+
</section>
|
|
310
|
+
|
|
311
|
+
<section>
|
|
312
|
+
<h2>The path</h2>
|
|
313
|
+
<h3>Eight commands. In order. Most projects only ever use these.</h3>
|
|
314
|
+
<p class="intro">
|
|
315
|
+
Each command produces concrete artifacts. The next command reads them.
|
|
316
|
+
Nothing is improvised; the framework keeps state for you.
|
|
317
|
+
</p>
|
|
318
|
+
|
|
319
|
+
<div class="steps">
|
|
320
|
+
<div class="step">
|
|
321
|
+
<div class="n">01</div>
|
|
322
|
+
<div class="body">
|
|
323
|
+
<div class="cmd">/qualia-new</div>
|
|
324
|
+
<div class="what">Kick off a project from zero.</div>
|
|
325
|
+
<div class="why">
|
|
326
|
+
Asks <em>Demo or Full Project?</em>, runs a mandatory non-technical
|
|
327
|
+
discovery interview, then generates every artifact the rest of the
|
|
328
|
+
flow depends on (PROJECT, PRODUCT, DESIGN, JOURNEY, REQUIREMENTS,
|
|
329
|
+
ROADMAP, CONTEXT, STATE).
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
</div>
|
|
333
|
+
|
|
334
|
+
<div class="step">
|
|
335
|
+
<div class="n">02</div>
|
|
336
|
+
<div class="body">
|
|
337
|
+
<div class="cmd">/qualia-plan N</div>
|
|
338
|
+
<div class="what">Break milestone N into 2 to 5 atomic tasks.</div>
|
|
339
|
+
<div class="why">
|
|
340
|
+
A planner subagent writes a story-file plan; a plan-checker
|
|
341
|
+
subagent grades it against eleven rules and sends it back for
|
|
342
|
+
revision up to twice if it falls short. You never see a vague plan.
|
|
343
|
+
</div>
|
|
344
|
+
</div>
|
|
345
|
+
</div>
|
|
346
|
+
|
|
347
|
+
<div class="step">
|
|
348
|
+
<div class="n">03</div>
|
|
349
|
+
<div class="body">
|
|
350
|
+
<div class="cmd">/qualia-build</div>
|
|
351
|
+
<div class="what">Execute the planned tasks in waves.</div>
|
|
352
|
+
<div class="why">
|
|
353
|
+
One fresh builder subagent per task, no shared memory, atomic git
|
|
354
|
+
commit each. Builders self-heal small lint failures up to twice
|
|
355
|
+
before reporting blocked. Wave parallelism for non-conflicting
|
|
356
|
+
tasks.
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
</div>
|
|
360
|
+
|
|
361
|
+
<div class="step">
|
|
362
|
+
<div class="n">04</div>
|
|
363
|
+
<div class="body">
|
|
364
|
+
<div class="cmd">/qualia-verify</div>
|
|
365
|
+
<div class="what">Prove the phase actually works.</div>
|
|
366
|
+
<div class="why">
|
|
367
|
+
A fresh verifier reads the codebase backwards from the phase goal,
|
|
368
|
+
checks every acceptance criterion against real grep / curl / tsc
|
|
369
|
+
output, then runs an adversarial second pass. Pass-or-revise.
|
|
370
|
+
</div>
|
|
371
|
+
</div>
|
|
372
|
+
</div>
|
|
373
|
+
|
|
374
|
+
<div class="step">
|
|
375
|
+
<div class="n">↻</div>
|
|
376
|
+
<div class="body">
|
|
377
|
+
<div class="cmd">Repeat 02 → 04 for each phase.</div>
|
|
378
|
+
<div class="what">Most milestones have two or three phases.</div>
|
|
379
|
+
<div class="why">
|
|
380
|
+
The phase loop is the heartbeat of every project. Each phase ends
|
|
381
|
+
in a working, committed, verified slice.
|
|
382
|
+
</div>
|
|
383
|
+
</div>
|
|
384
|
+
</div>
|
|
385
|
+
|
|
386
|
+
<div class="step">
|
|
387
|
+
<div class="n">05</div>
|
|
388
|
+
<div class="body">
|
|
389
|
+
<div class="cmd">/qualia-milestone</div>
|
|
390
|
+
<div class="what">Close the milestone, open the next one.</div>
|
|
391
|
+
<div class="why">
|
|
392
|
+
Archives M1 artifacts, regenerates ROADMAP.md for M2 from
|
|
393
|
+
JOURNEY.md, resets STATE. For a single-milestone demo, this is
|
|
394
|
+
also where "client signed, extend it" becomes a full project.
|
|
395
|
+
</div>
|
|
396
|
+
</div>
|
|
397
|
+
</div>
|
|
398
|
+
|
|
399
|
+
<div class="step">
|
|
400
|
+
<div class="n">06</div>
|
|
401
|
+
<div class="body">
|
|
402
|
+
<div class="cmd">/qualia-ship</div>
|
|
403
|
+
<div class="what">Deploy to production.</div>
|
|
404
|
+
<div class="why">
|
|
405
|
+
Quality gates, security scan, push, <code>vercel --prod</code>,
|
|
406
|
+
five-check post-deploy verification. No surprises.
|
|
407
|
+
</div>
|
|
408
|
+
</div>
|
|
409
|
+
</div>
|
|
410
|
+
|
|
411
|
+
<div class="step">
|
|
412
|
+
<div class="n">07</div>
|
|
413
|
+
<div class="body">
|
|
414
|
+
<div class="cmd">/qualia-handoff</div>
|
|
415
|
+
<div class="what">Deliver to the client.</div>
|
|
416
|
+
<div class="why">
|
|
417
|
+
Production URL, documentation, credentials, walkthrough. Four
|
|
418
|
+
mandatory deliverables, never fewer.
|
|
419
|
+
</div>
|
|
420
|
+
</div>
|
|
421
|
+
</div>
|
|
422
|
+
|
|
423
|
+
<div class="step">
|
|
424
|
+
<div class="n">08</div>
|
|
425
|
+
<div class="body">
|
|
426
|
+
<div class="cmd">/qualia-report</div>
|
|
427
|
+
<div class="what">Clock out.</div>
|
|
428
|
+
<div class="why">
|
|
429
|
+
End-of-shift submission to the Qualia ERP. Truthful, not
|
|
430
|
+
aspirational. "Blocked all afternoon" is a valid report.
|
|
431
|
+
</div>
|
|
432
|
+
</div>
|
|
433
|
+
</div>
|
|
434
|
+
</div>
|
|
435
|
+
|
|
436
|
+
<div class="callout">
|
|
437
|
+
<strong>The lazy version of remembering this:</strong> type <code>/qualia</code>
|
|
438
|
+
whenever you are unsure. The state router reads the project state and tells
|
|
439
|
+
you the exact next command to type.
|
|
440
|
+
</div>
|
|
441
|
+
</section>
|
|
442
|
+
|
|
443
|
+
<section>
|
|
444
|
+
<h2>The fork at the start</h2>
|
|
445
|
+
<h3>Demo or Full Project. Pick once, the artifacts adapt.</h3>
|
|
446
|
+
<p class="intro">
|
|
447
|
+
<code>/qualia-new</code> asks this question first. The artifact set
|
|
448
|
+
is identical for both; what changes is depth and milestone count.
|
|
449
|
+
A demo can grow into a full project later; nothing gets thrown away.
|
|
450
|
+
</p>
|
|
451
|
+
|
|
452
|
+
<div class="branch">
|
|
453
|
+
<article>
|
|
454
|
+
<h4><span class="tag">Path A</span>Demo / MVP</h4>
|
|
455
|
+
<p>
|
|
456
|
+
Single shippable milestone. Real backend, no mocks. Beautiful design
|
|
457
|
+
built fast. Designed to either stand alone or grow into a full
|
|
458
|
+
project if the client signs.
|
|
459
|
+
</p>
|
|
460
|
+
<ul>
|
|
461
|
+
<li>Discuss: 8 questions, ~5 min</li>
|
|
462
|
+
<li>Research: 1 round</li>
|
|
463
|
+
<li>JOURNEY.md: 1 milestone</li>
|
|
464
|
+
<li>ROADMAP.md: 1-3 phases</li>
|
|
465
|
+
<li>Extends via /qualia-milestone</li>
|
|
466
|
+
</ul>
|
|
467
|
+
</article>
|
|
468
|
+
|
|
469
|
+
<article>
|
|
470
|
+
<h4><span class="tag">Path B</span>Full Project</h4>
|
|
471
|
+
<p>
|
|
472
|
+
Multi-milestone arc planned at kickoff. Used when the scope is
|
|
473
|
+
known and there is a retainer. Every milestone ends with a
|
|
474
|
+
shippable, billable deliverable.
|
|
475
|
+
</p>
|
|
476
|
+
<ul>
|
|
477
|
+
<li>Discuss: 14 questions, ~15-20 min</li>
|
|
478
|
+
<li>Research: 4 parallel rounds + synthesis</li>
|
|
479
|
+
<li>JOURNEY.md: 2-5 milestones, includes Handoff</li>
|
|
480
|
+
<li>ROADMAP.md: M1 detailed, M2..MN sketched</li>
|
|
481
|
+
<li>Progresses via /qualia-milestone per ship</li>
|
|
482
|
+
</ul>
|
|
483
|
+
</article>
|
|
484
|
+
</div>
|
|
485
|
+
</section>
|
|
486
|
+
|
|
487
|
+
<section>
|
|
488
|
+
<h2>When something goes sideways</h2>
|
|
489
|
+
<h3>The fix verbs.</h3>
|
|
490
|
+
<p class="intro">
|
|
491
|
+
You only reach for these when the path stops working: a bug, a slow
|
|
492
|
+
page, an audit before a deploy.
|
|
493
|
+
</p>
|
|
494
|
+
|
|
495
|
+
<div class="kit">
|
|
496
|
+
<div class="kit-group">
|
|
497
|
+
<h4>Diagnose & fix</h4>
|
|
498
|
+
<dl>
|
|
499
|
+
<dt>/qualia-debug</dt><dd>Investigative debugging. Finds root cause, applies a minimal fix, writes a debug report.</dd>
|
|
500
|
+
<dt>/qualia-review</dt><dd>Production audit with severity-scored findings. Run before a big deploy.</dd>
|
|
501
|
+
<dt>/qualia-optimize</dt><dd>Deep pass for performance, design, architecture. Spawns parallel specialists.</dd>
|
|
502
|
+
<dt>/qualia-postmortem</dt><dd>Self-healing layer. After a failed verify, identifies which agent or rule should have caught it and proposes a delta.</dd>
|
|
503
|
+
</dl>
|
|
504
|
+
</div>
|
|
505
|
+
<div class="kit-group">
|
|
506
|
+
<h4>Mid-flight design & tests</h4>
|
|
507
|
+
<dl>
|
|
508
|
+
<dt>/qualia-polish</dt><dd>Manual design pass on a component, route, or full app.</dd>
|
|
509
|
+
<dt>/qualia-polish-loop</dt><dd>Autonomous screenshot → score → fix loop until rubric passes.</dd>
|
|
510
|
+
<dt>/qualia-test</dt><dd>Generate tests, run tests, or drive a feature TDD-style.</dd>
|
|
511
|
+
</dl>
|
|
512
|
+
</div>
|
|
513
|
+
</div>
|
|
514
|
+
</section>
|
|
515
|
+
|
|
516
|
+
<section>
|
|
517
|
+
<h2>Outside the phase</h2>
|
|
518
|
+
<h3>Single-feature work and session control.</h3>
|
|
519
|
+
|
|
520
|
+
<div class="kit">
|
|
521
|
+
<div class="kit-group">
|
|
522
|
+
<h4>Build something small</h4>
|
|
523
|
+
<dl>
|
|
524
|
+
<dt>/qualia-quick</dt><dd>Trivial inline fix. One file, no spawn. Typo, config tweak.</dd>
|
|
525
|
+
<dt>/qualia-task</dt><dd>Single feature, fresh builder spawn, atomic commit. 1 to 5 files.</dd>
|
|
526
|
+
</dl>
|
|
527
|
+
</div>
|
|
528
|
+
<div class="kit-group">
|
|
529
|
+
<h4>Navigate the session</h4>
|
|
530
|
+
<dl>
|
|
531
|
+
<dt>/qualia</dt><dd>State router. Tells you the exact next command.</dd>
|
|
532
|
+
<dt>/qualia-idk</dt><dd>"Something feels off." Diagnoses confusion across .planning + codebase.</dd>
|
|
533
|
+
<dt>/qualia-pause</dt><dd>Save context for handoff to a future session.</dd>
|
|
534
|
+
<dt>/qualia-resume</dt><dd>Restore context and routing from a paused session.</dd>
|
|
535
|
+
<dt>/qualia-road</dt><dd>Terminal map of the workflow. Headless-friendly.</dd>
|
|
536
|
+
<dt>/qualia-help</dt><dd>Open this kind of reference in the browser.</dd>
|
|
537
|
+
</dl>
|
|
538
|
+
</div>
|
|
539
|
+
</div>
|
|
540
|
+
</section>
|
|
541
|
+
|
|
542
|
+
<section>
|
|
543
|
+
<h2>Pre-planning depth</h2>
|
|
544
|
+
<h3>When a phase is high-stakes.</h3>
|
|
545
|
+
<p class="intro">
|
|
546
|
+
Most phases plan fine without ceremony. Auth, payments, multi-tenant,
|
|
547
|
+
regulatory and architectural-fork phases earn an upfront alignment.
|
|
548
|
+
</p>
|
|
549
|
+
|
|
550
|
+
<div class="kit">
|
|
551
|
+
<div class="kit-group">
|
|
552
|
+
<h4>Lock decisions before code</h4>
|
|
553
|
+
<dl>
|
|
554
|
+
<dt>/qualia-discuss</dt><dd>Without args: project-level non-technical discovery (mandatory at kickoff). With <code>N</code>: phase-level technical alignment with locked decisions and ADRs.</dd>
|
|
555
|
+
<dt>/qualia-research</dt><dd>Deep-research a niche library or domain before planning a phase.</dd>
|
|
556
|
+
<dt>/qualia-prd</dt><dd>Synthesize the current conversation into a durable PRD document.</dd>
|
|
557
|
+
</dl>
|
|
558
|
+
</div>
|
|
559
|
+
<div class="kit-group">
|
|
560
|
+
<h4>Code archaeology</h4>
|
|
561
|
+
<dl>
|
|
562
|
+
<dt>/qualia-map</dt><dd>Brownfield onboarding. Map an existing codebase before adding to it.</dd>
|
|
563
|
+
<dt>/qualia-zoom</dt><dd>Map a small, unfamiliar code area in domain-glossary terms.</dd>
|
|
564
|
+
</dl>
|
|
565
|
+
</div>
|
|
566
|
+
</div>
|
|
567
|
+
</section>
|
|
568
|
+
|
|
569
|
+
<section>
|
|
570
|
+
<h2>Knowledge, queue, meta</h2>
|
|
571
|
+
<h3>Long-term scaffolding.</h3>
|
|
572
|
+
|
|
573
|
+
<div class="kit">
|
|
574
|
+
<div class="kit-group">
|
|
575
|
+
<h4>Knowledge</h4>
|
|
576
|
+
<dl>
|
|
577
|
+
<dt>/qualia-learn</dt><dd>Save a learning, pattern, fix, or client preference. Persists across projects and sessions.</dd>
|
|
578
|
+
<dt>/qualia-flush</dt><dd>Promote daily-log raw entries to the curated knowledge tier.</dd>
|
|
579
|
+
</dl>
|
|
580
|
+
</div>
|
|
581
|
+
<div class="kit-group">
|
|
582
|
+
<h4>Issue queue</h4>
|
|
583
|
+
<dl>
|
|
584
|
+
<dt>/qualia-issues</dt><dd>Break a phase plan into independent vertical-slice GitHub issues.</dd>
|
|
585
|
+
<dt>/qualia-triage</dt><dd>Route open issues into needs-info, ready-for-agent, ready-for-human.</dd>
|
|
586
|
+
</dl>
|
|
587
|
+
</div>
|
|
588
|
+
<div class="kit-group">
|
|
589
|
+
<h4>Extend the framework</h4>
|
|
590
|
+
<dl>
|
|
591
|
+
<dt>/qualia-skill-new</dt><dd>Author a new Qualia skill or agent.</dd>
|
|
592
|
+
<dt>/qualia-hook-gen</dt><dd>Convert an instruction into a deterministic Claude Code hook.</dd>
|
|
593
|
+
</dl>
|
|
594
|
+
</div>
|
|
595
|
+
<div class="kit-group">
|
|
596
|
+
<h4>External</h4>
|
|
597
|
+
<dl>
|
|
598
|
+
<dt>/zoho-workflow</dt><dd>Zoho Invoice and Mail operations via ERP-first routing.</dd>
|
|
599
|
+
</dl>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
</section>
|
|
603
|
+
|
|
604
|
+
<section>
|
|
605
|
+
<h2>One more thing</h2>
|
|
606
|
+
<h3>Don't over-think it.</h3>
|
|
607
|
+
<p class="intro">
|
|
608
|
+
Ninety percent of project days you only touch <code>/qualia-plan</code>,
|
|
609
|
+
<code>/qualia-build</code>, <code>/qualia-verify</code> in a tight loop,
|
|
610
|
+
then <code>/qualia-report</code> at the end of the shift. The rest of
|
|
611
|
+
the surface is there for the ten-percent days. When in doubt, type
|
|
612
|
+
<code>/qualia</code>.
|
|
613
|
+
</p>
|
|
614
|
+
</section>
|
|
615
|
+
|
|
616
|
+
<footer>
|
|
617
|
+
<span>Qualia Framework v5.5.0 · Plan, build, verify, ship.</span>
|
|
618
|
+
<span><a href="https://github.com/Qualiasolutions/qualia-framework">github.com/Qualiasolutions/qualia-framework</a></span>
|
|
619
|
+
</footer>
|
|
620
|
+
|
|
621
|
+
</main>
|
|
622
|
+
</body>
|
|
623
|
+
</html>
|
package/guide.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
# Qualia Developer Guide (v5.
|
|
1
|
+
# Qualia Developer Guide (v5.8)
|
|
2
2
|
|
|
3
3
|
> Follow the road. Type the commands. The framework handles the rest.
|
|
4
4
|
> `--auto` chains the whole road end-to-end with only two human checkpoints per project.
|
|
5
5
|
|
|
6
|
-
**v5.
|
|
6
|
+
**v5.8 cleans up the command surface:** `/qualia-polish-loop` is now `/qualia-polish --loop` (one flag instead of two skills). `/qualia-quick`, `/qualia-task`, and `/qualia-prd` are removed after their v5.7 deprecation window; use `/qualia-feature` for single-feature work and `/qualia-discuss` in PROJECT MODE for kickoff capture. Skill count goes from 35 to 32.
|
|
7
7
|
|
|
8
8
|
## The Road
|
|
9
9
|
|
|
@@ -52,14 +52,13 @@ Append `--auto` to `/qualia-new` and the framework chains every step:
|
|
|
52
52
|
| Starting | `/qualia-new` | Set up project with full journey (all milestones → Handoff) |
|
|
53
53
|
| Starting (auto) | `/qualia-new --auto` | Same + chain through building automatically |
|
|
54
54
|
| Brownfield | `/qualia-map` | Map an existing codebase BEFORE `/qualia-new` |
|
|
55
|
-
| Mid-project spec | `/qualia-prd` | Synthesize the current conversation into a durable feature spec (v5.3+) |
|
|
56
55
|
| Building | `/qualia-plan` | Plan the current phase |
|
|
57
56
|
| | `/qualia-build` | Build it (parallel tasks) |
|
|
58
57
|
| | `/qualia-verify` | Check it actually works |
|
|
59
58
|
| Milestone | `/qualia-milestone` | Close current, open next from JOURNEY.md |
|
|
60
|
-
|
|
|
61
|
-
| Finishing | `/qualia-polish` | Design and UX pass (scope-adaptive: component / route / app / redesign / critique / quick) |
|
|
62
|
-
| | `/qualia-polish
|
|
59
|
+
| Single feature | `/qualia-feature` | Auto-scoped: inline for trivia, fresh spawn for 1-5 files |
|
|
60
|
+
| Finishing | `/qualia-polish` | Design and UX pass (scope-adaptive: component / route / app / redesign / critique / quick / loop) |
|
|
61
|
+
| | `/qualia-polish --loop` | Autonomous visual-polish loop: screenshot, vision-eval, fix, repeat |
|
|
63
62
|
| | `/qualia-ship` | Deploy to production |
|
|
64
63
|
| | `/qualia-handoff` | Deliver to client (4 mandatory deliverables) |
|
|
65
64
|
| Reporting | `/qualia-report` | Log what you did (mandatory before clock-out) |
|
|
@@ -109,7 +108,7 @@ If neither helps, paste the error and ask Claude directly. If Claude can't fix i
|
|
|
109
108
|
## Session Start / End
|
|
110
109
|
|
|
111
110
|
**Start:** Claude loads your project context automatically. The router banner shows your journey position ("M2 of 4 · P2 of 3").
|
|
112
|
-
**End:** Run `/qualia-report` — this is mandatory
|
|
111
|
+
**End:** Run `/qualia-report` — this is the mandatory clock-out submission. It reports what happened during the work shift, even if the work is unfinished. The report is committed to git and (if ERP is enabled) uploaded to https://portal.qualiasolutions.net.
|
|
113
112
|
|
|
114
113
|
## How It Works (you don't need to know this, but if curious)
|
|
115
114
|
|
|
@@ -120,7 +119,7 @@ If neither helps, paste the error and ask Claude directly. If Claude can't fix i
|
|
|
120
119
|
- **Story-file plans:** Every task has Why / Acceptance Criteria / Depends on / Validation inline — the plan IS the brief.
|
|
121
120
|
- **Wave execution:** Independent tasks run in parallel. Dependent tasks wait.
|
|
122
121
|
- **Milestone-boundary pauses:** In `--auto` mode, the framework pauses only at real decision points. Everything else runs on rails.
|
|
123
|
-
- **tracking.json:** Updated on every push. The ERP reads it automatically. Includes `milestone_name` + `milestones[]` so the ERP
|
|
122
|
+
- **tracking.json:** Updated on every push. The ERP reads it automatically. Includes `milestone_name` + `milestones[]` so the ERP can show project and milestone progress without exposing framework tasks as the main employee workflow.
|
|
124
123
|
|
|
125
124
|
## Quick Reference
|
|
126
125
|
|
|
@@ -134,4 +133,4 @@ If neither helps, paste the error and ask Claude directly. If Claude can't fix i
|
|
|
134
133
|
| Finished the last phase of a milestone | `/qualia-milestone` |
|
|
135
134
|
| About to ship | `/qualia-ship` |
|
|
136
135
|
| Client is ready to take over | `/qualia-handoff` |
|
|
137
|
-
| End of workday | `/qualia-report` (mandatory) |
|
|
136
|
+
| End of workday / clock-out | `/qualia-report` (mandatory shift submission) |
|
package/hooks/session-start.js
CHANGED
|
@@ -173,7 +173,7 @@ try {
|
|
|
173
173
|
console.log(` ${DIM}Start here:${RESET}`);
|
|
174
174
|
console.log(` ${TEAL}/qualia-new${RESET} ${DIM}Set up a new project${RESET}`);
|
|
175
175
|
console.log(` ${TEAL}/qualia${RESET} ${DIM}What should I do next?${RESET}`);
|
|
176
|
-
console.log(` ${TEAL}/qualia-
|
|
176
|
+
console.log(` ${TEAL}/qualia-feature${RESET} ${DIM}Single feature (auto-scoped)${RESET}`);
|
|
177
177
|
console.log("");
|
|
178
178
|
}
|
|
179
179
|
} catch (e) {
|