ctx-cc 2.2.0 → 2.3.0

package/README.md

@@ -1,6 +1,6 @@
-# CTX 2.2 - Continuous Task eXecution
+# CTX 2.3 - Continuous Task eXecution
 
-> Smart workflow orchestration for Claude Code. PRD-driven. 8 commands. Debug loop until 100% fixed.
+> Smart workflow orchestration for Claude Code. PRD-driven. Design-first. 8 commands. Debug loop until 100% fixed.
 
 ## Installation
 
@@ -15,11 +15,14 @@ npx ctx-cc --project    # Install to .claude in current directory
 npx ctx-cc --force      # Overwrite existing installation
 ```
 
-## Why CTX 2.2?
+## Why CTX 2.3?
 
-| Feature | Before | CTX 2.2 |
+| Feature | Before | CTX 2.3 |
 |---------|--------|---------|
 | Requirements | Ad-hoc goals | **PRD.json with stories** |
+| Design | Manual workflow | **Full design system** |
+| Accessibility | Manual checks | **WCAG 2.2 AA + EAA 2025** |
+| Tokens | Custom formats | **W3C Design Tokens** |
 | Verification | Task-based | **Acceptance criteria** |
 | Commands | 12-27 | **8** (organized) |
 | Router | Manual | **Smart (auto-routing)** |
@@ -48,12 +51,47 @@ CTX gathers EVERYTHING at initialization:
 - **Acceptance criteria** → How to verify each story
 - **Test credentials** → .ctx/.env (gitignored)
 - **Constitution** → Rules for autonomous decisions
+- **Design context** → Brand personality, inspirations, accessibility needs
 
 Then executes autonomously:
 - Only interrupts for architecture decisions (Rule 4)
+- Only interrupts for design approvals at gates
 - Uses stored credentials for browser testing
 - Loops through stories until all pass
 
+## Design System (New in 2.3)
+
+CTX handles visual work with dedicated agents and approval gates.
+
+### Story Types
+| Type | Agent | Purpose |
+|------|-------|---------|
+| feature | ctx-executor | Standard implementation |
+| brand | ctx-designer | BRAND_KIT.md + W3C tokens |
+| design | ctx-designer | UI components/pages |
+
+### 3 Options Pattern
+All design decisions present three options:
+- **Option A**: Conservative (safe, proven)
+- **Option B**: Balanced (recommended)
+- **Option C**: Bold (distinctive)
+
+### Design Approval Gates
+```
+Mood Board → Direction (A/B/C) → Prototype → Final
+```
+Each gate requires user approval before proceeding.
+
+### WCAG 2.2 AA + EAA 2025
+| Criterion | Requirement |
+|-----------|-------------|
+| 2.4.11 | Focus not obscured |
+| 2.5.7 | Drag alternatives |
+| 2.5.8 | 24x24px targets |
+| 3.3.8 | Accessible auth |
+
+EU markets require EAA 2025 compliance (enforcement: June 28, 2025).
+
 ## The 8 Commands
 
 ### Smart (Auto-routing)
@@ -145,13 +183,14 @@ Big work = multiple phases, not bigger plans.
 ### STATE.md - Single Source of Truth
 ~100 lines. Always accurate. Always read first.
 
-## 5 Specialized Agents
+## 6 Specialized Agents
 
 | Agent | Spawned when |
 |-------|--------------|
 | ctx-researcher | status = initializing |
 | ctx-planner | after research |
-| ctx-executor | status = executing |
+| ctx-executor | status = executing (feature stories) |
+| ctx-designer | status = executing (brand/design stories) |
 | ctx-debugger | status = debugging |
 | ctx-verifier | status = verifying |
 
@@ -177,6 +216,18 @@ Auto-runs during debugging and verification:
 - Check elements exist
 - Take screenshot proof
 
+### Figma MCP (Design Context)
+Auto-runs during design stories:
+- Extract design tokens
+- Get component metadata
+- Screenshot references
+
+### Gemini Design MCP (Visual Generation)
+Auto-runs during design stories:
+- Generate UI mockups
+- Create UI code
+- Analyze designs for accessibility
+
 ## Directory Structure
 
 ```
@@ -186,23 +237,53 @@ Auto-runs during debugging and verification:
 ├── phases/{story_id}/  # Per-story data
 │   ├── RESEARCH.md   # ArguSeek + ChunkHound results
 │   ├── PLAN.md       # Tasks mapped to acceptance criteria
-│   └── VERIFY.md     # Verification report
+│   ├── VERIFY.md     # Verification report
+│   ├── MOOD_BOARD.md # Design references (design stories)
+│   └── DESIGN_BRIEF.md # Design decisions (design stories)
 ├── checkpoints/      # Auto-checkpoints
 ├── debug/            # Debug screenshots
 └── memory/           # Decision memory
+
+project/
+├── BRAND_KIT.md      # Visual foundation (brand stories)
+└── tokens/           # W3C design tokens
+    ├── primitive.tokens.json
+    ├── semantic.tokens.json
+    └── component.tokens.json
 ```
 
 ## PRD.json - Requirements Contract
 
 ```json
 {
+  "brand": {
+    "hasBrandKit": false,
+    "personality": ["professional", "modern"],
+    "euMarket": true
+  },
+  "design": {
+    "wcagLevel": "AA",
+    "eaaCompliance": true,
+    "tokenFormat": "w3c"
+  },
   "stories": [
     {
       "id": "S001",
-      "title": "User login",
+      "type": "brand",
+      "title": "Establish brand kit",
+      "acceptanceCriteria": [
+        "BRAND_KIT.md exists",
+        "tokens/ directory populated"
+      ],
+      "passes": false
+    },
+    {
+      "id": "S002",
+      "type": "design",
+      "title": "Login page",
       "acceptanceCriteria": [
-        "User can log in with email",
-        "Invalid password shows error"
+        "WCAG 2.2 AA compliant",
+        "All states implemented"
       ],
       "passes": false
     }
@@ -210,7 +291,7 @@ Auto-runs during debugging and verification:
   "metadata": {
     "currentStory": "S001",
     "passedStories": 0,
-    "totalStories": 5
+    "totalStories": 2
   }
 }
 ```
@@ -260,4 +341,4 @@ MIT
 
 ---
 
-*CTX 2.2 - PRD-driven, story-verified, debug loop until 100% fixed*
+*CTX 2.3 - PRD-driven, design-first, story-verified, debug loop until 100% fixed*