qualia-framework 4.4.0 → 5.1.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/AGENTS.md +24 -0
- package/CLAUDE.md +12 -63
- package/README.md +24 -18
- package/agents/builder.md +13 -33
- package/agents/plan-checker.md +18 -0
- package/agents/planner.md +17 -0
- package/agents/verifier.md +70 -0
- package/agents/visual-evaluator.md +132 -0
- package/bin/cli.js +64 -23
- package/bin/install.js +375 -29
- package/bin/qualia-ui.js +208 -1
- package/bin/slop-detect.mjs +362 -0
- package/bin/state.js +218 -2
- package/docs/erp-contract.md +5 -0
- package/docs/install-redesign-builder-prompt.md +290 -0
- package/docs/install-redesign-pilot.md +234 -0
- package/docs/playwright-loop-builder-prompt.md +185 -0
- package/docs/playwright-loop-design-notes.md +108 -0
- package/docs/playwright-loop-pilot-results.md +170 -0
- package/docs/playwright-loop-review-2026-05-03.md +65 -0
- package/docs/playwright-loop-tester-prompt.md +213 -0
- package/docs/reviews/matt-pocock-skills-analysis.md +300 -0
- package/guide.md +9 -5
- package/hooks/env-empty-guard.js +74 -0
- package/hooks/pre-compact.js +19 -9
- package/hooks/pre-deploy-gate.js +8 -2
- package/hooks/pre-push.js +26 -12
- package/hooks/supabase-destructive-guard.js +62 -0
- package/hooks/vercel-account-guard.js +91 -0
- package/package.json +2 -1
- package/rules/design-brand.md +114 -0
- package/rules/design-laws.md +148 -0
- package/rules/design-product.md +114 -0
- package/rules/design-rubric.md +157 -0
- package/rules/grounding.md +4 -0
- package/skills/qualia-build/SKILL.md +40 -46
- package/skills/qualia-discuss/SKILL.md +51 -68
- package/skills/qualia-handoff/SKILL.md +1 -0
- package/skills/qualia-issues/SKILL.md +151 -0
- package/skills/qualia-map/SKILL.md +78 -35
- package/skills/qualia-new/REFERENCE.md +139 -0
- package/skills/qualia-new/SKILL.md +85 -124
- package/skills/qualia-optimize/REFERENCE.md +202 -0
- package/skills/qualia-optimize/SKILL.md +72 -237
- package/skills/qualia-plan/SKILL.md +58 -65
- package/skills/qualia-polish/SKILL.md +180 -136
- package/skills/qualia-polish-loop/REFERENCE.md +265 -0
- package/skills/qualia-polish-loop/SKILL.md +201 -0
- package/skills/qualia-polish-loop/fixtures/broken.html +117 -0
- package/skills/qualia-polish-loop/fixtures/clean.html +196 -0
- package/skills/qualia-polish-loop/scripts/loop.mjs +302 -0
- package/skills/qualia-polish-loop/scripts/playwright-capture.mjs +197 -0
- package/skills/qualia-polish-loop/scripts/score.mjs +176 -0
- package/skills/qualia-report/SKILL.md +141 -180
- package/skills/qualia-research/SKILL.md +28 -33
- package/skills/qualia-road/SKILL.md +103 -0
- package/skills/qualia-ship/SKILL.md +1 -0
- package/skills/qualia-task/SKILL.md +1 -1
- package/skills/qualia-test/SKILL.md +50 -2
- package/skills/qualia-triage/SKILL.md +152 -0
- package/skills/qualia-verify/SKILL.md +63 -104
- package/skills/qualia-zoom/SKILL.md +51 -0
- package/skills/zoho-workflow/SKILL.md +64 -0
- package/templates/CONTEXT.md +36 -0
- package/templates/DESIGN.md +229 -435
- package/templates/PRODUCT.md +95 -0
- package/templates/decisions/ADR-template.md +30 -0
- package/tests/bin.test.sh +451 -7
- package/tests/state.test.sh +58 -0
- package/skills/qualia-design/SKILL.md +0 -169
package/tests/state.test.sh
CHANGED
|
@@ -936,6 +936,64 @@ else
|
|
|
936
936
|
fail_case "backfill idempotent" "got=$RESULT"
|
|
937
937
|
fi
|
|
938
938
|
|
|
939
|
+
# ─── v5.0.0 — next-report-id command ─────────────────────
|
|
940
|
+
|
|
941
|
+
# 52. next-report-id allocates first ID (seq=1, returns QS-REPORT-01)
|
|
942
|
+
TMP=$(make_project)
|
|
943
|
+
OUT=$(cd "$TMP" && $NODE "$STATE_JS" next-report-id 2>&1)
|
|
944
|
+
EXIT=$?
|
|
945
|
+
if [ "$EXIT" -eq 0 ] \
|
|
946
|
+
&& echo "$OUT" | grep -q '"report_id": "QS-REPORT-01"' \
|
|
947
|
+
&& echo "$OUT" | grep -q '"report_seq": 1'; then
|
|
948
|
+
pass "next-report-id allocates first ID (QS-REPORT-01, seq=1)"
|
|
949
|
+
else
|
|
950
|
+
fail_case "next-report-id first" "exit=$EXIT out=$OUT"
|
|
951
|
+
fi
|
|
952
|
+
|
|
953
|
+
# 53. next-report-id increments seq on second call
|
|
954
|
+
OUT2=$(cd "$TMP" && $NODE "$STATE_JS" next-report-id 2>&1)
|
|
955
|
+
if echo "$OUT2" | grep -q '"report_id": "QS-REPORT-02"' \
|
|
956
|
+
&& echo "$OUT2" | grep -q '"report_seq": 2'; then
|
|
957
|
+
pass "next-report-id increments seq (QS-REPORT-02)"
|
|
958
|
+
else
|
|
959
|
+
fail_case "next-report-id increment" "out=$OUT2"
|
|
960
|
+
fi
|
|
961
|
+
|
|
962
|
+
# 54. next-report-id --peek does NOT increment (read-only preview)
|
|
963
|
+
TMP=$(make_project)
|
|
964
|
+
PEEK1=$(cd "$TMP" && $NODE "$STATE_JS" next-report-id --peek 2>&1)
|
|
965
|
+
PEEK2=$(cd "$TMP" && $NODE "$STATE_JS" next-report-id --peek 2>&1)
|
|
966
|
+
SEQ1=$(echo "$PEEK1" | grep -o '"report_seq": [0-9]*' | grep -o '[0-9]*')
|
|
967
|
+
SEQ2=$(echo "$PEEK2" | grep -o '"report_seq": [0-9]*' | grep -o '[0-9]*')
|
|
968
|
+
if [ "$SEQ1" = "1" ] && [ "$SEQ2" = "1" ]; then
|
|
969
|
+
pass "next-report-id --peek does not increment (seq stays at 1)"
|
|
970
|
+
else
|
|
971
|
+
fail_case "peek incremented" "first=$SEQ1 second=$SEQ2"
|
|
972
|
+
fi
|
|
973
|
+
|
|
974
|
+
# 55. next-report-id --peek followed by real call increments correctly
|
|
975
|
+
REAL=$(cd "$TMP" && $NODE "$STATE_JS" next-report-id 2>&1)
|
|
976
|
+
SEQ_REAL=$(echo "$REAL" | grep -o '"report_seq": [0-9]*' | grep -o '[0-9]*')
|
|
977
|
+
if [ "$SEQ_REAL" = "1" ]; then
|
|
978
|
+
pass "real call after peek allocates seq=1 (peek didn't consume)"
|
|
979
|
+
else
|
|
980
|
+
fail_case "peek consumed counter" "got seq=$SEQ_REAL"
|
|
981
|
+
fi
|
|
982
|
+
|
|
983
|
+
# 56. next-report-id reports peeked: false on real call
|
|
984
|
+
if echo "$REAL" | grep -q '"peeked": false'; then
|
|
985
|
+
pass "next-report-id real call reports peeked: false"
|
|
986
|
+
else
|
|
987
|
+
fail_case "next-report-id missing peeked: false"
|
|
988
|
+
fi
|
|
989
|
+
|
|
990
|
+
# 57. next-report-id reports peeked: true on --peek
|
|
991
|
+
if echo "$PEEK1" | grep -q '"peeked": true'; then
|
|
992
|
+
pass "next-report-id --peek reports peeked: true"
|
|
993
|
+
else
|
|
994
|
+
fail_case "next-report-id missing peeked: true"
|
|
995
|
+
fi
|
|
996
|
+
|
|
939
997
|
# ─── Summary ─────────────────────────────────────────────
|
|
940
998
|
echo ""
|
|
941
999
|
echo "=== Results: $PASS passed, $FAIL failed ==="
|
|
@@ -1,169 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: qualia-design
|
|
3
|
-
description: "One-shot design transformation — critiques, fixes, polishes, hardens, makes responsive. No reports, no choices, just makes it professional. Trigger on 'fix the design', 'make it look better', 'redesign', 'design pass', 'make it modern', 'it looks ugly', 'fix the UI'."
|
|
4
|
-
allowed-tools:
|
|
5
|
-
- Bash
|
|
6
|
-
- Read
|
|
7
|
-
- Write
|
|
8
|
-
- Edit
|
|
9
|
-
- Grep
|
|
10
|
-
- Glob
|
|
11
|
-
- Agent
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
# /qualia-design — One-Shot Design Transformation
|
|
15
|
-
|
|
16
|
-
Read the code, understand what's wrong, fix everything, move on. No reports, no choices.
|
|
17
|
-
|
|
18
|
-
## Usage
|
|
19
|
-
|
|
20
|
-
- `/qualia-design` — Full transformation on all frontend files
|
|
21
|
-
- `/qualia-design app/page.tsx` — Specific file(s)
|
|
22
|
-
- `/qualia-design --scope=dashboard` — Transform a section
|
|
23
|
-
|
|
24
|
-
## Process
|
|
25
|
-
|
|
26
|
-
```bash
|
|
27
|
-
node ~/.claude/bin/qualia-ui.js banner design
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
### 1. Read Brand Context
|
|
31
|
-
|
|
32
|
-
```bash
|
|
33
|
-
cat .planning/DESIGN.md 2>/dev/null || echo "NO_DESIGN"
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
If DESIGN.md exists → it is law. Use exact values from sections 1-9 (Visual Theme, Color Palette, Typography, Components, Layout, Depth, Do's/Don'ts, Responsive, Agent Prompt Guide). If not → use Qualia defaults from `rules/frontend.md`: distinctive fonts, sharp accents, layered backgrounds, no card grids, no blue-purple gradients, full-width layouts.
|
|
37
|
-
|
|
38
|
-
### 2. Find Target Files
|
|
39
|
-
|
|
40
|
-
- If specific files given: use those
|
|
41
|
-
- If `--scope`: grep for matching files in `app/` and `components/`
|
|
42
|
-
- If none: find all `page.tsx`, `layout.tsx`, and component files
|
|
43
|
-
|
|
44
|
-
Count them. If ≤ 5, process in main context (step 3a). If > 5, fan out to parallel agents (step 3b).
|
|
45
|
-
|
|
46
|
-
### 3a. Small File Set (≤ 5 files) — main context
|
|
47
|
-
|
|
48
|
-
Read EVERY target file before modifying. Critique internally using the structured rubric below, then fix everything (step 4).
|
|
49
|
-
|
|
50
|
-
**Critique rubric (required — produces the findings you then fix):**
|
|
51
|
-
|
|
52
|
-
| File | Dimension | Issue | Line | Severity |
|
|
53
|
-
|------|-----------|-------|------|----------|
|
|
54
|
-
| {path} | Typography/Color/Spacing/States/Responsive/A11y/Motion/Microcopy | {specific problem with quote} | {N} | CRITICAL/HIGH/MEDIUM/LOW |
|
|
55
|
-
|
|
56
|
-
Apply fixes to every HIGH and CRITICAL item. MEDIUM items fixed if cheap (same file, same category).
|
|
57
|
-
|
|
58
|
-
### 3b. Large File Set (> 5 files) — parallel fan-out
|
|
59
|
-
|
|
60
|
-
Split target files into batches of 5. Spawn one Agent per batch IN THE SAME RESPONSE TURN (parallel execution). Each agent receives DESIGN.md inlined + its 5 files + the Design Quality Rubric from `rules/grounding.md`. Agents return their batch's critique table + the actual edits applied. The skill orchestrator fans in the results and runs the final verification (step 5).
|
|
61
|
-
|
|
62
|
-
**Forked subagents (v4.2.0+):** if the current conversation already contains
|
|
63
|
-
design taste discussion (font choices, palette discussion, motion preferences,
|
|
64
|
-
or any color/typography critique threaded across multiple turns) AND
|
|
65
|
-
`CLAUDE_AGENT_FORK_ENABLED=1` is set in `~/.claude/settings.json` (the v4.2.0
|
|
66
|
-
default), prefer **forked subagents** over blank-context fan-out. Forks
|
|
67
|
-
inherit the entire conversation history + share the prompt cache, so the
|
|
68
|
-
batch agents see the 50k tokens of accumulated taste instead of a 2k-token
|
|
69
|
-
compression. Anthropic shipped this in 2026-04 specifically to solve the
|
|
70
|
-
"design subagent loses nuance" failure mode (NotebookLM 2026-04-25 source).
|
|
71
|
-
Tell Claude explicitly: "spawn forked subagents to handle these batches in
|
|
72
|
-
parallel." For variation-generation work (3 alternative homepage designs)
|
|
73
|
-
forks are almost always the right call. For mechanical anti-pattern fixes
|
|
74
|
-
(rip out `outline:none`, swap font tokens) blank context is fine — no
|
|
75
|
-
nuance to inherit. When in doubt, fork — the cost is the same prompt cache.
|
|
76
|
-
|
|
77
|
-
```
|
|
78
|
-
Agent(prompt="
|
|
79
|
-
Read your role: builder for design transformation.
|
|
80
|
-
Grounding + rubrics: @~/.claude/rules/grounding.md
|
|
81
|
-
|
|
82
|
-
<design_system>
|
|
83
|
-
{inlined DESIGN.md}
|
|
84
|
-
</design_system>
|
|
85
|
-
|
|
86
|
-
<target_files>
|
|
87
|
-
{5 file paths + their contents}
|
|
88
|
-
</target_files>
|
|
89
|
-
|
|
90
|
-
Apply the Design Quality Rubric to each file. Fix every dimension scoring below 4. Make the literal edits with the Edit tool. Do NOT change logic — only styling.
|
|
91
|
-
|
|
92
|
-
Return:
|
|
93
|
-
- Critique table (File | Dimension | Issue | Line | Before-score | After-score)
|
|
94
|
-
- List of files modified
|
|
95
|
-
- Any anti-pattern greps that remain (report, don't fix beyond scope)
|
|
96
|
-
", subagent_type="general-purpose", description="Design batch {N}")
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
Do not process files serially in main context — that's what wastes a context window.
|
|
100
|
-
|
|
101
|
-
### 4. Fix Everything (applies to step 3a OR to each agent in 3b)
|
|
102
|
-
|
|
103
|
-
Use exact values from DESIGN.md when available. Sections map to fixes:
|
|
104
|
-
|
|
105
|
-
**Typography (§3):** Apply fonts from hierarchy table. Replace any generic fonts (Inter, Arial) with project fonts. Use exact weights, sizes, letter-spacing from the table. Body line-height 1.5-1.7.
|
|
106
|
-
|
|
107
|
-
**Color (§2):** Apply palette from CSS variables. Replace scattered hex values with `var(--color-*)`. Verify contrast ratios listed in DESIGN.md.
|
|
108
|
-
|
|
109
|
-
**Components (§4):** Match button, card, input, badge specs exactly — padding, radius, shadow, hover states.
|
|
110
|
-
|
|
111
|
-
**Layout (§5):** Full-width with fluid padding `clamp(1rem, 5vw, 4rem)`. Apply spacing scale. NO hardcoded max-width caps. Prose gets `max-width: 65ch`.
|
|
112
|
-
|
|
113
|
-
**Depth (§6):** Apply shadow levels from elevation table. Use brand-tinted shadows, not neutral gray.
|
|
114
|
-
|
|
115
|
-
**Motion (§Motion):** CSS transitions 200-300ms on hover/focus. Staggered entrance animations. `prefers-reduced-motion` respected.
|
|
116
|
-
|
|
117
|
-
**States:** Loading skeleton/spinner on async ops. Error states on data fetches. Empty states on lists. Hover/focus/active/disabled on every interactive element.
|
|
118
|
-
|
|
119
|
-
**Responsive (§8):** Apply collapsing strategy from table. Mobile-first. Touch targets 44x44px min. No horizontal scroll.
|
|
120
|
-
|
|
121
|
-
**Anti-Slop (§12):** Run grep patterns from the detection table. Every match = mandatory fix.
|
|
122
|
-
|
|
123
|
-
**Kill:** Card grids → varied layouts. Generic heroes → distinctive. Blue-purple gradients → brand colors. Static pages → purposeful motion. Fixed widths → fluid.
|
|
124
|
-
|
|
125
|
-
### 5. Verify
|
|
126
|
-
|
|
127
|
-
Parallel batch — run these in a single response turn:
|
|
128
|
-
|
|
129
|
-
```bash
|
|
130
|
-
# TypeScript still compiles?
|
|
131
|
-
npx tsc --noEmit 2>&1 | head -20
|
|
132
|
-
|
|
133
|
-
# Reverted anti-patterns (any match = regression)
|
|
134
|
-
grep -rn "outline.*none\|outline-none" --include="*.tsx" --include="*.css" app/ components/ src/ 2>/dev/null | grep -v "focus-visible\|focus:"
|
|
135
|
-
grep -rn "font-family.*Inter\|font-family.*Arial\|font-family.*system-ui\|Space Grotesk" --include="*.tsx" --include="*.css" app/ components/ src/ 2>/dev/null
|
|
136
|
-
grep -rn "max-w-\[1200\|max-w-\[1280\|max-width.*1200\|max-w-7xl" --include="*.tsx" --include="*.css" app/ components/ src/ 2>/dev/null
|
|
137
|
-
grep -rn "<img " --include="*.tsx" app/ components/ src/ 2>/dev/null | grep -v "alt="
|
|
138
|
-
grep -rn "from-blue.*to-purple\|from-purple.*to-blue" --include="*.tsx" --include="*.css" app/ components/ src/ 2>/dev/null
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
Fix any TypeScript errors before committing. If any anti-pattern grep returned matches, re-fix those files — the transformation is not complete until these greps return empty.
|
|
142
|
-
|
|
143
|
-
### 6. Commit
|
|
144
|
-
|
|
145
|
-
```bash
|
|
146
|
-
git add {modified files}
|
|
147
|
-
git commit -m "style: design transformation"
|
|
148
|
-
```
|
|
149
|
-
|
|
150
|
-
```
|
|
151
|
-
⬢ Design Transformation Complete
|
|
152
|
-
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
153
|
-
Files: {N}
|
|
154
|
-
Changes:
|
|
155
|
-
- {key change 1}
|
|
156
|
-
- {key change 2}
|
|
157
|
-
- {key change 3}
|
|
158
|
-
|
|
159
|
-
Next: /qualia-polish (final pass) · /qualia-review (scored audit)
|
|
160
|
-
```
|
|
161
|
-
|
|
162
|
-
## Rules
|
|
163
|
-
|
|
164
|
-
- Read before write — understand every file before changing it
|
|
165
|
-
- Don't ask — just fix
|
|
166
|
-
- Respect DESIGN.md decisions
|
|
167
|
-
- Don't break functionality — only change styling, never logic
|
|
168
|
-
- TypeScript must pass after changes
|
|
169
|
-
- All anti-pattern greps in step 5 must return empty before commit
|