qualia-framework 3.1.0 → 3.2.0

package/skills/qualia-polish/SKILL.md

@@ -1,24 +1,11 @@
 ---
 name: qualia-polish
-description: "Design and UX pass — anti-AI-slop, genuine craft, responsive, accessible. Run after all phases are verified."
+description: "Design and UX pass — critique, polish, harden. Run after all phases are verified."
 ---
 
 # /qualia-polish — Design Pass
 
-Makes it look like a human designer built it. Kills AI slop. Run after all feature phases are verified.
-
-## The Standard
-
-Every site Qualia ships must feel **designed, not generated.** AI-generated sites have tells:
-- Identical card grids with rounded corners and soft shadows
-- Blue-purple gradients on everything
-- Inter/system-ui font with no hierarchy
-- Generic hero with centered text and a stock gradient background
-- Fixed-width containers leaving dead space on wide screens
-- No motion, no personality, no opinion
-- Perfect symmetry everywhere (real design has tension)
-
-**Kill all of these.** A Qualia site should make someone ask "who designed this?" — not "which template is this?"
+Run after all feature phases are verified. Makes it look production-ready.
 
 ## Process
 
@@ -32,176 +19,139 @@ node ~/.claude/bin/qualia-ui.js banner polish
 cat .planning/DESIGN.md 2>/dev/null || echo "NO_DESIGN"
 ```
 
-If DESIGN.md exists → it's the standard. Read ALL 12 sections. Key sections for polish:
-- §1 Visual Theme — the feel and signature details
-- §2 Color Palette — exact hex values, CSS variables, contrast ratios
-- §3 Typography — hierarchy table with exact sizes/weights/spacing
-- §4 Components — exact button/card/input/badge specs
-- §5 Layout — spacing scale, grid strategy
-- §6 Depth & Elevation — shadow levels with exact rgba values
-- §7 Do's/Don'ts — brand-specific guardrails
-- §9 Agent Prompt Guide — quick reference for common patterns
-- §10 Accessibility — WCAG checklist
-- §11 Hardening — stress-test criteria
-- §12 Anti-Slop Detection — grep patterns for automated checks
-
-If no DESIGN.md → use `rules/frontend.md` defaults.
+If DESIGN.md exists → use it as the standard. If not → use Qualia defaults from `rules/frontend.md`.
 
 Read EVERY frontend file before modifying. No blind edits.
 
-### 1. AI Slop Detector
-
-Run these checks first. Any hits = mandatory fixes.
-
-```bash
-# Generic fonts (the #1 AI tell)
-grep -rn "Inter\|Roboto\|Arial\|Helvetica\|system-ui\|Space.Grotesk" --include="*.tsx" --include="*.css" --include="*.scss" --include="tailwind*" app/ components/ src/ 2>/dev/null | grep -v node_modules
-
-# Hardcoded max-width containers (screams template)
-grep -rn "max-w-7xl\|max-w-\[1200\|max-w-\[1280\|max-width.*1200\|max-width.*1280" --include="*.tsx" --include="*.css" app/ components/ src/ 2>/dev/null
-
-# Blue-purple gradients
-grep -rn "from-blue.*to-purple\|from-purple.*to-blue\|linear-gradient.*blue.*purple\|linear-gradient.*purple.*blue\|from-indigo.*to-violet" --include="*.tsx" --include="*.css" app/ components/ src/ 2>/dev/null
-
-# Card grid monotony (same card component repeated in a grid)
-grep -rn "grid-cols-3\|grid-cols-4" --include="*.tsx" app/ components/ src/ 2>/dev/null | head -5
-
-# Generic hero patterns
-grep -rn "text-center.*mx-auto\|Hero\|hero" --include="*.tsx" app/ components/ src/ 2>/dev/null | head -5
-
-# Scattered hardcoded colors (no design system)
-grep -rn "text-\[#\|bg-\[#\|border-\[#\|color:.*#\|background:.*#" --include="*.tsx" app/ components/ src/ 2>/dev/null | wc -l
-```
-
-**Every hit gets fixed.** Not flagged — fixed.
-
-### 2. Typography Pass
-
-**Goal:** A reader should feel the type was chosen, not defaulted.
-
-- Pick a distinctive display font. Not Inter, not Roboto, not system. Something with character: Clash Display, Cabinet Grotesk, General Sans, Satoshi, Plus Jakarta Sans, Outfit, Sora, Manrope. Pair with a clean body font.
-- Establish clear hierarchy: display (hero text) → h1 → h2 → h3 → body → caption
-- Body: 16px minimum, line-height 1.5-1.7
-- Headings: tighter line-height (1.1-1.3), negative letter-spacing (-0.02em) for display sizes
-- Weight hierarchy: Regular (400) for body, Medium (500) for labels, Semibold (600) for headings, Bold (700) for display
-- Prose content: `max-width: 65ch`. Everything else: fluid full-width.
-- Use `clamp()` for fluid sizing: `clamp(2rem, 1rem + 3vw, 3.75rem)` for h1
-
-### 3. Color & Surfaces
-
-**Goal:** A palette that looks intentional, not random.
-
-- Define all colors as CSS variables or Tailwind config — zero scattered hex values
-- One dominant brand color. One sharp accent for CTAs that pops against the page.
-- Surfaces: layer them. Background → card → elevated card. Use subtle shade differences, not just white-on-white.
-- Dark mode (if present): rethink surfaces, don't just invert. Slightly reduce contrast. Use darker brand colors, not just white→black swap.
-- Semantic colors with non-color indicators: success (green + checkmark), error (red + icon), warning (amber + triangle)
-- Verify WCAG AA: 4.5:1 for normal text, 3:1 for large text (18px+ bold or 24px+)
-
-### 4. Layout & Spacing
-
-**Goal:** Full-width, fluid, generous. No dead space gutters.
-
-- Full-width layouts with fluid padding: `clamp(1rem, 5vw, 4rem)` horizontal
-- 8px spacing grid: 4, 8, 12, 16, 24, 32, 48, 64, 96
-- Tight spacing within groups (related items). Generous spacing between sections.
-- Break symmetry where it serves the design — offset grids, overlapping elements, diagonal flow
-- Varied layouts: not every section should be a centered-text-with-cards-below. Use side-by-side, staggered, asymmetric, full-bleed.
-- Section spacing: `clamp(2rem, 8vw, 6rem)` vertical padding
-
-### 5. Interactive States
-
-**Goal:** Every clickable thing responds. Every async operation shows progress.
-
-- **Hover:** color shift or underline within 150ms ease-out. `cursor: pointer` on ALL clickables.
-- **Focus:** visible ring (2px+ offset, contrasting color). Never `outline: none` without replacement.
-- **Active/pressed:** subtle scale down (`transform: scale(0.98)`) or color shift.
-- **Disabled:** opacity 0.5 + `cursor: not-allowed` + `aria-disabled="true"`
-- **Loading:** skeleton shimmer or spinner on every async operation. Never a blank void.
-- **Empty:** helpful message + CTA on empty lists/tables. Not just "No results."
-- **Error:** user-friendly message + recovery action. Not raw error text. Use `aria-live="assertive"`.
-
-### 6. Motion & Personality
-
-**Goal:** The site feels alive, not static. But tasteful — not a circus.
-
-- Page load: stagger children entrance (50-80ms delay between items, `fadeUp` animation, 300ms)
-- Hover transitions: 150-200ms ease-out
-- Section transitions: 300-500ms with `cubic-bezier(0.4, 0, 0.2, 1)`
-- One signature motion that gives the site personality (parallax, scroll-triggered reveal, magnetic buttons, morphing shapes)
-- **Always** `prefers-reduced-motion: reduce` — disable non-essential animation
-- CSS-only for static sites, `motion/react` (formerly Framer Motion) for React
-
-### 7. Accessibility (Non-Negotiable)
-
-- Semantic HTML: `nav`, `main`, `section`, `article`, `header`, `footer` — not div soup
-- One `h1` per page, sequential heading order (no h1 → h3 skip)
-- All images: descriptive `alt` (or `alt=""` + `aria-hidden` if decorative)
-- All form inputs: visible `<label>` with `htmlFor` — not placeholder-only
-- All interactive elements: keyboard accessible (Tab, Enter, Escape, Arrow keys)
-- Touch targets: 44x44px minimum
-- Skip link: `<a href="#main" class="sr-only focus:not-sr-only">` as first focusable element
-- `<html lang="en">` set
-- Color never the sole information carrier — icons, text, patterns as supplements
-- `aria-live="polite"` for toast notifications and dynamic content updates
-
-### 8. Responsive (Mobile-First)
-
-- Base styles for mobile (320px), scale up with `min-width` breakpoints
-- Test at: 320px (small phone), 375px (iPhone), 768px (iPad), 1024px (laptop), 1440px (desktop)
-- No horizontal scroll at any viewport
-- Navigation: hamburger/drawer on mobile, full horizontal on desktop
-- Stack on mobile, expand on desktop
-- Fluid typography with `clamp()`
-- Images: `max-width: 100%`, responsive `srcset`, `next/image` with width/height
-- Tables: card layout or horizontal scroll on mobile
-
-### 9. Harden (Edge Cases)
-
-After all visual work, stress-test:
-- Long text: does a 200-character username break the layout?
-- Empty everywhere: all lists empty, all data missing — does it still make sense?
-- Error everywhere: every fetch fails — are error states visible and helpful?
-- 320px viewport: nothing overflows, nothing clips, nothing overlaps
-- Keyboard only: Tab through the entire app — can you reach everything? Is focus visible?
-- Slow network: are loading states visible? Does content stream in or flash?
-
-### 10. Verify & Ship
+### 1. Critique (Structured Audit)
+
+Review the entire UI against this checklist. Check each item, note violations with file:line.
+
+**Typography:**
+- [ ] No generic fonts (Inter, Roboto, Arial, system-ui, Space Grotesk)
+- [ ] Proper type scale with clear hierarchy (display → heading → body → caption)
+- [ ] Body text: 16px+, line-height 1.5–1.7
+- [ ] Headings: tighter line-height (1.1–1.3), negative letter-spacing for large sizes
+- [ ] Prose max-width: 65ch
+- [ ] Font weights used for hierarchy (Regular, Medium, Semibold, Bold)
+
+**Color & Contrast:**
+- [ ] Cohesive palette via CSS variables (not scattered hex values)
+- [ ] All text passes WCAG AA contrast (4.5:1 normal, 3:1 large)
+- [ ] CTA buttons use accent color — stand out from the page
+- [ ] No blue-purple gradients, no rainbow palettes
+- [ ] Dark mode: rethought surfaces (not just inverted)
+- [ ] Semantic colors used consistently (success=green, error=red, warning=amber)
+
+**Layout & Spacing:**
+- [ ] Full-width fluid layouts — no hardcoded max-width caps
+- [ ] 8px spacing grid followed consistently
+- [ ] Tight spacing within groups, generous between sections
+- [ ] Fluid padding: `clamp(1rem, 5vw, 4rem)` horizontal
+- [ ] No identical card grids — varied visual hierarchy
+- [ ] No generic heroes — purposeful, distinctive
+
+**Interactive States:**
+- [ ] Every button/link: hover (color shift, 150ms), focus (visible ring), active (press feedback), disabled
+- [ ] Loading: skeleton or spinner on all async operations
+- [ ] Empty: helpful message + action on empty lists/data
+- [ ] Error: user-friendly message + recovery action on failed fetches
+- [ ] Form validation: inline errors with `aria-describedby`
+
+**Motion:**
+- [ ] Hover/focus: 150–200ms transitions
+- [ ] Page load: staggered entrance animations (50–80ms delay)
+- [ ] Expand/collapse: 250ms ease-in-out
+- [ ] `prefers-reduced-motion` respected (no animation for users who opt out)
+- [ ] No jank: transforms and opacity only for animated properties
+
+**Accessibility:**
+- [ ] Semantic HTML: `nav`, `main`, `section`, `article`, `header`, `footer`
+- [ ] One `h1` per page, sequential heading hierarchy
+- [ ] All images: descriptive `alt` (or `alt=""` + `aria-hidden` if decorative)
+- [ ] All form inputs: visible `<label>` with `htmlFor` — not placeholder-only
+- [ ] All interactive elements: keyboard accessible (Tab/Enter/Escape)
+- [ ] Touch targets: 44px minimum
+- [ ] Skip link: `<a href="#main">` as first focusable element
+- [ ] No `outline: none` without focus replacement
+- [ ] `<html lang="en">` set
+- [ ] Color not sole information carrier — icons/text as supplements
+
+**Responsive:**
+- [ ] Mobile-first approach (base styles for mobile, min-width breakpoints for larger)
+- [ ] No horizontal scroll at 320px
+- [ ] Navigation: hamburger on mobile, expanded on desktop
+- [ ] Touch targets adequate on mobile (44px min)
+- [ ] Fluid typography with `clamp()`
+- [ ] Images: `max-width: 100%`, responsive srcset where needed
+- [ ] Tables: card view or horizontal scroll on mobile
+
+**Performance:**
+- [ ] Server Components by default — `'use client'` only when needed
+- [ ] Images via `next/image` with width/height
+- [ ] No barrel file imports — direct imports from source
+- [ ] Heavy components lazy-loaded with `next/dynamic`
+- [ ] Data fetched in parallel, not sequentially
+
+### 2. Fix Everything
+
+Work through violations from the critique. Fix each category:
+
+1. Typography first (sets the visual foundation)
+2. Color & contrast (palette coherence)
+3. Layout & spacing (structural fixes)
+4. Interactive states (loading, empty, error, hover, focus)
+5. Motion (transitions, entrance animations, reduced-motion)
+6. Accessibility (semantic HTML, ARIA, keyboard, labels)
+7. Responsive (mobile breakpoints, fluid sizing)
+8. Performance (quick wins — image optimization, dynamic imports)
+
+### 3. Harden
+
+After polish, stress-test edge cases:
+- Long text content (overflow, truncation, word-break)
+- Extremely long usernames or email addresses
+- Empty data everywhere simultaneously
+- Error state on every fetch simultaneously
+- 320px viewport width
+- Keyboard-only navigation through entire flow
+- Screen reader landmarks check (semantic HTML)
+- Right-to-left text (if i18n is planned)
+- Slow network (loading states visible, no flash of empty content)
+
+### 4. Verify
 
 ```bash
 npx tsc --noEmit 2>&1 | head -20
 ```
 
-Fix any TypeScript errors.
+Fix any TypeScript errors before committing.
+
+### 5. Commit & Transition
 
 ```bash
 git add {changed files}
-git commit -m "polish: design pass — typography, color, states, motion, responsive, a11y"
+git commit -m "polish: design and UX pass — typography, accessibility, responsive, states"
 ```
 
 ```bash
 node ~/.claude/bin/state.js transition --to polished
 ```
+Do NOT manually edit STATE.md or tracking.json — state.js handles both.
+
+### 6. Report
 
 ```bash
 node ~/.claude/bin/qualia-ui.js divider
-node ~/.claude/bin/qualia-ui.js ok "AI slop: killed"
-node ~/.claude/bin/qualia-ui.js ok "Typography: {brief}"
-node ~/.claude/bin/qualia-ui.js ok "Color: {brief}"
-node ~/.claude/bin/qualia-ui.js ok "Layout: {brief}"
-node ~/.claude/bin/qualia-ui.js ok "States: {brief}"
-node ~/.claude/bin/qualia-ui.js ok "Motion: {brief}"
-node ~/.claude/bin/qualia-ui.js ok "Accessibility: {brief}"
-node ~/.claude/bin/qualia-ui.js ok "Responsive: {brief}"
-node ~/.claude/bin/qualia-ui.js ok "Hardened: {brief}"
+node ~/.claude/bin/qualia-ui.js info "Files modified: {N}"
+node ~/.claude/bin/qualia-ui.js ok "Typography — {brief}"
+node ~/.claude/bin/qualia-ui.js ok "Color — {brief}"
+node ~/.claude/bin/qualia-ui.js ok "Layout — {brief}"
+node ~/.claude/bin/qualia-ui.js ok "States — {brief}"
+node ~/.claude/bin/qualia-ui.js ok "Motion — {brief}"
+node ~/.claude/bin/qualia-ui.js ok "Accessibility — {brief}"
+node ~/.claude/bin/qualia-ui.js ok "Responsive — {brief}"
+node ~/.claude/bin/qualia-ui.js ok "Performance — {brief}"
+node ~/.claude/bin/qualia-ui.js ok "Hardening — {brief}"
 node ~/.claude/bin/qualia-ui.js end "POLISHED" "/qualia-ship"
 ```
-
-## Rules
-
-1. **Read before write.** Understand every file before changing it.
-2. **DESIGN.md is law.** If it exists, follow it. Don't override client decisions.
-3. **Don't break functionality.** Only change styling, never logic.
-4. **AI slop is a bug.** Generic fonts, card grids, blue-purple gradients, centered-everything — treat these as defects, not preferences.
-5. **TypeScript must pass** after every change.
-6. **One commit** at the end — not per category.

package/skills/qualia-report/SKILL.md

@@ -73,35 +73,26 @@ git commit -m "report: session {YYYY-MM-DD}"
 git push
 ```
 
-### 5. Upload to ERP (if enabled)
+### 5. Upload to ERP
 
-Read `~/.claude/.qualia-config.json` and check the `erp` object:
-- If `erp.enabled` is `false`, skip this step and print: "ERP upload skipped (disabled in config)."
-- If `erp.enabled` is `true` (default) or the `erp` field is missing (backward compatibility), proceed with the upload.
+**This step is MANDATORY** — the clock-out modal requires the report to be uploaded.
 
 ```bash
-# Read ERP config
-ERP_URL=$(node -e "try{const c=JSON.parse(require('fs').readFileSync(require('os').homedir()+'/.claude/.qualia-config.json','utf8'));console.log(c.erp?.url||'https://portal.qualiasolutions.net')}catch{console.log('https://portal.qualiasolutions.net')}")
-ERP_ENABLED=$(node -e "try{const c=JSON.parse(require('fs').readFileSync(require('os').homedir()+'/.claude/.qualia-config.json','utf8'));console.log(c.erp?.enabled!==false)}catch{console.log('true')}")
-
+ERP_URL="https://portal.qualiasolutions.net"
 API_KEY=$(cat ~/.claude/.erp-api-key 2>/dev/null)
 REPORT_FILE=".planning/reports/report-{date}.md"
 EMAIL=$(git config user.email)
 PROJECT=$(basename $(pwd))
 
-# Only upload if ERP is enabled
-if [ "$ERP_ENABLED" = "true" ]; then
-  curl -s -X POST "$ERP_URL/api/claude/report-upload" \
-    -H "X-API-Key: $API_KEY" \
-    -F "file=@$REPORT_FILE" \
-    -F "employee_email=$EMAIL" \
-    -F "project_name=$PROJECT"
-fi
+curl -s -X POST "$ERP_URL/api/claude/report-upload" \
+  -H "X-API-Key: $API_KEY" \
+  -F "file=@$REPORT_FILE" \
+  -F "employee_email=$EMAIL" \
+  -F "project_name=$PROJECT"
 ```
 
 If the upload succeeds, print: "Report uploaded to ERP. You can now clock out."
 If it fails (no API key, network error), print the error and tell the employee to ask Fawzi.
-If ERP is disabled, print: "ERP upload skipped (disabled in config)."
 
 ### 6. Update State
 

package/skills/qualia-review/SKILL.md

@@ -1,161 +1,76 @@
 ---
 name: qualia-review
-description: "Production audit with scored diagnostics. Runs real commands, scores findings by severity. Trigger on 'review', 'audit', 'code review', 'security check', 'production check'."
+description: "Production audit and code review. General review, --web for web app audit, --ai for AI/voice agent audit. Trigger on 'review', 'audit', 'code review', 'security check', 'production check'."
 ---
 
 # /qualia-review — Production Audit
 
-Runs real diagnostic commands and scores every finding. Not a checklist — an executable audit.
+Deep review with severity-scored findings. Different from `/qualia-verify` (which checks phase goals). This checks production readiness.
 
 ## Usage
 
-- `/qualia-review` — Full audit (security + quality + performance)
-- `/qualia-review --web` — Adds web-specific checks (headers, CORS, vitals)
-- `/qualia-review --ai` — Adds AI/voice agent checks (prompt safety, latency)
+- `/qualia-review` — General code review
+- `/qualia-review --web` — Web app production audit
+- `/qualia-review --ai` — AI/voice agent audit
 
-## Process
+## General Review (default)
 
 ```bash
 node ~/.claude/bin/qualia-ui.js banner review
 ```
 
-### 0. Load Context
+Spawn parallel agents analyzing:
 
-```bash
-cat ~/.claude/knowledge/common-fixes.md 2>/dev/null
-cat ~/.claude/knowledge/learned-patterns.md 2>/dev/null
-```
+1. **Code Quality** — Clean code, TypeScript strictness, naming, readability
+2. **Security** — OWASP top 10, auth server-side, RLS policies, secrets scan
+3. **Architecture** — Component boundaries, coupling, API contracts
+4. **Performance** — N+1 queries, bundle size, caching, render performance
+5. **Test Coverage** — Gaps, edge cases, test quality
 
-Detect project shape:
-```bash
-ls package.json next.config.* tsconfig.json supabase/ app/ src/ 2>/dev/null
-```
+## --web (Web App Audit)
 
-### 1. Security Scan
+Full production readiness for Next.js + Supabase + Vercel:
 
-Run every command. Record each finding with severity.
+**Security:** No secrets in code, HTTPS, CORS restricted, CSP headers, rate limiting, npm audit clean.
 
-```bash
-# CRITICAL: service_role in client code
-grep -rn "service_role" --include="*.ts" --include="*.tsx" --include="*.js" app/ components/ src/ lib/ 2>/dev/null | grep -v node_modules | grep -v "\.server\.\|[\\/]server[\\/]\|[\\/]app[\\/]api[\\/]\|route\.\|middleware\."
+**Performance:** Core Web Vitals (LCP < 2.5s, CLS < 0.1), image optimization, bundle analysis, query performance.
 
-# CRITICAL: hardcoded secrets
-grep -rn "sk_live\|sk_test\|SUPABASE_SERVICE_ROLE\|eyJhbGciOi" --include="*.ts" --include="*.tsx" --include="*.js" app/ components/ src/ lib/ 2>/dev/null | grep -v node_modules | grep -v "\.env"
+**Reliability:** Error boundaries, API error handling, graceful degradation, health check endpoint.
 
-# CRITICAL: dangerous patterns
-grep -rn "dangerouslySetInnerHTML\|eval(" --include="*.ts" --include="*.tsx" --include="*.js" app/ components/ src/ 2>/dev/null | grep -v node_modules
+**Observability:** Error tracking (Sentry), structured logging, uptime monitoring, analytics.
 
-# CRITICAL: .env files tracked in git
-git ls-files | grep -i "\.env" | grep -v "\.example\|\.template\|\.sample"
+## --ai (AI/Voice Agent Audit)
 
-# HIGH: API routes without auth
-for f in $(find app/api -name "route.ts" -o -name "route.js" 2>/dev/null); do
-  grep -qL "getUser\|getSession\|auth()\|createClient" "$f" && echo "UNPROTECTED: $f"
-done
+Auto-detect stack (VAPI, ElevenLabs, Retell, OpenAI, Anthropic, pgvector).
 
-# HIGH: API routes without input validation
-for f in $(find app/api -name "route.ts" -o -name "route.js" 2>/dev/null); do
-  grep -L "z\.\|zod\|Zod\|parse\|safeParse" "$f" 2>/dev/null
-done
+**Prompt Safety:** System prompts not exposed, injection defenses, no eval() on AI output, token limits.
 
-# HIGH: client-side database mutations
-grep -rn "\.insert\|\.update\|\.delete\|\.upsert" --include="*.tsx" --include="*.jsx" app/ components/ 2>/dev/null | grep -v "use server" | grep -v "\.server\."
+**Conversation Flow:** Off-topic handling, context window management, error recovery, human handoff.
 
-# MEDIUM: npm vulnerabilities
-npm audit --json 2>/dev/null | node -e "try{const d=JSON.parse(require('fs').readFileSync(0,'utf8'));const v=d.metadata?.vulnerabilities||{};console.log('critical:',v.critical||0,'high:',v.high||0,'moderate:',v.moderate||0)}catch{console.log('audit unavailable')}"
-```
+**Voice (if detected):** Latency < 500ms, interruption handling, silence timeout, webhook security.
 
-### 2. Code Quality Scan
+**RAG (if detected):** Embedding consistency, chunk size, retrieval relevance, index refresh.
 
-```bash
-# TypeScript errors (HIGH if >0)
-npx tsc --noEmit 2>&1 | grep -c "error TS"
+**Resilience:** Provider failover, timeout handling, cost monitoring, streaming error recovery.
 
-# 'any' type usage (MEDIUM — count)
-grep -rn ": any\| as any" --include="*.ts" --include="*.tsx" app/ components/ src/ lib/ 2>/dev/null | grep -v node_modules | wc -l
+## Output
 
-# Empty catch blocks (HIGH)
-grep -rn "catch\s*{}\|catch\s*(.*)\s*{\s*}" --include="*.ts" --include="*.tsx" app/ components/ src/ lib/ 2>/dev/null | grep -v node_modules | head -10
+Every finding:
+- **What** — description
+- **Where** — `file:line`
+- **Fix** — concrete suggestion
+- **Severity** — CRITICAL / HIGH / MEDIUM / LOW
 
-# TODO/FIXME left in code (LOW — count)
-grep -rn "TODO\|FIXME\|HACK\|XXX" --include="*.ts" --include="*.tsx" app/ components/ src/ lib/ 2>/dev/null | grep -v node_modules | wc -l
+Write to `.planning/REVIEW.md`. CRITICAL or HIGH findings are deploy blockers — `/qualia-ship` checks for them.
 
-# console.log in production code (LOW — count)
-grep -rn "console\.log" --include="*.ts" --include="*.tsx" app/ components/ src/ 2>/dev/null | grep -v node_modules | wc -l
 ```
-
-### 3. Performance Scan
-
-```bash
-# Build output — route sizes and first load JS
-npx next build 2>&1 | grep -E "Route|First Load|shared by all|○|●|ƒ|λ" | tail -25
-
-# Heavy files (>300 lines often means split needed)
-find app/ components/ src/ -name "*.tsx" -o -name "*.ts" 2>/dev/null | xargs wc -l 2>/dev/null | sort -rn | head -10
-
-# Missing next/image (MEDIUM)
-grep -rn "<img " --include="*.tsx" --include="*.jsx" app/ components/ src/ 2>/dev/null | grep -v "next/image" | wc -l
-
-# Client component ratio
-echo "use client: $(grep -rl "'use client'" --include="*.tsx" app/ components/ src/ 2>/dev/null | wc -l)"
-echo "total tsx: $(find app/ components/ src/ -name '*.tsx' 2>/dev/null | wc -l)"
-
-# Sequential data fetching (HIGH)
-grep -rn "const.*=.*await" --include="*.tsx" --include="*.ts" app/ src/ 2>/dev/null | grep -v "Promise.all\|Promise.allSettled" | head -10
+⬢ Review Complete
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  Critical:  {N}
+  High:      {N}
+  Medium:    {N}
+  Low:       {N}
+
+  {If blockers: Fix CRITICAL/HIGH before /qualia-ship}
+  {If clean: Ready to ship}
 ```
-
-### 4. Score and Report
-
-Write to `.planning/REVIEW.md`:
-
-```markdown
-# Production Review — {YYYY-MM-DD}
-
-## Summary
-| Category | Critical | High | Medium | Low | Score |
-|----------|----------|------|--------|-----|-------|
-| Security | {n} | {n} | {n} | {n} | {1-5} |
-| Quality  | {n} | {n} | {n} | {n} | {1-5} |
-| Perf     | {n} | {n} | {n} | {n} | {1-5} |
-| **Total** | {n} | {n} | {n} | {n} | **{avg}/5** |
-
-## Findings
-
-### CRITICAL
-- **{title}** — `{file}:{line}` — {what's wrong} — Fix: {how}
-
-### HIGH
-- ...
-
-### MEDIUM
-- ...
-
-### LOW
-- ...
-
-## Verdict
-{PASS: no critical/high | FAIL: N blockers — fix before /qualia-ship}
-```
-
-**Scoring:**
-- 5 = zero high/critical, fewer than 3 medium
-- 4 = zero critical, 1 high or fewer than 5 medium
-- 3 = zero critical, 2-3 high
-- 2 = 1 critical or 4+ high
-- 1 = multiple critical
-
-```bash
-node ~/.claude/bin/qualia-ui.js divider
-node ~/.claude/bin/qualia-ui.js info "Security: {score}/5 ({n} findings)"
-node ~/.claude/bin/qualia-ui.js info "Quality:  {score}/5 ({n} findings)"
-node ~/.claude/bin/qualia-ui.js info "Perf:     {score}/5 ({n} findings)"
-node ~/.claude/bin/qualia-ui.js end "REVIEW: {PASS|FAIL}" "{next command}"
-```
-
-## Rules
-
-1. **Run every command.** Don't skip scans because "the code looks clean."
-2. **Every finding gets a severity.** No prose — CRITICAL/HIGH/MEDIUM/LOW.
-3. **Every finding gets a fix suggestion.** Not just "this is bad" — say what to do.
-4. **Review detects. It does NOT fix.** This is an audit, not a refactor. Tell the user what to fix.
-5. **CRITICAL or HIGH = deploy blocker.** `/qualia-ship` checks for these.

package/skills/qualia-verify/SKILL.md

@@ -33,7 +33,7 @@ node ~/.claude/bin/qualia-ui.js spawn verifier "Goal-backward check..."
 Agent(prompt="
 Read your role: @agents/verifier.md
 
-Phase plan with success criteria AND verification contracts:
+Phase plan with success criteria:
 @.planning/phase-{N}-plan.md
 
 {If re-verification: Previous verification with gaps:}