@champpaba/claude-agent-kit 1.8.0 → 2.0.0

package/.claude/CLAUDE.md

@@ -1,46 +1,8 @@
 # CLAUDE.md
 
 > **Navigation Hub for AI Agents**
-> **Template Version:** 1.8.0 - Universal Multi-Agent Template (Opus 4.5)
-> **Latest:** Token Optimization - Removed documentation/report phases, verbose terminal output instead
-
----
-
-## 📁 File Naming Conventions (OpenSpec + Template)
-
-> **IMPORTANT:** Avoid confusion between OpenSpec files and Template files
-
-### OpenSpec Files (from [Fission-AI/OpenSpec](https://github.com/Fission-AI/OpenSpec))
-
-| File | Purpose | When to Read |
-|------|---------|--------------|
-| `proposal.md` | WHY - Goals, scope, rationale | Phase planning |
-| `tasks.md` | WHAT - Implementation checklist | Task tracking |
-| `design.md` | **Technical/Architecture decisions** (optional) | Backend/Database phases |
-| `specs/` | Delta specs (ADDED/MODIFIED/REMOVED) | Requirement validation |
-
-### Template Files (from claude-multi-agent-template)
-
-| File | Purpose | When to Read |
-|------|---------|--------------|
-| `STYLE_GUIDE.md` | **Visual design** (colors, typography, spacing) | UI/Frontend phases |
-| `STYLE_TOKENS.json` | Lightweight design tokens (~500 tokens) | Quick UI reference |
-| `page-plan.md` | UI component layout + content strategy | uxui-frontend agent |
-| `phases.md` | Execution plan with agent assignments | All phases |
-| `flags.json` | Progress tracking | All phases |
-
-### Key Distinction
-
-```
-OpenSpec design.md    = Technical Architecture (data flow, API structure, system design)
-Template STYLE_GUIDE  = Visual Design (colors, fonts, spacing, component styles)
-```
-
-**Agents should read BOTH when relevant:**
-- `uxui-frontend` → STYLE_GUIDE.md (visual) + design.md (if has UI architecture)
-- `backend` → design.md (API/data architecture)
-- `database` → design.md (data models, relationships)
-- `frontend` → STYLE_GUIDE.md (visual) + design.md (API contracts)
+> **Template Version:** 2.0.0 - Universal Multi-Agent Template
+> **Latest:** Design System v2.0 - Interactive setup, theme selection, selective pattern loading, page type detection
 
 ---
 
@@ -57,22 +19,23 @@ Universal, framework-agnostic template for AI-assisted development.
 - ✅ Domain-Specific Support (add your business logic)
 
 **What's NOT Included:**
-- ❌ Framework patterns → Generated dynamically via `/csetup`
-- ❌ Package managers → Auto-detected by `/csetup`
+- ❌ Framework patterns → Generated dynamically via `/agentsetup`
+- ❌ Package managers → Detected by `/agentsetup`
 - ❌ Spec frameworks → Optional (OpenSpec, BMAD, SpecKit)
 
 ---
 
 ## 📖 Quick Navigation
 
-**Design/UI:**
-- `/designsetup` - Auto-generate style guide from reference/codebase/AI
-- `design-system/STYLE_TOKENS.json` - **NEW!** Lightweight design tokens (~500 tokens) ✨
-- `design-system/STYLE_GUIDE.md` - Full style guide (17 sections, ~5000 tokens)
-- `@/.claude/lib/document-loader.md` - **NEW!** Token-efficient loading patterns ✨
+**Design/UI (v2.0.0):**
+- `/extract https://site.com` - **NEW!** Extract design from reference sites (multi-URL, style detection)
+- `/designsetup @prd.md` - **ENHANCED!** Interactive design setup (3-round loop, theme selection)
+- `design-system/tokens.json` - **v2.0!** Design tokens with style/theme/animations (~800 tokens) ✨
+- `design-system/patterns/*.md` - **NEW!** Selective code patterns (buttons, cards, forms, animations, decorations)
+- `design-system/STYLE_GUIDE.md` - Human-readable guide (no code, ~150 lines)
+- `.claude/extractions/*.json` - **NEW!** Extracted site data
+- `@/.claude/lib/document-loader.md` - Token-efficient loading patterns
 - `@/.claude/contexts/design/index.md` (General design principles - fallback)
-- `@/.claude/contexts/design/box-thinking.md` (Layout analysis)
-- `@/.claude/contexts/patterns/ui-component-consistency.md` (Visual consistency)
 
 **Development:**
 - `@/.claude/contexts/patterns/task-classification.md` (Agent selection guide)
@@ -84,14 +47,18 @@ Universal, framework-agnostic template for AI-assisted development.
 - `@/.claude/contexts/patterns/frontend-component-strategy.md`
 
 **Project Setup:**
-- `/designsetup` - Auto-generate style guide (reference → codebase → AI)
-- `/csetup` - **v1.8.0:** Now auto-detects tech stack + generates best practices (replaces /psetup, /agentsetup)
+- `/extract https://site.com` - Extract design from reference sites
+- `/designsetup @prd.md` - Interactive design system setup
+- `/psetup` - One-time project setup (detect tech stack, generate best practices)
+- `/agentsetup` - Auto-detect tech stack and generate best practices
 
-**Page Planning (UI Tasks):**
-- `/pageplan @prd.md @brief.md` - **ENHANCED v1.4.0!** Generate page structure & conversion-optimized content
+**Page Planning (UI Tasks) - v2.0.0:**
+- `/pageplan @prd.md @brief.md` - **ENHANCED v2.0.0!** Generate page structure with auto page type detection
 - Output: `openspec/changes/{id}/page-plan.md` (component reuse, buyer avatar, conversion copy, asset checklist)
-- **NEW:** Buyer avatar analysis (Eugene Schwartz framework) for marketing pages
-- **NEW:** Conversion-optimized content (pain → promise → CTA)
+- **NEW v2.0.0:** Auto-detects page type (landing/dashboard/auth) from proposal.md/tasks.md
+- **NEW v2.0.0:** Reads tokens.json for style/theme/animations
+- **NEW v2.0.0:** Loads patterns/*.md selectively based on page type
+- Buyer avatar analysis (Eugene Schwartz framework) for marketing pages only
 - Used by: uxui-frontend agent (auto-reads in STEP 0.5)
 
 **OpenSpec Multi-Agent Workflow:**
@@ -101,7 +68,7 @@ Universal, framework-agnostic template for AI-assisted development.
 - `/cstatus {change-id}` - Quick progress status for a change
 
 **Best Practices (Dynamic):**
-- `.claude/contexts/domain/project/best-practices/` (auto-generated by `/csetup`)
+- `.claude/contexts/domain/{project}/best-practices/` (generated by `/agentsetup`)
 - Framework-specific guidelines from Context7 MCP
 
 **Indexing (3 Levels):**
@@ -109,75 +76,107 @@ Universal, framework-agnostic template for AI-assisted development.
 - Level 2: `.claude/contexts/domain/{project}/README.md` (Project Overview)
 - Level 3: `.claude/contexts/domain/{project}/best-practices/index.md` (Best Practices Registry)
 
-**Implementation Logic:**
+**🆕 Implementation Logic (v1.1.0):**
 - `@/.claude/lib/README.md` - Implementation logic overview
-- `@/.claude/lib/agent-executor.md` - Agent retry & escalation logic (used by /cdev) + 🆕 Incremental testing execution (v1.6.0)
+- `@/.claude/lib/agent-executor.md` - Agent retry & escalation logic (used by /cdev)
 - `@/.claude/lib/tdd-classifier.md` - TDD classification logic (used by /csetup)
-- `@/.claude/lib/task-analyzer.md` - 🆕 Task analysis with milestone generation (v1.6.0)
-- `@/.claude/lib/flags-updater.md` - Progress tracking protocol (Main Claude updates flags.json)
-- `@/.claude/lib/agent-router.md` - Mandatory agent routing rules (enforce delegation)
+- `@/.claude/lib/flags-updater.md` - 🆕 Progress tracking protocol (Main Claude updates flags.json)
+- `@/.claude/lib/agent-router.md` - 🆕 Mandatory agent routing rules (enforce delegation)
 - `@/.claude/contexts/patterns/agent-discovery.md` - Shared agent discovery flow
 
 ---
 
-## 📚 Best Practices System (v1.8.0)
+## 📚 Best Practices System
 
-**Quick Summary:**
-- `/csetup` **auto-detects tech stack** from: package.json → design.md → proposal/tasks (3 sources)
-- **Auto-generates best practices** from Context7 MCP (React, Next.js, Prisma, etc.)
-- Files created in `.claude/contexts/domain/project/best-practices/`
-- **Agents MUST read** best practices before coding (validated by agent-executor)
-- `/cdev` **injects** relevant best-practices paths into agent prompts
+**→ See:** `@/.claude/lib/detailed-guides/best-practices-system.md` for complete guide
 
-**Flow:**
-```
-/csetup → detect stack → query Context7 → generate best-practices
-/cdev   → inject paths into prompt → agent reads → validation checks
-```
+**Quick Summary:**
+- Run `/agentsetup` → Auto-detects tech stack → Queries Context7 → Generates framework-specific best practices
+- Files created in `.claude/contexts/domain/{project}/best-practices/` (React, Next.js, Prisma, etc.)
+- Agents auto-discover via 3-level indexing (domain → project → best-practices)
+- Enforces code quality with framework-specific patterns
 
 ---
 
-## 🎨 Design System / Style Guide Generation
+## 🎨 Design System v2.0.0 (Interactive Setup)
 
 **→ See:** `@/.claude/lib/detailed-guides/design-system.md` for complete guide
 
 **Quick Summary:**
-- `/designsetup` auto-detects project context with **3 smart paths**: Reference design → Brownfield (reverse engineering) → Greenfield (AI-generated)
-- Generates comprehensive `design-system/STYLE_GUIDE.md` (17 sections: colors, typography, spacing, components, etc.)
-- **uxui-frontend agent** auto-reads style guide (Priority #1) or falls back to general design principles
-- Ensures visual consistency, prevents duplicates, enforces accessibility
+- `/extract https://site.com` → Extracts design from reference sites (multi-URL, style detection)
+- `/designsetup @prd.md` → Interactive 3-round loop with theme selection
+- Generates:
+  - `tokens.json` - Design tokens with style/theme/animations (~800 tokens) **FOR AGENTS**
+  - `patterns/*.md` - Code patterns (buttons, cards, forms, animations, decorations) **SELECTIVE LOADING**
+  - `STYLE_GUIDE.md` - Human-readable guide (no code, ~150 lines) **FOR HUMANS**
+
+**New Features in v2.0.0:**
+- 🎯 **Style Detection:** Neo-Brutalism, Minimalist, Glassmorphism, Modern SaaS, etc.
+- 🎭 **Theme Selection:** AI recommends themes based on project context
+- 🎬 **Animation Support:** GSAP, ScrollTrigger, Framer Motion detection
+- 📜 **Scroll Patterns:** stacking-cards, parallax, fade-in, slide-in
+- 🖼️ **Decorative Direction:** USE/AVOID elements for theme consistency
+
+**Flow:**
+```
+/extract → .claude/extractions/*.json
+           ↓
+/designsetup → tokens.json + patterns/*.md + STYLE_GUIDE.md
+           ↓
+/pageplan → page-plan.md (reads tokens.json, auto-detects page type)
+           ↓
+/csetup → phases.md (reads page-plan.md)
+           ↓
+/cdev → uxui-frontend (reads tokens.json + patterns/*.md selectively)
+```
 
 ---
 
-## ⚡ Context Optimization (v1.2.0)
+## ⚡ Context Optimization (v2.0.0)
 
 **→ See:** `@/.claude/lib/detailed-guides/context-optimization.md` for complete guide
 
 **Quick Summary:**
 - **Problem:** 20K tokens wasted (STYLE_GUIDE.md read 4x by different commands/agents)
-- **Solution:** 3-tier loading → STYLE_TOKENS.json (500 tokens) → design-context.md (1K) → STYLE_GUIDE.md (5K, selective)
-- **Result:** 70% token reduction (~4.7K total), 3-4x faster, maintained quality
+- **Solution (v2.0.0):**
+  - `tokens.json` (~800 tokens) - **PRIMARY: All agents read this**
+  - `patterns/*.md` - **SELECTIVE: Load based on page type**
+  - `STYLE_GUIDE.md` (~150 lines) - **HUMAN-READABLE: No code**
+- **Page Type Detection:**
+  - Landing/Marketing → Full patterns (buttons, cards, scroll-animations, decorations)
+  - Dashboard/Admin → Minimal patterns (buttons, cards, forms)
+  - Auth → Clean patterns (buttons, forms)
+- **Result:** 84% token reduction (~800 tokens vs ~5000), 4x faster, theme consistency
 
 ---
 
-## 📋 Page Planning System (v1.4.0 - Conversion-Optimized)
+## 📋 Page Planning System (v2.0.0 - Auto Page Type Detection)
 
 **→ See:** `@/.claude/lib/detailed-guides/page-planning.md` for complete guide
 
 **Quick Summary:**
-- **Problem:** Agents duplicate components (Navbar 3x), use random colors, lorem ipsum content, **generic copy that doesn't convert**
+- **Problem:** Agents duplicate components (Navbar 3x), use random colors, lorem ipsum content, wrong decorations for page type
 - **Solution:** `/pageplan @prd.md @brief.md` → Generates `openspec/changes/{id}/page-plan.md` with:
+  - **Auto page type detection** 🆕 (landing/dashboard/auth from proposal.md/tasks.md)
+  - **tokens.json integration** 🆕 (style, theme, animations, decorative direction)
+  - **Selective pattern loading** 🆕 (only load patterns relevant to page type)
   - Component reuse plan ✅ (prevent duplicates)
-  - **Buyer avatar analysis** 🆕 (Eugene Schwartz framework)
-  - **Conversion-optimized content** 🆕 (pain → promise → CTA)
+  - Buyer avatar analysis (Eugene Schwartz framework) **for marketing pages only**
+  - Conversion-optimized content (pain → promise → CTA) **for marketing pages only**
   - Asset checklist ✅ (performance-optimized)
-- **Benefits:**
-  - Prevents duplicates, ensures design consistency
-  - **Real content from PRD with conversion psychology** 🆕
-  - **2-5x better conversion rates** (pain-based headlines vs generic)
-  - 25% faster (search + copy strategy done once upfront)
-- **Use for:** Landing pages, marketing sites, product pages (auto-detects marketing vs dashboard)
-- **Skips for:** Dashboards, admin panels, backend/database work (no buyer avatar needed)
+
+**Page Type Handling:**
+| Page Type | Decorations | Scroll Anims | Buyer Avatar | Patterns Loaded |
+|-----------|-------------|--------------|--------------|-----------------|
+| Landing/Marketing | ✅ Full | ✅ Enabled | ✅ Enabled | buttons, cards, scroll-anims, decorations |
+| Dashboard/Admin | ❌ Minimal | ❌ Disabled | ❌ Skipped | buttons, cards, forms |
+| Auth (Login/Register) | ❌ None | ❌ Disabled | ❌ Skipped | buttons, forms |
+
+**Benefits:**
+- Auto-detects page type from context (no manual config)
+- Theme + decorations from tokens.json applied consistently
+- 84% token reduction (selective pattern loading)
+- Conversion-optimized only where needed (marketing pages)
 
 ---
 
@@ -193,20 +192,6 @@ Universal, framework-agnostic template for AI-assisted development.
 
 ---
 
-## 🔄 Incremental Testing (v1.6.0)
-
-**→ See:** `@/.claude/lib/detailed-guides/incremental-testing.md` for complete guide
-
-**Quick Summary:**
-- **Problem:** All-or-nothing testing → bugs found at scale (1000 records) → hard to debug, expensive rework
-- **Solution:** Milestone-based validation → Test 1 record → 10 → errors → scale → catch bugs early (75% faster debug)
-- **3 Patterns:** Backend API (4 milestones), Complex Form (3 milestones), Database Migration (3 milestones)
-- **Round-based Retry:** 2 attempts → Main Claude intervention (hints vs ask human) → new round (unlimited)
-- **Detection:** Auto-triggered for Risk=HIGH OR (Risk=MEDIUM + Complexity≥7) OR External API OR Data-intensive (~20-30% of tasks)
-- **Benefits:** 60-70% rework reduction, 40-50% net speedup, 90% success rate with progressive confidence
-
----
-
 ## 🤖 Agent System
 
 **→ See:** `@/.claude/lib/detailed-guides/agent-system.md` for complete guide

package/.claude/commands/csetup.md

@@ -44,23 +44,54 @@ Read in order:
 
 ---
 
-### Step 2.5: Validate Design System (Context Optimization v1.2.0)
+### Step 2.5: Validate Design System & Page Plan (v2.0.0)
 
-> **New:** Validate design files exist for UI work
+> **Updated v2.0.0:** Validate design files + read page-plan.md if exists
 
 ```typescript
 // Detect if change involves UI/frontend work
 const tasksContent = Read('openspec/changes/{change-id}/tasks.md')
 const hasFrontend = tasksContent.toLowerCase().match(/(ui|component|page|frontend|design|responsive)/i)
 
+let tokens = null
+let pagePlan = null
+let pageType = 'generic'
+
 if (hasFrontend) {
   output(`\n🎨 UI work detected - validating design system...`)
 
-  const tokensPath = 'design-system/STYLE_TOKENS.json'
+  const tokensPath = 'design-system/tokens.json' // v2.0 tokens
   const styleGuidePath = 'design-system/STYLE_GUIDE.md'
+  const pagePlanPath = `openspec/changes/${changeId}/page-plan.md`
 
   const hasTokens = fileExists(tokensPath)
   const hasStyleGuide = fileExists(styleGuidePath)
+  const hasPagePlan = fileExists(pagePlanPath)
+
+  // ========== LOAD tokens.json (v2.0 structure) ==========
+  if (hasTokens) {
+    tokens = JSON.parse(Read(tokensPath))
+    output(`✅ tokens.json Loaded:`)
+    output(`   - Style: ${tokens.style.name}`)
+    output(`   - Theme: ${tokens.theme.name}`)
+    output(`   - Animations: ${tokens.animations.enabled ? 'Enabled' : 'Disabled'}`)
+  }
+
+  // ========== LOAD page-plan.md (if exists) ==========
+  if (hasPagePlan) {
+    pagePlan = Read(pagePlanPath)
+    output(`✅ page-plan.md Found`)
+
+    // Extract page type from page-plan.md
+    const pageTypeMatch = pagePlan.match(/Page Type:\*\*\s*(.*)/i)
+    if (pageTypeMatch) {
+      pageType = pageTypeMatch[1].trim().toLowerCase()
+      output(`   - Page Type: ${pageType}`)
+    }
+  } else {
+    output(`ℹ️ page-plan.md not found (optional)`)
+    output(`   → Run /pageplan first for better component planning`)
+  }
 
   if (!hasTokens || !hasStyleGuide) {
     warn(`
@@ -68,7 +99,8 @@ if (hasFrontend) {
 
 Found:
   ${hasStyleGuide ? '✅' : '❌'} STYLE_GUIDE.md
-  ${hasTokens ? '✅' : '❌'} STYLE_TOKENS.json
+  ${hasTokens ? '✅' : '❌'} tokens.json
+  ${hasPagePlan ? '✅' : '❌'} page-plan.md
 
 This may result in:
   - Inconsistent colors (random hex codes)
@@ -77,7 +109,8 @@ This may result in:
 
 Recommendation:
   1. Run: /designsetup
-  2. Then: /csetup ${changeId}
+  2. Run: /pageplan @prd.md (optional but recommended)
+  3. Then: /csetup ${changeId}
 
 Continue anyway? (yes/no)
     `)
@@ -89,7 +122,8 @@ Continue anyway? (yes/no)
   } else {
     output(`✅ Design System Ready`)
     output(`   - STYLE_GUIDE.md ✓`)
-    output(`   - STYLE_TOKENS.json ✓`)
+    output(`   - tokens.json ✓`)
+    if (hasPagePlan) output(`   - page-plan.md ✓`)
   }
 }
 ```
@@ -799,39 +833,66 @@ const projectTech = Read('.claude/contexts/domain/project/tech-stack.md')
 // Detect additional tech from proposal/tasks
 const additionalTech = detectAdditionalTech(proposalContent, tasksContent)
 
-// 🆕 Load design info (if UI work)
+// 🆕 Load design info (if UI work) - v2.0.0
 let designInfo = ''
-if (hasFrontend) {
-  const tokensPath = 'design-system/STYLE_TOKENS.json'
-
-  if (fileExists(tokensPath)) {
-    const tokens = JSON.parse(Read(tokensPath))
-
-    designInfo = `
-## 🎨 Design System (Context Optimization v1.2.0)
-
-**Design Files (Token-Efficient):**
-- STYLE_TOKENS.json: \`design-system/STYLE_TOKENS.json\` (~500 tokens)
-- STYLE_GUIDE.md: \`design-system/STYLE_GUIDE.md\` (~5000 tokens, load selectively)
-
-**Key Design Tokens:**
-- Primary Color: ${tokens.tokens.colors.primary.DEFAULT}
+if (hasFrontend && tokens) {
+  designInfo = `
+## 🎨 Design System (v2.0.0)
+
+**Design Files:**
+- tokens.json: \`design-system/tokens.json\` (~800 tokens)
+- patterns/: \`design-system/patterns/*.md\` (selective loading)
+- STYLE_GUIDE.md: \`design-system/STYLE_GUIDE.md\` (human-readable, ~150 lines)
+${pagePlan ? `- page-plan.md: \`openspec/changes/${changeId}/page-plan.md\` ✅` : ''}
+
+**Style Direction:**
+- Style: ${tokens.style.name}
+- Theme: ${tokens.theme.name}
+- Feel: ${tokens.style.feel}
+
+**Design Tokens:**
+- Primary Color: ${tokens.colors.primary.DEFAULT}
 - Component Library: ${tokens.component_library.name}
-- Spacing Scale: ${tokens.tokens.spacing.scale.join(', ')}px
-- Shadows: ${Object.keys(tokens.tokens.shadows).slice(0, 5).join(', ')}
-
-**Agent Loading (STEP 0.5 for uxui-frontend):**
-1. Read: STYLE_TOKENS.json (~500 tokens) ✅
-2. Optional: STYLE_GUIDE.md (selective sections ~2K tokens)
-3. Report: Design tokens extracted
+- Spacing Scale: ${tokens.spacing.scale.join(', ')}px
+- Animations: ${tokens.animations.enabled ? 'Enabled' : 'Disabled'}
+
+**Theme & Decorations:**
+${pageType.includes('landing') || pageType.includes('marketing') ? `
+- Decorations: ✅ Enabled
+- USE: ${tokens.theme.decorative_elements.use.slice(0, 3).join(', ')}
+- AVOID: ${tokens.theme.decorative_elements.avoid.slice(0, 2).join(', ') || '(none)'}
+- Scroll Animations: ✅ Enabled
+` : `
+- Decorations: ❌ Disabled (${pageType} page)
+- Scroll Animations: ❌ Disabled
+`}
+
+**Pattern Files to Load:**
+${pageType.includes('landing') || pageType.includes('marketing') ?
+`- patterns/buttons.md ✅
+- patterns/cards.md ✅
+- patterns/scroll-animations.md ✅
+- patterns/decorations.md ✅` :
+pageType.includes('auth') ?
+`- patterns/buttons.md ✅
+- patterns/forms.md ✅` :
+`- patterns/buttons.md ✅
+- patterns/cards.md ✅
+- patterns/forms.md ✅`}
+
+**Agent Instructions (uxui-frontend STEP 0.5):**
+1. Read: tokens.json (~800 tokens) ✅
+2. Read: page-plan.md (if exists) ✅
+3. Load patterns selectively based on page type
+4. Report: Design tokens + page type extracted
 
 **Critical Rules:**
 - ❌ NO hardcoded colors (text-gray-500)
 - ✅ USE theme tokens (text-foreground/70)
 - ❌ NO arbitrary spacing (p-5)
 - ✅ USE spacing scale (p-4, p-6)
+- ${pageType.includes('landing') ? '✅ Apply decorations from theme' : '❌ Skip decorations for this page type'}
 `
-  }
 }
 
 // Replace placeholders

package/.claude/commands/cstatus.md

@@ -1,60 +1,60 @@
----
-name: Change Status
-description: Quick progress status for a change
-category: Multi-Agent
-tags: [status, progress, quick]
----
-
-## Usage
-
-```bash
-/cstatus {change-id}
-```
-
-## What It Does
-
-Shows quick progress summary:
-- Progress percentage with bar
-- Current phase
-- Time spent/remaining
-- Quick stats
-
-## Output Format
-
-```
-📊 CHANGE-{id}: {type} | {template}
-
-Progress: [████████░░] 64% (7/11 phases)
-
-Current Phase: #8 Refactor (test-debug)
-├─ Started: 14:15 (15 minutes ago)
-├─ Estimated: 20 minutes
-└─ Status: in_progress
-
-✅ Completed: 7 phases
-🔄 In Progress: 1 phase
-⏳ Remaining: 3 phases
-
-⏱️ Time:
-├─ Spent: 2h 55min (estimated: 3h 15min)
-├─ Remaining: ~35 minutes
-└─ Efficiency: 111% (ahead of estimate)
-
-📈 Stats:
-├─ Tests: 12 passed, 0 failed (75% coverage)
-├─ Issues: 2 found, 2 fixed, 0 remaining
-└─ Files: 4 created, 2 modified
-
-🎯 Next Steps:
-1. Complete refactoring (20 min)
-2. Test coverage report (5 min)
-3. Documentation (15 min)
-
-Commands:
-→ Detailed view: /cview {change-id}
-→ Continue dev: /cdev {change-id}
-```
-
-## Implementation
-
-Read `openspec/changes/{change-id}/.claude/flags.json` and format output using helper functions.
+---
+name: Change Status
+description: Quick progress status for a change
+category: Multi-Agent
+tags: [status, progress, quick]
+---
+
+## Usage
+
+```bash
+/cstatus {change-id}
+```
+
+## What It Does
+
+Shows quick progress summary:
+- Progress percentage with bar
+- Current phase
+- Time spent/remaining
+- Quick stats
+
+## Output Format
+
+```
+📊 CHANGE-{id}: {type} | {template}
+
+Progress: [████████░░] 64% (7/11 phases)
+
+Current Phase: #8 Refactor (test-debug)
+├─ Started: 14:15 (15 minutes ago)
+├─ Estimated: 20 minutes
+└─ Status: in_progress
+
+✅ Completed: 7 phases
+🔄 In Progress: 1 phase
+⏳ Remaining: 3 phases
+
+⏱️ Time:
+├─ Spent: 2h 55min (estimated: 3h 15min)
+├─ Remaining: ~35 minutes
+└─ Efficiency: 111% (ahead of estimate)
+
+📈 Stats:
+├─ Tests: 12 passed, 0 failed (75% coverage)
+├─ Issues: 2 found, 2 fixed, 0 remaining
+└─ Files: 4 created, 2 modified
+
+🎯 Next Steps:
+1. Complete refactoring (20 min)
+2. Test coverage report (5 min)
+3. Documentation (15 min)
+
+Commands:
+→ Detailed view: /cview {change-id}
+→ Continue dev: /cdev {change-id}
+```
+
+## Implementation
+
+Read `openspec/changes/{change-id}/.claude/flags.json` and format output using helper functions.