codymaster 4.4.1 → 4.4.3

package/CHANGELOG.md

@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file.
 
 Categories: 🚀 **Improvements** | 🐛 **Bug Fixes** | 🔒 **Security**
 
+## [4.4.2] - 2026-03-29
+
+### 🚀 Improvements
+
+- **cm-brainstorm-idea Phase 4.5 (UI Preview)** — Now integrates with `cm-ui-preview` to automatically generate visual mockups (via Google Stitch or Pencil MCP) *after* recommending an approach but *before* detailed planning begins. Provides instant visual validation of ideas.
+- **OpenSpec Protocol Upgrade** — Enhanced integration with Fission-AI OpenSpec format (`openspec/changes/[initiative]/proposal.md`) for seamless context handoffs to downstream skills (`cm-planning` & `cm-execution`).
+- **Skill Evolution Engine** — Successfully executed automated self-healing mechanisms (Mode: FIX) for `cm-tdd` and `cm-debugging` after health monitor alerts.
+
+
 ## [4.3.0] - 2026-03-27
 
 ### 🚀 Improvements

package/README.md

@@ -165,6 +165,9 @@ Don't know what the old code does? **`cm-dockit`** reads your entire codebase an
 
 Before diving into code for complex requests, **`cm-brainstorm-idea`** evaluates your product using multi-dimensional analysis (Tech, Product, Design, Business). It generates 2-3 qualified options using the 9 Windows (TRIZ) framework and provides a visual UI Preview via **Pencil.dev** or **Google Stitch** to validate the direction before detailed planning. 
 
+📖 [Read more about the UI Preview Phase →](docs/Brainstorm-UI-Preview.md)
+
+
 ### 🏭 AI Content Factory v2.0 & Visual Dashboard
 
 Need to scale content? **`cm-content-factory`** is a self-learning, multi-agent content engine. It automatically researches, writes, audits (SEO & Persuasion), and deploys high-converting articles with the Content Mastery framework (StoryBrand + Cialdini) to guarantee conversion.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codymaster",
-  "version": "4.4.1",
+  "version": "4.4.3",
   "description": "65 Skills. Ship 10x faster. AI-powered coding skill kit for Claude, Cursor, Gemini & more.",
   "main": "dist/index.js",
   "repository": {

package/skills/cm-brainstorm-idea/SKILL.md

@@ -338,25 +338,27 @@ User says "No" (Skip preview):
 
 > **Goal:** Create a clean handoff document that `cm-planning` can use immediately.
 
-#### Handoff Output: `brainstorm-output.md`
+#### Handoff Output: OpenSpec Proposal
 
-Save to `docs/brainstorm/` or project root:
+Save to `openspec/changes/[initiative-name]/proposal.md` (Fission-AI OpenSpec format):
 
 ```markdown
-# Brainstorm Output: [Initiative Name]
+# Proposal: [Initiative Name]
 Generated by: cm-brainstorm-idea
 Date: [date]
 
-## Qualified Problem
+## Why we're doing this
+### Qualified Problem
 [From Phase 2]
 
-## 9 Windows Analysis
+### 9 Windows Analysis
 [Summary table from Phase 2]
 
-## Options Evaluated
+## What's changing
+### Options Evaluated
 [Summary from Phase 3-4]
 
-## Recommendation
+### Recommendation
 [From Phase 4]
 
 ## Next Steps for cm-planning:

package/skills/cm-codeintell/SKILL.md

@@ -318,7 +318,7 @@ RE-GENERATE when:
 
 STORE at:
   → .cm/architecture.mmd (Mermaid source)
-  → Include in brainstorm-output.md when relevant
+  → Include in proposal.md when relevant
 ```
 
 ### Integration with Pencil MCP
@@ -436,7 +436,7 @@ NEW addition to Phase A:
     2. If total impact > 20 files:
        → Flag as HIGH RISK in plan
        → Recommend cm-tdd coverage for all impacted callers
-    3. Include impact summary in implementation_plan.md
+    3. Include impact summary in OpenSpec `design.md`
 ```
 
 ### cm-debugging (Trace Analysis — enhanced)

package/skills/cm-dashboard/SKILL.md

@@ -7,7 +7,7 @@ description: Open visual Dashboard to track work status (Simulated Kanban board)
 
 When this command is called, the AI Assistant should:
 
-1. **Check status:** Find and read the `task.md` (or `cm-tasks.json`) file in the current project directory (or artifacts directory).
+1. **Check status:** Find and read the OpenSpec `openspec/changes/[init]/tasks.md` (and synced `cm-tasks.json`) file in the current project directory (or artifacts directory).
 2. **Visual display:** Aggregate tasks and render them as a Kanban board (Markdown table) with 3 columns:
    - **🔴 TO DO** (Not started)
    - **🟡 IN PROGRESS** (In progress)

package/skills/cm-execution/SKILL.md

@@ -61,12 +61,13 @@ Have a plan with independent tasks?
 ## Mode A: Batch Execution
 
 ### Process
-1. **Load plan** → review critically → raise concerns
+1. **Load plan** from Fission-AI OpenSpec (`openspec/changes/[initiative-name]/tasks.md` and `design.md`) → review critically → raise concerns
 2. **Execute batch** (default: 3 tasks)
    - Mark in_progress → follow steps → verify → mark complete
 3. **Report** → show what was done + verification output
 4. **Continue** → apply feedback → next batch
 5. **Complete** → use `cm-code-review` to finish
+6. **Archive** → After all tasks complete, manually move the OpenSpec folder to `openspec/changes/archive/[date]-[name]/`
 
 ### Rules
 - Follow plan steps exactly
@@ -79,7 +80,7 @@ Have a plan with independent tasks?
 ## Mode B: Subagent-Driven Development
 
 ### Process
-1. **Read plan** → extract ALL tasks with full text
+1. **Read plan** from `openspec/changes/[initiative-name]/tasks.md` → extract ALL tasks with full text
 2. **Per task:**
    - Dispatch implementer subagent with full task text
    - Answer subagent questions if any
@@ -179,6 +180,7 @@ LOOP until backlog empty or user interrupts:
 
 After EVERY phase, you MUST:
 1. Read current `cm-tasks.json`
+2. Sync state from `openspec/changes/[initiative-name]/tasks.md` (Keep both human-readable MD and AI-executable JSON in parallel sync)
 2. Find the active task by `id`
 3. Update `status`, `logs[]`, timestamps
 4. Recalculate `stats` object:

package/skills/cm-how-it-work/SKILL.md

@@ -49,7 +49,7 @@ The **CodyMaster (CM)** kit transforms ideas into production code through 13 spe
     1. Scan codebase with **code intelligence** (AST graph + architecture diagram via `cm-codeintell`).
     2. Interview user and analyze with 9 Windows (TRIZ).
     3. Propose 2-3 options, evaluate multi-dimensionally, recommend the best option.
-- **Output:** `brainstorm-output.md` — qualified problem + recommended option → passes to `cm-planning`.
+- **Output:** OpenSpec `openspec/changes/[initiative]/proposal.md` — qualified problem + recommended option → passes to `cm-planning`.
 
 ---
 
@@ -60,8 +60,8 @@ The **CodyMaster (CM)** kit transforms ideas into production code through 13 spe
 - **Action:**
     1. Brainstorm requirements and analyze i18n.
     2. Propose architecture and tech stack.
-    3. Write detailed `implementation_plan.md`.
-- **Output:** Design documentation and execution plan approved by user.
+    3. Write detailed OpenSpec docs (`openspec/changes/[init]/design.md` and `tasks.md`).
+- **Output:** Design docs and execution plan (OpenSpec tasks) approved by user.
 
 ---
 
@@ -161,7 +161,7 @@ The **CodyMaster (CM)** kit transforms ideas into production code through 13 spe
 The kit supports autonomous mode by applying the **Reason → Act → Reflect → Verify (RARV)** loop.
 
 ### How to Use the Workflow:
-1. **`/cm-start [objective]`**: Start work. The system will automatically create `cm-tasks.json`, break down tasks, launch the tracking interface, and autonomously use CM skills to complete them.
+1. **`/cm-start [objective]`**: Start work. The system will automatically initialize the OpenSpec structure (`openspec/changes/[objective]/`), break down tasks into `tasks.md` and sync with `cm-tasks.json`, launch the tracking interface, and autonomously use CM skills to complete them.
 2. **`/cm-dashboard`**: Open the visual tracking Dashboard in browser (shows Kanban board, reasoning log, and progress).
 3. **`/cm-status`**: View quick progress summary in Terminal.
 

package/skills/cm-planning/SKILL.md

@@ -33,6 +33,7 @@ description: "You MUST use this before any creative work or multi-step task. Exp
    - Must-haves vs nice-to-haves
    - Edge cases to handle
    - Edge cases to explicitly NOT handle
+   - **Output to:** `openspec/changes/[initiative-name]/specs/`
 
 4. **Design** — How should it work?
    - Data flow
@@ -47,7 +48,10 @@ description: "You MUST use this before any creative work or multi-step task. Exp
 - Skipping scope definition
 - "It's simple, no need to plan"
 
-## Phase B: Write Implementation Plan
+## Phase B: Write Implementation Plan (OpenSpec Format)
+
+> **Standard:** Fission-AI OpenSpec (`https://github.com/Fission-AI/OpenSpec/`)
+> Output artifacts exactly to `openspec/changes/[initiative-name]/` to ensure human/AI alignment.
 
 ### When to Write a Plan
 
@@ -56,16 +60,16 @@ description: "You MUST use this before any creative work or multi-step task. Exp
 - Changes affect other components
 - User explicitly asks for a plan
 
-### Plan Structure
+### OpenSpec Artifacts to Generate
 
+**1. `openspec/changes/[initiative-name]/design.md`**
 ```markdown
-# [Goal]
+# Design: [Goal]
 
-## Context
-What and why.
+## Context & Technical Approach
+Why this approach and how it works.
 
 ## Proposed Changes
-
 ### [Component/File]
 - What changes
 - Why this approach
@@ -74,6 +78,15 @@ What and why.
 How to verify it works.
 ```
 
+**2. `openspec/changes/[initiative-name]/tasks.md`**
+```markdown
+# Implementation Checklist
+- [ ] 1.1 First component setup
+- [ ] 1.2 First component logic
+- [ ] 2.1 Next component integration
+- [ ] Verification testing
+```
+
 ### Plan Rules
 
 ```

package/skills/cm-reactor/SKILL.md

@@ -196,7 +196,7 @@ For each migration step:
   5. If tests fail → STOP, diagnose, fix before next step
   
 Progress tracking:
-  → Update cm-tasks.json with each completed migration step
+  → Update OpenSpec `tasks.md` and `cm-tasks.json` with each completed migration step
   → Update CONTINUITY.md with migration status
 ```
 

package/skills/cm-skill-index/SKILL.md

@@ -109,7 +109,7 @@ Traditional approach: Load every SKILL.md to decide which skill to use.
 | Skill | Triggers | Summary |
 |-------|----------|---------|
 | `cm-start` | /cm-start, start workflow, begin objective, new task | Orchestrate full cm-* workflow from objective to production code |
-| `cm-dashboard` | /cm-dashboard, kanban, task board, show tasks, status board | Render Kanban board from cm-tasks.json — visual task overview |
+| `cm-dashboard` | /cm-dashboard, kanban, task board, show tasks, status board | Render Kanban board from OpenSpec `tasks.md` and `cm-tasks.json` — visual task overview |
 | `cm-status` | /cm-status, quick status, progress, what's next, blocked | Ultra-concise progress summary: done / next / blocked |
 
 ### Planned (not yet implemented) 🧪

package/skills/cm-start/SKILL.md

@@ -50,20 +50,23 @@ When this workflow is called, the AI Assistant should execute the following acti
     - Apply `cm-tdd` + `cm-execution` → `cm-quality-gate`
 
     **L2 (Medium):** Full analysis flow
+    - Init OpenSpec (create `openspec/changes/[initiative-name]/` folder and artifacts manually)
     - Apply `cm-brainstorm-idea` if problem is ambiguous
-    - Apply `cm-planning` (full implementation plan with task breakdown)
-    - Create `cm-tasks.json` → launch RARV autonomous execution
+    - Apply `cm-planning` (full implementation plan with OpenSpec `tasks.md`)
+    - Create `cm-tasks.json` from `tasks.md` → launch RARV autonomous execution
     - Apply `cm-quality-gate` → `cm-safe-deploy`
 
     **L3 (Large):** Full + PRD + Architecture + Sprint
+    - Init OpenSpec (create `openspec/changes/[initiative-name]/` folder and artifacts manually)
     - Apply `cm-brainstorm-idea` (mandatory)
     - Apply `cm-planning` with FR/NFR requirement tracing
-    - Sprint planning → `cm-tasks.json` with sprints
+    - Sprint planning → `openspec/changes/[objective]/tasks.md` sync with `cm-tasks.json`
     - Apply `cm-execution` (Mode E: TRIZ-Parallel for speed)
     - Apply `cm-quality-gate` → `cm-safe-deploy`
 
 3. **Track Progress:**
-    - Create or update `cm-tasks.json` by breaking the objective into specific tasks
+    - Create `openspec/changes/[objective]/tasks.md` (for standardized spec tracking)
+    - Create or update `cm-tasks.json` (for autonomous agent execution)
     - Suggest `/cm-dashboard` for visual tracking
     - Suggest `/cm-status` for quick terminal summary
 

package/skills/cm-ux-master/SKILL.md

@@ -1,825 +1,173 @@
 ---
-name: cm-ux-master
-description: "Ultimate UI/UX design intelligence with Harvester v4 (AI-powered visual extraction), 48 UX Laws, 37 Design Tests, UX Heuristics (Nielsen + Krug), Figma & Google Stitch integration, MCP server for Claude/Cursor, Component Generator, and BM25 search across 16 domains. One command = Complete design system. 10x productivity boost."
+name: cm-continuity
+description: "Working memory protocol — maintains context across sessions via CONTINUITY.md. Inspired by Loki Mode. Read at turn start, update at turn end. Captures mistakes and learnings to prevent repeating errors."
 ---
 
-# 🚀 CM UX Master v4 — Ultimate Design Intelligence Platform
+# Continuity — Working Memory Protocol
 
-**AI-powered design system platform combining:**
-- 🎯 **Harvester v4** — One-command design system extraction from any website
-- 🤖 **MCP Server** — Native integration with Claude/Cursor/AI assistants  
-- 🎨 **Figma Bridge** — Bidirectional sync with Figma Tokens Studio
-- ✨ **Google Stitch** — AI design generation with extracted tokens
-- 📐 **48 UX Laws** — Behavioral psychology-based design rules
-- ✅ **37 Design Tests** — TDD for design validation
-- 💻 **Component Generator** — React/Vue/Semi Design components
-- 🔍 **BM25 Search** — 1032+ design patterns across 16 domains
+> **Context persistence across sessions. Mistakes captured. Learnings applied.**
+> Inspired by Loki Mode's CONTINUITY.md protocol (Autonomi).
 
-**One command = Complete design system. 10x productivity. Zero manual work.**
+## When to Use
 
-## System Persona
+**ALWAYS** — This is a background protocol, not an explicit invocation.
 
-You are **"The MasterDesign Agent"** — an Elite Principal Product Designer and Frontend Architect.
+- **Start of every session:** Read `.cm/CONTINUITY.md` to orient yourself
+- **End of every session:** Update `.cm/CONTINUITY.md` with progress
+- **On error:** Record in Mistakes & Learnings section
+- **On key decision:** Record in Key Decisions section
 
-Your core expertise is designing and developing complex, highly functional user interfaces for **Web Applications, Native-feel Mobile Apps, and Enterprise SaaS Dashboards**.
-
-**You DO NOT build generic marketing landing pages.** You prioritize Behavioral Psychology, Human-Computer Interaction (HCI), Ergonomics, and Data-Driven functionality over purely decorative visuals. No excessive glassmorphism, no useless infinite animations. **Form follows function.**
-
-## When to Apply
-
-Reference these guidelines when:
-- Designing new UI components or pages
-- Choosing color palettes and typography
-- Reviewing code for UX issues
-- Building Web App / SaaS dashboards
-- Implementing accessibility requirements
-- Extracting design systems from existing sites
-- Validating designs against UX Laws
-- Building Mobile App screens (iOS / Android / React Native / Flutter)
-
-## Core Directives (MANDATORY Engineering Constraints)
-
-Whenever generating, designing, or refactoring a UI component or screen, you **MUST** strictly apply these constraints and reflect them explicitly in your code:
-
-### Directive 1: Mobile & Touch Ergonomics (Fitts's Law)
-
-- **Constraint:** ALL interactive touch targets (buttons, links, inputs, dropdown tabs) on Mobile UIs MUST have a minimum size of 44×44px. Enforce via CSS: `min-h-[44px] min-w-[44px]`.
-- **Architecture:** Place primary actions in the **Thumb Zone** (bottom 1/3 of screen). Use sticky bottom action bars, bottom-sheet modals instead of center popups, swipe actions for lists.
-
-### Directive 2: Decision Architecture (Hick's Law)
-
-- **Constraint:** Prevent cognitive overload in complex interfaces. Never present a "wall of buttons."
-- **Architecture:** Use **Progressive Disclosure**. Hide advanced settings behind `...` (More) dropdown menus, accordions, or drill-down tabs. Limit primary CTAs to **1 or max 2 per view**.
-
-### Directive 3: Data Density & Chunking (Miller's Law)
-
-- **Constraint:** When designing Data Tables, Dashboards, or long forms, chunk information into logical groups of **5 to 9 items**.
-- **Architecture:** Use clear visual hierarchy, ample whitespace (`gap`, `p`), and subtle separators (`border-slate-200`) to create distinct semantic blocks. Avoid heavy box-shadows that cause visual noise.
-
-### Directive 4: Perceived Performance & UI States (Doherty Threshold)
-
-- **Constraint:** The interface must feel instantaneous (<400ms feedback).
-- **Architecture:** You MUST account for **all UI lifecycle states** in your code:
-  - **Skeleton Loader** — shimmer/pulse placeholder while fetching data
-  - **Empty State** — designed screen when no data exists (not just blank)
-  - **Interactive states** — `hover:`, `active:`, `disabled:`, `focus-visible:`
-  - **Error State** — clear error feedback near the problem source
-
-### Directive 5: Accessibility & Error Prevention (A11y + Poka-Yoke)
-
-- **Constraint:** Strictly adhere to WCAG 2.1 AA text contrast ratios.
-- **Architecture:**
-  - Destructive actions (Delete, Remove) must be **visually distinct** (outlined red text) and **physically separated** from safe actions
-  - Include `focus-visible:ring-2 focus-visible:ring-offset-2` for ALL interactive elements (keyboard navigation)
-  - Use **Semantic HTML** (`<nav>`, `<aside>`, `<dialog>`) and **ARIA attributes** (`aria-expanded`, `aria-hidden`) where necessary
-
-### Directive 6: i18n & Multi-Locale Design
-
-> [!IMPORTANT]
-> **Ask before designing:** "How many languages? Which is primary?" A UI designed only for English will break for Thai or Vietnamese (text length, fonts, date format). This must be in scope from day 0.
-
-**Text Length Variance:**
-- Vietnamese: ~10-20% longer than English
-- Thai: ~30-40% longer than English (also uses different line-height rules)
-- German/French: ~20-30% longer than English
-- **Design with the longest string in mind.** Never use a fixed-width container that clips a translation.
-- **Implementation:** Use `min-width` instead of `width`, allow text to wrap gracefully, test labels at 140% length.
-
-**Font Requirements:**
-- Verify your font supports ALL target language scripts:
-  - Thai requires fonts with extended Unicode support (Noto Sans Thai, Sarabun, Prompt)  
-  - Vietnamese requires full diacritic support (most Latin fonts OK; some truncate)
-  - Filipino (Tagalog) uses Latin script — standard fonts work
-- **Safe cross-language fonts:** Noto Sans (covers all), Inter (Latin+Vietnamese), IBM Plex Sans
-
-**Locale-Aware Formatting (MANDATORY for multi-country):**
-```javascript
-// ❌ WRONG — hardcoded locale
-new Date(d).toLocaleDateString()          // Uses browser default
-amount.toLocaleString('en-US')            // Always English format
-
-// ✅ CORRECT — explicit locale from user setting
-new Date(d).toLocaleDateString(userLocale)    // 'vi-VN', 'th-TH', 'en-US'
-amount.toLocaleString(userLocale, { style: 'currency', currency: 'VND' })
-```
-
-**Date/number format differences by locale:**
-| Locale | Date Format | Number Format | Currency |
-|--------|------------|---------------|----------|
-| vi-VN | DD/MM/YYYY | 1.234,56 | 1.000 ₫ |
-| en-US | MM/DD/YYYY | 1,234.56 | $1,000 |
-| th-TH | DD/MM/YYYY (Buddhist calendar optional) | 1,234.56 | ฿1,000 |
-| fil-PH | MM/DD/YYYY | 1,234.56 | ₱1,000 |
-
-**RTL Layout (Arabic, Hebrew — if future target):**
-- All flexbox directions flip: `flex-row` → `flex-row-reverse`
-- Text alignment: `text-left` → `text-right`
-- Padding/margin mirroring: `pl-4` → `pr-4`
-- Use CSS logical properties from day 1: `margin-inline-start` instead of `margin-left`
-- Implement via `dir="rtl"` on `<html>` tag + CSS `[dir='rtl']` overrides
-
-## Rule Categories by Priority
-
-| Priority | Category | Impact | Domain |
-|----------|----------|--------|--------|
-| 1 | UX Laws Compliance | CRITICAL | `ux-laws` |
-| 2 | Design Test Validation | CRITICAL | `design-tests` |
-| 3 | Accessibility | CRITICAL | `ux` |
-| 4 | Touch & Interaction | CRITICAL | `ux` |
-| 5 | Performance | HIGH | `ux` |
-| 6 | Layout & Responsive | HIGH | `ux` |
-| 7 | Typography & Color | MEDIUM | `typography`, `color` |
-| 8 | Animation | MEDIUM | `ux` |
-| 9 | Style Selection | MEDIUM | `style`, `product` |
-| 10 | Charts & Data | LOW | `chart` |
-
----
-
-## Prerequisites
+## Setup
 
 ```bash
-python3 --version || python --version
-```
-
-Python 3.x required. No external dependencies.
-
----
-
-## How to Use This Skill
-
-### Step 1: Analyze User Requirements
+# Initialize working memory for current project
+cm continuity init
 
-Extract key information from user request:
-- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
-- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
-- **Industry**: healthcare, fintech, gaming, education, etc.
-- **Stack**: React, Vue, Next.js, or default to `html-tailwind`
+# Check current state
+cm continuity status
 
-### Step 2: Generate Design System (REQUIRED)
-
-**Always start with `--design-system`** to get comprehensive recommendations with UX Laws + Design Tests:
-
-```bash
-python3 scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
-```
-
-This command:
-1. Searches 5 domains in parallel (product, style, color, landing, typography)
-2. Applies reasoning rules from `ui-reasoning.csv`
-3. **NEW:** Automatically includes applicable UX Laws and Design Tests
-4. Returns complete design system: pattern, style, colors, typography, effects, UX laws, tests
-
-**Example:**
-```bash
-python3 scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
-```
-
-### Step 2b: Persist Design System (Master + Overrides)
-
-```bash
-python3 scripts/search.py "<query>" --design-system --persist -p "Project Name"
-```
-
-Creates `design-system/MASTER.md` + optional page overrides:
-```bash
-python3 scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
+# View captured learnings
+cm continuity learnings
 ```
 
-### Step 3: Query UX Laws (NEW)
+## The Protocol
 
-Search UX Laws applicable to specific product types:
+### AT THE START OF EVERY SESSION:
 
-```bash
-python3 scripts/search.py "mobile app fitts" --domain ux-laws -n 5
-python3 scripts/search.py "e-commerce checkout" --domain ux-laws
-python3 scripts/search.py "dashboard cognitive load" --domain ux-laws
 ```
-
-**48 UX Laws** mapped across 12 product types: Landing Page, Website/Web App, Mobile App, Game UI, Dashboard, SaaS, E-commerce, Healthcare, Fintech, Education, Responsive, Luxury.
-
-### Step 4: Query Design Tests (NEW)
-
-Get TDD-style test cases for design validation:
-
-```bash
-python3 scripts/search.py "landing page hero" --domain design-tests -n 5
-python3 scripts/search.py "mobile touch target" --domain design-tests
-python3 scripts/search.py "checkout flow" --domain design-tests
+1. Read .cm/CONTINUITY.md to understand current state
+2. Read "Mistakes & Learnings" to avoid past errors
+3. Check "Next Actions" to determine what to do
+4. Reference Active Goal throughout your work
 ```
 
-**37 Design Tests** with measurable pass/fail criteria, test methods, and severity levels.
+### DURING WORK:
 
-### Step 5: Supplement with Detailed Searches
-
-```bash
-python3 scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
 ```
-
-| Need | Domain | Example |
-|------|--------|---------|
-| More style options | `style` | `"glassmorphism dark"` |
-| Chart recommendations | `chart` | `"real-time dashboard"` |
-| UX best practices | `ux` | `"animation accessibility"` |
-| Alternative fonts | `typography` | `"elegant luxury"` |
-| Landing structure | `landing` | `"hero social-proof"` |
-| UX Laws | `ux-laws` | `"hick's law landing"` |
-| Design Tests | `design-tests` | `"mobile app navigation"` |
-
-### Step 6: Stack Guidelines (Default: html-tailwind)
-
-```bash
-python3 scripts/search.py "<keyword>" --stack html-tailwind
+PRE-ACT ATTENTION CHECK (before every significant action):
+  - Re-read Active Goal
+  - Ask: "Does my planned action serve this goal?"
+  - Ask: "Am I solving the original problem, not a tangent?"
+  - If DRIFT detected → log it → return to goal
 ```
 
-Available: `html-tailwind`, `react`, `nextjs`, `astro`, `vue`, `nuxtjs`, `nuxt-ui`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`, `angular`, `htmx`, `electron`, `tauri`
+### AT THE END OF EVERY SESSION:
 
-### Step 7: Extract Design System from Existing Site (NEW)
-
-Analyze an existing website and extract its design tokens:
-
-```bash
-# From URL
-python3 scripts/extractor.py --url "https://example.com" -p "BrandName" --generate-skill --persist
-
-# From local project directory
-python3 scripts/extractor.py --directory ./src -p "MyApp" --generate-skill --persist
-
-# From CSS files
-python3 scripts/extractor.py --css style.css theme.css -p "MyProject" --format tailwind
 ```
-
-Outputs: `EXTRACTED.md`, `BRAND-SKILL.md`, `tailwind.config.js`, `design-tokens.css`
-
-### Step 8: Multi-Project Registry + Multi-Page Harvest (v2) 🔒 PRO
-
-Manage multiple design system projects and scan multiple pages:
-
-```bash
-# Create a project
-python3 scripts/project_registry.py --create "Haravan" --url "https://showcase.myharavan.com"
-
-# List all projects
-python3 scripts/project_registry.py --list
-
-# Get project info
-python3 scripts/project_registry.py --get haravan
-
-# Add page harvest to project
-python3 scripts/project_registry.py --add-harvest haravan -i harvest.json
-
-# Token mapper with project (auto-saves to output/<slug>/)
-python3 scripts/token_mapper.py -i harvest.json --project haravan
-
-# Merge multiple harvest files
-python3 scripts/harvest_session.py page1.json page2.json page3.json -o merged.json --confidence
+1. Update "Just Completed" with accomplishments
+2. Update "Next Actions" with remaining work
+3. Record any new "Mistakes & Learnings"
+4. Record any "Key Decisions" made
+5. Update "Files Modified" list
+6. Set currentPhase and timestamp
 ```
 
-### Step 9: Design System Documentation Site (v2) 🔒 PRO
-
-Generate a self-contained HTML documentation page:
-
-```bash
-# From project
-python3 scripts/design_doc_generator.py --project haravan --open
+### ON ERROR (Self-Correction Loop):
 
-# From harvest file directly
-python3 scripts/design_doc_generator.py -i harvest.json -o design-system.html
 ```
-
-Output includes: color palette swatches, typography specimens, geometry preview, component samples, token reference table, usage instructions, dark mode toggle.
-
-### Step 10: Harvester v3 — Comprehensive Design System Extraction 🔒 PRO
-
-Upgrade from basic extraction (~20 tokens) to comprehensive design system capture (50-80+ tokens):
-
-```bash
-# 1. Inject harvester_v3.js in browser console on target page
-#    Copy-paste scripts/harvester_v3.js → browser DevTools console → Enter
-#    Copy the JSON output
-
-# 2. Save raw harvest
-#    Paste JSON into output/<project>/harvest-v3-raw.json
-
-# 3. Map to Semi tokens (auto-detects v3 format)
-python3 scripts/token_mapper.py -i output/<project>/harvest-v3-raw.json --project <slug>
-
-# 4. Generate design system doc with all 9 sections
-python3 scripts/design_doc_generator.py --project <slug> --open
+ON_ERROR:
+  1. Capture error details (stack trace, context)
+  2. Analyze root cause (not just symptoms)
+  3. Write learning to CONTINUITY.md "Mistakes & Learnings"
+  4. Update approach based on learning
+  5. Retry with corrected approach
+  6. Max 3 retries per error pattern before ESCALATE
 ```
 
-**v3 extracts:**
-- Color histogram + semantic colors (primary, success, warning, danger, info, link, disabled)
-- Neutral scale (10-shade gray ramp: 50→900)
-- Expanded surfaces (app, card, sidebar, header, modal, hover, selected, input)
-- Typography scale (heading+body families, 5-8 sizes, 4 weights)
-- Spacing system (padding/margin/gap → 8-step scale)
-- Border system (width, color, radius sm/md/lg/xl/full)
-- Shadow system (sm/md/lg classified by blur depth)
-- Layout metrics (sidebar width, header height, content max-width, grid gap)
-- Component blueprints (button, input, card, table, nav_item, tag)
-- Page type detection (dashboard/settings/report/orders)
+## CONTINUITY.md Template
 
----
+```markdown
+# CodyMaster Working Memory
+Last Updated: [ISO timestamp]
+Current Phase: [planning|executing|testing|deploying|reviewing]
+Current Iteration: [number]
+Project: [project name]
 
-## Free vs Pro
-
-| Feature | Free | Pro |
-|---------|------|-----|
-| Design Rules | 1032+ ✅ | 1032+ ✅ |
-| UX Laws | 48 ✅ | 48 ✅ |
-| Design Tests | 37 ✅ | 37 ✅ |
-| UI Styles | 67 ✅ | 67 ✅ |
-| Platform Support | 6 ✅ | 6 ✅ |
-| Framework Stacks | 17 ✅ | 17 ✅ |
-| Animation Patterns | 30 ✅ | 30 ✅ |
-| Responsive Patterns | 25 ✅ | 25 ✅ |
-| Accessibility (WCAG 2.2) | 25 ✅ | 25 ✅ |
-| Device Profiles | 20 ✅ | 20 ✅ |
-| Code Templates | 4 ✅ | 4 ✅ |
-| **Harvester** | **v3 (80+ tokens)** | **v4 (120+ tokens)** 🔥 |
-| Color Histogram | ❌ | ✅ |
-| Semantic Colors | ❌ | ✅ |
-| Neutral Scale | ❌ | ✅ |
-| Component Blueprints | ❌ | ✅ |
-| Typography Scale | ❌ | ✅ |
-| Shadow/Border System | ❌ | ✅ |
-| Layout Metrics | ❌ | ✅ |
-| Token Mapper | ❌ | ✅ 🔥 |
-| Design Doc Generator | ❌ | ✅ |
-| Project Registry | ❌ | ✅ |
-| Multi-harvest Merge | ❌ | ✅ |
-| Semi MCP Bridge | ❌ | ✅ |
+## Active Goal
+[What we're currently trying to accomplish — 1-2 sentences max]
 
----
+## Current Task
+- ID: [task-id from dashboard]
+- Title: [task title]
+- Status: [in-progress|blocked|reviewing]
+- Skill: [cm-skill being used]
+- Started: [timestamp]
 
-## 🚀 NEW: Harvester v4 — AI-Powered Visual Extraction
+## Just Completed
+- [Most recent accomplishment with file:line references]
+- [Previous accomplishment]
+- [etc — last 5 items]
 
-**Harvester v4** is a comprehensive upgrade with automatic design system extraction via browser automation and Semi Design architecture reconstruction.
+## Next Actions (Priority Order)
+1. [Immediate next step]
+2. [Following step]
+3. [etc]
 
-### New Features in v4
+## Active Blockers
+- [Any current blockers or waiting items]
 
-| Feature | v3 | v4 |
-|---------|----|----|
-| Tokens | ~80 | **~120+** |
-| Browser Automation | ❌ | ✅ Auto-open |
-| Multi-page Crawl | ❌ | ✅ |
-| AI Visual Analysis | ❌ | ✅ Psychology |
-| Component Blueprints | Basic | ✅ Advanced |
-| Auto Component Gen | ❌ | ✅ React/Semi/Vue |
-| Design System Index | ❌ | ✅ Semi-architecture |
-| CLI Integration | ❌ | ✅ Unified CLI |
+## Key Decisions This Session
+- [Decision]: [Rationale] — [timestamp]
 
-### Quick Start v4
+## Mistakes & Learnings
 
-```bash
-# 1. Quick workflow - Extract + Index + Generate
-cd /path/to/your/ux-master-project
-python3 scripts/harvester_cli.py quick https://example.com --framework semi
-
-# 2. Multi-page harvest with component generation
-python3 scripts/harvester_cli.py extract \
-  --url https://example.com \
-  --crawl --max-pages 5 \
-  --generate --framework react-tailwind
-
-# 3. Index existing harvest
-python3 scripts/harvester_cli.py index \
-  --input output/harvest.json \
-  --name "MyApp" --figma
-
-# 4. Generate components from design system
-python3 scripts/harvester_cli.py generate \
-  --input output/design-system.json \
-  --all --framework semi
-```
+### Pattern: Error → Learning → Prevention
+- **What Failed:** [Specific error that occurred]
+- **Why It Failed:** [Root cause analysis]
+- **How to Prevent:** [Concrete action to avoid this in future]
+- **Timestamp:** [When learned]
+- **Agent:** [Which agent]
+- **Task:** [Which task ID]
 
-### Harvester v4 Architecture
+## Working Context
+[Critical information for current work — API keys paths,
+architecture decisions, patterns being followed]
 
+## Files Currently Being Modified
+- [file path]: [what we're changing]
 ```
-┌─────────────────────────────────────────────────────────────┐
-│  Harvester v4 Workflow                                      │
-├─────────────────────────────────────────────────────────────┤
-│                                                             │
-│  ┌──────────────┐    ┌──────────────┐    ┌──────────────┐  │
-│  │   Extract    │───→│    Index     │───→│   Generate   │  │
-│  │  (Browser)   │    │ (Semi Arch)  │    │ (Components) │  │
-│  └──────────────┘    └──────────────┘    └──────────────┘  │
-│         │                   │                   │           │
-│    harvester_v4.js    design_system_      component_       │
-│    harvester_browser.py  indexer.py       generator.py      │
-│                                                             │
-└─────────────────────────────────────────────────────────────┘
-```
-
-### Step 11: Harvester v4 — Full Automation 🔥
 
-#### A. Browser Automation
-
-```bash
-# Single URL harvest
-python3 scripts/harvester_browser.py --url https://example.com --output ./output
+## Memory Hierarchy
 
-# With mobile viewport
-python3 scripts/harvester_browser.py --url https://example.com --mobile
+The memory systems complement each other:
 
-# Multi-page crawl
-python3 scripts/harvester_browser.py --url https://example.com --crawl --max-pages 10
-
-# Interactive mode
-python3 scripts/harvester_browser.py --interactive
-```
-
-**v4 extracts (120+ tokens):**
-- Visual element detection & classification
-- Color psychology analysis
-- Layout pattern recognition (grid, flex, sidebar)
-- Typography hierarchy with font pairing
-- Component relationship mapping
-- Animation & transition detection
-- Accessibility audit (contrast, labels)
-
-#### B. Design System Indexing (Semi Architecture)
-
-```bash
-# Index single harvest
-python3 scripts/design_system_indexer.py \
-  --input harvest.json \
-  --name "MyApp" \
-  --output ./design-system
-
-# Merge multiple harvests
-python3 scripts/design_system_indexer.py \
-  --multi ./harvests/page1.json ./harvests/page2.json \
-  --name "MergedSystem"
-
-# Generate Figma tokens
-python3 scripts/design_system_indexer.py \
-  --input harvest.json \
-  --name "MyApp" \
-  --figma
 ```
-
-**Semi Design Architecture:**
-- Color System: Primary, Secondary, Tertiary, Neutrals (50-900)
-- Background: bg-0 → bg-4
-- Fill: fill-0 → fill-2  
-- Text: text-0 → text-3
-- Semantic: success, warning, danger, info, link
-- Spacing: none → super-loose (10 steps)
-- Border: radius xs → full
-- Shadow: sm → elevated → lg
-
-#### C. Component Generation
-
-```bash
-# Generate all components
-python3 scripts/component_generator.py \
-  --input design-system.json \
-  --all --output ./components
-
-# Generate specific component
-python3 scripts/component_generator.py \
-  --input design-system.json \
-  --component button \
-  --framework semi
-
-# Supported frameworks
-# --framework react-tailwind (default)
-# --framework semi (Semi Design)
-# --framework vue (Vue 3 + Tailwind)
-```
-
-**Generated components:**
-- Button (primary, secondary, outline, ghost, danger)
-- Card (default, bordered, elevated)
-- Input (text, password, textarea, select)
-- Badge/Tag (default, success, warning, danger, info)
-- Avatar (circle, square, sizes)
-- Alert (info, success, warning, error)
-- Modal/Dialog
-- Table
-- Tabs
-- Dropdown
-- Tooltip
-- Divider
-- Skeleton
-- Empty state
-
-#### D. Unified CLI
-
-```bash
-# Full workflow
-python3 scripts/harvester_cli.py quick https://example.com
-
-# Individual phases
-python3 scripts/harvester_cli.py extract --url https://example.com --generate
-python3 scripts/harvester_cli.py index --input harvest.json --name "MyApp"
-python3 scripts/harvester_cli.py generate --input design-system.json --all
-```
-
-### v4 Output Structure
-
-```
-output/
-├── harvest-raw.json           # Raw extraction data
-├── design-system.json         # Indexed design system
-├── design-system.css          # CSS variables (Semi spec)
-├── figma-tokens.json          # Figma Tokens Studio
-├── component-blueprints.json  # Component specs
-├── screenshot-desktop.png     # Visual reference
-├── screenshot-mobile.png      # Mobile viewport
-└── components/                # Generated components
-    ├── button/
-    │   ├── component.tsx
-    │   └── index.ts
-    ├── card/
-    ├── input/
-    └── ...
-```
-
-### Requirements
-
-```bash
-# Install Playwright for browser automation
-pip install playwright
-playwright install chromium
-
-# Or all browsers
-playwright install
+1. CONTINUITY.md     = Working memory (current session state)
+2. learnings.json    = Extracted error patterns (persists across sessions)
+3. decisions.json    = Architecture decisions (persists across projects)
+4. tasks.md/cm-tasks.json     = Task queue + RARV logs (Mode D integration)
 ```
 
-> **Upgrade to Pro:** [ux-master.dev/pro](https://ux-master.dev/pro) — One-time payment, lifetime access, all future updates.
-
----
-
-## Available Domains (16)
-
-| Domain | Entries | Description |
-|--------|---------|-------------|
-| `product` | 96 | Product type recommendations (SaaS, e-commerce, healthcare...) |
-| `style` | 67 | UI styles + AI prompts + CSS keywords |
-| `color` | 96 | Color palettes by product type |
-| `typography` | 57 | Font pairings with Google Fonts |
-| `landing` | 30 | Page structure and CTA strategies |
-| `chart` | 25 | Chart types and library recommendations |
-| `ux` | 99 | Best practices and anti-patterns |
-| `icons` | 100 | Icon library recommendations |
-| `react` | 44 | React/Next.js performance |
-| `web` | 30 | Web interface guidelines |
-| `ux-laws` | **48** | **UX Laws × Product Types matrix** |
-| `design-tests` | **37** | **Design Test Cases (TDD for Design)** |
-| `animation` | **30** | **Micro-interactions, transitions, performance** |
-| `responsive` | **25** | **Breakpoints, container queries, fluid design** |
-| `accessibility` | **25** | **WCAG 2.2 advanced patterns** |
-| `devices` | **20** | **Device breakpoints — mobile, tablet, watch, TV, foldable, VR** |
-| stacks (17) | varies | Stack-specific guidelines |
-
-### Stack-Specific Guidelines (17)
-
-| Stack | Description |
-|-------|-------------|
-| `html-tailwind` | Tailwind CSS utility patterns |
-| `react` | React hooks, performance |
-| `nextjs` | App Router, SSR, RSC |
-| `astro` | Islands architecture |
-| `vue` | Composition API, Pinia |
-| `nuxtjs` / `nuxt-ui` | Nuxt 3, Nuxt UI components |
-| `svelte` | Stores, transitions |
-| `swiftui` | iOS/macOS native |
-| `react-native` | Cross-platform mobile |
-| `flutter` | Dart widgets, Material |
-| `shadcn` | shadcn/ui components |
-| `jetpack-compose` | Android Jetpack |
-| `angular` | **Signals, standalone, NgRx SignalStore, Material 3** |
-| `htmx` | **Progressive enhancement, Alpine.js** |
-| `electron` | **Desktop — IPC, security, native integration** |
-| `tauri` | **Desktop — Rust commands, permissions, plugins** |
-
----
+**CONTINUITY.md is the PRIMARY source of truth for "what am I doing right now?"**
 
-## Example Workflow
+## Integration
 
-**User request:** "Build a fintech crypto dashboard"
+| Skill | How it integrates |
+|-------|-------------------|
+| `cm-execution` | RARV Mode D reads CONTINUITY.md in REASON phase |
+| `cm-planning` | Sets Active Goal and Next Actions |
+| `cm-debugging` | Records errors in Mistakes & Learnings |
+| `cm-quality-gate` | VERIFY phase updates CONTINUITY.md |
+| `cm-code-review` | Records review feedback as learnings |
 
-### Step 1: Generate Design System
-```bash
-python3 scripts/search.py "fintech crypto dashboard" --design-system -p "CryptoApp"
-```
+## Rules
 
-### Step 2: Get UX Laws for Fintech
-```bash
-python3 scripts/search.py "fintech banking" --domain ux-laws -n 5
 ```
+✅ DO:
+- Read CONTINUITY.md at session start (ALWAYS)
+- Update CONTINUITY.md at session end (ALWAYS)
+- Record EVERY error in Mistakes & Learnings
+- Keep "Just Completed" to last 5 items
+- Be specific: "Fixed auth bug in login.ts:42" not "Fixed stuff"
 
-### Step 3: Get Design Tests
-```bash
-python3 scripts/search.py "dashboard data" --domain design-tests -n 5
+❌ DON'T:
+- Skip reading CONTINUITY.md ("I remember what I was doing")
+- Write vague learnings: "It didn't work" → WHY didn't it work?
+- Ignore past learnings when they're relevant
+- Let CONTINUITY.md grow beyond ~500 words (rotate old entries)
+- Delete Mistakes & Learnings (archive to learnings.json instead)
 ```
 
-### Step 4: Stack Guidelines
-```bash
-python3 scripts/search.py "real-time data chart" --stack react
-```
-
-### Step 5: Implement → Validate against Design Tests
-
----
-
-## Execution Workflow (MANDATORY Output Format)
-
-When the user requests a UI component (e.g., "Build a mobile settings screen", "Create a SaaS data table"), you **MUST** output your response in this exact format:
-
-### Step 1: 🧠 UX Reasoning
-
-Briefly explain (2-3 bullet points) which specific UX Laws and psychological principles you applied to solve this specific product design problem.
-
-**Example:**
-- **Fitts's Law →** Primary "Save" action placed in sticky bottom bar within thumb zone. Touch target 48px height.
-- **Hick's Law →** Advanced settings hidden behind "More Options" accordion. Only 2 visible CTAs.
-- **Doherty Threshold →** Skeleton loader included for the data table while API fetches.
-
-### Step 2: 💻 Production-Ready Code
-
-Provide clean, modular code (Tailwind + framework of choice).
-
-**CRUCIAL:** Add inline comments inside the code to demonstrate exactly **where and why** a UX Law was implemented:
-
-```html
-<!-- UX: Fitts's Law — Touch target ≥ 44px, in thumb zone -->
-<button class="min-h-[44px] min-w-[44px] ...">
-
-<!-- UX: Doherty Threshold — Skeleton loader while data fetches -->
-<div class="animate-pulse bg-gray-200 rounded h-4 w-3/4"></div>
-
-<!-- UX: Poka-Yoke — Destructive action separated + visually distinct -->
-<button class="text-red-600 border border-red-300 ...">
-```
-
-### Step 3: ✅ Validation Checklist
-
-Briefly confirm the UI passes the Core Directives:
-
-```
-✅ Fitts's Law: Touch targets ≥ 44px, primary action in thumb zone
-✅ Hick's Law: 1 primary CTA, advanced options in accordion
-✅ Miller's Law: Data chunked in groups of 6
-✅ Doherty: Skeleton + Empty + Error states included
-✅ A11y: focus-visible rings, WCAG AA contrast, semantic HTML
-```
-
----
-
-## Common Rules for Professional UI
-
-### Icons & Visual Elements
-
-| Rule | Do | Don't |
-|------|----|-------|
-| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 as UI icons |
-| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |
-| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
-| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
-
-### Interaction & Cursor
-
-| Rule | Do | Don't |
-|------|----|-------|
-| **Cursor pointer** | Add `cursor-pointer` to all clickable elements | Leave default cursor on interactive elements |
-| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |
-| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |
-
-### Light/Dark Mode Contrast
-
-| Rule | Do | Don't |
-|------|----|-------|
-| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |
-| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
-| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
-
-### Layout & Spacing
-
-| Rule | Do | Don't |
-|------|----|-------|
-| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |
-| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |
-| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |
-
----
-
-## UX Heuristics Framework (Krug + Nielsen)
-
-> Practical usability principles for evaluating and improving user interfaces. Based on a fundamental truth: users don't read, they scan. They don't make optimal choices, they satisfice. They don't figure out how things work, they muddle through.
-
-**Core Principle: "Don't Make Me Think"** — Every page should be self-evident. If something requires thinking, it's a usability problem.
-
-**Scoring — Goal: 10/10.** When reviewing or creating user interfaces, rate them 0-10 based on adherence to the principles below.
-
-### Krug's Three Laws of Usability
-
-**1. Don't Make Me Think** — Every question mark in a user's head adds cognitive load. Clever names lose to clear names. "Sign in" not "Access your account portal". If a label needs explanation, simplify the label.
-
-**2. It Doesn't Matter How Many Clicks** — Users don't mind clicks if each is painless, obvious, and confidence-building. Three mindless clicks beat one confusing click. Users abandon when confused, not when they've clicked too many times.
-
-**3. Get Rid of Half the Words** — Then get rid of half of what's left. Users scan, not read. Every unnecessary word competes with what matters. "Enter your password to continue." not "Please kindly note that you will need to enter your password in order to proceed."
-
-**4. The Trunk Test** — Drop users on any random page. Can they instantly tell: what site? what page? major sections? options at this level? position in hierarchy? where is search?
-
-### Nielsen's 10 Usability Heuristics
-
-| # | Heuristic | Key Rule |
-|---|-----------|----------|
-| 1 | **Visibility of System Status** | Every action needs acknowledgment — progress bars, confirmations, skeleton screens |
-| 2 | **Match Real World** | "Sign in" not "Authenticate", "Search" not "Query" |
-| 3 | **User Control & Freedom** | Undo beats "Are you sure?" dialogs. Every flow needs cancel/exit |
-| 4 | **Consistency & Standards** | Same words, styles, behaviors mean the same thing throughout |
-| 5 | **Error Prevention** | Constrained inputs, autocomplete, sensible defaults, "unsaved changes" warnings |
-| 6 | **Recognition Over Recall** | Show options, don't require memorization. Breadcrumbs, recent searches, pre-filled fields |
-| 7 | **Flexibility & Efficiency** | Serve novices and experts. Keyboard shortcuts, bulk actions, Cmd+K |
-| 8 | **Aesthetic & Minimalist** | Every element must earn its place. One primary CTA per page |
-| 9 | **Help with Errors** | What happened, why, how to fix. "Password must be 8+ chars" not "Invalid" |
-| 10 | **Help & Documentation** | Searchable, task-focused, contextual tooltips and inline hints |
-
-### Severity Rating Scale
-
-| Severity | Rating | Description | Priority |
-|----------|--------|-------------|----------|
-| 0 | Not a problem | Disagreement, not usability issue | Ignore |
-| 1 | Cosmetic | Minor annoyance, low impact | Fix if time |
-| 2 | Minor | Causes delay or frustration | Schedule fix |
-| 3 | Major | Significant task failure | Fix soon |
-| 4 | Catastrophic | Prevents task completion | Fix immediately |
-
-### Quick Diagnostic
-
-| Question | If No | Action |
-|----------|-------|--------|
-| Can I tell what site/page this is immediately? | Users are lost | Add clear logo, page title, breadcrumbs |
-| Is the main action obvious? | Users don't know what to do | Single primary CTA, visual hierarchy |
-| Is the navigation clear? | Users can't find their way | Trunk Test, "you are here" indicators |
-| Does the system show what's happening? | Users lose trust | Loading states, confirmations, progress |
-| Are error messages helpful? | Users get stuck | Plain language with specific fix |
-| Can users undo or go back? | Users afraid to act | Add undo, cancel, back everywhere |
-| Does it work without hover? | Mobile/keyboard excluded | Replace hover-only with visible alternatives |
-| Does anything make me stop and think? | Cognitive load too high | Simplify — redesign if needs explanation |
-
-### Heuristic Conflicts Resolution
-
-- **Simplicity vs. Flexibility**: Use progressive disclosure
-- **Consistency vs. Context**: Consistent patterns, contextual prominence
-- **Efficiency vs. Error Prevention**: Prefer undo over confirmation dialogs
-- **Discoverability vs. Minimalism**: Primary actions visible, secondary hidden
-
-### Dark Patterns to Avoid
-
-Never deliberately violate heuristics to manipulate users: forced continuity, roach motel, confirmshaming, hidden costs.
-
-### Reference Files
-
-- `references/krug-principles.md` — Full Krug methodology
-- `references/nielsen-heuristics.md` — Detailed heuristic examples
-- `references/audit-template.md` — Structured evaluation template
-- `references/dark-patterns.md` — Categories and ethical alternatives
-- `references/wcag-checklist.md` — WCAG 2.1 AA checklist
-- `references/cultural-ux.md` — RTL, color meanings, localization
-- `references/heuristic-conflicts.md` — Conflict resolution frameworks
-
----
+## The Bottom Line
 
-## Pre-Delivery Checklist
-
-### Core Directive Compliance (MANDATORY — check every item)
-- [ ] **Fitts's Law:** ALL touch targets ≥ 44×44px (`min-h-[44px] min-w-[44px]`), primary actions in thumb zone
-- [ ] **Hick's Law:** Max 1-2 primary CTAs per view, advanced options use progressive disclosure
-- [ ] **Miller's Law:** Info chunked in groups of 5-9, data tables have clear visual separators
-- [ ] **Doherty Threshold:** Skeleton loader for data-fetching components, Empty State designed, all interactive states coded (`hover:`, `active:`, `disabled:`, `focus-visible:`)
-- [ ] **A11y/Poka-Yoke:** WCAG 2.1 AA contrast (4.5:1), `focus-visible:ring-2 focus-visible:ring-offset-2` on all interactive elements, destructive actions visually distinct + separated, semantic HTML + ARIA
-- [ ] **i18n/Multi-Locale:** Containers use `min-width` not `width` (text expands 30-40% in Thai), dates/numbers use `toLocaleDateString(userLocale)`, font supports ALL target scripts, no hardcoded currency symbols
-- [ ] **Inline UX Comments:** Code contains `<!-- UX: Law Name -->` comments explaining constraint application
-
-### Visual Quality
-- [ ] No emojis used as icons (use SVG instead)
-- [ ] All icons from consistent icon set (Heroicons/Lucide)
-- [ ] Brand logos are correct (verified from Simple Icons)
-- [ ] Hover states don't cause layout shift
-
-### Interaction
-- [ ] All clickable elements have `cursor-pointer`
-- [ ] Hover states provide clear visual feedback
-- [ ] Transitions are smooth (150-300ms)
-- [ ] Focus states visible for keyboard navigation
-
-### Light/Dark Mode
-- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
-- [ ] Glass/transparent elements visible in light mode
-- [ ] Borders visible in both modes
-
-### Layout
-- [ ] Responsive at 375px, 768px, 1024px, 1440px
-- [ ] No horizontal scroll on mobile
-- [ ] No content hidden behind fixed navbars
-
-### Accessibility
-- [ ] All images have alt text
-- [ ] Form inputs have labels
-- [ ] Color is not the only indicator
-- [ ] `prefers-reduced-motion` respected
+**Your memory is your superpower. Without it, you repeat every mistake forever.**