qualia-framework 3.1.0 → 3.2.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/CLAUDE.md +4 -3
- package/README.md +5 -10
- package/agents/planner.md +0 -52
- package/agents/verifier.md +32 -180
- package/bin/cli.js +9 -403
- package/bin/install.js +61 -113
- package/bin/qualia-ui.js +15 -0
- package/bin/state.js +6 -200
- package/bin/statusline.js +4 -4
- package/hooks/auto-update.js +30 -8
- package/hooks/branch-guard.js +2 -23
- package/hooks/migration-guard.js +0 -23
- package/hooks/pre-compact.js +0 -20
- package/hooks/pre-deploy-gate.js +0 -39
- package/hooks/pre-push.js +0 -20
- package/hooks/session-start.js +44 -0
- package/package.json +4 -5
- package/skills/qualia/SKILL.md +0 -1
- package/skills/qualia-build/SKILL.md +0 -18
- package/skills/qualia-design/SKILL.md +8 -14
- package/skills/qualia-learn/SKILL.md +4 -27
- package/skills/qualia-optimize/SKILL.md +417 -0
- package/skills/qualia-polish/SKILL.md +117 -167
- package/skills/qualia-report/SKILL.md +8 -17
- package/skills/qualia-review/SKILL.md +41 -126
- package/skills/qualia-verify/SKILL.md +1 -1
- package/templates/DESIGN.md +102 -440
- package/templates/plan.md +0 -14
- package/tests/bin.test.sh +6 -20
- package/tests/hooks.test.sh +7 -76
- package/tests/state.test.sh +11 -189
- package/docs/erp-contract.md +0 -161
- package/hooks/block-env-edit.js +0 -52
- package/rules/infrastructure.md +0 -87
- package/skills/qualia-help/SKILL.md +0 -60
- package/skills/qualia-test/SKILL.md +0 -134
- package/templates/help.html +0 -476
- package/tests/runner.js +0 -1956
package/CLAUDE.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
Qualia Solutions — Nicosia, Cyprus. Websites, AI agents, voice agents, AI automation.
|
|
5
5
|
|
|
6
6
|
## Stack
|
|
7
|
-
Next.js 16+, React 19, TypeScript, Supabase, Vercel. Voice:
|
|
7
|
+
Next.js 16+, React 19, TypeScript, Supabase, Vercel. Voice: VAPI, ElevenLabs, Telnyx, Retell AI. AI: OpenRouter.
|
|
8
8
|
|
|
9
9
|
## Role: {{ROLE}}
|
|
10
10
|
{{ROLE_DESCRIPTION}}
|
|
@@ -19,7 +19,6 @@ Next.js 16+, React 19, TypeScript, Supabase, Vercel. Voice: Retell AI, ElevenLab
|
|
|
19
19
|
- See `rules/security.md` for auth, RLS, Zod, secrets
|
|
20
20
|
- See `rules/frontend.md` for design standards
|
|
21
21
|
- See `rules/deployment.md` for deploy checklist
|
|
22
|
-
- See `rules/infrastructure.md` for services, APIs, GitHub orgs, Vercel teams
|
|
23
22
|
|
|
24
23
|
## The Road (how projects flow)
|
|
25
24
|
|
|
@@ -52,7 +51,9 @@ No accumulated garbage. No context rot.
|
|
|
52
51
|
## Quality Gates (always active)
|
|
53
52
|
- **Frontend guard:** Read .planning/DESIGN.md before any frontend changes
|
|
54
53
|
- **Deploy guard:** tsc + lint + build + tests must pass before deploy
|
|
55
|
-
- **
|
|
54
|
+
- **Branch guard:** Employees cannot push to main (OWNER can)
|
|
55
|
+
- **Env guard:** Employees cannot edit .env files (OWNER can — add keys, configure secrets directly)
|
|
56
|
+
- **Sudo guard:** Employees cannot run sudo (OWNER can)
|
|
56
57
|
- **Intent verification:** Confirm before modifying 3+ files (OWNER: just do it)
|
|
57
58
|
|
|
58
59
|
## Tracking
|
package/README.md
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
# Qualia Framework v3
|
|
2
2
|
|
|
3
|
-
A
|
|
3
|
+
A prompt orchestration framework for [Claude Code](https://claude.ai/code). It installs into `~/.claude/` and wraps your AI-assisted development workflow with structured planning, execution, verification, and deployment gates.
|
|
4
4
|
|
|
5
5
|
It is not an application framework like Rails or Next.js. It doesn't generate code, run servers, or process data. It's an opinionated workflow layer that tells Claude how to plan, build, and verify your projects.
|
|
6
6
|
|
|
7
|
-
v3 applies lessons from Anthropic's ["Harness Design for Long-Running Apps"](https://www.anthropic.com/engineering/harness-design-long-running-apps) article: scored evaluator rubrics, verification contracts, smarter guards, hook telemetry, and dynamic team management.
|
|
8
|
-
|
|
9
7
|
## Install
|
|
10
8
|
|
|
11
9
|
```bash
|
|
@@ -19,9 +17,6 @@ Enter your team code when prompted. Get your code from Fawzi.
|
|
|
19
17
|
npx qualia-framework version # Check installed version + updates
|
|
20
18
|
npx qualia-framework update # Update to latest (remembers your code)
|
|
21
19
|
npx qualia-framework uninstall # Clean removal from ~/.claude/
|
|
22
|
-
npx qualia-framework team list # Show team members
|
|
23
|
-
npx qualia-framework team add # Add a team member
|
|
24
|
-
npx qualia-framework traces # View recent hook telemetry
|
|
25
20
|
```
|
|
26
21
|
|
|
27
22
|
## Usage
|
|
@@ -71,7 +66,7 @@ Works on **Windows 10/11, macOS, and Linux**. Requires Node.js 18+ and Claude Co
|
|
|
71
66
|
|
|
72
67
|
### Goal-Backward Verification
|
|
73
68
|
|
|
74
|
-
Most CI checks "did the task run." Qualia checks "does the outcome actually work." The verifier
|
|
69
|
+
Most CI checks "did the task run." Qualia checks "does the outcome actually work." The verifier doesn't trust summaries — it greps the codebase for stubs, placeholders, unwired imports. When Claude says "I built the chat component," this catches the cases where it wrote a skeleton with `// TODO` inside.
|
|
75
70
|
|
|
76
71
|
### Agent Separation
|
|
77
72
|
|
|
@@ -89,7 +84,7 @@ All 8 hooks are real ops engineering, not theoretical. Highlights:
|
|
|
89
84
|
|
|
90
85
|
### Enforced State Machine
|
|
91
86
|
|
|
92
|
-
Every workflow step calls `state.js` — a Node.js state machine that validates preconditions
|
|
87
|
+
Every workflow step calls `state.js` — a Node.js state machine that validates preconditions, updates both STATE.md and tracking.json atomically, and tracks gap-closure cycles. You can't build without planning, can't verify without building, and can't loop on gap-closure more than twice before escalating.
|
|
93
88
|
|
|
94
89
|
### Wave-Based Parallelization
|
|
95
90
|
|
|
@@ -111,10 +106,10 @@ npx qualia-framework install
|
|
|
111
106
|
├── hooks/ 8 Node.js hooks — cross-platform (no bash dependency)
|
|
112
107
|
├── bin/ state.js (state machine) + qualia-ui.js (cosmetics library)
|
|
113
108
|
├── knowledge/ learned-patterns.md, common-fixes.md, client-prefs.md (loaded by plan/debug/new)
|
|
114
|
-
├── rules/ security.md, frontend.md,
|
|
109
|
+
├── rules/ security.md, frontend.md, deployment.md
|
|
115
110
|
├── qualia-templates/ tracking.json, state.md, project.md, plan.md, DESIGN.md
|
|
116
111
|
├── CLAUDE.md global instructions (role-configured per team member)
|
|
117
|
-
└── statusline.
|
|
112
|
+
└── statusline.sh teal-branded 2-line status bar
|
|
118
113
|
```
|
|
119
114
|
|
|
120
115
|
## For Qualia Solutions Team
|
package/agents/planner.md
CHANGED
|
@@ -91,58 +91,6 @@ Your training data is often stale. A two-second lookup is cheaper than a wrong t
|
|
|
91
91
|
|
|
92
92
|
**Self-check:** Before returning the plan, verify every task has specific file paths, concrete actions, and testable done-when criteria. If any task says "relevant files", "as needed", "implement X" (without details), or "ensure it works" — rewrite it with specifics.
|
|
93
93
|
|
|
94
|
-
## Verification Contracts
|
|
95
|
-
|
|
96
|
-
Every plan MUST include a `## Verification Contract` section after `## Success Criteria`. Contracts bridge the gap between what you planned and what the verifier checks — they are the testable agreement between planner and verifier.
|
|
97
|
-
|
|
98
|
-
### Contract Format
|
|
99
|
-
|
|
100
|
-
For each task, generate at least one contract entry:
|
|
101
|
-
|
|
102
|
-
```markdown
|
|
103
|
-
## Verification Contract
|
|
104
|
-
|
|
105
|
-
### Contract for Task 1 — {title}
|
|
106
|
-
**Check type:** file-exists
|
|
107
|
-
**Command:** `test -f src/lib/auth.ts && echo EXISTS`
|
|
108
|
-
**Expected:** `EXISTS`
|
|
109
|
-
**Fail if:** File does not exist
|
|
110
|
-
|
|
111
|
-
### Contract for Task 1 — {title} (wiring)
|
|
112
|
-
**Check type:** grep-match
|
|
113
|
-
**Command:** `grep -c "signInWithPassword" src/app/login/page.tsx`
|
|
114
|
-
**Expected:** Non-zero (≥ 1)
|
|
115
|
-
**Fail if:** Returns 0 — function exists in lib but isn't called from the login page
|
|
116
|
-
|
|
117
|
-
### Contract for Task 2 — {title}
|
|
118
|
-
**Check type:** command-exit
|
|
119
|
-
**Command:** `npx tsc --noEmit 2>&1 | grep -c "error TS"`
|
|
120
|
-
**Expected:** `0`
|
|
121
|
-
**Fail if:** Any TypeScript compilation errors
|
|
122
|
-
|
|
123
|
-
### Contract for Task 3 — {title}
|
|
124
|
-
**Check type:** behavioral
|
|
125
|
-
**Command:** (manual verification by verifier)
|
|
126
|
-
**Expected:** User can log in with email/password and see the dashboard
|
|
127
|
-
**Fail if:** Login form submits but no redirect occurs, or dashboard shows empty state
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
### Contract Types
|
|
131
|
-
|
|
132
|
-
| Type | When to use | Verifier action |
|
|
133
|
-
|------|-------------|-----------------|
|
|
134
|
-
| `file-exists` | A file must be created | Run the command, check output |
|
|
135
|
-
| `grep-match` | A function/import/pattern must appear in code | Run grep, check count > 0 |
|
|
136
|
-
| `command-exit` | A tool must exit cleanly (tsc, lint, test) | Run command, check exit code or output |
|
|
137
|
-
| `behavioral` | A user-facing flow must work | Verifier tests manually or via browser QA |
|
|
138
|
-
|
|
139
|
-
### Rules for Contracts
|
|
140
|
-
|
|
141
|
-
1. **Every task gets at least one contract.** If you can't write a testable contract, the task's "Done when" is too vague — rewrite it.
|
|
142
|
-
2. **Contracts must be copy-pasteable.** The verifier runs them verbatim. No placeholders, no `{variable}` — use actual file paths.
|
|
143
|
-
3. **Include wiring contracts.** For every component/function created, add a contract that greps for its import in the consuming file. This catches the #1 failure mode: code that exists but isn't connected.
|
|
144
|
-
4. **Behavioral contracts are last resort.** Prefer grep-match and command-exit — they're deterministic. Use behavioral only for user-facing flows that can't be verified by grep.
|
|
145
|
-
|
|
146
94
|
## Design-Aware Planning
|
|
147
95
|
|
|
148
96
|
When a phase involves frontend work (pages, components, layouts, UI):
|
package/agents/verifier.md
CHANGED
|
@@ -40,38 +40,10 @@ For each success criterion in the plan:
|
|
|
40
40
|
- Are database queries returning data to the UI?
|
|
41
41
|
- This is where stubs hide.
|
|
42
42
|
|
|
43
|
-
## Contract-Based Verification
|
|
44
|
-
|
|
45
|
-
If the phase plan contains a `## Verification Contract` section, execute those contracts FIRST before any ad-hoc verification.
|
|
46
|
-
|
|
47
|
-
### How Contracts Work
|
|
48
|
-
|
|
49
|
-
The planner generates testable contracts for each task. Each contract is a specific check you run verbatim:
|
|
50
|
-
|
|
51
|
-
```markdown
|
|
52
|
-
### Contract for Task 1 — {title}
|
|
53
|
-
**Check type:** file-exists | grep-match | command-exit | behavioral
|
|
54
|
-
**Command:** {exact command to run}
|
|
55
|
-
**Expected:** {what the output should be}
|
|
56
|
-
**Fail if:** {what constitutes failure}
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
### Contract Execution
|
|
60
|
-
|
|
61
|
-
1. Read the `## Verification Contract` section from the plan file
|
|
62
|
-
2. For each contract entry, run the **Command** exactly as written
|
|
63
|
-
3. Compare output against **Expected**
|
|
64
|
-
4. Score: PASS if output matches expected, FAIL if it matches the fail condition
|
|
65
|
-
5. Record results in the report under `## Contract Results`
|
|
66
|
-
|
|
67
|
-
Contracts take priority over ad-hoc verification. If a contract covers a success criterion, use the contract result. Only fall back to the 3-level check (Truths → Artifacts → Wiring) for criteria NOT covered by contracts.
|
|
68
|
-
|
|
69
|
-
If the plan has no `## Verification Contract` section (older plans), skip this step and proceed with the full 3-level check below.
|
|
70
|
-
|
|
71
43
|
## How to Verify
|
|
72
44
|
|
|
73
45
|
### 1. Read the Plan
|
|
74
|
-
Extract success criteria from the phase plan's `## Success Criteria` section.
|
|
46
|
+
Extract success criteria from the phase plan's `## Success Criteria` section.
|
|
75
47
|
|
|
76
48
|
### 2. For Each Criterion, Run the 3-Level Check
|
|
77
49
|
|
|
@@ -139,21 +111,12 @@ gaps: {count of failures}
|
|
|
139
111
|
|
|
140
112
|
# Phase {N} Verification
|
|
141
113
|
|
|
142
|
-
##
|
|
143
|
-
|
|
144
|
-
| Task | Check | Command | Result | Notes |
|
|
145
|
-
|------|-------|---------|--------|-------|
|
|
146
|
-
| Task 1 | file-exists | `test -f src/lib/auth.ts` | PASS | File exists, 142 lines |
|
|
147
|
-
| Task 2 | grep-match | `grep -c "signIn" src/lib/auth.ts` | PASS | 3 matches |
|
|
148
|
-
|
|
149
|
-
## Scores
|
|
114
|
+
## Results
|
|
150
115
|
|
|
151
|
-
| Criterion |
|
|
152
|
-
|
|
153
|
-
| {criterion 1} |
|
|
154
|
-
| {criterion 2} |
|
|
155
|
-
|
|
156
|
-
**Minimum threshold check:** {any score < 3? If YES → FAIL}
|
|
116
|
+
| Criterion | Status | Evidence |
|
|
117
|
+
|-----------|--------|----------|
|
|
118
|
+
| {criterion 1} | PASS | {what you found} |
|
|
119
|
+
| {criterion 2} | FAIL | {what's wrong} |
|
|
157
120
|
|
|
158
121
|
## Code Quality
|
|
159
122
|
- TypeScript: PASS/FAIL
|
|
@@ -162,107 +125,35 @@ gaps: {count of failures}
|
|
|
162
125
|
- Unused imports: {count}
|
|
163
126
|
|
|
164
127
|
## Gaps (if any)
|
|
165
|
-
1. {
|
|
166
|
-
2. {
|
|
128
|
+
1. {what failed and why}
|
|
129
|
+
2. {what failed and why}
|
|
167
130
|
|
|
168
131
|
## Verdict
|
|
169
|
-
PASS — Phase {N} goal achieved.
|
|
132
|
+
PASS — Phase {N} goal achieved. Proceed to Phase {N+1}.
|
|
170
133
|
OR
|
|
171
|
-
FAIL — {N} gaps found.
|
|
134
|
+
FAIL — {N} gaps found. Run `/qualia-plan {N} --gaps` to fix.
|
|
172
135
|
```
|
|
173
136
|
|
|
174
|
-
## Scoring
|
|
175
|
-
|
|
176
|
-
Every success criterion is scored on 4 dimensions, each rated 1-5:
|
|
177
|
-
|
|
178
|
-
### Correctness (1-5)
|
|
179
|
-
Does it produce the right output?
|
|
180
|
-
- **1** — Crashes, errors, or wrong output
|
|
181
|
-
- **2** — Works for the happy path only; any deviation breaks it
|
|
182
|
-
- **3** — Handles common edge cases (empty input, missing data, basic validation)
|
|
183
|
-
- **4** — Handles most edge cases; error messages are user-friendly
|
|
184
|
-
- **5** — Comprehensive error handling; graceful degradation; defensive coding
|
|
185
|
-
|
|
186
|
-
### Completeness (1-5)
|
|
187
|
-
Were all contracted requirements met?
|
|
188
|
-
- **1** — Less than half of the requirements implemented
|
|
189
|
-
- **2** — Over half done, but significant gaps remain
|
|
190
|
-
- **3** — All requirements present, but some are partial (e.g., UI exists but missing states)
|
|
191
|
-
- **4** — All requirements fully implemented as specified
|
|
192
|
-
- **5** — All requirements plus defensive coding, edge case coverage, and polish
|
|
193
|
-
|
|
194
|
-
### Wiring (1-5)
|
|
195
|
-
Is everything connected end-to-end?
|
|
196
|
-
- **1** — Files exist but are not imported anywhere
|
|
197
|
-
- **2** — Imported but never called (dead code)
|
|
198
|
-
- **3** — Called, but data flow is incomplete (e.g., API route exists, component calls it, but response isn't rendered)
|
|
199
|
-
- **4** — Full data flow with minor gaps (e.g., loading state missing, error not surfaced)
|
|
200
|
-
- **5** — Complete wiring verified by grep — every export is imported, every API is consumed, every component is rendered
|
|
201
|
-
|
|
202
|
-
### Quality (1-5)
|
|
203
|
-
Code quality, security, accessibility?
|
|
204
|
-
- **1** — Stubs and placeholders throughout; `// TODO` everywhere
|
|
205
|
-
- **2** — Works but violates project conventions (wrong patterns, hardcoded values, no types)
|
|
206
|
-
- **3** — Follows conventions with minor issues (a few missing types, inconsistent naming)
|
|
207
|
-
- **4** — Clean code; good patterns; types complete; security rules followed
|
|
208
|
-
- **5** — Exemplary — accessible, performant, secure, well-structured, follows all rules
|
|
209
|
-
|
|
210
|
-
### Hard Threshold
|
|
211
|
-
|
|
212
|
-
**Any criterion scoring below 3 triggers FAIL regardless of other scores.**
|
|
213
|
-
|
|
214
|
-
A component with Correctness=5, Completeness=5, Wiring=1, Quality=5 is FAIL — it's perfect code that nobody can use because it's not connected.
|
|
215
|
-
|
|
216
|
-
### Phase Verdict
|
|
217
|
-
- **ALL criteria ≥ 3 on all dimensions** → PASS. Phase verified.
|
|
218
|
-
- **ANY criterion < 3 on ANY dimension** → FAIL. List each gap with: what scored low, what file, what's needed. Suggest `/qualia-plan {N} --gaps`.
|
|
219
|
-
|
|
220
|
-
Never round up. A 2 is not a 3. The goal of verification is to catch the work that LOOKS done but ISN'T.
|
|
221
|
-
|
|
222
|
-
## Few-Shot Calibration
|
|
137
|
+
## Scoring
|
|
223
138
|
|
|
224
|
-
|
|
139
|
+
Each success criterion from the plan gets a verdict:
|
|
225
140
|
|
|
226
|
-
|
|
141
|
+
- **PASS** — All 3 levels check out. File exists, has real implementation (not stubs), and is imported/used by the system.
|
|
142
|
+
- **PARTIAL** — File exists and has real code, but isn't fully wired (e.g., component exists but isn't rendered in any page, API route exists but no client calls it). This is NOT a pass.
|
|
143
|
+
- **FAIL** — File missing, is a stub, or has 0 connections to the rest of the codebase.
|
|
227
144
|
|
|
228
|
-
Phase
|
|
145
|
+
Phase verdict:
|
|
146
|
+
- **ALL PASS** → Phase verified. Update STATE.md status to "verified".
|
|
147
|
+
- **ANY PARTIAL or FAIL** → Phase has gaps. List each gap with: what's wrong, what file, what's needed. Suggest `/qualia-plan {N} --gaps`.
|
|
229
148
|
|
|
230
|
-
|
|
231
|
-
|-----------|-------|----------|
|
|
232
|
-
| Correctness | 4 | `signInWithPassword()` called in handler; session persists across refresh; invalid credentials show error; tested login→dashboard→logout→login flow |
|
|
233
|
-
| Completeness | 4 | Sign up, login, logout, protected route redirect all implemented; password validation with Zod; email verification flow present |
|
|
234
|
-
| Wiring | 5 | `grep -r "signInWithPassword" src/` shows call in `app/login/page.tsx`; `grep -r "createClient" src/lib/` shows server client used in middleware; `grep -r "auth.uid" supabase/` shows RLS policies reference auth |
|
|
235
|
-
| Quality | 4 | Server-side auth only; RLS on all tables; Zod validation on inputs; no service_role in client code; semantic HTML on forms; visible focus rings on inputs |
|
|
236
|
-
|
|
237
|
-
**Verdict: PASS** — All scores ≥ 3. Minimum threshold check: NO scores below 3.
|
|
238
|
-
|
|
239
|
-
### Example B: FAIL — Chat Component Phase
|
|
240
|
-
|
|
241
|
-
Phase goal: "Working real-time chat interface with message history."
|
|
242
|
-
|
|
243
|
-
| Criterion | Score | Evidence |
|
|
244
|
-
|-----------|-------|----------|
|
|
245
|
-
| Correctness | 4 | Chat component renders messages correctly; timestamps formatted; scroll-to-bottom works |
|
|
246
|
-
| Completeness | 3 | Message send, receive, history all present; emoji support missing but not in spec |
|
|
247
|
-
| Wiring | 1 | `grep -r "ChatWindow" app/` returns 0 results — component exists at `components/chat/ChatWindow.tsx` but is NOT rendered in any page. `grep -r "from.*chat" app/` returns 0. The component is an island. |
|
|
248
|
-
| Quality | 3 | Clean code; types present; but no loading state, no error state, no empty state |
|
|
249
|
-
|
|
250
|
-
**Verdict: FAIL** — Wiring scored 1 (below threshold of 3). The chat component is well-built code that nobody can access because it's not mounted in any route. This is the exact kind of "looks done but isn't" that verification exists to catch.
|
|
149
|
+
Never round up. A PARTIAL is not a PASS. The goal of verification is to catch the work that LOOKS done but ISN'T.
|
|
251
150
|
|
|
252
151
|
## Design Verification (for phases with frontend work)
|
|
253
152
|
|
|
254
|
-
If the phase involved UI/frontend tasks, add a **Design Quality** section to the report
|
|
153
|
+
If the phase involved UI/frontend tasks, add a **Design Quality** section to the report:
|
|
255
154
|
|
|
256
|
-
|
|
155
|
+
### Check 1: Design System Compliance
|
|
257
156
|
```bash
|
|
258
|
-
cat .planning/DESIGN.md 2>/dev/null || echo "NO_DESIGN_MD"
|
|
259
|
-
```
|
|
260
|
-
|
|
261
|
-
If DESIGN.md exists, verify against its specific values. If not, verify against `rules/frontend.md` defaults.
|
|
262
|
-
|
|
263
|
-
### Check 1: Design System Compliance (DESIGN.md §2, §3, §12)
|
|
264
|
-
```bash
|
|
265
|
-
# Anti-slop detection — run patterns from DESIGN.md §12
|
|
266
157
|
# Generic fonts (should NOT appear)
|
|
267
158
|
grep -rn "font-family.*Inter\|font-family.*Roboto\|font-family.*Arial\|fontFamily.*Inter\|fontFamily.*Roboto" --include="*.tsx" --include="*.jsx" --include="*.css" app/ components/ src/ 2>/dev/null
|
|
268
159
|
grep -rn "font-sans\|font-inter" --include="*.tsx" --include="*.jsx" app/ components/ src/ 2>/dev/null
|
|
@@ -272,30 +163,9 @@ grep -rn "max-w-\[1200\|max-w-\[1280\|max-width.*1200\|max-width.*1280\|max-w-7x
|
|
|
272
163
|
|
|
273
164
|
# Hardcoded colors instead of CSS variables (check density)
|
|
274
165
|
grep -rn "color:.*#\|background:.*#\|bg-\[#" --include="*.tsx" --include="*.jsx" app/ components/ src/ 2>/dev/null | wc -l
|
|
275
|
-
# If DESIGN.md §2 defines CSS variables and this count > 5 → flag
|
|
276
|
-
|
|
277
|
-
# Blue-purple gradients (AI slop tell)
|
|
278
|
-
grep -rn "from-blue.*to-purple\|from-purple.*to-blue\|linear-gradient.*blue.*purple" --include="*.tsx" --include="*.css" app/ components/ src/ 2>/dev/null
|
|
279
166
|
```
|
|
280
167
|
|
|
281
|
-
### Check 2:
|
|
282
|
-
```bash
|
|
283
|
-
# Verify project fonts are actually loaded (check layout.tsx or globals.css)
|
|
284
|
-
grep -rn "font-family\|fontFamily\|Google.*Font\|next/font" --include="*.tsx" --include="*.css" app/layout* src/ 2>/dev/null | head -5
|
|
285
|
-
|
|
286
|
-
# If DESIGN.md specifies a font, grep for it
|
|
287
|
-
# grep -rn "{DESIGN.MD_FONT_NAME}" --include="*.tsx" --include="*.css" app/ 2>/dev/null
|
|
288
|
-
```
|
|
289
|
-
Cross-reference: do the fonts in code match §3 hierarchy table? Are weights correct?
|
|
290
|
-
|
|
291
|
-
### Check 3: Depth & Elevation (DESIGN.md §6)
|
|
292
|
-
```bash
|
|
293
|
-
# Check for shadow usage (should use CSS variables, not inline rgba)
|
|
294
|
-
grep -rn "box-shadow\|shadow-\[" --include="*.tsx" --include="*.css" app/ components/ src/ 2>/dev/null | head -10
|
|
295
|
-
# Verify shadows match the elevation levels from DESIGN.md §6
|
|
296
|
-
```
|
|
297
|
-
|
|
298
|
-
### Check 4: Accessibility (DESIGN.md §10)
|
|
168
|
+
### Check 2: Accessibility Basics
|
|
299
169
|
```bash
|
|
300
170
|
# Images without alt text
|
|
301
171
|
grep -rn "<img" --include="*.tsx" --include="*.jsx" app/ components/ src/ 2>/dev/null | grep -v "alt="
|
|
@@ -309,53 +179,35 @@ grep -rn "outline.*none\|outline-none" --include="*.tsx" --include="*.jsx" --inc
|
|
|
309
179
|
# Missing lang attribute
|
|
310
180
|
grep -rn "<html" --include="*.tsx" --include="*.jsx" app/ 2>/dev/null | grep -v "lang="
|
|
311
181
|
|
|
312
|
-
# Heading hierarchy — check for h1 count
|
|
182
|
+
# Heading hierarchy — check for h1 count
|
|
313
183
|
grep -rn "<h1\|<H1" --include="*.tsx" --include="*.jsx" app/ 2>/dev/null | wc -l
|
|
314
|
-
|
|
315
|
-
# Skip link presence
|
|
316
|
-
grep -rn "skip.*main\|sr-only.*focus" --include="*.tsx" app/layout* 2>/dev/null
|
|
317
184
|
```
|
|
318
185
|
|
|
319
|
-
### Check
|
|
186
|
+
### Check 3: Interactive States
|
|
320
187
|
```bash
|
|
188
|
+
# Buttons/links without hover/focus styles — spot check
|
|
189
|
+
grep -rn "<button\|<Button\|<a " --include="*.tsx" --include="*.jsx" app/ components/ src/ 2>/dev/null | head -5
|
|
190
|
+
# Verify these have hover/focus transitions in their styling
|
|
191
|
+
|
|
321
192
|
# Loading states — check for skeleton/spinner usage in pages with data fetching
|
|
322
193
|
grep -rn "fetch\|useQuery\|useSWR\|getServerSide\|async.*Component" --include="*.tsx" app/ 2>/dev/null | head -5
|
|
323
194
|
grep -rn "loading\|skeleton\|spinner\|Spinner\|Loading" --include="*.tsx" app/ components/ 2>/dev/null | wc -l
|
|
324
195
|
|
|
325
196
|
# Empty states — check lists/tables have empty handling
|
|
326
197
|
grep -rn "\.length.*===.*0\|\.length.*>.*0\|isEmpty\|no.*results\|no.*data" --include="*.tsx" app/ components/ 2>/dev/null | wc -l
|
|
327
|
-
|
|
328
|
-
# Error states — check for error boundaries or error handling
|
|
329
|
-
grep -rn "error\|Error\|catch\|fallback" --include="*.tsx" app/ components/ 2>/dev/null | wc -l
|
|
330
198
|
```
|
|
331
199
|
|
|
332
|
-
### Check
|
|
200
|
+
### Check 4: Responsive
|
|
333
201
|
```bash
|
|
334
202
|
# Check for responsive utilities or media queries
|
|
335
203
|
grep -rn "sm:\|md:\|lg:\|xl:\|@media" --include="*.tsx" --include="*.jsx" --include="*.css" app/ components/ src/ 2>/dev/null | wc -l
|
|
336
204
|
# If 0 responsive declarations across multiple components → FAIL
|
|
337
|
-
|
|
338
|
-
# Check collapsing strategy matches DESIGN.md §8 table
|
|
339
|
-
# Verify navigation has mobile treatment
|
|
340
|
-
grep -rn "hamburger\|mobile.*nav\|drawer\|menu.*toggle\|MenuIcon" --include="*.tsx" app/ components/ 2>/dev/null
|
|
341
|
-
```
|
|
342
|
-
|
|
343
|
-
### Check 7: Hardening (DESIGN.md §11)
|
|
344
|
-
```bash
|
|
345
|
-
# Check for text overflow handling
|
|
346
|
-
grep -rn "truncate\|overflow.*hidden\|text-ellipsis\|line-clamp" --include="*.tsx" --include="*.css" app/ components/ 2>/dev/null | wc -l
|
|
347
|
-
|
|
348
|
-
# Check for empty state components
|
|
349
|
-
grep -rn "empty\|Empty\|no.*found\|no.*results" --include="*.tsx" app/ components/ 2>/dev/null | wc -l
|
|
350
205
|
```
|
|
351
206
|
|
|
352
207
|
### Scoring Design
|
|
353
|
-
- 0 generic fonts + 0 hardcoded max-widths + colors via
|
|
354
|
-
-
|
|
355
|
-
-
|
|
356
|
-
- Accessibility checklist from §10 all present = **PASS**
|
|
357
|
-
- States (loading/empty/error) present = **PASS**
|
|
358
|
-
- Responsive declarations present + mobile nav = **PASS** (§8)
|
|
208
|
+
- 0 generic fonts + 0 hardcoded max-widths + colors via variables = **PASS**
|
|
209
|
+
- Accessibility basics all present = **PASS**
|
|
210
|
+
- States and responsive present = **PASS**
|
|
359
211
|
- Any category failing = add to **Gaps** list with specific file:line
|
|
360
212
|
|
|
361
213
|
## Rules
|