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.
Files changed (70) hide show
  1. package/AGENTS.md +24 -0
  2. package/CLAUDE.md +12 -63
  3. package/README.md +24 -18
  4. package/agents/builder.md +13 -33
  5. package/agents/plan-checker.md +18 -0
  6. package/agents/planner.md +17 -0
  7. package/agents/verifier.md +70 -0
  8. package/agents/visual-evaluator.md +132 -0
  9. package/bin/cli.js +64 -23
  10. package/bin/install.js +375 -29
  11. package/bin/qualia-ui.js +208 -1
  12. package/bin/slop-detect.mjs +362 -0
  13. package/bin/state.js +218 -2
  14. package/docs/erp-contract.md +5 -0
  15. package/docs/install-redesign-builder-prompt.md +290 -0
  16. package/docs/install-redesign-pilot.md +234 -0
  17. package/docs/playwright-loop-builder-prompt.md +185 -0
  18. package/docs/playwright-loop-design-notes.md +108 -0
  19. package/docs/playwright-loop-pilot-results.md +170 -0
  20. package/docs/playwright-loop-review-2026-05-03.md +65 -0
  21. package/docs/playwright-loop-tester-prompt.md +213 -0
  22. package/docs/reviews/matt-pocock-skills-analysis.md +300 -0
  23. package/guide.md +9 -5
  24. package/hooks/env-empty-guard.js +74 -0
  25. package/hooks/pre-compact.js +19 -9
  26. package/hooks/pre-deploy-gate.js +8 -2
  27. package/hooks/pre-push.js +26 -12
  28. package/hooks/supabase-destructive-guard.js +62 -0
  29. package/hooks/vercel-account-guard.js +91 -0
  30. package/package.json +2 -1
  31. package/rules/design-brand.md +114 -0
  32. package/rules/design-laws.md +148 -0
  33. package/rules/design-product.md +114 -0
  34. package/rules/design-rubric.md +157 -0
  35. package/rules/grounding.md +4 -0
  36. package/skills/qualia-build/SKILL.md +40 -46
  37. package/skills/qualia-discuss/SKILL.md +51 -68
  38. package/skills/qualia-handoff/SKILL.md +1 -0
  39. package/skills/qualia-issues/SKILL.md +151 -0
  40. package/skills/qualia-map/SKILL.md +78 -35
  41. package/skills/qualia-new/REFERENCE.md +139 -0
  42. package/skills/qualia-new/SKILL.md +85 -124
  43. package/skills/qualia-optimize/REFERENCE.md +202 -0
  44. package/skills/qualia-optimize/SKILL.md +72 -237
  45. package/skills/qualia-plan/SKILL.md +58 -65
  46. package/skills/qualia-polish/SKILL.md +180 -136
  47. package/skills/qualia-polish-loop/REFERENCE.md +265 -0
  48. package/skills/qualia-polish-loop/SKILL.md +201 -0
  49. package/skills/qualia-polish-loop/fixtures/broken.html +117 -0
  50. package/skills/qualia-polish-loop/fixtures/clean.html +196 -0
  51. package/skills/qualia-polish-loop/scripts/loop.mjs +302 -0
  52. package/skills/qualia-polish-loop/scripts/playwright-capture.mjs +197 -0
  53. package/skills/qualia-polish-loop/scripts/score.mjs +176 -0
  54. package/skills/qualia-report/SKILL.md +141 -180
  55. package/skills/qualia-research/SKILL.md +28 -33
  56. package/skills/qualia-road/SKILL.md +103 -0
  57. package/skills/qualia-ship/SKILL.md +1 -0
  58. package/skills/qualia-task/SKILL.md +1 -1
  59. package/skills/qualia-test/SKILL.md +50 -2
  60. package/skills/qualia-triage/SKILL.md +152 -0
  61. package/skills/qualia-verify/SKILL.md +63 -104
  62. package/skills/qualia-zoom/SKILL.md +51 -0
  63. package/skills/zoho-workflow/SKILL.md +64 -0
  64. package/templates/CONTEXT.md +36 -0
  65. package/templates/DESIGN.md +229 -435
  66. package/templates/PRODUCT.md +95 -0
  67. package/templates/decisions/ADR-template.md +30 -0
  68. package/tests/bin.test.sh +451 -7
  69. package/tests/state.test.sh +58 -0
  70. package/skills/qualia-design/SKILL.md +0 -169
@@ -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