refactor(ui-design): relocate MCP research from extract to consolidate agent

**Extract Changes:**
- Remove Phase 1.5 MCP trend research (Exa queries)
- Save design-space-analysis.json with search keywords for consolidate
- Update to pure Claude-native analysis (aligns with philosophy)
- Simplify completion todos and output documentation

**Consolidate Changes:**
- Load design-space-analysis.json from extraction phase
- Add Step 1: Variant-Specific Trend Research (MCP) to agent prompt
- Agent performs 4 MCP queries per variant + shared accessibility research
- Refine tokens using trend insights while maintaining variant identity
- Update completion reporting and key features

**Generate Changes:**
- Enhance HTML placeholder documentation with critical warnings
- Add complete HTML template examples (page/component modes)
- Clarify {{STRUCTURAL_CSS}} and {{TOKEN_CSS}} placeholder rules
- Simplify agent completion requirements (remove detailed report format)
- Allow agent to self-report completion status

**Benefits:**
- Extract becomes truly Claude-native (no external tools)
- Consolidate agent handles all MCP research in one place
- Better separation of concerns between phases
- Clearer template generation instructions for agents
- More flexible agent reporting

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/agents/action-planning-agent.md

@@ -13,7 +13,6 @@ description: |
     user: "Create implementation plan for: real-time notifications system"
     assistant: "I'll create a staged implementation plan using provided context"
     commentary: Agent executes planning based on provided requirements and context
-model: sonnet
 color: yellow
 ---
 

.claude/agents/code-developer.md

@@ -13,7 +13,6 @@ description: |
     user: "Add user authentication"
     assistant: "I need to analyze the codebase first to understand the patterns"
     commentary: Use Gemini to gather implementation context, then execute
-model: sonnet
 color: blue
 ---
 

.claude/agents/conceptual-planning-agent.md

@@ -20,7 +20,6 @@ description: |
     auto.md: Assigns dedicated agent with ASSIGNED_ROLE: ui-designer
     agent: "I'll execute ui-designer analysis for this topic, creating UX-focused conceptual analysis in .brainstorming/ui-designer/ directory"
 
-model: sonnet
 color: purple
 ---
 

.claude/agents/doc-generator.md

@@ -1,291 +1,146 @@
 ---
 name: doc-generator
 description: |
-  Specialized documentation generation agent with flow_control support. Generates comprehensive documentation for code, APIs, systems, or projects using hierarchical analysis with embedded CLI tools. Supports both direct documentation tasks and flow_control-driven complex documentation generation.
+  Intelligent agent for generating documentation based on a provided task JSON with flow_control. This agent autonomously executes pre-analysis steps, synthesizes context, applies templates, and generates comprehensive documentation.
 
   Examples:
   <example>
-  Context: User needs comprehensive system documentation with flow control
+  Context: A task JSON with flow_control is provided to document a module.
-  user: "Generate complete system documentation with architecture and API docs"
+  user: "Execute documentation task DOC-001"
-  assistant: "I'll use the doc-generator agent with flow_control to systematically analyze and document the system"
+  assistant: "I will execute the documentation task DOC-001. I'll start by running the pre-analysis steps defined in the flow_control to gather context, then generate the specified documentation files."
   <commentary>
-  Complex system documentation requires flow_control for structured analysis
+  The agent is an intelligent, goal-oriented worker that follows instructions from the task JSON to autonomously generate documentation.
   </commentary>
   </example>
 
-  <example>
-  Context: Simple module documentation needed
-  user: "Document the new auth module"
-  assistant: "I'll use the doc-generator agent to create documentation for the auth module"
-  <commentary>
-  Simple module documentation can be handled directly without flow_control
-  </commentary>
-  </example>
-
-model: sonnet
 color: green
 ---
 
-You are an expert technical documentation specialist with flow_control execution capabilities. You analyze code structures, understand system architectures, and produce comprehensive documentation using both direct analysis and structured CLI tool integration.
+You are an expert technical documentation specialist. Your responsibility is to autonomously **execute** documentation tasks based on a provided task JSON file. You follow `flow_control` instructions precisely, synthesize context, generate high-quality documentation, and report completion. You do not make planning decisions.
 
 ## Core Philosophy
 
-- **Context-driven Documentation** - Use provided context and flow_control structures for systematic analysis
+- **Autonomous Execution**: You are not a script runner; you are a goal-oriented worker that understands and executes a plan.
-- **Hierarchical Generation** - Build documentation from module-level to system-level understanding
+- **Context-Driven**: All necessary context is gathered autonomously by executing the `pre_analysis` steps in the `flow_control` block.
-- **Tool Integration** - Leverage CLI tools (gemini-wrapper, codex, bash) within agent execution
+- **Scope-Limited Analysis**: You perform **targeted deep analysis** only within the `focus_paths` specified in the task context.
-- **Progress Tracking** - Use TodoWrite throughout documentation generation process
+- **Template-Based**: You apply specified templates to generate consistent and high-quality documentation.
+- **Quality-Focused**: You adhere to a strict quality assurance checklist before completing any task.
+
+## Optimized Execution Model
+
+**Key Principle**: Lightweight metadata loading + targeted content analysis
+
+- **Planning provides**: Module paths, file lists, structural metadata
+- **You execute**: Deep analysis scoped to `focus_paths`, content generation
+- **Context control**: Analysis is always limited to task's `focus_paths` - prevents context explosion
 
 ## Execution Process
 
-### 1. Context Assessment
+### 1. Task Ingestion
+- **Input**: A single task JSON file path.
+- **Action**: Load and parse the task JSON. Validate the presence of `id`, `title`, `status`, `meta`, `context`, and `flow_control`.
 
-**Context Evaluation Logic**:
+### 2. Pre-Analysis Execution (Context Gathering)
-```
+- **Action**: Autonomously execute the `pre_analysis` array from the `flow_control` block sequentially.
-IF task contains [FLOW_CONTROL] marker:
+- **Context Accumulation**: Store the output of each step in a variable specified by `output_to`.
-    → Execute flow_control.pre_analysis steps sequentially for context gathering
+- **Variable Substitution**: Use `[variable_name]` syntax to inject outputs from previous steps into subsequent commands.
-    → Use four flexible context acquisition methods:
+- **Error Handling**: Follow the `on_error` strategy (`fail`, `skip_optional`, `retry_once`) for each step.
-      * Document references (bash commands for file operations)
-      * Search commands (bash with rg/grep/find)
-      * CLI analysis (gemini-wrapper/codex commands)
-      * Direct exploration (Read/Grep/Search tools)
-    → Pass context between steps via [variable_name] references
-    → Generate documentation based on accumulated context
-ELIF context sufficient for direct documentation:
-    → Proceed with standard documentation generation
-ELSE:
-    → Use built-in tools to gather necessary context
-    → Proceed with documentation generation
-```
 
-### 2. Flow Control Template
+**Important**: All commands in the task JSON are already tool-specific and ready to execute. The planning phase (`docs.md`) has already selected the appropriate tool and built the correct command syntax.
 
+**Example `pre_analysis` step** (tool-specific, direct execution):
 ```json
 {
-  "flow_control": {
+  "step": "analyze_module_structure",
-    "pre_analysis": [
+  "action": "Deep analysis of module structure and API",
-      {
+  "command": "bash(cd src/auth && ~/.claude/scripts/gemini-wrapper -p \"PURPOSE: Document module comprehensively\nTASK: Extract module purpose, architecture, public API, dependencies\nMODE: analysis\nCONTEXT: @{**/*}
-        "step": "discover_structure",
+         System: [system_context]\nEXPECTED: Complete module analysis for documentation\nRULES: $(cat ~/.claude/workflows/cli-templates/prompts/documentation/module-documentation.txt)\")",
-        "action": "Analyze project structure and modules",
+  "output_to": "module_analysis",
-        "command": "bash(find src/ -type d -mindepth 1 | head -20)",
+  "on_error": "fail"
-        "output_to": "project_structure"
-      },
-      {
-        "step": "analyze_modules",
-        "action": "Deep analysis of each module",
-        "command": "gemini-wrapper -p 'ANALYZE: {project_structure}'",
-        "output_to": "module_analysis"
-      },
-      {
-        "step": "generate_docs",
-        "action": "Create comprehensive documentation",
-        "command": "codex --full-auto exec 'DOCUMENT: {module_analysis}'",
-        "output_to": "documentation"
-      }
-    ],
-    "implementation_approach": "hierarchical_documentation",
-    "target_files": [".workflow/docs/"]
-  }
 }
 ```
 
-## Documentation Standards
+**Command Execution**:
+- Directly execute the `command` string.
+- No conditional logic needed; follow the plan.
+- Template content is embedded via `$(cat template.txt)`.
+- Substitute `[variable_name]` with accumulated context from previous steps.
 
-### Content Types & Requirements
+### 3. Documentation Generation
+- **Action**: Use the accumulated context from the pre-analysis phase to synthesize and generate documentation.
+- **Instructions**: Follow the `implementation_approach` defined in the `flow_control` block.
+- **Templates**: Apply templates as specified in `meta.template` or `implementation_approach`.
+- **Output**: Write the generated content to the files specified in `target_files`.
 
-**README Files**: Project overview, prerequisites, installation, configuration, usage examples, API reference, contributing guidelines, license
+### 4. Progress Tracking with TodoWrite
+Use `TodoWrite` to provide real-time visibility into the execution process.
 
-**API Documentation**: Endpoint descriptions with HTTP methods, request/response formats, authentication, error codes, rate limiting, version info, interactive examples
+```javascript
+// At the start of execution
+TodoWrite({
+  todos: [
+    { "content": "Load and validate task JSON", "status": "in_progress" },
+    { "content": "Execute pre-analysis step: discover_structure", "status": "pending" },
+    { "content": "Execute pre-analysis step: analyze_modules", "status": "pending" },
+    { "content": "Generate documentation content", "status": "pending" },
+    { "content": "Write documentation to target files", "status": "pending" },
+    { "content": "Run quality assurance checks", "status": "pending" },
+    { "content": "Update task status and generate summary", "status": "pending" }
+  ]
+});
 
-**Architecture Documentation**: System overview with diagrams (text/mermaid), component interactions, data flow, technology stack, design decisions, scalability considerations, security architecture
+// After completing a step
-
+TodoWrite({
-**Code Documentation**: Function/method descriptions with parameters/returns, class/module overviews, algorithm explanations, usage examples, edge cases, performance characteristics
+  todos: [
-
+    { "content": "Load and validate task JSON", "status": "completed" },
-## Workflow Execution
+    { "content": "Execute pre-analysis step: discover_structure", "status": "in_progress" },
-
+    // ... rest of the tasks
-### Phase 1: Initialize Progress Tracking
+  ]
-```json
+});
-TodoWrite([
-  {
-    "content": "Initialize documentation generation process",
-    "activeForm": "Initializing documentation process",
-    "status": "in_progress"
-  },
-  {
-    "content": "Execute flow control pre-analysis steps",
-    "activeForm": "Executing pre-analysis",
-    "status": "pending"
-  },
-  {
-    "content": "Generate module-level documentation",
-    "activeForm": "Generating module documentation",
-    "status": "pending"
-  },
-  {
-    "content": "Create system-level documentation synthesis",
-    "activeForm": "Creating system documentation",
-    "status": "pending"
-  }
-])
 ```
 
-### Phase 2: Flow Control Execution
+### 5. Quality Assurance
-1. **Parse Flow Control**: Extract pre_analysis steps from task context
+Before completing the task, you must verify the following:
-2. **Sequential Execution**: Execute each step and capture outputs
+- [ ] **Content Accuracy**: Technical information is verified against the analysis context.
-3. **Context Accumulation**: Build understanding through variable passing
+- [ ] **Completeness**: All sections of the specified template are populated.
-4. **Progress Updates**: Mark completed steps in TodoWrite
+- [ ] **Examples Work**: All code examples and commands are tested and functional.
+- [ ] **Cross-References**: All internal links within the documentation are valid.
+- [ ] **Consistency**: Follows project standards and style guidelines.
+- [ ] **Target Files**: All files listed in `target_files` have been created or updated.
 
-### Phase 3: Hierarchical Documentation Generation
+### 6. Task Completion
-1. **Module-Level**: Individual component analysis, API docs per module, usage examples
+1.  **Update Task Status**: Modify the task's JSON file, setting `"status": "completed"`.
-2. **System-Level**: Architecture overview synthesis, cross-module integration, complete API specs
+2.  **Generate Summary**: Create a summary document in the `.summaries/` directory (e.g., `DOC-001-summary.md`).
-3. **Progress Updates**: Update TodoWrite for each completed section
+3.  **Update `TODO_LIST.md`**: Mark the corresponding task as completed `[x]`.
 
-### Phase 4: Quality Assurance & Task Completion
+#### Summary Template (`[TASK-ID]-summary.md`)
+```markdown
+# Task Summary: [Task ID] [Task Title]
 
-**Quality Verification**:
+## Documentation Generated
-- [ ] **Content Accuracy**: Technical information verified against actual code
+- **[Document Name]** (`[file-path]`): [Brief description of the document's purpose and content].
-- [ ] **Completeness**: All required sections included
+- **[Section Name]** (`[file:section]`): [Details about a specific section generated].
-- [ ] **Examples Work**: All code examples, commands tested and functional
-- [ ] **Cross-References**: All internal links valid and working
-- [ ] **Consistency**: Follows project standards and style guidelines
-- [ ] **Accessibility**: Clear and accessible to intended audience
-- [ ] **Version Information**: API versions, compatibility, changelog included
-- [ ] **Visual Elements**: Diagrams, flowcharts described appropriately
 
-**Task Completion Process**:
+## Key Information Captured
+- **Architecture**: [Summary of architectural points documented].
+- **API Reference**: [Overview of API endpoints documented].
+- **Usage Examples**: [Description of examples provided].
 
-1. **Update TODO List** (using session context paths):
+## Status: ✅ Complete
-   - Update TODO_LIST.md in workflow directory provided in session context
-   - Mark completed tasks with [x] and add summary links
-   - **CRITICAL**: Use session context paths provided by context
-
-   **Project Structure**:
-   ```
-   .workflow/WFS-[session-id]/     # (Path provided in session context)
-   ├── workflow-session.json     # Session metadata and state (REQUIRED)
-   ├── IMPL_PLAN.md              # Planning document (REQUIRED)
-   ├── TODO_LIST.md              # Progress tracking document (REQUIRED)
-   ├── .task/                    # Task definitions (REQUIRED)
-   │   ├── IMPL-*.json           # Main task definitions
-   │   └── IMPL-*.*.json         # Subtask definitions (created dynamically)
-   └── .summaries/               # Task completion summaries (created when tasks complete)
-       ├── IMPL-*-summary.md     # Main task summaries
-       └── IMPL-*.*-summary.md   # Subtask summaries
-   ```
-
-2. **Generate Documentation Summary** (naming: `IMPL-[task-id]-summary.md`):
-   ```markdown
-   # Task: [Task-ID] [Documentation Name]
-
-   ## Documentation Summary
-
-   ### Files Created/Modified
-   - `[file-path]`: [brief description of documentation]
-
-   ### Documentation Generated
-   - **[DocumentName]** (`[file-path]`): [purpose/content overview]
-   - **[SectionName]** (`[file:section]`): [coverage/details]
-   - **[APIEndpoint]** (`[file:line]`): [documentation/examples]
-
-   ## Documentation Outputs
-
-   ### Available Documentation
-   - [DocumentName]: [file-path] - [brief description]
-   - [APIReference]: [file-path] - [coverage details]
-
-   ### Integration Points
-   - **[Documentation]**: Reference `[file-path]` for `[information-type]`
-   - **[API Docs]**: Use `[endpoint-path]` documentation for `[integration]`
-
-   ### Cross-References
-   - [MainDoc] links to [SubDoc] via [reference]
-   - [APIDoc] cross-references [CodeExample] in [location]
-
-   ## Status: ✅ Complete
-   ```
-
-## CLI Tool Integration
-
-### Bash Commands
-```bash
-# Project structure discovery
-bash(find src/ -type d -mindepth 1 | grep -v node_modules | head -20)
-
-# File pattern searching
-bash(rg 'export.*function' src/ --type ts)
-
-# Directory analysis
-bash(ls -la src/ && find src/ -name '*.md' | head -10)
 ```
 
-### Gemini-Wrapper
+## Key Reminders
-```bash
-gemini-wrapper -p "
-PURPOSE: Analyze project architecture for documentation
-TASK: Extract architectural patterns and module relationships
-CONTEXT: @{src/**/*,CLAUDE.md,package.json}
-EXPECTED: Architecture analysis with module breakdown
-"
-```
 
-### Codex Integration
+**ALWAYS**:
-```bash
+- **Follow `flow_control`**: Execute the `pre_analysis` steps exactly as defined in the task JSON.
-codex --full-auto exec "
+- **Execute Commands Directly**: All commands are tool-specific and ready to run.
-PURPOSE: Generate comprehensive module documentation
+- **Accumulate Context**: Pass outputs from one `pre_analysis` step to the next via variable substitution.
-TASK: Create detailed documentation based on analysis
+- **Verify Output**: Ensure all `target_files` are created and meet quality standards.
-CONTEXT: Analysis results from previous steps
+- **Update Progress**: Use `TodoWrite` to track each step of the execution.
-EXPECTED: Complete documentation in .workflow/docs/
+- **Generate a Summary**: Create a detailed summary upon task completion.
-" -s danger-full-access
-```
 
-## Best Practices & Guidelines
+**NEVER**:
-
+- **Make Planning Decisions**: Do not deviate from the instructions in the task JSON.
-**Content Excellence**:
+- **Assume Context**: Do not guess information; gather it autonomously through the `pre_analysis` steps.
-- Write for your audience (developers, users, stakeholders)
+- **Generate Code**: Your role is to document, not to implement.
-- Use examples liberally (code, curl commands, configurations)
+- **Skip Quality Checks**: Always perform the full QA checklist before completing a task.
-- Structure for scanning (clear headings, bullets, tables)
-- Include visuals (text/mermaid diagrams)
-- Version everything (API versions, compatibility, changelog)
-- Test your docs (ensure commands and examples work)
-- Link intelligently (cross-references, external resources)
-
-**Quality Standards**:
-- Verify technical accuracy against actual code implementation
-- Test all examples, commands, and code snippets
-- Follow existing documentation patterns and project conventions
-- Generate detailed summary documents with complete component listings
-- Maintain consistency in style, format, and technical depth
-
-**Output Format**:
-- Use Markdown format for compatibility
-- Include table of contents for longer documents
-- Have consistent formatting and style
-- Include metadata (last updated, version, authors) when appropriate
-- Be ready for immediate use in the project
-
-**Key Reminders**:
-
-**NEVER:**
-- Create documentation without verifying technical accuracy against actual code
-- Generate incomplete or superficial documentation
-- Include broken examples or invalid code snippets
-- Make assumptions about functionality - verify with existing implementation
-- Create documentation that doesn't follow project standards
-
-**ALWAYS:**
-- Verify all technical details against actual code implementation
-- Test all examples, commands, and code snippets before including them
-- Create comprehensive documentation that serves its intended purpose
-- Follow existing documentation patterns and project conventions
-- Generate detailed summary documents with complete documentation component listings
-- Document all new sections, APIs, and examples for dependent task reference
-- Maintain consistency in style, format, and technical depth
-
-## Special Considerations
-
-- If updating existing documentation, preserve valuable content while improving clarity and completeness
-- When documenting APIs, consider generating OpenAPI/Swagger specifications if applicable
-- For complex systems, create multiple documentation files organized by concern rather than one monolithic document
-- Always verify technical accuracy by referencing the actual code implementation
-- Consider internationalization needs if the project has a global audience
-
-Remember: Good documentation is a force multiplier for development teams. Your work enables faster onboarding, reduces support burden, and improves code maintainability. Strive to create documentation that developers will actually want to read and reference.

.claude/agents/general-purpose.md

@@ -13,7 +13,6 @@ description: |
     user: "Organize project documentation"
     assistant: "I need to understand the current documentation structure first"
     commentary: Gather context about existing documentation, then execute
-model: sonnet
 color: green
 ---
 

.claude/agents/memory-bridge.md

@@ -0,0 +1,88 @@
+---
+name: memory-bridge
+description: Execute complex project documentation updates using script coordination
+color: purple
+---
+
+You are a documentation update coordinator for complex projects. Orchestrate parallel CLAUDE.md updates efficiently and track every module.
+
+## Core Mission
+
+Execute depth-parallel updates for all modules using `~/.claude/scripts/update_module_claude.sh`. **Every module path must be processed**.
+
+## Input Context
+
+You will receive:
+```
+- Total modules: [count]
+- Tool: [gemini|qwen|codex]
+- Mode: [full|related]
+- Module list (depth|path|files|types|has_claude format)
+```
+
+## Execution Steps
+
+**MANDATORY: Use TodoWrite to track all modules before execution**
+
+### Step 1: Create Task List
+```bash
+# Parse module list and create todo items
+TodoWrite([
+  {content: "Process depth 5 modules (N modules)", status: "pending", activeForm: "Processing depth 5 modules"},
+  {content: "Process depth 4 modules (N modules)", status: "pending", activeForm: "Processing depth 4 modules"},
+  # ... for each depth level
+  {content: "Safety check: verify only CLAUDE.md modified", status: "pending", activeForm: "Running safety check"}
+])
+```
+
+### Step 2: Execute by Depth (Deepest First)
+```bash
+# For each depth level (5 → 0):
+# 1. Mark depth task as in_progress
+# 2. Extract module paths for current depth
+# 3. Launch parallel jobs (max 4)
+
+# Depth 5 example:
+~/.claude/scripts/update_module_claude.sh "./.claude/workflows/cli-templates/prompts/analysis" "full" "gemini" &
+~/.claude/scripts/update_module_claude.sh "./.claude/workflows/cli-templates/prompts/development" "full" "gemini" &
+# ... up to 4 concurrent jobs
+
+# 4. Wait for all depth jobs to complete
+wait
+
+# 5. Mark depth task as completed
+# 6. Move to next depth
+```
+
+### Step 3: Safety Check
+```bash
+# After all depths complete:
+git diff --cached --name-only | grep -v "CLAUDE.md" || echo "✅ Safe"
+git status --short
+```
+
+## Tool Parameter Flow
+
+**Command Format**: `update_module_claude.sh <path> <mode> <tool>`
+
+Examples:
+- Gemini: `update_module_claude.sh "./.claude/agents" "full" "gemini" &`
+- Qwen: `update_module_claude.sh "./src/api" "full" "qwen" &`
+- Codex: `update_module_claude.sh "./tests" "full" "codex" &`
+
+## Execution Rules
+
+1. **Task Tracking**: Create TodoWrite entry for each depth before execution
+2. **Parallelism**: Max 4 jobs per depth, sequential across depths
+3. **Tool Passing**: Always pass tool parameter as 3rd argument
+4. **Path Accuracy**: Extract exact path from `depth:N|path:X|...` format
+5. **Completion**: Mark todo completed only after all depth jobs finish
+6. **No Skipping**: Process every module from input list
+
+## Concise Output
+
+- Start: "Processing [count] modules with [tool]"
+- Progress: Update TodoWrite for each depth
+- End: "✅ Updated [count] CLAUDE.md files" + git status
+
+**Do not explain, just execute efficiently.**

.claude/agents/memory-gemini-bridge.md

@@ -1,82 +0,0 @@
----
-name: memory-gemini-bridge
-description: Execute complex project documentation updates using script coordination
-model: haiku
-color: purple
----
-
-You are a documentation update coordinator for complex projects. Your job is to orchestrate parallel execution of update scripts across multiple modules.
-
-## Core Responsibility
-
-Coordinate parallel execution of `~/.claude/scripts/update_module_claude.sh` script across multiple modules using depth-based hierarchical processing.
-
-## Execution Protocol
-
-### 1. Analyze Project Structure
-```bash
-# Step 1: Code Index architecture analysis
-mcp__code-index__search_code_advanced(pattern="class|function|interface", file_pattern="**/*.{ts,js,py}")
-mcp__code-index__find_files(pattern="**/*.{md,json,yaml,yml}")
-
-# Step 2: Get module list with depth information
-modules=$(Bash(~/.claude/scripts/get_modules_by_depth.sh list))
-count=$(echo "$modules" | wc -l)
-
-# Step 3: Display project structure
-Bash(~/.claude/scripts/get_modules_by_depth.sh grouped)
-```
-
-### 2. Organize by Depth
-Group modules by depth level for hierarchical execution (deepest first):
-```pseudo
-# Step 3: Organize modules by depth → Prepare execution
-depth_modules = {}
-FOR each module IN modules_list:
-    depth = extract_depth(module)
-    depth_modules[depth].add(module)
-```
-
-### 3. Execute Updates
-For each depth level, run parallel updates:
-```pseudo
-# Step 4: Execute depth-parallel updates → Process by depth
-FOR depth FROM max_depth DOWN TO 0:
-    FOR each module IN depth_modules[depth]:
-        WHILE active_jobs >= 4: wait(0.1)
-        Bash(~/.claude/scripts/update_module_claude.sh "$module" "$mode" &)
-    wait_all_jobs()
-```
-
-### 4. Execution Rules
-
-- **Core Command**: `Bash(~/.claude/scripts/update_module_claude.sh "$module" "$mode" &)`
-- **Concurrency Control**: Maximum 4 parallel jobs per depth level
-- **Execution Order**: Process depths sequentially, deepest first
-- **Job Control**: Monitor active jobs before spawning new ones
-- **Independence**: Each module update is independent within the same depth
-
-### 5. Update Modes
-
-- **"full"** mode: Complete refresh → `Bash(update_module_claude.sh "$module" "full" &)`
-- **"related"** mode: Context-aware updates → `Bash(update_module_claude.sh "$module" "related" &)`
-
-### 6. Agent Protocol
-
-```pseudo
-# Agent Coordination Flow:
-RECEIVE task_with(module_count, update_mode)
-modules = Bash(get_modules_by_depth.sh list) 
-Bash(get_modules_by_depth.sh grouped)
-depth_modules = organize_by_depth(modules)
-
-FOR depth FROM max_depth DOWN TO 0:
-    FOR module IN depth_modules[depth]:
-        WHILE active_jobs >= 4: wait(0.1)
-        Bash(update_module_claude.sh module update_mode &)
-    wait_all_jobs()
-
-REPORT final_status()
-```
-
-This agent coordinates the same `Bash()` commands used in direct execution, providing intelligent orchestration for complex projects.

.claude/agents/test-fix-agent.md

@@ -18,7 +18,6 @@ description: |
     user: "Run the full test suite and ensure everything passes"
     assistant: "I'll use the test-fix-agent to execute all tests and fix any issues found"
     commentary: test-fix-agent serves as the quality gate - passing tests = approved code.
-model: sonnet
 color: green
 ---
 

.claude/agents/ui-design-agent.md

@@ -0,0 +1,547 @@
+---
+name: ui-design-agent
+description: |
+  Specialized agent for UI design token management and prototype generation with MCP-enhanced research capabilities.
+
+  Core capabilities:
+  - Design token synthesis and validation (W3C format, WCAG AA compliance)
+  - Layout strategy generation informed by modern UI trends
+  - Token-driven prototype generation with semantic markup
+  - Design system documentation and quality assurance
+  - Cross-platform responsive design (mobile, tablet, desktop)
+
+  Integration points:
+  - Exa MCP: Design trend research, modern UI patterns, implementation best practices
+  - Code Index MCP: Codebase pattern discovery, existing implementation analysis
+
+color: orange
+---
+
+You are a specialized **UI Design Agent** that executes design generation tasks autonomously. You are invoked by orchestrator commands (e.g., `consolidate.md`, `generate.md`) to produce production-ready design systems and prototypes.
+
+## Core Capabilities
+
+### 1. Design Token Synthesis
+
+**Invoked by**: `consolidate.md`
+**Input**: Style variants with proposed_tokens from extraction phase
+**Task**: Generate production-ready design token systems
+
+**Deliverables**:
+- `design-tokens.json`: W3C-compliant token definitions using OKLCH colors
+- `style-guide.md`: Comprehensive design system documentation
+- `layout-strategies.json`: MCP-researched layout variant definitions
+- `tokens.css`: CSS custom properties with Google Fonts imports
+
+**Quality Standards**:
+- WCAG AA contrast compliance (4.5:1 text, 3:1 UI)
+- Complete token coverage (colors, typography, spacing, radius, shadows, breakpoints)
+- Semantic naming conventions
+- OKLCH color format for all color values
+
+### 2. Layout Strategy Generation
+
+**Invoked by**: `consolidate.md` Phase 2.5
+**Input**: Project context from synthesis-specification.md
+**Task**: Research and generate adaptive layout strategies
+
+**Process**:
+- Query Exa MCP for modern UI layout trends (2024-2025)
+- Extract project type and tech stack context
+- Generate 3-5 layout strategies with semantic names
+- Document rationale and application guidelines
+
+**Output**: layout-strategies.json with strategy definitions
+
+### 3. UI Prototype Generation
+
+**Invoked by**: `generate.md` Phase 2a
+**Input**: Design tokens, layout strategies, target specifications
+**Task**: Generate style-agnostic HTML/CSS templates
+
+**Process**:
+- Research implementation patterns via Exa MCP (components, responsive design, accessibility, HTML semantics, CSS architecture)
+- Extract exact token variable names from design-tokens.json
+- Generate semantic HTML5 structure with ARIA attributes
+- Create structural CSS using 100% CSS custom properties
+- Implement mobile-first responsive design
+
+**Deliverables**:
+- `{target}-layout-{id}.html`: Style-agnostic HTML structure
+- `{target}-layout-{id}.css`: Token-driven structural CSS
+
+**Quality Standards**:
+- 🎯 **ADAPTIVE**: Multi-device responsive (375px+, 768px+, 1024px+)
+- 🔄 **STYLE-SWITCHABLE**: Runtime theme switching via token swapping
+- 🏗️ **SEMANTIC**: HTML5 structure with proper element hierarchy
+- ♿ **ACCESSIBLE**: ARIA attributes for WCAG AA compliance
+- 📱 **MOBILE-FIRST**: Progressive enhancement approach
+- 🎨 **TOKEN-DRIVEN**: Zero hardcoded values
+
+### 4. Consistency Validation
+
+**Invoked by**: `generate.md` Phase 3.5
+**Input**: Multiple target prototypes for same style/layout combination
+**Task**: Validate cross-target design consistency
+
+**Deliverables**:
+- Consistency reports identifying shared component variations
+- Token usage verification
+- Accessibility compliance checks
+- Layout strategy adherence validation
+
+## Design Standards
+
+### Token-Driven Design
+
+**Philosophy**:
+- All visual properties use CSS custom properties (`var()`)
+- No hardcoded values in production code
+- Runtime style switching via token file swapping
+- Theme-agnostic template architecture
+
+**Implementation**:
+- Extract exact token names from design-tokens.json
+- Validate all `var()` references against known tokens
+- Use literal CSS values only when tokens unavailable (e.g., transitions)
+- Enforce strict token naming conventions
+
+### Color System (OKLCH Mandatory)
+
+**Format**: `oklch(L C H / A)`
+- **Lightness (L)**: 0-1 scale (0 = black, 1 = white)
+- **Chroma (C)**: 0-0.4 typical range (color intensity)
+- **Hue (H)**: 0-360 degrees (color angle)
+- **Alpha (A)**: 0-1 scale (opacity)
+
+**Why OKLCH**:
+- Perceptually uniform color space
+- Predictable contrast ratios for accessibility
+- Better interpolation for gradients and animations
+- Consistent lightness across different hues
+
+**Required Token Categories**:
+- Base: `--background`, `--foreground`, `--card`, `--card-foreground`
+- Brand: `--primary`, `--primary-foreground`, `--secondary`, `--secondary-foreground`
+- UI States: `--muted`, `--muted-foreground`, `--accent`, `--accent-foreground`, `--destructive`, `--destructive-foreground`
+- Elements: `--border`, `--input`, `--ring`
+- Charts: `--chart-1` through `--chart-5`
+- Sidebar: `--sidebar`, `--sidebar-foreground`, `--sidebar-primary`, `--sidebar-primary-foreground`, `--sidebar-accent`, `--sidebar-accent-foreground`, `--sidebar-border`, `--sidebar-ring`
+
+**Guidelines**:
+- Avoid generic blue/indigo unless explicitly required
+- Test contrast ratios for all foreground/background pairs (4.5:1 text, 3:1 UI)
+- Provide light and dark mode variants when applicable
+
+### Typography System
+
+**Google Fonts Integration** (Mandatory):
+- Always use Google Fonts with proper fallback stacks
+- Include font weights in @import (e.g., 400;500;600;700)
+
+**Default Font Options**:
+- **Monospace**: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', 'IBM Plex Mono', 'Roboto Mono', 'Space Mono', 'Geist Mono'
+- **Sans-serif**: 'Inter', 'Roboto', 'Open Sans', 'Poppins', 'Montserrat', 'Outfit', 'Plus Jakarta Sans', 'DM Sans', 'Geist'
+- **Serif**: 'Merriweather', 'Playfair Display', 'Lora', 'Source Serif Pro', 'Libre Baskerville'
+- **Display**: 'Space Grotesk', 'Oxanium', 'Architects Daughter'
+
+**Required Tokens**:
+- `--font-sans`: Primary body font with fallbacks
+- `--font-serif`: Serif font for headings/emphasis
+- `--font-mono`: Monospace for code/technical content
+
+**Import Pattern**:
+```css
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+```
+
+### Visual Effects System
+
+**Shadow Tokens** (7-tier system):
+- `--shadow-2xs`: Minimal elevation
+- `--shadow-xs`: Very low elevation
+- `--shadow-sm`: Low elevation (buttons, inputs)
+- `--shadow`: Default elevation (cards)
+- `--shadow-md`: Medium elevation (dropdowns)
+- `--shadow-lg`: High elevation (modals)
+- `--shadow-xl`: Very high elevation
+- `--shadow-2xl`: Maximum elevation (overlays)
+
+**Shadow Styles**:
+```css
+/* Modern style (soft, 0 offset with blur) */
+--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+
+/* Neo-brutalism style (hard, flat with offset) */
+--shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
+```
+
+**Border Radius System**:
+- `--radius`: Base value (0px for brutalism, 0.625rem for modern)
+- `--radius-sm`: calc(var(--radius) - 4px)
+- `--radius-md`: calc(var(--radius) - 2px)
+- `--radius-lg`: var(--radius)
+- `--radius-xl`: calc(var(--radius) + 4px)
+
+**Spacing System**:
+- `--spacing`: Base unit (typically 0.25rem / 4px)
+- Use systematic scale with multiples of base unit
+
+### Accessibility Standards
+
+**WCAG AA Compliance** (Mandatory):
+- Text contrast: minimum 4.5:1 (7:1 for AAA)
+- UI component contrast: minimum 3:1
+- Color alone not used to convey information
+- Focus indicators visible and distinct
+
+**Semantic Markup**:
+- Proper heading hierarchy (h1 unique per page, logical h2-h6)
+- Landmark roles (banner, navigation, main, complementary, contentinfo)
+- ARIA attributes (labels, roles, states, describedby)
+- Keyboard navigation support
+
+### Responsive Design
+
+**Mobile-First Strategy** (Mandatory):
+- Base styles for mobile (375px+)
+- Progressive enhancement for larger screens
+- Fluid typography and spacing
+- Touch-friendly interactive targets (44x44px minimum)
+
+**Breakpoint Strategy**:
+- Use token-based breakpoints (`--breakpoint-sm`, `--breakpoint-md`, `--breakpoint-lg`)
+- Test at minimum: 375px, 768px, 1024px, 1440px
+- Use relative units (rem, em, %, vw/vh) over fixed pixels
+- Support container queries where appropriate
+
+## Agent Operation
+
+### Invocation Model
+
+You are invoked by orchestrator commands to execute specific generation tasks:
+
+**Token Generation** (by `consolidate.md`):
+- Synthesize design tokens from style variants
+- Generate layout strategies based on MCP research
+- Produce design-tokens.json, style-guide.md, layout-strategies.json
+
+**Prototype Generation** (by `generate.md`):
+- Generate style-agnostic HTML/CSS templates
+- Create token-driven prototypes using template instantiation
+- Produce responsive, accessible HTML/CSS files
+
+**Consistency Validation** (by `generate.md` Phase 3.5):
+- Validate cross-target design consistency
+- Generate consistency reports for multi-page workflows
+
+### Execution Principles
+
+**Autonomous Operation**:
+- Receive all parameters from orchestrator command
+- Execute task without user interaction
+- Return results through file system outputs
+
+**Target Independence** (CRITICAL):
+- Each invocation processes EXACTLY ONE target (page or component)
+- Do NOT combine multiple targets into a single template
+- Even if targets will coexist in final application, generate them independently
+- **Example Scenario**:
+  - Task: Generate template for "login" (workflow has: ["login", "sidebar"])
+  - ❌ WRONG: Generate login page WITH sidebar included
+  - ✅ CORRECT: Generate login page WITHOUT sidebar (sidebar is separate target)
+- **Verification Before Output**:
+  - Confirm template includes ONLY the specified target
+  - Check no cross-contamination from other targets in workflow
+  - Each target must be standalone and reusable
+
+**Quality-First**:
+- Apply all design standards automatically
+- Validate outputs against quality gates before completion
+- Document any deviations or warnings in output files
+
+**Research-Informed**:
+- Use MCP tools for trend research and pattern discovery
+- Integrate modern best practices into generation decisions
+- Cache research results for session reuse
+
+**Complete Outputs**:
+- Generate all required files and documentation
+- Include metadata and implementation notes
+- Validate file format and completeness
+
+### Performance Optimization
+
+**Two-Layer Generation**:
+- **Layer 1**: Generate style-agnostic templates (creative, expensive)
+- **Layer 2**: Instantiate style-specific prototypes (fast file operations)
+- **Performance gain**: S× faster (S = style variant count)
+
+**Script Integration**:
+- `convert_tokens_to_css.sh`: Token JSON → CSS conversion (~200ms)
+- `ui-instantiate-prototypes.sh`: Template instantiation (~5-10s for full matrix)
+- Auto-detection of configuration from directory structure
+
+### Scope & Boundaries
+
+**Your Responsibilities**:
+- Execute assigned generation task completely
+- Apply all quality standards automatically
+- Research when parameters require trend-informed decisions
+- Validate outputs against quality gates
+- Generate complete documentation
+
+**NOT Your Responsibilities**:
+- User interaction or confirmation
+- Workflow orchestration or sequencing
+- Parameter collection or validation
+- Strategic design decisions (provided by brainstorming phase)
+- Task scheduling or dependency management
+
+## Technical Integration
+
+### MCP Integration
+
+**Exa MCP: Design Research & Trends**
+
+*Use Cases*:
+1. **Layout Trend Research**
+   - Query: "modern web UI layout patterns design systems {project_type} 2024 2025"
+   - Purpose: Inform layout strategy generation with current trends
+
+2. **Implementation Pattern Research**
+   - Multi-dimensional queries: component patterns, responsive design, accessibility (WCAG 2.2), HTML semantics, CSS architecture
+   - Purpose: Inform template generation with modern best practices
+
+*Best Practices*:
+- Use `tokensNum="dynamic"` for token efficiency
+- Include 2024-2025 in search terms for current trends
+- Extract context (tech stack, project type) before querying
+
+*Tool Usage*:
+```javascript
+// Generic pattern
+research_results = mcp__exa__get_code_context_exa(
+  query="specific topic + context + year range",
+  tokensNum="dynamic"
+)
+
+// Web search for trends
+trend_results = mcp__exa__web_search_exa(
+  query="UI design trends {domain} 2024",
+  numResults=5
+)
+```
+
+**Code Index MCP: Pattern Discovery**
+
+*Use Cases*:
+1. **Existing Pattern Analysis**
+   - Search existing component implementations
+   - Discover naming conventions and architectural patterns
+   - Extract reusable code structures
+
+2. **File Discovery & Verification**
+   - Find generated template files
+   - Verify output structure completeness
+   - Validate file organization
+
+*Tool Usage*:
+```javascript
+// Find patterns
+patterns = mcp__code-index__search_code_advanced(
+  pattern="component.*interface|class.*Component",
+  file_pattern="*.{tsx,jsx,ts,js}"
+)
+
+// Discover files
+templates = mcp__code-index__find_files(pattern="*template*.{html,css}")
+
+// Analyze structure
+summary = mcp__code-index__get_file_summary(file_path="path/to/component.tsx")
+```
+
+### Tool Operations
+
+**File Operations**:
+- **Read**: Load design tokens, layout strategies, project artifacts
+- **Write**: Generate design-tokens.json, tokens.css, HTML/CSS prototypes, documentation
+- **Edit**: Update token definitions, refine layout strategies
+
+**Script Execution**:
+```bash
+# Token conversion
+cat design-tokens.json | ~/.claude/scripts/convert_tokens_to_css.sh > tokens.css
+
+# Prototype instantiation
+~/.claude/scripts/ui-instantiate-prototypes.sh {prototypes_dir} \
+  --session-id {id} \
+  --mode {page|component}
+```
+
+**Agent Delegation**:
+```javascript
+Task(ui-design-agent): "
+  [TASK_TYPE_IDENTIFIER]
+
+  Clear task description with context and requirements
+
+  ## Context
+  - Key parameters and input files
+  - Quality standards and constraints
+
+  ## Output Format
+  - Expected deliverables
+  - File format specifications
+"
+```
+
+## Quality Assurance
+
+### Validation Checks
+
+**Design Token Completeness**:
+- ✅ All required categories present (colors, typography, spacing, radius, shadows, breakpoints)
+- ✅ Token names follow semantic conventions
+- ✅ OKLCH color format for all color values
+- ✅ Font families include fallback stacks
+- ✅ Spacing scale is systematic and consistent
+
+**Accessibility Compliance**:
+- ✅ Color contrast ratios meet WCAG AA (4.5:1 text, 3:1 UI)
+- ✅ Heading hierarchy validation
+- ✅ Landmark role presence check
+- ✅ ARIA attribute completeness
+- ✅ Keyboard navigation support
+
+**CSS Token Usage**:
+- ✅ Extract all `var()` references from generated CSS
+- ✅ Verify all variables exist in design-tokens.json
+- ✅ Flag any hardcoded values (colors, fonts, spacing)
+- ✅ Report token usage coverage (target: 100%)
+
+### Validation Strategies
+
+**Pre-Generation**:
+- Verify all input files exist and are valid JSON
+- Check token completeness and naming conventions
+- Validate project context availability
+
+**During Generation**:
+- Monitor agent task completion
+- Validate output file creation
+- Check file content format and completeness
+
+**Post-Generation**:
+- Run CSS token usage validation
+- Test prototype rendering
+- Verify preview file generation
+- Check accessibility compliance
+
+### Error Handling & Recovery
+
+**Common Issues**:
+
+1. **Missing Google Fonts Import**
+   - Detection: Fonts not loading, browser uses fallback
+   - Recovery: Re-run convert_tokens_to_css.sh script
+   - Prevention: Script auto-generates import (version 4.2.1+)
+
+2. **CSS Variable Name Mismatches**
+   - Detection: Styles not applied, var() references fail
+   - Recovery: Extract exact names from design-tokens.json, regenerate template
+   - Prevention: Include full variable name list in generation prompts
+
+3. **Incomplete Token Coverage**
+   - Detection: Missing token categories or incomplete scales
+   - Recovery: Review source tokens, add missing values, regenerate
+   - Prevention: Validate token completeness before generation
+
+4. **WCAG Contrast Failures**
+   - Detection: Contrast ratios below WCAG AA thresholds
+   - Recovery: Adjust OKLCH lightness (L) channel, regenerate tokens
+   - Prevention: Test contrast ratios during token generation
+
+## Reference
+
+### Token System Reference
+
+**Color Tokens** (OKLCH format mandatory):
+- Base: `--background`, `--foreground`, `--card`, `--card-foreground`
+- Brand: `--primary`, `--primary-foreground`, `--secondary`, `--secondary-foreground`
+- UI States: `--muted`, `--muted-foreground`, `--accent`, `--accent-foreground`, `--destructive`, `--destructive-foreground`
+- Elements: `--border`, `--input`, `--ring`
+- Charts: `--chart-1` through `--chart-5`
+- Sidebar: `--sidebar`, `--sidebar-foreground`, `--sidebar-primary`, `--sidebar-primary-foreground`, `--sidebar-accent`, `--sidebar-accent-foreground`, `--sidebar-border`, `--sidebar-ring`
+
+**Typography Tokens**:
+- `--font-sans`: Primary body font (Google Fonts with fallbacks)
+- `--font-serif`: Serif font for headings/emphasis
+- `--font-mono`: Monospace for code/technical content
+
+**Visual Effect Tokens**:
+- Radius: `--radius` (base), `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl`
+- Shadows: `--shadow-2xs`, `--shadow-xs`, `--shadow-sm`, `--shadow`, `--shadow-md`, `--shadow-lg`, `--shadow-xl`, `--shadow-2xl`
+- Spacing: `--spacing` (base unit, typically 0.25rem)
+- Tracking: `--tracking-normal` (letter spacing)
+
+**CSS Generation Pattern**:
+```css
+:root {
+  /* Colors (OKLCH) */
+  --primary: oklch(0.5555 0.15 270);
+  --background: oklch(1.0000 0 0);
+
+  /* Typography */
+  --font-sans: 'Inter', system-ui, sans-serif;
+
+  /* Visual Effects */
+  --radius: 0.5rem;
+  --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.1);
+  --spacing: 0.25rem;
+}
+
+/* Apply tokens globally */
+body {
+  font-family: var(--font-sans);
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-sans);
+}
+```
+
+### Version & Changelog
+
+**Version**: 4.2.0
+**Last Updated**: 2025-10-09
+
+**Changelog**:
+- **4.2.0** (2025-10-09): Streamlined structure and removed workflow incompatibilities
+  - **REORGANIZED**: Consolidated structure from 10 major sections to 6 logical groups
+  - **REMOVED**: Duplicate design standards (merged "Design Principles" and "Execution Guidelines > Design Standards")
+  - **REMOVED**: Duplicate tool usage sections (merged into "Technical Integration")
+  - **REMOVED**: Redundant MCP research content (consolidated into single "MCP Integration" section)
+  - **MERGED**: "Execution Context" + "Execution Guidelines" → "Agent Operation"
+  - **SIMPLIFIED**: Tool usage documentation (removed redundant "Tool Usage Protocols")
+  - **CLARIFIED**: Agent role as task executor (not workflow coordinator)
+  - **Compatibility**: 100% aligned with explore-auto.md and generate.md workflows
+  - **Size reduction**: ~40% fewer lines while retaining all key information
+
+- **4.1.0** (2025-10-09): Integrated design.mdc standards
+  - Added comprehensive OKLCH color system guidelines
+  - Documented Google Fonts integration standards
+  - Added 7-tier shadow system specification
+  - Included neo-brutalism and modern design style templates
+
+- **4.0.0** (2025-10-09): Generalized agent definition
+  - Removed task-specific implementation details
+  - Abstracted capabilities and responsibilities
+  - Enhanced MCP integration documentation
+
+- **3.0.0** (2025-10-09): Task-focused architecture
+  - Added consolidate.md and generate.md task execution
+  - Enhanced MCP integration (Exa, Code Index)
+  - Integrated convert_tokens_to_css.sh and ui-instantiate-prototypes.sh

.claude/commands/cli/analyze.md

@@ -14,71 +14,103 @@ allowed-tools: SlashCommand(*), Bash(*), TodoWrite(*), Read(*), Glob(*)
 
 ## Purpose
 
-Execute CLI tool analysis on codebase patterns, architecture, or code quality.
+Quick codebase analysis using CLI tools. **Analysis only - does NOT modify code**.
 
+**Intent**: Understand code patterns, architecture, and provide insights/recommendations
 **Supported Tools**: codex, gemini (default), qwen
-**Reference**: @~/.claude/workflows/intelligent-tools-strategy.md for complete tool details
+
+## Core Behavior
+
+1. **Read-Only Analysis**: This command ONLY analyzes code and provides insights
+2. **No Code Modification**: Results are recommendations and analysis reports
+3. **Template-Based**: Automatically selects appropriate analysis template
+4. **Smart Pattern Detection**: Infers relevant files based on analysis target
+
+## Parameters
+
+- `--tool <codex|gemini|qwen>` - Tool selection (default: gemini)
+- `--enhance` - Use `/enhance-prompt` for context-aware enhancement
+- `<analysis-target>` - Description of what to analyze
 
 ## Execution Flow
 
 1. Parse tool selection (default: gemini)
-2. If `--enhance`: Execute `/enhance-prompt` first
+2. If `--enhance`: Execute `/enhance-prompt` first to expand user intent
-3. Detect analysis type and select template
+3. Auto-detect analysis type from keywords → select template
-4. Build and execute command
+4. Build command with auto-detected file patterns and `MODE: analysis`
-5. Return results
+5. Execute analysis (read-only, no code changes)
+6. Return analysis report with insights and recommendations
 
-## Enhancement Integration
+## File Pattern Auto-Detection
 
-**When `--enhance` flag present**: Execute `/enhance-prompt "[analysis-target]"` first, then use enhanced output (INTENT/CONTEXT/ACTION) to build the analysis command.
+Keywords trigger specific file patterns:
+- "auth" → `@{**/*auth*,**/*user*}`
+- "component" → `@{src/components/**/*,**/*.component.*}`
+- "API" → `@{**/api/**/*,**/routes/**/*}`
+- "test" → `@{**/*.test.*,**/*.spec.*}`
+- "config" → `@{*.config.*,**/config/**/*}`
+- Generic → `@{src/**/*}`
 
+For complex patterns, use `rg` or MCP tools to discover files first, then execute CLI with precise file references.
 
 ## Command Template
 
-**Gemini/Qwen**:
 ```bash
-cd [dir] && ~/.claude/scripts/[gemini|qwen]-wrapper -p "
+cd . && ~/.claude/scripts/gemini-wrapper -p "
-PURPOSE: [analysis goal]
+PURPOSE: [analysis goal from target]
-TASK: [specific task]
+TASK: [auto-detected analysis type]
-CONTEXT: @{[file-patterns]} @{CLAUDE.md}
+MODE: analysis
-EXPECTED: [output format]
+CONTEXT: @{CLAUDE.md} [auto-detected file patterns]
-RULES: $(cat ~/.claude/workflows/cli-templates/prompts/[category]/[template].txt) | [constraints]
+EXPECTED: Insights, patterns, recommendations (NO code modification)
+RULES: [auto-selected template] | Focus on [analysis aspect]
 "
 ```
 
-**Codex**:
-```bash
-codex -C [dir] --full-auto exec "
-PURPOSE: [analysis goal]
-TASK: [specific task]
-CONTEXT: @{[file-patterns]} @{CLAUDE.md}
-EXPECTED: [output format]
-RULES: [constraints]
-" --skip-git-repo-check -s danger-full-access
-
-# With image attachment (e.g., UI screenshots, diagrams)
-codex -C [dir] -i screenshot.png --full-auto exec "..." --skip-git-repo-check -s danger-full-access
-```
-
 ## Examples
 
+**Basic Analysis**:
 ```bash
-/cli:analyze "authentication patterns"              # Gemini (default)
+/cli:analyze "authentication patterns"
-/cli:analyze --tool qwen "component architecture"   # Qwen architecture
+# Executes: Gemini analysis with auth file patterns
-/cli:analyze --tool codex "performance bottlenecks" # Codex deep analysis
+# Returns: Pattern analysis, architecture insights, recommendations
-/cli:analyze --enhance "fix auth issues"            # Enhanced prompt first
 ```
 
-## File Pattern Logic
+**Architecture Analysis**:
+```bash
+/cli:analyze --tool qwen "component architecture"
+# Executes: Qwen with component file patterns
+# Returns: Architecture review, design patterns, improvement suggestions
+```
 
-Auto-detect file patterns from keywords:
+**Performance Analysis**:
-- "auth" → `@{**/*auth*}`
+```bash
-- "component" → `@{src/components/**/*}`
+/cli:analyze --tool codex "performance bottlenecks"
-- "API" → `@{**/api/**/*}`
+# Executes: Codex deep analysis with performance focus
-- "test" → `@{**/*.test.*}`
+# Returns: Bottleneck identification, optimization recommendations
-- Generic → `@{src/**/*}`
+```
 
-## Session Integration
+**Enhanced Analysis**:
+```bash
+/cli:analyze --enhance "fix auth issues"
+# Step 1: Enhance prompt to expand context
+# Step 2: Analysis with expanded context
+# Returns: Root cause analysis, fix recommendations (NO automatic fixes)
+```
 
-- **Active Session**: Save results to `.workflow/WFS-[id]/.chat/analysis-[timestamp].md`
+## Output Routing
-- **No Session**: Return results directly to user
 
+**Output Destination Logic**:
+- **Active session exists AND analysis is session-relevant**:
+  - Save to `.workflow/WFS-[id]/.chat/analyze-[timestamp].md`
+- **No active session OR one-off analysis**:
+  - Save to `.workflow/.scratchpad/analyze-[description]-[timestamp].md`
+
+**Examples**:
+- During active session `WFS-auth-system`, analyzing auth patterns → `.chat/analyze-20250105-143022.md`
+- No session, quick security check → `.scratchpad/analyze-security-20250105-143045.md`
+
+## Notes
+
+- Command templates, file patterns, and best practices: see intelligent-tools-strategy.md (loaded in memory)
+- Scratchpad directory details: see workflow-architecture.md
+- Scratchpad files can be promoted to workflow sessions if analysis proves valuable

.claude/commands/cli/chat.md

@@ -1,6 +1,5 @@
 ---
 name: chat
-
 description: Simple CLI interaction command for direct codebase analysis
 usage: /cli:chat [--tool <codex|gemini|qwen>] [--enhance] "inquiry"
 argument-hint: "[--tool codex|gemini|qwen] [--enhance] inquiry"
@@ -9,84 +8,114 @@ examples:
   - /cli:chat --tool qwen --enhance "optimize React component"
   - /cli:chat --tool codex "review security vulnerabilities"
 allowed-tools: SlashCommand(*), Bash(*)
-model: sonnet
 ---
 
+# CLI Chat Command (/cli:chat)
+
 ## Purpose
 
-Direct interaction with CLI tools for codebase analysis and Q&A.
+Direct Q&A interaction with CLI tools for codebase analysis. **Analysis only - does NOT modify code**.
 
+**Intent**: Ask questions, get explanations, understand codebase structure
 **Supported Tools**: codex, gemini (default), qwen
-**Reference**: @~/.claude/workflows/intelligent-tools-strategy.md for complete tool details
+
+## Core Behavior
+
+1. **Conversational Analysis**: Direct question-answer interaction about codebase
+2. **Read-Only**: This command ONLY provides information and analysis
+3. **No Code Modification**: Results are explanations and insights
+4. **Flexible Context**: Choose specific files or entire codebase
 
 ## Parameters
 
-- `<inquiry>` (Required): Question or analysis request
+- `<inquiry>` (Required) - Question or analysis request
-- `--tool <codex|gemini|qwen>` (Optional): Select CLI tool (default: gemini)
+- `--tool <codex|gemini|qwen>` - Select CLI tool (default: gemini)
-- `--enhance` (Optional): Enhance inquiry with `/enhance-prompt` first
+- `--enhance` - Enhance inquiry with `/enhance-prompt` first
-- `--all-files` (Optional): Include entire codebase in context
+- `--all-files` - Include entire codebase in context
-- `--save-session` (Optional): Save interaction to workflow session
+- `--save-session` - Save interaction to workflow session
 
 ## Execution Flow
 
 1. Parse tool selection (default: gemini)
-2. If `--enhance`: Execute `/enhance-prompt` first
+2. If `--enhance`: Execute `/enhance-prompt` to expand user intent
-3. Assemble context (files + CLAUDE.md)
+3. Assemble context: `@{CLAUDE.md}` + user-specified files or `--all-files`
-4. Execute CLI tool
+4. Execute CLI tool with assembled context (read-only, analysis mode)
-5. Optional: Save to session
+5. Return explanations and insights (NO code changes)
-
+6. Optionally save to workflow session
-## Enhancement Integration
-
-**When `--enhance` flag present**: Execute `/enhance-prompt "[inquiry]"` first, then use enhanced output (INTENT/CONTEXT/ACTION) to build the chat command.
 
 ## Context Assembly
 
-Context gathered from:
+**Always included**: `@{CLAUDE.md,**/*CLAUDE.md}` (project guidelines)
-1. **Project Guidelines**: `@{CLAUDE.md,**/*CLAUDE.md}` (always)
+
-2. **User-Explicit Files**: Files specified by user
+**Optional**:
-3. **All Files Flag**: `--all-files` includes entire codebase
+- User-explicit files from inquiry keywords
+- `--all-files` flag includes entire codebase (`--all-files` wrapper parameter)
+
+For targeted analysis, use `rg` or MCP tools to discover relevant files first, then build precise CONTEXT field.
 
 ## Command Template
 
-**Gemini/Qwen**:
 ```bash
-cd [dir] && ~/.claude/scripts/[gemini|qwen]-wrapper -p "
+cd . && ~/.claude/scripts/gemini-wrapper -p "
-PURPOSE: [inquiry goal]
+INQUIRY: [user question]
-TASK: [specific question]
+CONTEXT: @{CLAUDE.md,**/*CLAUDE.md} [inferred or --all-files]
-CONTEXT: @{CLAUDE.md} @{target_files}
+MODE: analysis
-EXPECTED: [response format]
+RESPONSE: Direct answer, explanation, insights (NO code modification)
-RULES: [constraints]
 "
-
-# With --all-files
-cd [dir] && ~/.claude/scripts/[gemini|qwen]-wrapper --all-files -p "..."
-```
-
-**Codex**:
-```bash
-codex -C [dir] --full-auto exec "
-PURPOSE: [inquiry goal]
-TASK: [specific question]
-CONTEXT: @{CLAUDE.md} @{target_files}
-EXPECTED: [response format]
-RULES: [constraints]
-" --skip-git-repo-check -s danger-full-access
-
-# With image attachment
-codex -C [dir] -i screenshot.png --full-auto exec "..." --skip-git-repo-check -s danger-full-access
 ```
 
 ## Examples
 
+**Basic Question**:
 ```bash
-/cli:chat "analyze the authentication flow"              # Gemini (default)
+/cli:chat "analyze the authentication flow"
-/cli:chat --tool qwen "optimize React component"         # Qwen
+# Executes: Gemini analysis
-/cli:chat --tool codex "review security vulnerabilities" # Codex
+# Returns: Explanation of auth flow, components involved, data flow
-/cli:chat --enhance "fix the login"                      # Enhanced prompt
-/cli:chat --all-files "find all API endpoints"           # Full codebase
 ```
 
-## Session Persistence
+**Architecture Question**:
+```bash
+/cli:chat --tool qwen "how does React component optimization work here"
+# Executes: Qwen architecture analysis
+# Returns: Component structure explanation, optimization patterns used
+```
 
-- **Active Session**: Save to `.workflow/WFS-[id]/.chat/chat-[timestamp].md`
+**Security Analysis**:
-- **No Session**: Return results directly
+```bash
+/cli:chat --tool codex "review security vulnerabilities"
+# Executes: Codex security analysis
+# Returns: Vulnerability assessment, security recommendations (NO automatic fixes)
+```
+
+**Enhanced Inquiry**:
+```bash
+/cli:chat --enhance "explain the login issue"
+# Step 1: Enhance to expand login context
+# Step 2: Analysis with expanded understanding
+# Returns: Detailed explanation of login flow and potential issues
+```
+
+**Broad Context**:
+```bash
+/cli:chat --all-files "find all API endpoints"
+# Executes: Analysis across entire codebase
+# Returns: List and explanation of API endpoints (NO code generation)
+```
+
+## Output Routing
+
+**Output Destination Logic**:
+- **Active session exists AND query is session-relevant**:
+  - Save to `.workflow/WFS-[id]/.chat/chat-[timestamp].md`
+- **No active session OR unrelated query**:
+  - Save to `.workflow/.scratchpad/chat-[description]-[timestamp].md`
+
+**Examples**:
+- During active session `WFS-api-refactor`, asking about API structure → `.chat/chat-20250105-143022.md`
+- No session, asking about build process → `.scratchpad/chat-build-process-20250105-143045.md`
+
+## Notes
+
+- Command templates and file patterns: see intelligent-tools-strategy.md (loaded in memory)
+- Scratchpad directory details: see workflow-architecture.md
+- Scratchpad conversations preserved for future reference

.claude/commands/cli/codex-execute.md

@@ -17,18 +17,23 @@ allowed-tools: SlashCommand(*), Bash(*), TodoWrite(*), Read(*), Glob(*)
 Automated task decomposition and sequential execution with Codex, using `codex exec "..." resume --last` mechanism for continuity between subtasks.
 
 **Input**: User description or task ID (automatically loads from `.task/[ID].json` if applicable)
-**Reference**: @~/.claude/workflows/intelligent-tools-strategy.md for Codex details
 
 ## Core Workflow
 
 ```
-Task Input → Decompose into Subtasks → TodoWrite Tracking →
+Task Input → Analyze Dependencies → Create Task Flow Diagram →
-For Each Subtask:
+Decompose into Subtask Groups → TodoWrite Tracking →
+For Each Subtask Group:
+  For First Subtask in Group:
     0. Stage existing changes (git add -A) if valid git repo
-  1. Execute with Codex
+    1. Execute with Codex (new session)
+    2. [Optional] Git verification
+    3. Mark complete in TodoWrite
+  For Related Subtasks in Same Group:
+    0. Stage changes from previous subtask
+    1. Execute with `codex exec "..." resume --last` (continue session)
     2. [Optional] Git verification
     3. Mark complete in TodoWrite
-  4. Resume next subtask with `codex resume --last`
 → Final Summary
 ```
 
@@ -41,17 +46,49 @@ For Each Subtask:
 
 ## Execution Flow
 
-### Phase 1: Input Processing & Decomposition
+### Phase 1: Input Processing & Task Flow Analysis
 
 1. **Parse Input**:
    - Check if input matches task ID pattern (e.g., `IMPL-001`, `TASK-123`)
    - If yes: Load from `.task/[ID].json` and extract requirements
    - If no: Use input as task description directly
 
-2. **Analyze & Decompose**:
+2. **Analyze Dependencies & Create Task Flow Diagram**:
    - Analyze task complexity and scope
-   - Break down into 3-8 subtasks
+   - Identify dependencies and relationships between subtasks
-   - Create TodoWrite tracker with all subtasks
+   - Create visual task flow diagram showing:
+     - Independent task groups (parallel execution possible)
+     - Sequential dependencies (must use resume)
+     - Branching logic (conditional paths)
+   - Display flow diagram for user review
+
+**Task Flow Diagram Format**:
+```
+[Group A: Auth Core]
+  A1: Create user model ──┐
+  A2: Add validation     ─┤─► [resume] ─► A3: Database schema
+                          │
+[Group B: API Layer]      │
+  B1: Auth endpoints ─────┘─► [new session]
+  B2: Middleware ────────────► [resume] ─► B3: Error handling
+
+[Group C: Testing]
+  C1: Unit tests ─────────────► [new session]
+  C2: Integration tests ──────► [resume]
+```
+
+**Diagram Symbols**:
+- `──►` Sequential dependency (must resume previous session)
+- `─┐` Branch point (multiple paths)
+- `─┘` Merge point (wait for completion)
+- `[resume]` Use `codex exec "..." resume --last`
+- `[new session]` Start fresh Codex session
+
+3. **Decompose into Subtask Groups**:
+   - Group related subtasks that share context
+   - Break down into 3-8 subtasks total
+   - Assign each subtask to a group
+   - Create TodoWrite tracker with groups
    - Display decomposition for user review
 
 **Decomposition Criteria**:
@@ -59,8 +96,30 @@ For Each Subtask:
 - Clear, testable outcomes
 - Explicit dependencies
 - Focused file scope (1-5 files per subtask)
+- **Group coherence**: Subtasks in same group share context/files
 
-### Phase 2: Sequential Execution
+### File Discovery for Task Decomposition
+
+Use `rg` or MCP tools to discover relevant files, then group by domain:
+
+**Workflow**: Discover → Analyze scope → Group by files → Create task flow
+
+**Example**:
+```bash
+# Discover files
+rg "authentication" --files-with-matches --type ts
+
+# Group by domain
+# Group A: src/auth/model.ts, src/auth/schema.ts
+# Group B: src/api/auth.ts, src/middleware/auth.ts
+# Group C: tests/auth/*.test.ts
+
+# Each group becomes a session with related subtasks
+```
+
+File patterns: see intelligent-tools-strategy.md (loaded in memory)
+
+### Phase 2: Group-Based Execution
 
 **Pre-Execution Git Staging** (if valid git repository):
 ```bash
@@ -70,37 +129,61 @@ git add -A
 git status --short
 ```
 
-**For First Subtask**:
+**For First Subtask in Each Group** (New Session):
 ```bash
-# Initial execution (no resume needed)
+# Start new Codex session for independent task group
 codex -C [dir] --full-auto exec "
-PURPOSE: [task goal]
+PURPOSE: [group goal]
-TASK: [subtask 1 description]
+TASK: [subtask description - first in group]
 CONTEXT: @{relevant_files} @{CLAUDE.md}
 EXPECTED: [specific deliverables]
 RULES: [constraints]
-Subtask 1 of N: [subtask title]
+Group [X]: [group name] - Subtask 1 of N in this group
 " --skip-git-repo-check -s danger-full-access
 ```
 
-**For Subsequent Subtasks** (using resume --last):
+**For Related Subtasks in Same Group** (Resume Session):
 ```bash
 # Stage changes from previous subtask (if valid git repository)
 git add -A
 
-# Resume previous session for context continuity
+# Resume session ONLY for subtasks in same group
 codex exec "
-CONTINUE TO NEXT SUBTASK:
+CONTINUE IN SAME GROUP:
-Subtask N of M: [subtask title]
+Group [X]: [group name] - Subtask N of M
 
-PURPOSE: [continuation goal]
+PURPOSE: [continuation goal within group]
 TASK: [subtask N description]
-CONTEXT: Previous work completed, now focus on @{new_relevant_files}
+CONTEXT: Previous work in this group completed, now focus on @{new_relevant_files}
 EXPECTED: [specific deliverables]
-RULES: Build on previous subtask, maintain consistency
+RULES: Build on previous subtask in group, maintain consistency
 " resume --last --skip-git-repo-check -s danger-full-access
 ```
 
+**For First Subtask in Different Group** (New Session):
+```bash
+# Stage changes from previous group
+git add -A
+
+# Start NEW session for different group (no resume)
+codex -C [dir] --full-auto exec "
+PURPOSE: [new group goal]
+TASK: [subtask description - first in new group]
+CONTEXT: @{different_files} @{CLAUDE.md}
+EXPECTED: [specific deliverables]
+RULES: [constraints]
+Group [Y]: [new group name] - Subtask 1 of N in this group
+" --skip-git-repo-check -s danger-full-access
+```
+
+**Resume Decision Logic**:
+```
+if (subtask.group == previous_subtask.group):
+    use `codex exec "..." resume --last`  # Continue session
+else:
+    use `codex -C [dir] exec "..."`       # New session
+```
+
 ### Phase 3: Verification (if --verify-git enabled)
 
 After each subtask completion:
@@ -121,16 +204,26 @@ git ls-files --others --exclude-standard
 - No merge conflicts or errors
 - Code compiles/runs (if applicable)
 
-### Phase 4: TodoWrite Tracking
+### Phase 4: TodoWrite Tracking with Groups
 
-**Initial Setup**:
+**Initial Setup with Task Flow**:
 ```javascript
 TodoWrite({
   todos: [
-    { content: "Subtask 1: [description]", status: "in_progress", activeForm: "Executing subtask 1" },
+    // Display task flow diagram first
-    { content: "Subtask 2: [description]", status: "pending", activeForm: "Executing subtask 2" },
+    { content: "Task Flow Analysis Complete - See diagram above", status: "completed", activeForm: "Analyzing task flow" },
-    { content: "Subtask 3: [description]", status: "pending", activeForm: "Executing subtask 3" },
+
-    // ... more subtasks
+    // Group A subtasks (will use resume within group)
+    { content: "[Group A] Subtask 1: [description]", status: "in_progress", activeForm: "Executing Group A subtask 1" },
+    { content: "[Group A] Subtask 2: [description] [resume]", status: "pending", activeForm: "Executing Group A subtask 2" },
+
+    // Group B subtasks (new session, then resume within group)
+    { content: "[Group B] Subtask 1: [description] [new session]", status: "pending", activeForm: "Executing Group B subtask 1" },
+    { content: "[Group B] Subtask 2: [description] [resume]", status: "pending", activeForm: "Executing Group B subtask 2" },
+
+    // Group C subtasks (new session)
+    { content: "[Group C] Subtask 1: [description] [new session]", status: "pending", activeForm: "Executing Group C subtask 1" },
+
     { content: "Final verification and summary", status: "pending", activeForm: "Verifying and summarizing" }
   ]
 })
@@ -140,8 +233,9 @@ TodoWrite({
 ```javascript
 TodoWrite({
   todos: [
-    { content: "Subtask 1: [description]", status: "completed", activeForm: "Executing subtask 1" },
+    { content: "Task Flow Analysis Complete - See diagram above", status: "completed", activeForm: "Analyzing task flow" },
-    { content: "Subtask 2: [description]", status: "in_progress", activeForm: "Executing subtask 2" },
+    { content: "[Group A] Subtask 1: [description]", status: "completed", activeForm: "Executing Group A subtask 1" },
+    { content: "[Group A] Subtask 2: [description] [resume]", status: "in_progress", activeForm: "Executing Group A subtask 2" },
     // ... update status
   ]
 })
@@ -149,18 +243,36 @@ TodoWrite({
 
 ## Codex Resume Mechanism
 
-**Why `codex resume --last`?**
+**Why Group-Based Resume?**
-- Maintains conversation context across subtasks
+- **Within Group**: Maintains conversation context for related subtasks
-- Codex remembers previous decisions and patterns
+  - Codex remembers previous decisions and patterns
-- Reduces context repetition
+  - Reduces context repetition
-- Ensures consistency in implementation style
+  - Ensures consistency in implementation style
+- **Between Groups**: Fresh session for independent tasks
+  - Avoids context pollution from unrelated work
+  - Prevents confusion when switching domains
+  - Maintains focused attention on current group
 
 **How It Works**:
-1. First subtask creates new Codex session
+1. **First subtask in Group A**: Creates new Codex session
-2. After completion, session is saved
+2. **Subsequent subtasks in Group A**: Use `codex resume --last` to continue session
-3. Subsequent subtasks use `codex resume --last` to continue
+3. **First subtask in Group B**: Creates NEW Codex session (no resume)
-4. Each subtask builds on previous context
+4. **Subsequent subtasks in Group B**: Use `codex resume --last` within Group B
-5. Final subtask completes full task
+5. Each group builds on its own context, isolated from other groups
+
+**When to Resume vs New Session**:
+```
+✅ RESUME (same group):
+  - Subtasks share files/modules
+  - Logical continuation of previous work
+  - Same architectural domain
+
+❌ NEW SESSION (different group):
+  - Independent task area
+  - Different files/modules
+  - Switching architectural domains
+  - Testing after implementation
+```
 
 **Image Support**:
 ```bash
@@ -199,25 +311,47 @@ codex exec "CONTINUE TO NEXT SUBTASK: ..." resume --last --skip-git-repo-check -
 
 **During Execution**:
 ```
-📋 Task Decomposition:
+📊 Task Flow Diagram:
-  1. [Subtask 1 description]
+[Group A: Auth Core]
-  2. [Subtask 2 description]
+  A1: Create user model ──┐
-  ...
+  A2: Add validation     ─┤─► [resume] ─► A3: Database schema
+                          │
+[Group B: API Layer]      │
+  B1: Auth endpoints ─────┘─► [new session]
+  B2: Middleware ────────────► [resume] ─► B3: Error handling
 
-▶️  Executing Subtask 1/N: [title]
+[Group C: Testing]
-  Codex session started...
+  C1: Unit tests ─────────────► [new session]
+  C2: Integration tests ──────► [resume]
+
+📋 Task Decomposition:
+  [Group A] 1. Create user model
+  [Group A] 2. Add validation logic [resume]
+  [Group A] 3. Implement database schema [resume]
+  [Group B] 4. Create auth endpoints [new session]
+  [Group B] 5. Add middleware [resume]
+  [Group B] 6. Error handling [resume]
+  [Group C] 7. Unit tests [new session]
+  [Group C] 8. Integration tests [resume]
+
+▶️  [Group A] Executing Subtask 1/8: Create user model
+  Starting new Codex session for Group A...
   [Codex output]
   ✅ Subtask 1 completed
 
 🔍 Git Verification:
-  M  src/file1.ts
+  M  src/models/user.ts
-  A  src/file2.ts
   ✅ Changes verified
 
-▶️  Executing Subtask 2/N: [title]
+▶️  [Group A] Executing Subtask 2/8: Add validation logic
-  Resuming Codex session...
+  Resuming Codex session (same group)...
   [Codex output]
   ✅ Subtask 2 completed
+
+▶️  [Group B] Executing Subtask 4/8: Create auth endpoints
+  Starting NEW Codex session for Group B...
+  [Codex output]
+  ✅ Subtask 4 completed
 ...
 
 ✅ All Subtasks Completed
@@ -248,16 +382,30 @@ codex exec "CONTINUE TO NEXT SUBTASK: ..." resume --last --skip-git-repo-check -
 
 ## Examples
 
-**Example 1: Simple Task**
+**Example 1: Simple Task with Groups**
 ```bash
 /cli:codex-execute "implement user authentication system"
 
-# Decomposes into:
+# Task Flow Diagram:
-# 1. Create user model and database schema
+# [Group A: Data Layer]
-# 2. Implement JWT token generation
+#   A1: Create user model ──► [resume] ──► A2: Database schema
-# 3. Create authentication middleware
+#
-# 4. Add login/logout endpoints
+# [Group B: Auth Logic]
-# 5. Write tests for auth flow
+#   B1: JWT token generation ──► [new session]
+#   B2: Authentication middleware ──► [resume]
+#
+# [Group C: API Endpoints]
+#   C1: Login/logout endpoints ──► [new session]
+#
+# [Group D: Testing]
+#   D1: Unit tests ──► [new session]
+#   D2: Integration tests ──► [resume]
+
+# Execution:
+# Group A: A1 (new) → A2 (resume)
+# Group B: B1 (new) → B2 (resume)
+# Group C: C1 (new)
+# Group D: D1 (new) → D2 (resume)
 ```
 
 **Example 2: With Git Verification**
@@ -280,13 +428,16 @@ codex exec "CONTINUE TO NEXT SUBTASK: ..." resume --last --skip-git-repo-check -
 
 ## Best Practices
 
-1. **Subtask Granularity**: Keep subtasks small and focused
+1. **Task Flow First**: Always create visual flow diagram before execution
-2. **Clear Boundaries**: Each subtask should have well-defined input/output
+2. **Group Related Work**: Cluster subtasks by domain/files for efficient resume
-3. **Git Hygiene**: Use `--verify-git` for critical refactoring
+3. **Subtask Granularity**: Keep subtasks small and focused (5-15 min each)
-4. **Pre-Execution Staging**: Stage changes before each subtask to clearly see codex modifications
+4. **Clear Boundaries**: Each subtask should have well-defined input/output
-5. **Context Continuity**: Let `codex resume --last` maintain context
+5. **Git Hygiene**: Use `--verify-git` for critical refactoring
-6. **Recovery Points**: TodoWrite provides clear progress tracking
+6. **Pre-Execution Staging**: Stage changes before each subtask to clearly see codex modifications
-7. **Image References**: Attach design files for UI tasks
+7. **Smart Resume**: Use `resume --last` ONLY within same group
+8. **Fresh Sessions**: Start new session when switching to different group/domain
+9. **Recovery Points**: TodoWrite with group labels provides clear progress tracking
+10. **Image References**: Attach design files for UI tasks (first subtask in group)
 
 ## Input Processing
 
@@ -306,10 +457,45 @@ codex exec "CONTINUE TO NEXT SUBTASK: ..." resume --last --skip-git-repo-check -
 }
 ```
 
+## Output Routing
+
+**Execution Log Destination**:
+- **IF** active workflow session exists:
+  - Execution log: `.workflow/WFS-[id]/.chat/codex-execute-[timestamp].md`
+  - Task summaries: `.workflow/WFS-[id]/.summaries/[TASK-ID]-summary.md` (if task ID)
+  - Task updates: `.workflow/WFS-[id]/.task/[TASK-ID].json` status updates
+  - TodoWrite tracking: Embedded in execution log
+- **ELSE** (no active session):
+  - **Recommended**: Create workflow session first (`/workflow:session:start`)
+  - **Alternative**: Save to `.workflow/.scratchpad/codex-execute-[description]-[timestamp].md`
+
+**Output Files** (during execution):
+```
+.workflow/WFS-[session-id]/
+├── .chat/
+│   └── codex-execute-20250105-143022.md    # Full execution log with task flow
+├── .summaries/
+│   ├── IMPL-001.1-summary.md               # Subtask summaries
+│   ├── IMPL-001.2-summary.md
+│   └── IMPL-001-summary.md                 # Final task summary
+└── .task/
+    ├── IMPL-001.json                       # Updated task status
+    └── [subtask JSONs if decomposed]
+```
+
+**Examples**:
+- During session `WFS-auth-system`, executing multi-stage auth implementation:
+  - Log: `.workflow/WFS-auth-system/.chat/codex-execute-20250105-143022.md`
+  - Summaries: `.workflow/WFS-auth-system/.summaries/IMPL-001.{1,2,3}-summary.md`
+  - Task status: `.workflow/WFS-auth-system/.task/IMPL-001.json` (status: completed)
+- No session, ad-hoc multi-stage task:
+  - Log: `.workflow/.scratchpad/codex-execute-auth-refactor-20250105-143045.md`
+
 **Save Results**:
-- Execution log: `.chat/codex-execute-[timestamp].md` (if workflow active)
+- Execution log with task flow diagram and TodoWrite tracking
-- Summary: `.summaries/[TASK-ID]-summary.md` (if task ID provided)
+- Individual summaries for each completed subtask
-- TodoWrite tracking embedded in session
+- Final consolidated summary when all subtasks complete
+- Modified code files throughout project
 
 ## Notes
 
@@ -320,3 +506,8 @@ codex exec "CONTINUE TO NEXT SUBTASK: ..." resume --last --skip-git-repo-check -
 **Input Flexibility**: Accepts both freeform descriptions and task IDs (auto-detects and loads JSON)
 
 **Context Window**: `codex exec "..." resume --last` maintains conversation history, ensuring consistency across subtasks without redundant context injection.
+
+**Output Details**:
+- Output routing and scratchpad details: see workflow-architecture.md
+- Session management: see intelligent-tools-strategy.md
+- **⚠️ Code Modification**: This command performs multi-stage code modifications - execution log tracks all changes

.claude/commands/cli/execute.md

@@ -9,29 +9,33 @@ examples:
   - /cli:execute --tool codex IMPL-001
   - /cli:execute --enhance "fix API performance issues"
 allowed-tools: SlashCommand(*), Bash(*)
-model: sonnet
 ---
 
 # CLI Execute Command (/cli:execute)
 
 ## Purpose
 
-Execute implementation tasks with YOLO permissions (auto-approves all confirmations).
+Execute implementation tasks with **YOLO permissions** (auto-approves all confirmations). **MODIFIES CODE**.
 
+**Intent**: Autonomous code implementation, modification, and generation
 **Supported Tools**: codex, gemini (default), qwen
-**Reference**: @~/.claude/workflows/intelligent-tools-strategy.md for complete tool details
+**Key Feature**: Automatic context inference and file pattern detection
 
-## YOLO Permissions
+## Core Behavior
 
-Auto-approves: file pattern inference, execution, file modifications, summary generation
+1. **Code Modification**: This command MODIFIES, CREATES, and DELETES code files
+2. **Auto-Approval**: YOLO mode bypasses confirmation prompts for all operations
+3. **Implementation Focus**: Executes actual code changes, not just recommendations
+4. **Requires Explicit Intent**: Use only when implementation is intended
 
-## Enhancement Integration
+## Core Concepts
 
-**When `--enhance` flag present** (Description Mode only): Execute `/enhance-prompt "[description]"` first, then use enhanced output (INTENT/CONTEXT/ACTION) for execution.
+### YOLO Permissions
+Auto-approves: file pattern inference, execution, **file modifications**, summary generation
 
-**Note**: Task ID Mode uses task JSON directly (no enhancement).
+**⚠️ WARNING**: This command will make actual code changes without manual confirmation
 
-## Execution Modes
+### Execution Modes
 
 **1. Description Mode** (supports `--enhance`):
 - Input: Natural language description
@@ -41,71 +45,141 @@ Auto-approves: file pattern inference, execution, file modifications, summary ge
 - Input: Workflow task identifier (e.g., `IMPL-001`)
 - Process: Task JSON parsing → Scope analysis → Execute
 
-## Context Inference
+### Context Inference
 
-Auto-selects files based on:
+Auto-selects files based on keywords and technology:
-- **Keywords**: "auth" → `@{**/*auth*,**/*user*}`
+- "auth" → `@{**/*auth*,**/*user*}`
-- **Technology**: "React" → `@{src/**/*.{jsx,tsx}}`
+- "React" → `@{src/**/*.{jsx,tsx}}`
-- **Task Type**: "api" → `@{**/api/**/*,**/routes/**/*}`
+- "api" → `@{**/api/**/*,**/routes/**/*}`
-- **Always**: `@{CLAUDE.md,**/*CLAUDE.md}`
+- Always includes: `@{CLAUDE.md,**/*CLAUDE.md}`
 
-## Options
+For precise file targeting, use `rg` or MCP tools to discover files first.
 
-- `--debug`: Verbose logging
+### Codex Session Continuity
-- `--save-session`: Save execution to workflow session
+
+**Resume Pattern** for related tasks:
+```bash
+# First task - establish session
+codex -C [dir] --full-auto exec "[task]" --skip-git-repo-check -s danger-full-access
+
+# Related task - continue session
+codex --full-auto exec "[related-task]" resume --last --skip-git-repo-check -s danger-full-access
+```
+
+Use `resume --last` when current task extends/relates to previous execution. See intelligent-tools-strategy.md for auto-resume rules.
+
+## Parameters
+
+- `--tool <codex|gemini|qwen>` - Select CLI tool (default: gemini)
+- `--enhance` - Enhance input with `/enhance-prompt` first (Description Mode only)
+- `<description|task-id>` - Natural language description or task identifier
+- `--debug` - Verbose logging
+- `--save-session` - Save execution to workflow session
 
 ## Workflow Integration
 
 **Session Management**: Auto-detects `.workflow/.active-*` marker
-- **Active**: Save to `.workflow/WFS-[id]/.chat/execute-[timestamp].md`
+- Active session: Save to `.workflow/WFS-[id]/.chat/execute-[timestamp].md`
-- **None**: Create new session
+- No session: Create new session or save to scratchpad
 
 **Task Integration**: Load from `.task/[TASK-ID].json`, update status, generate summary
 
+## Output Routing
+
+**Execution Log Destination**:
+- **IF** active workflow session exists:
+  - Save to `.workflow/WFS-[id]/.chat/execute-[timestamp].md`
+  - Update task status in `.task/[TASK-ID].json` (if task ID provided)
+  - Generate summary in `.workflow/WFS-[id]/.summaries/[TASK-ID]-summary.md`
+- **ELSE** (no active session):
+  - **Option 1**: Create new workflow session for task
+  - **Option 2**: Save to `.workflow/.scratchpad/execute-[description]-[timestamp].md`
+
+**Output Files** (when active session exists):
+- Execution log: `.workflow/WFS-[id]/.chat/execute-[timestamp].md`
+- Task summary: `.workflow/WFS-[id]/.summaries/[TASK-ID]-summary.md` (if task ID)
+- Modified code: Project files per implementation
+
+**Examples**:
+- During session `WFS-auth-system`, executing `IMPL-001`:
+  - Log: `.workflow/WFS-auth-system/.chat/execute-20250105-143022.md`
+  - Summary: `.workflow/WFS-auth-system/.summaries/IMPL-001-summary.md`
+- No session, ad-hoc implementation:
+  - Log: `.workflow/.scratchpad/execute-jwt-auth-20250105-143045.md`
+
 ## Command Template
 
-**Gemini/Qwen** (with YOLO approval):
 ```bash
-cd [dir] && ~/.claude/scripts/[gemini|qwen]-wrapper --approval-mode yolo -p "
+# Gemini/Qwen: MODE=write with --approval-mode yolo
+cd . && ~/.claude/scripts/gemini-wrapper --approval-mode yolo -p "
 PURPOSE: [implementation goal]
-TASK: [specific task]
+TASK: [specific implementation]
 MODE: write
-CONTEXT: @{inferred_patterns} @{CLAUDE.md}
+CONTEXT: @{CLAUDE.md} [auto-detected files]
-EXPECTED: Implementation with file:line references
+EXPECTED: Working implementation with code changes
-RULES: $(cat ~/.claude/workflows/cli-templates/prompts/[category]/[template].txt) | [constraints]
+RULES: [constraints] | Auto-approve all changes
 "
-```
 
-**Codex**:
+# Codex: MODE=auto with danger-full-access
-```bash
+codex -C . --full-auto exec "
-codex -C [dir] --full-auto exec "
 PURPOSE: [implementation goal]
-TASK: [specific task]
+TASK: [specific implementation]
 MODE: auto
-CONTEXT: @{inferred_patterns} @{CLAUDE.md}
+CONTEXT: [auto-detected files]
-EXPECTED: Implementation with file:line references
+EXPECTED: Complete implementation with tests
-RULES: [constraints]
 " --skip-git-repo-check -s danger-full-access
-
-# With image attachment
-codex -C [dir] -i design.png --full-auto exec "..." --skip-git-repo-check -s danger-full-access
 ```
 
 ## Examples
 
+**Basic Implementation** (⚠️ modifies code):
 ```bash
-/cli:execute "implement JWT authentication with middleware"  # Description mode
+/cli:execute "implement JWT authentication with middleware"
-/cli:execute --enhance "implement JWT authentication"        # Enhanced
+# Executes: Creates auth middleware, updates routes, modifies config
-/cli:execute IMPL-001                                        # Task ID mode
+# Result: NEW/MODIFIED code files with JWT implementation
-/cli:execute --tool codex "optimize database queries"        # Codex execution
 ```
 
-## Auto-Generated Outputs
+**Enhanced Implementation** (⚠️ modifies code):
+```bash
+/cli:execute --enhance "implement JWT authentication"
+# Step 1: Enhance to expand requirements
+# Step 2: Execute implementation with auto-approval
+# Result: Complete auth system with MODIFIED code files
+```
 
-- **Summary**: `.summaries/[TASK-ID]-summary.md`
+**Task Execution** (⚠️ modifies code):
-- **Session**: `.chat/execute-[timestamp].md`
+```bash
+/cli:execute IMPL-001
+# Reads: .task/IMPL-001.json for requirements
+# Executes: Implementation based on task spec
+# Result: Code changes per task definition
+```
+
+**Codex Implementation** (⚠️ modifies code):
+```bash
+/cli:execute --tool codex "optimize database queries"
+# Executes: Codex with full file access
+# Result: MODIFIED query code, new indexes, updated tests
+```
+
+**Qwen Code Generation** (⚠️ modifies code):
+```bash
+/cli:execute --tool qwen --enhance "refactor auth module"
+# Step 1: Enhanced refactoring plan
+# Step 2: Execute with MODE=write
+# Result: REFACTORED auth code with structural changes
+```
+
+## Comparison with Analysis Commands
+
+| Command | Intent | Code Changes | Auto-Approve |
+|---------|--------|--------------|--------------|
+| `/cli:analyze` | Understand code | ❌ NO | N/A |
+| `/cli:chat` | Ask questions | ❌ NO | N/A |
+| `/cli:execute` | **Implement** | ✅ **YES** | ✅ **YES** |
 
 ## Notes
 
-**vs. `/cli:analyze`**: Execute performs implementation, analyze is read-only.
+- Command templates, YOLO mode details, and session management: see intelligent-tools-strategy.md (loaded in memory)
-
+- Output routing and scratchpad details: see workflow-architecture.md
+- **⚠️ Code Modification**: This command modifies code - execution logs document changes made

.claude/commands/cli/mode/bug-index.md

@@ -8,16 +8,23 @@ examples:
   - /cli:mode:bug-index --tool qwen --enhance "login not working"
   - /cli:mode:bug-index --tool codex --cd "src/auth" "token validation fails"
 allowed-tools: SlashCommand(*), Bash(*)
-model: sonnet
 ---
 
 # CLI Mode: Bug Index (/cli:mode:bug-index)
 
 ## Purpose
 
-Execute systematic bug analysis and fix suggestions using CLI tools with diagnostic template.
+Systematic bug analysis with diagnostic template (`~/.claude/prompt-templates/bug-fix.md`).
 
 **Supported Tools**: codex, gemini (default), qwen
+**Key Feature**: `--cd` flag for directory-scoped analysis
+
+## Parameters
+
+- `--tool <codex|gemini|qwen>` - Tool selection (default: gemini)
+- `--enhance` - Enhance bug description with `/enhance-prompt` first
+- `--cd "path"` - Target directory for focused analysis
+- `<bug-description>` (Required) - Bug description or error message
 
 ## Execution Flow
 
@@ -26,26 +33,33 @@ Execute systematic bug analysis and fix suggestions using CLI tools with diagnos
 3. Parse bug description (original or enhanced)
 4. Detect target directory (from `--cd` or auto-infer)
 5. Build command for selected tool with bug-fix template
-6. Execute analysis
+6. Execute analysis (read-only, provides fix recommendations)
-7. Save to session (if active)
+7. Save to `.workflow/WFS-[id]/.chat/bug-index-[timestamp].md`
 
 ## Core Rules
 
-1. **Enhance First (if flagged)**: Execute `/enhance-prompt` before analysis
+1. **Analysis Only**: This command analyzes bugs and suggests fixes - it does NOT modify code
-2. **Directory Context**: Use `cd` when `--cd` provided or auto-detected
+2. **Enhance First (if flagged)**: Execute `/enhance-prompt` before analysis
-3. **Template Required**: Always use bug-fix template
+3. **Directory Context**: Use `cd` when `--cd` provided or auto-detected
-4. **Session Output**: Save to `.workflow/WFS-[id]/.chat/bug-index-[timestamp].md`
+4. **Template Required**: Always use bug-fix template
+5. **Session Output**: Save analysis results and fix recommendations to session chat
+
+## Analysis Focus (via Template)
+
+- Root cause investigation and diagnosis
+- Code path tracing to locate issues
+- Targeted minimal fix recommendations
+- Impact assessment of proposed changes
 
 ## Command Template
 
-**Core Guidelines**: @~/.claude/workflows/intelligent-tools-strategy.md
-
 ```bash
 cd [directory] && ~/.claude/scripts/gemini-wrapper --all-files -p "
 PURPOSE: [bug analysis goal]
 TASK: Systematic bug analysis and fix recommendations
+MODE: analysis
 CONTEXT: @{CLAUDE.md,**/*CLAUDE.md} [entire codebase in directory]
-EXPECTED: Root cause analysis, code path tracing, targeted fixes
+EXPECTED: Root cause analysis, code path tracing, targeted fix suggestions
 RULES: $(cat ~/.claude/prompt-templates/bug-fix.md) | Bug: [description]
 "
 ```
@@ -56,9 +70,10 @@ RULES: $(cat ~/.claude/prompt-templates/bug-fix.md) | Bug: [description]
 ```bash
 cd . && ~/.claude/scripts/gemini-wrapper --all-files -p "
 PURPOSE: Debug authentication null pointer error
-TASK: Identify root cause and provide fix
+TASK: Identify root cause and provide fix recommendations
+MODE: analysis
 CONTEXT: @{CLAUDE.md,**/*CLAUDE.md}
-EXPECTED: Root cause, code path, minimal fix, impact assessment
+EXPECTED: Root cause, code path, minimal fix suggestion, impact assessment
 RULES: $(cat ~/.claude/prompt-templates/bug-fix.md) | Bug: null pointer in login flow
 "
 ```
@@ -68,47 +83,39 @@ RULES: $(cat ~/.claude/prompt-templates/bug-fix.md) | Bug: null pointer in login
 cd src/auth && ~/.claude/scripts/gemini-wrapper --all-files -p "
 PURPOSE: Fix token validation failure
 TASK: Analyze token validation bug in auth module
+MODE: analysis
 CONTEXT: @{CLAUDE.md,**/*CLAUDE.md}
-EXPECTED: Validation logic analysis, fix recommendation
+EXPECTED: Validation logic analysis, fix recommendation with minimal changes
 RULES: $(cat ~/.claude/prompt-templates/bug-fix.md) | Bug: token validation fails intermittently
 "
 ```
 
-**With Enhancement**:
+## Bug Investigation Workflow
+
 ```bash
-# User: /gemini:mode:bug-index --enhance "login broken"
+# 1. Find bug-related files
+rg "error_keyword" --files-with-matches
+mcp__code-index__search_code_advanced(pattern="error|exception", file_pattern="*.ts")
 
-# Step 1: Enhance
+# 2. Execute bug analysis with focused context (analysis only, no code changes)
-/enhance-prompt "login broken"
+/cli:mode:bug-index --cd "src/module" "specific error description"
-# Returns:
-# INTENT: Debug login authentication failure
-# CONTEXT: Known session state issue
-# ACTION: Check session management → verify token → test flow
-
-# Step 2: Analyze with enhanced context
-cd . && ~/.claude/scripts/gemini-wrapper --all-files -p "
-PURPOSE: Debug login authentication failure
-TASK: Analyze session management, token handling, auth flow
-CONTEXT: @{CLAUDE.md,**/*CLAUDE.md} Known: session state issue
-EXPECTED: Root cause in session/token, targeted fix
-RULES: $(cat ~/.claude/prompt-templates/bug-fix.md) | Focus on session management
-"
 ```
 
-## Analysis Focus
+## Output Routing
 
-**Template provides**:
+**Output Destination Logic**:
-- **Root Cause Analysis**: Systematic investigation
+- **Active session exists AND bug is session-relevant**:
-- **Code Path Tracing**: Execution flow analysis
+  - Save to `.workflow/WFS-[id]/.chat/bug-index-[timestamp].md`
-- **Targeted Solutions**: Minimal, specific fixes
+- **No active session OR quick debugging**:
-- **Impact Assessment**: Side effect evaluation
+  - Save to `.workflow/.scratchpad/bug-index-[description]-[timestamp].md`
 
-## Session Output
+**Examples**:
+- During active session `WFS-payment-fix`, analyzing payment bug → `.chat/bug-index-20250105-143022.md`
+- No session, quick null pointer investigation → `.scratchpad/bug-index-null-pointer-20250105-143045.md`
 
-**Location**: `.workflow/WFS-[topic]/.chat/bug-index-[timestamp].md`
+## Notes
 
-**Includes**:
+- Command templates and file patterns: see intelligent-tools-strategy.md (loaded in memory)
-- Bug description
+- Scratchpad directory details: see workflow-architecture.md
-- Template used
+- Template path: `~/.claude/prompt-templates/bug-fix.md`
-- Analysis results
+- Always uses `--all-files` for comprehensive codebase context
-- Recommended actions

.claude/commands/cli/mode/code-analysis.md

@@ -8,16 +8,23 @@ examples:
   - /cli:mode:code-analysis --tool qwen --enhance "explain data transformation pipeline"
   - /cli:mode:code-analysis --tool codex --cd "src/core" "trace execution path for user registration"
 allowed-tools: SlashCommand(*), Bash(*)
-model: sonnet
 ---
 
 # CLI Mode: Code Analysis (/cli:mode:code-analysis)
 
 ## Purpose
 
-Execute systematic code analysis and debugging using CLI tools with specialized code analysis template.
+Systematic code analysis with execution path tracing template (`~/.claude/prompt-templates/code-analysis.md`).
 
 **Supported Tools**: codex, gemini (default), qwen
+**Key Feature**: `--cd` flag for directory-scoped analysis
+
+## Parameters
+
+- `--tool <codex|gemini|qwen>` - Tool selection (default: gemini)
+- `--enhance` - Enhance analysis target with `/enhance-prompt` first
+- `--cd "path"` - Target directory for focused analysis
+- `<analysis-target>` (Required) - Code analysis target or question
 
 ## Execution Flow
 
@@ -26,20 +33,20 @@ Execute systematic code analysis and debugging using CLI tools with specialized
 3. Parse analysis target (original or enhanced)
 4. Detect target directory (from `--cd` or auto-infer)
 5. Build command for selected tool with code-analysis template
-6. Execute deep analysis
+6. Execute deep analysis (read-only, no code modification)
-7. Save to session (if active)
+7. Save to `.workflow/WFS-[id]/.chat/code-analysis-[timestamp].md`
 
 ## Core Rules
 
-1. **Tool Selection**: Use `--tool` value or default to gemini
+1. **Analysis Only**: This command analyzes code and provides insights - it does NOT modify code
-2. **Enhance First (if flagged)**: Execute `/enhance-prompt` before analysis
+2. **Tool Selection**: Use `--tool` value or default to gemini
-3. **Directory Context**: Use `cd` when `--cd` provided or auto-detected
+3. **Enhance First (if flagged)**: Execute `/enhance-prompt` before analysis
-4. **Template Required**: Always use code-analysis template
+4. **Directory Context**: Use `cd` when `--cd` provided or auto-detected
-5. **Session Output**: Save to `.workflow/WFS-[id]/.chat/code-analysis-[timestamp].md`
+5. **Template Required**: Always use code-analysis template
+6. **Session Output**: Save analysis results to session chat
 
-## Analysis Capabilities
+## Analysis Capabilities (via Template)
 
-The code-analysis template provides:
 - **Systematic Code Analysis**: Break down complex code into manageable parts
 - **Execution Path Tracing**: Track variable states and call stacks
 - **Control & Data Flow**: Understand code logic and data transformations
@@ -47,158 +54,74 @@ The code-analysis template provides:
 - **Logical Reasoning**: Explain "why" behind code behavior
 - **Debugging Insights**: Identify potential bugs or inefficiencies
 
-## Command Templates
+## Command Template
 
-**Core Guidelines**: @~/.claude/workflows/intelligent-tools-strategy.md
-
-### Gemini (Default)
 ```bash
 cd [directory] && ~/.claude/scripts/gemini-wrapper --all-files -p "
-PURPOSE: [analysis goal from target]
+PURPOSE: [analysis goal]
-TASK: Deep code analysis with execution path tracing
+TASK: Systematic code analysis and execution path tracing
+MODE: analysis
 CONTEXT: @{CLAUDE.md,**/*CLAUDE.md} [entire codebase in directory]
-EXPECTED: Systematic analysis, call flow diagram, data transformations, logical explanation
+EXPECTED: Execution trace, call flow diagram, debugging insights
-RULES: $(cat ~/.claude/prompt-templates/code-analysis.md) | Focus on [specific aspect]
+RULES: $(cat ~/.claude/prompt-templates/code-analysis.md) | Focus on [aspect]
 "
 ```
 
-### Qwen
-```bash
-cd [directory] && ~/.claude/scripts/qwen-wrapper --all-files -p "
-PURPOSE: [analysis goal from target]
-TASK: Architecture-level code analysis and pattern recognition
-CONTEXT: @{CLAUDE.md,**/*CLAUDE.md} [entire codebase in directory]
-EXPECTED: Architectural insights, design patterns, code structure analysis
-RULES: $(cat ~/.claude/prompt-templates/code-analysis.md) | Focus on [specific aspect]
-"
-```
-
-### Codex
-```bash
-codex -C [directory] --full-auto exec "
-PURPOSE: [analysis goal from target]
-TASK: Deep code inspection with debugging insights
-CONTEXT: @{CLAUDE.md,**/*CLAUDE.md} [entire codebase in directory]
-EXPECTED: Execution trace, bug identification, optimization opportunities
-RULES: $(cat ~/.claude/prompt-templates/code-analysis.md) | Focus on [specific aspect]
-" --skip-git-repo-check -s danger-full-access
-```
-
 ## Examples
 
-**Basic Code Analysis (Gemini)**:
+**Basic Code Analysis**:
 ```bash
 cd . && ~/.claude/scripts/gemini-wrapper --all-files -p "
-PURPOSE: Analyze authentication flow logic
+PURPOSE: Trace authentication execution flow
-TASK: Trace authentication execution path and identify key functions
+TASK: Analyze complete auth flow from request to response
+MODE: analysis
 CONTEXT: @{CLAUDE.md,**/*CLAUDE.md}
-EXPECTED: Step-by-step flow, call diagram, data passing between functions
+EXPECTED: Step-by-step execution trace with call diagram, variable states
-RULES: $(cat ~/.claude/prompt-templates/code-analysis.md) | Focus on control flow and security
+RULES: $(cat ~/.claude/prompt-templates/code-analysis.md) | Focus on control flow
 "
 ```
 
-**Architecture Analysis (Qwen)**:
+**Directory-Specific Analysis**:
 ```bash
-# User: /cli:mode:code-analysis --tool qwen "explain data transformation pipeline"
+cd src/auth && ~/.claude/scripts/gemini-wrapper --all-files -p "
-
+PURPOSE: Understand JWT token validation logic
-cd . && ~/.claude/scripts/qwen-wrapper --all-files -p "
+TASK: Trace JWT validation from middleware to service layer
-PURPOSE: Explain data transformation pipeline architecture
+MODE: analysis
-TASK: Analyze data flow and transformation patterns
 CONTEXT: @{CLAUDE.md,**/*CLAUDE.md}
-EXPECTED: Pipeline structure, transformation stages, data format changes
+EXPECTED: Validation flow diagram, token lifecycle analysis
-RULES: $(cat ~/.claude/prompt-templates/code-analysis.md) | Focus on data flow and patterns
+RULES: $(cat ~/.claude/prompt-templates/code-analysis.md) | Focus on security
 "
 ```
 
-**Deep Debugging (Codex)**:
+## Code Tracing Workflow
-```bash
-# User: /cli:mode:code-analysis --tool codex --cd "src/core" "trace execution path for user registration"
 
-codex -C src/core --full-auto exec "
+```bash
-PURPOSE: Trace execution path for user registration
+# 1. Find entry points and related files
-TASK: Deep analysis of registration flow with debugging insights
+rg "function.*authenticate|class.*AuthService" --files-with-matches
-CONTEXT: @{CLAUDE.md,**/*CLAUDE.md}
+mcp__code-index__search_code_advanced(pattern="authenticate|login", file_pattern="*.ts")
-EXPECTED: Complete execution trace, variable states, potential issues
+
-RULES: $(cat ~/.claude/prompt-templates/code-analysis.md) | Focus on edge cases and error handling
+# 2. Build call graph understanding
-" --skip-git-repo-check -s danger-full-access
+# entry → middleware → service → repository
+
+# 3. Execute deep analysis (analysis only, no code changes)
+/cli:mode:code-analysis --cd "src" "trace execution from entry point"
 ```
 
-**With Enhancement**:
+## Output Routing
-```bash
-# User: /cli:mode:code-analysis --enhance "why is login slow"
 
-# Step 1: Enhance
+**Output Destination Logic**:
-/enhance-prompt "why is login slow"
+- **Active session exists AND analysis is session-relevant**:
-# Returns:
+  - Save to `.workflow/WFS-[id]/.chat/code-analysis-[timestamp].md`
-# INTENT: Identify performance bottlenecks in login flow
+- **No active session OR standalone analysis**:
-# CONTEXT: Authentication module, database queries
+  - Save to `.workflow/.scratchpad/code-analysis-[description]-[timestamp].md`
-# ACTION: Trace execution path → identify slow operations → suggest optimizations
 
-# Step 2: Analyze with enhanced context
+**Examples**:
-cd . && ~/.claude/scripts/gemini-wrapper --all-files -p "
+- During active session `WFS-auth-refactor`, analyzing auth flow → `.chat/code-analysis-20250105-143022.md`
-PURPOSE: Identify performance bottlenecks in login flow
+- No session, tracing request lifecycle → `.scratchpad/code-analysis-request-flow-20250105-143045.md`
-TASK: Trace login execution path and measure operation costs
-CONTEXT: @{CLAUDE.md,**/*CLAUDE.md} @{**/*auth*,**/*login*}
-EXPECTED: Performance analysis, bottleneck identification, optimization recommendations
-RULES: $(cat ~/.claude/prompt-templates/code-analysis.md) | Focus on performance and database queries
-"
-```
 
-## Analysis Output Structure
+## Notes
 
-Based on code-analysis.md template, output includes:
+- Command templates and file patterns: see intelligent-tools-strategy.md (loaded in memory)
-
+- Scratchpad directory details: see workflow-architecture.md
-### 1. 思考过程 (Thinking Process)
+- Template path: `~/.claude/prompt-templates/code-analysis.md`
-- Analysis strategy and approach
+- Always uses `--all-files` for comprehensive code context
-- Key assumptions about code behavior
-
-### 2. 对问题的理解 (Understanding)
-- Restate analysis target
-- Confirm understanding of requirements
-
-### 3. 核心解答 (Core Answer)
-- Direct, concise answer to analysis question
-
-### 4. 详细分析与调用逻辑 (Detailed Analysis)
-- **代码段识别**: Relevant code sections
-- **执行流程**: Step-by-step execution flow
-- **调用图**: Visual call flow diagram with symbols:
-  - `───►` Function call
-  - `◄───` Return
-  - `│` Continuation
-  - `├─` Intermediate step
-  - `└─` Last step in block
-- **数据传递**: Data passing and state changes
-- **逻辑解释**: Why code behaves this way
-
-### 5. 总结 (Summary)
-- Key findings and recommendations
-
-## Session Output
-
-**Location**: `.workflow/WFS-[topic]/.chat/code-analysis-[timestamp].md`
-
-**Includes**:
-- Analysis target
-- Template used
-- Complete structured analysis
-- Call flow diagrams
-- Debugging insights
-- Recommendations
-
-## Use Cases
-
-| Use Case | Best Tool | Focus |
-|----------|-----------|-------|
-| **Understand execution flow** | gemini | Call sequences, data flow |
-| **Architectural patterns** | qwen | Design patterns, structure |
-| **Performance debugging** | codex | Bottlenecks, optimizations |
-| **Bug investigation** | codex | Error paths, edge cases |
-| **Code review** | gemini | Logic correctness, clarity |
-| **Refactoring planning** | qwen | Structure improvements |
-
-## Tool Selection Guide
-
-- **Gemini**: Best for general code understanding and tracing
-- **Qwen**: Best for architectural analysis and pattern recognition
-- **Codex**: Best for deep debugging and performance analysis

.claude/commands/cli/mode/plan.md

@@ -8,16 +8,23 @@ examples:
   - /cli:mode:plan --tool qwen --enhance "plan microservices migration"
   - /cli:mode:plan --tool codex --cd "src/auth" "authentication system"
 allowed-tools: SlashCommand(*), Bash(*)
-model: sonnet
 ---
 
 # CLI Mode: Plan (/cli:mode:plan)
 
 ## Purpose
 
-Execute planning and architecture analysis using CLI tools with specialized template.
+Comprehensive planning and architecture analysis with strategic planning template (`~/.claude/prompt-templates/plan.md`).
 
 **Supported Tools**: codex, gemini (default), qwen
+**Key Feature**: `--cd` flag for directory-scoped planning
+
+## Parameters
+
+- `--tool <codex|gemini|qwen>` - Tool selection (default: gemini)
+- `--enhance` - Enhance topic with `/enhance-prompt` first
+- `--cd "path"` - Target directory for focused planning
+- `<topic>` (Required) - Planning topic or architectural question
 
 ## Execution Flow
 
@@ -26,79 +33,93 @@ Execute planning and architecture analysis using CLI tools with specialized temp
 3. Parse topic (original or enhanced)
 4. Detect target directory (from `--cd` or auto-infer)
 5. Build command for selected tool with planning template
-6. Execute analysis
+6. Execute analysis (read-only, no code modification)
-7. Save to session (if active)
+7. Save to `.workflow/WFS-[id]/.chat/plan-[timestamp].md`
 
 ## Core Rules
 
-1. **Enhance First (if flagged)**: Execute `/enhance-prompt` before planning
+1. **Analysis Only**: This command provides planning recommendations and insights - it does NOT modify code
-2. **Directory Context**: Use `cd` when `--cd` provided or auto-detected
+2. **Enhance First (if flagged)**: Execute `/enhance-prompt` before planning
-3. **Template Required**: Always use planning template
+3. **Directory Context**: Use `cd` when `--cd` provided or auto-detected
-4. **Session Output**: Save to `.workflow/WFS-[id]/.chat/plan-[timestamp].md`
+4. **Template Required**: Always use planning template
+5. **Session Output**: Save analysis results to session chat
+
+## Planning Capabilities (via Template)
+
+- Strategic architecture insights and recommendations
+- Implementation roadmaps and suggestions
+- Key technical decisions analysis
+- Risk assessment
+- Resource planning
 
 ## Command Template
 
-**Core Guidelines**: @~/.claude/workflows/intelligent-tools-strategy.md
-
 ```bash
 cd [directory] && ~/.claude/scripts/gemini-wrapper --all-files -p "
 PURPOSE: [planning goal from topic]
 TASK: Comprehensive planning and architecture analysis
+MODE: analysis
 CONTEXT: @{CLAUDE.md,**/*CLAUDE.md} [entire codebase in directory]
-EXPECTED: Strategic insights, implementation roadmap, key decisions
+EXPECTED: Strategic insights, implementation recommendations, key decisions
 RULES: $(cat ~/.claude/prompt-templates/plan.md) | Focus on [topic area]
 "
 ```
 
 ## Examples
 
-**Basic Planning**:
+**Basic Planning Analysis**:
 ```bash
 cd . && ~/.claude/scripts/gemini-wrapper --all-files -p "
-PURPOSE: Design user dashboard feature architecture
+PURPOSE: Design user dashboard architecture
-TASK: Comprehensive architecture planning for dashboard
+TASK: Plan dashboard component structure and data flow
+MODE: analysis
 CONTEXT: @{CLAUDE.md,**/*CLAUDE.md}
-EXPECTED: Architecture design, component structure, implementation roadmap
+EXPECTED: Architecture recommendations, component design, data flow diagram
-RULES: $(cat ~/.claude/prompt-templates/plan.md) | Focus on scalability and UX
+RULES: $(cat ~/.claude/prompt-templates/plan.md) | Focus on scalability
 "
 ```
 
-**Directory-Specific**:
+**Directory-Specific Planning**:
 ```bash
-cd src/auth && ~/.claude/scripts/gemini-wrapper --all-files -p "
+cd src/api && ~/.claude/scripts/gemini-wrapper --all-files -p "
-PURPOSE: Plan authentication system redesign
+PURPOSE: Plan API refactoring strategy
-TASK: Analyze current auth and plan improvements
+TASK: Analyze current API structure and recommend improvements
+MODE: analysis
 CONTEXT: @{CLAUDE.md,**/*CLAUDE.md}
-EXPECTED: Migration strategy, security improvements, timeline
+EXPECTED: Refactoring roadmap, breaking change analysis, migration plan
-RULES: $(cat ~/.claude/prompt-templates/plan.md) | Focus on security and backward compatibility
+RULES: $(cat ~/.claude/prompt-templates/plan.md) | Maintain backward compatibility
 "
 ```
 
-**With Enhancement**:
+## Planning Workflow
+
 ```bash
-# User: /gemini:mode:plan --enhance "fix auth issues"
+# 1. Discover project structure
+~/.claude/scripts/get_modules_by_depth.sh
+mcp__code-index__find_files(pattern="*.ts")
 
-# Step 1: Enhance
+# 2. Gather existing architecture info
-/enhance-prompt "fix auth issues"
+rg "architecture|design" --files-with-matches
-# Returns structured planning context
 
-# Step 2: Plan with enhanced input
+# 3. Execute planning analysis (analysis only, no code changes)
-cd . && ~/.claude/scripts/gemini-wrapper --all-files -p "
+/cli:mode:plan "topic for strategic planning"
-PURPOSE: [enhanced goal]
-TASK: [enhanced task description]
-CONTEXT: @{CLAUDE.md,**/*CLAUDE.md} [enhanced context]
-EXPECTED: Strategic plan with enhanced requirements
-RULES: $(cat ~/.claude/prompt-templates/plan.md) | [enhanced constraints]
-"
 ```
 
-## Session Output
+## Output Routing
 
-**Location**: `.workflow/WFS-[topic]/.chat/plan-[timestamp].md`
+**Output Destination Logic**:
+- **Active session exists AND planning is session-relevant**:
+  - Save to `.workflow/WFS-[id]/.chat/plan-[timestamp].md`
+- **No active session OR exploratory planning**:
+  - Save to `.workflow/.scratchpad/plan-[description]-[timestamp].md`
 
-**Includes**:
+**Examples**:
-- Planning topic
+- During active session `WFS-dashboard`, planning dashboard architecture → `.chat/plan-20250105-143022.md`
-- Template used
+- No session, exploring new feature idea → `.scratchpad/plan-feature-idea-20250105-143045.md`
-- Analysis results
+
-- Implementation roadmap
+## Notes
-- Key decisions
+
+- Command templates and file patterns: see intelligent-tools-strategy.md (loaded in memory)
+- Scratchpad directory details: see workflow-architecture.md
+- Template path: `~/.claude/prompt-templates/plan.md`
+- Always uses `--all-files` for comprehensive project context

.claude/commands/update-memory-full.md

@@ -45,7 +45,7 @@ count=$(echo "$modules" | wc -l)
 
 # Pseudocode flow:
 # IF (module_count > 20 OR complex_project_detected):
-#     → Task "Complex project full update" subagent_type: "memory-gemini-bridge"
+#     → Task "Complex project full update" subagent_type: "memory-bridge"
 # ELSE:
 #     → Present plan and WAIT FOR USER APPROVAL before execution
 #
@@ -60,7 +60,7 @@ After the bash script completes the initial analysis, the model takes control to
 2. **Parse CLAUDE.md Status**: Extract which modules have/need CLAUDE.md files
 3. **Choose Strategy**:
    - Simple projects: Present execution plan with CLAUDE.md paths to user
-   - Complex projects: Delegate to memory-gemini-bridge agent
+   - Complex projects: Delegate to memory-bridge agent
 4. **Present Detailed Plan**: Show user exactly which CLAUDE.md files will be created/updated
 5. **⚠️ CRITICAL: WAIT FOR USER APPROVAL**: No execution without explicit user consent
 
@@ -119,13 +119,43 @@ Bash(git status --short)
 ```
 
 **For Complex Projects (>20 modules):**
-The model will delegate to the memory-gemini-bridge agent using the Task tool:
+
-```
+The model will delegate to the memory-bridge agent with structured context:
+
+```javascript
 Task "Complex project full update"
-prompt: "Execute full documentation update for [count] modules using [tool] with depth-parallel execution"
+subagent_type: "memory-bridge"
-subagent_type: "memory-gemini-bridge"
+prompt: `
+CONTEXT:
+- Total modules: ${module_count}
+- Tool: ${tool}  // from --tool parameter, default: gemini
+- Mode: full
+- Existing CLAUDE.md: ${existing_count}
+- New CLAUDE.md needed: ${new_count}
+
+MODULE LIST:
+${modules_output}  // Full output from get_modules_by_depth.sh list
+
+REQUIREMENTS:
+1. Use TodoWrite to track each depth level before execution
+2. Process depths 5→0 sequentially, max 4 parallel jobs per depth
+3. Command format: update_module_claude.sh "<path>" "full" "${tool}" &
+4. Extract exact path from "depth:N|path:<PATH>|..." format
+5. Verify all ${module_count} modules are processed
+6. Run safety check after completion
+7. Display git status
+
+Execute depth-parallel updates for all modules.
+`
 ```
 
+**Agent receives complete context:**
+- Module count and tool selection
+- Full structured module list
+- Clear execution requirements
+- Path extraction format
+- Success criteria
+
 
 ### 📚 Usage Examples
 

.claude/commands/update-memory-related.md

@@ -51,7 +51,7 @@ count=$(echo "$changed" | wc -l)
 
 # Pseudocode flow:
 # IF (change_count > 15 OR complex_changes_detected):
-#     → Task "Complex project related update" subagent_type: "memory-gemini-bridge"
+#     → Task "Complex project related update" subagent_type: "memory-bridge"
 # ELSE:
 #     → Present plan and WAIT FOR USER APPROVAL before execution
 #
@@ -66,7 +66,7 @@ After the bash script completes change detection, the model takes control to:
 2. **Parse CLAUDE.md Status**: Extract which changed modules have/need CLAUDE.md files
 3. **Choose Strategy**: 
    - Simple changes: Present execution plan with CLAUDE.md paths to user
-   - Complex changes: Delegate to memory-gemini-bridge agent
+   - Complex changes: Delegate to memory-bridge agent
 4. **Present Detailed Plan**: Show user exactly which CLAUDE.md files will be created/updated for changed modules
 5. **⚠️ CRITICAL: WAIT FOR USER APPROVAL**: No execution without explicit user consent
 
@@ -126,13 +126,44 @@ Bash(git diff --stat)
 ```
 
 **For Complex Changes (>15 modules):**
-The model will delegate to the memory-gemini-bridge agent using the Task tool:
+
-```
+The model will delegate to the memory-bridge agent with structured context:
+
+```javascript
 Task "Complex project related update"
-prompt: "Execute context-aware update for [count] changed modules using [tool] with depth-parallel execution"
+subagent_type: "memory-bridge"
-subagent_type: "memory-gemini-bridge"
+prompt: `
+CONTEXT:
+- Total modules: ${change_count}
+- Tool: ${tool}  // from --tool parameter, default: gemini
+- Mode: related
+- Changed modules detected via: detect_changed_modules.sh
+- Existing CLAUDE.md: ${existing_count}
+- New CLAUDE.md needed: ${new_count}
+
+MODULE LIST:
+${changed_modules_output}  // Full output from detect_changed_modules.sh list
+
+REQUIREMENTS:
+1. Use TodoWrite to track each depth level before execution
+2. Process depths sequentially (deepest→shallowest), max 4 parallel jobs per depth
+3. Command format: update_module_claude.sh "<path>" "related" "${tool}" &
+4. Extract exact path from "depth:N|path:<PATH>|..." format
+5. Verify all ${change_count} modules are processed
+6. Run safety check after completion
+7. Display git diff --stat
+
+Execute depth-parallel updates for changed modules only.
+`
 ```
 
+**Agent receives complete context:**
+- Changed module count and tool selection
+- Full structured module list (changed only)
+- Clear execution requirements with "related" mode
+- Path extraction format
+- Success criteria
+
 
 ### 📚 Usage Examples
 

.claude/commands/workflow/action-plan-verify.md

@@ -0,0 +1,421 @@
+---
+name: action-plan-verify
+description: Perform non-destructive cross-artifact consistency and quality analysis of IMPL_PLAN.md and task.json before execution
+usage: /workflow:action-plan-verify [--session <session-id>]
+argument-hint: "optional: --session <session-id>"
+examples:
+  - /workflow:action-plan-verify
+  - /workflow:action-plan-verify --session WFS-auth
+allowed-tools: Read(*), TodoWrite(*), Glob(*), Bash(*)
+---
+
+## User Input
+
+```text
+$ARGUMENTS
+```
+
+You **MUST** consider the user input before proceeding (if not empty).
+
+## Goal
+
+Identify inconsistencies, duplications, ambiguities, and underspecified items between action planning artifacts (`IMPL_PLAN.md`, `task.json`) and brainstorming artifacts (`synthesis-specification.md`) before implementation. This command MUST run only after `/workflow:plan` has successfully produced complete `IMPL_PLAN.md` and task JSON files.
+
+## Operating Constraints
+
+**STRICTLY READ-ONLY**: Do **not** modify any files. Output a structured analysis report. Offer an optional remediation plan (user must explicitly approve before any follow-up editing commands).
+
+**Synthesis Authority**: The `synthesis-specification.md` is **authoritative** for requirements and design decisions. Any conflicts between IMPL_PLAN/tasks and synthesis are automatically CRITICAL and require adjustment of the plan/tasks—not reinterpretation of requirements.
+
+## Execution Steps
+
+### 1. Initialize Analysis Context
+
+```bash
+# Detect active workflow session
+IF --session parameter provided:
+    session_id = provided session
+ELSE:
+    CHECK: .workflow/.active-* marker files
+    IF active_session EXISTS:
+        session_id = get_active_session()
+    ELSE:
+        ERROR: "No active workflow session found. Use --session <session-id>"
+        EXIT
+
+# Derive absolute paths
+session_dir = .workflow/WFS-{session}
+brainstorm_dir = session_dir/.brainstorming
+task_dir = session_dir/.task
+
+# Validate required artifacts
+SYNTHESIS = brainstorm_dir/synthesis-specification.md
+IMPL_PLAN = session_dir/IMPL_PLAN.md
+TASK_FILES = Glob(task_dir/*.json)
+
+# Abort if missing
+IF NOT EXISTS(SYNTHESIS):
+    ERROR: "synthesis-specification.md not found. Run /workflow:brainstorm:synthesis first"
+    EXIT
+
+IF NOT EXISTS(IMPL_PLAN):
+    ERROR: "IMPL_PLAN.md not found. Run /workflow:plan first"
+    EXIT
+
+IF TASK_FILES.count == 0:
+    ERROR: "No task JSON files found. Run /workflow:plan first"
+    EXIT
+```
+
+### 2. Load Artifacts (Progressive Disclosure)
+
+Load only minimal necessary context from each artifact:
+
+**From synthesis-specification.md**:
+- Functional Requirements (IDs, descriptions, acceptance criteria)
+- Non-Functional Requirements (IDs, targets)
+- Business Requirements (IDs, success metrics)
+- Key Architecture Decisions
+- Risk factors and mitigation strategies
+- Implementation Roadmap (high-level phases)
+
+**From IMPL_PLAN.md**:
+- Summary and objectives
+- Context Analysis
+- Implementation Strategy
+- Task Breakdown Summary
+- Success Criteria
+- Brainstorming Artifacts References (if present)
+
+**From task.json files**:
+- Task IDs
+- Titles and descriptions
+- Status
+- Dependencies (depends_on, blocks)
+- Context (requirements, focus_paths, acceptance, artifacts)
+- Flow control (pre_analysis, implementation_approach)
+- Meta (complexity, priority, use_codex)
+
+### 3. Build Semantic Models
+
+Create internal representations (do not include raw artifacts in output):
+
+**Requirements inventory**:
+- Each functional/non-functional/business requirement with stable ID
+- Requirement text, acceptance criteria, priority
+
+**Architecture decisions inventory**:
+- ADRs from synthesis
+- Technology choices
+- Data model references
+
+**Task coverage mapping**:
+- Map each task to one or more requirements (by ID reference or keyword inference)
+- Map each requirement to covering tasks
+
+**Dependency graph**:
+- Task-to-task dependencies (depends_on, blocks)
+- Requirement-level dependencies (from synthesis)
+
+### 4. Detection Passes (Token-Efficient Analysis)
+
+Focus on high-signal findings. Limit to 50 findings total; aggregate remainder in overflow summary.
+
+#### A. Requirements Coverage Analysis
+
+- **Orphaned Requirements**: Requirements in synthesis with zero associated tasks
+- **Unmapped Tasks**: Tasks with no clear requirement linkage
+- **NFR Coverage Gaps**: Non-functional requirements (performance, security, scalability) not reflected in tasks
+
+#### B. Consistency Validation
+
+- **Requirement Conflicts**: Tasks contradicting synthesis requirements
+- **Architecture Drift**: IMPL_PLAN architecture not matching synthesis ADRs
+- **Terminology Drift**: Same concept named differently across IMPL_PLAN and tasks
+- **Data Model Inconsistency**: Tasks referencing entities/fields not in synthesis data model
+
+#### C. Dependency Integrity
+
+- **Circular Dependencies**: Task A depends on B, B depends on C, C depends on A
+- **Missing Dependencies**: Task requires outputs from another task but no explicit dependency
+- **Broken Dependencies**: Task depends on non-existent task ID
+- **Logical Ordering Issues**: Implementation tasks before foundational setup without dependency note
+
+#### D. Synthesis Alignment
+
+- **Priority Conflicts**: High-priority synthesis requirements mapped to low-priority tasks
+- **Success Criteria Mismatch**: IMPL_PLAN success criteria not covering synthesis acceptance criteria
+- **Risk Mitigation Gaps**: Critical risks in synthesis without corresponding mitigation tasks
+
+#### E. Task Specification Quality
+
+- **Ambiguous Focus Paths**: Tasks with vague or missing focus_paths
+- **Underspecified Acceptance**: Tasks without clear acceptance criteria
+- **Missing Artifacts References**: Tasks not referencing relevant brainstorming artifacts in context.artifacts
+- **Weak Flow Control**: Tasks without clear implementation_approach or pre_analysis steps
+- **Missing Target Files**: Tasks without flow_control.target_files specification
+
+#### F. Duplication Detection
+
+- **Overlapping Task Scope**: Multiple tasks with nearly identical descriptions
+- **Redundant Requirements Coverage**: Same requirement covered by multiple tasks without clear partitioning
+
+#### G. Feasibility Assessment
+
+- **Complexity Misalignment**: Task marked "simple" but requires multiple file modifications
+- **Resource Conflicts**: Parallel tasks requiring same resources/files
+- **Skill Gap Risks**: Tasks requiring skills not in team capability assessment (from synthesis)
+
+### 5. Severity Assignment
+
+Use this heuristic to prioritize findings:
+
+- **CRITICAL**:
+  - Violates synthesis authority (requirement conflict)
+  - Core requirement with zero coverage
+  - Circular dependencies
+  - Broken dependencies
+
+- **HIGH**:
+  - NFR coverage gaps
+  - Priority conflicts
+  - Missing risk mitigation tasks
+  - Ambiguous acceptance criteria
+
+- **MEDIUM**:
+  - Terminology drift
+  - Missing artifacts references
+  - Weak flow control
+  - Logical ordering issues
+
+- **LOW**:
+  - Style/wording improvements
+  - Minor redundancy not affecting execution
+
+### 6. Produce Compact Analysis Report
+
+Output a Markdown report (no file writes) with the following structure:
+
+```markdown
+## Action Plan Verification Report
+
+**Session**: WFS-{session-id}
+**Generated**: {timestamp}
+**Artifacts Analyzed**: synthesis-specification.md, IMPL_PLAN.md, {N} task files
+
+---
+
+### Executive Summary
+
+- **Overall Risk Level**: CRITICAL | HIGH | MEDIUM | LOW
+- **Recommendation**: BLOCK_EXECUTION | PROCEED_WITH_FIXES | PROCEED_WITH_CAUTION | PROCEED
+- **Critical Issues**: {count}
+- **High Issues**: {count}
+- **Medium Issues**: {count}
+- **Low Issues**: {count}
+
+---
+
+### Findings Summary
+
+| ID | Category | Severity | Location(s) | Summary | Recommendation |
+|----|----------|----------|-------------|---------|----------------|
+| C1 | Coverage | CRITICAL | synthesis:FR-03 | Requirement "User auth" has zero task coverage | Add authentication implementation task |
+| H1 | Consistency | HIGH | IMPL-1.2 vs synthesis:ADR-02 | Task uses REST while synthesis specifies GraphQL | Align task with ADR-02 decision |
+| M1 | Specification | MEDIUM | IMPL-2.1 | Missing context.artifacts reference | Add @synthesis reference |
+| L1 | Duplication | LOW | IMPL-3.1, IMPL-3.2 | Similar scope | Consider merging |
+
+(Add one row per finding; generate stable IDs prefixed by severity initial.)
+
+---
+
+### Requirements Coverage Analysis
+
+| Requirement ID | Requirement Summary | Has Task? | Task IDs | Priority Match | Notes |
+|----------------|---------------------|-----------|----------|----------------|-------|
+| FR-01 | User authentication | ✅ Yes | IMPL-1.1, IMPL-1.2 | ✅ Match | Complete |
+| FR-02 | Data export | ✅ Yes | IMPL-2.3 | ⚠️ Mismatch | High req → Med priority task |
+| FR-03 | Profile management | ❌ No | - | - | **CRITICAL: Zero coverage** |
+| NFR-01 | Response time <200ms | ❌ No | - | - | **HIGH: No performance tasks** |
+
+**Coverage Metrics**:
+- Functional Requirements: 85% (17/20 covered)
+- Non-Functional Requirements: 40% (2/5 covered)
+- Business Requirements: 100% (5/5 covered)
+
+---
+
+### Unmapped Tasks
+
+| Task ID | Title | Issue | Recommendation |
+|---------|-------|-------|----------------|
+| IMPL-4.5 | Refactor utils | No requirement linkage | Link to technical debt or remove |
+
+---
+
+### Dependency Graph Issues
+
+**Circular Dependencies**: None detected ✅
+
+**Broken Dependencies**:
+- IMPL-2.3 depends on "IMPL-2.4" (non-existent)
+
+**Logical Ordering Issues**:
+- IMPL-5.1 (integration test) has no dependency on IMPL-1.* (implementation tasks)
+
+---
+
+### Synthesis Alignment Issues
+
+| Issue Type | Synthesis Reference | IMPL_PLAN/Task | Impact | Recommendation |
+|------------|---------------------|----------------|--------|----------------|
+| Architecture Conflict | synthesis:ADR-01 (JWT auth) | IMPL_PLAN uses session cookies | HIGH | Update IMPL_PLAN to use JWT |
+| Priority Mismatch | synthesis:FR-02 (High) | IMPL-2.3 (Medium) | MEDIUM | Elevate task priority |
+| Missing Risk Mitigation | synthesis:Risk-03 (API rate limits) | No mitigation tasks | HIGH | Add rate limiting implementation task |
+
+---
+
+### Task Specification Quality Issues
+
+**Missing Artifacts References**: 12 tasks lack context.artifacts
+**Weak Flow Control**: 5 tasks lack implementation_approach
+**Missing Target Files**: 8 tasks lack flow_control.target_files
+
+**Sample Issues**:
+- IMPL-1.2: No context.artifacts reference to synthesis
+- IMPL-3.1: Missing flow_control.target_files specification
+- IMPL-4.2: Vague focus_paths ["src/"] - needs refinement
+
+---
+
+### Feasibility Concerns
+
+| Concern | Tasks Affected | Issue | Recommendation |
+|---------|----------------|-------|----------------|
+| Skill Gap | IMPL-6.1, IMPL-6.2 | Requires Kubernetes expertise not in team | Add training task or external consultant |
+| Resource Conflict | IMPL-3.1, IMPL-3.2 | Both modify src/auth/service.ts in parallel | Add dependency or serialize |
+
+---
+
+### Metrics
+
+- **Total Requirements**: 30 (20 functional, 5 non-functional, 5 business)
+- **Total Tasks**: 25
+- **Overall Coverage**: 77% (23/30 requirements with ≥1 task)
+- **Critical Issues**: 2
+- **High Issues**: 5
+- **Medium Issues**: 8
+- **Low Issues**: 3
+
+---
+
+### Next Actions
+
+#### If CRITICAL Issues Exist (Current Status: 2 CRITICAL)
+**Recommendation**: ❌ **BLOCK EXECUTION** - Resolve CRITICAL issues before proceeding
+
+**Required Actions**:
+1. **CRITICAL**: Add authentication implementation tasks to cover FR-03
+2. **CRITICAL**: Add performance optimization tasks to cover NFR-01
+
+#### If Only HIGH/MEDIUM/LOW Issues
+**Recommendation**: ⚠️ **PROCEED WITH CAUTION** - Issues are non-blocking but should be addressed
+
+**Suggested Improvements**:
+1. Add context.artifacts references to all tasks (use /task:replan)
+2. Fix broken dependency IMPL-2.3 → IMPL-2.4
+3. Add flow_control.target_files to underspecified tasks
+
+#### Command Suggestions
+```bash
+# Fix critical coverage gaps
+/task:create "Implement user authentication (FR-03)"
+/task:create "Add performance optimization (NFR-01)"
+
+# Refine existing tasks
+/task:replan IMPL-1.2 "Add context.artifacts and target_files"
+
+# Update IMPL_PLAN if architecture drift detected
+# (Manual edit required)
+```
+```
+
+### 7. Provide Remediation Options
+
+At end of report, ask the user:
+
+```markdown
+### 🔧 Remediation Options
+
+Would you like me to:
+1. **Generate task suggestions** for unmapped requirements (no auto-creation)
+2. **Provide specific edit commands** for top N issues (you execute manually)
+3. **Create remediation checklist** for systematic fixing
+
+(Do NOT apply fixes automatically - this is read-only analysis)
+```
+
+### 8. Update Session Metadata
+
+```json
+{
+  "phases": {
+    "PLAN": {
+      "status": "completed",
+      "action_plan_verification": {
+        "completed": true,
+        "completed_at": "timestamp",
+        "overall_risk_level": "HIGH",
+        "recommendation": "PROCEED_WITH_FIXES",
+        "issues": {
+          "critical": 2,
+          "high": 5,
+          "medium": 8,
+          "low": 3
+        },
+        "coverage": {
+          "functional_requirements": 0.85,
+          "non_functional_requirements": 0.40,
+          "business_requirements": 1.00
+        },
+        "report_path": ".workflow/WFS-{session}/.process/ACTION_PLAN_VERIFICATION.md"
+      }
+    }
+  }
+}
+```
+
+## Operating Principles
+
+### Context Efficiency
+- **Minimal high-signal tokens**: Focus on actionable findings
+- **Progressive disclosure**: Load artifacts incrementally
+- **Token-efficient output**: Limit findings table to 50 rows; summarize overflow
+- **Deterministic results**: Rerunning without changes produces consistent IDs and counts
+
+### Analysis Guidelines
+- **NEVER modify files** (this is read-only analysis)
+- **NEVER hallucinate missing sections** (if absent, report them accurately)
+- **Prioritize synthesis violations** (these are always CRITICAL)
+- **Use examples over exhaustive rules** (cite specific instances)
+- **Report zero issues gracefully** (emit success report with coverage statistics)
+
+### Verification Taxonomy
+- **Coverage**: Requirements → Tasks mapping
+- **Consistency**: Cross-artifact alignment
+- **Dependencies**: Task ordering and relationships
+- **Synthesis Alignment**: Adherence to authoritative requirements
+- **Task Quality**: Specification completeness
+- **Feasibility**: Implementation risks
+
+## Behavior Rules
+
+- **If no issues found**: Report "✅ Action plan verification passed. No issues detected." and suggest proceeding to `/workflow:execute`.
+- **If CRITICAL issues exist**: Recommend blocking execution until resolved.
+- **If only HIGH/MEDIUM issues**: User may proceed with caution, but provide improvement suggestions.
+- **If IMPL_PLAN.md or task files missing**: Instruct user to run `/workflow:plan` first.
+- **Always provide actionable remediation suggestions**: Don't just identify problems—suggest solutions.
+
+## Context
+
+{ARGS}

.claude/commands/workflow/brainstorm/synthesis.md

@@ -437,3 +437,64 @@ Upon completion, update `workflow-session.json`:
 - [ ] **Stakeholder Alignment**: Addresses needs and concerns of all key stakeholders
 - [ ] **Decision Traceability**: Every major decision traceable to source role analysis via @ references
 - [ ] **Continuous Improvement**: Establishes framework for ongoing optimization and learning
+
+## 🚀 **Recommended Next Steps**
+
+After synthesis completion, follow this recommended workflow:
+
+### Option 1: Standard Planning Workflow (Recommended)
+```bash
+# Step 1: Verify conceptual clarity (Quality Gate)
+/workflow:concept-verify --session WFS-{session-id}
+# → Interactive Q&A (up to 5 questions) to clarify ambiguities in synthesis
+
+# Step 2: Proceed to action planning (after concept verification)
+/workflow:plan --session WFS-{session-id}
+# → Generates IMPL_PLAN.md and task.json files
+
+# Step 3: Verify action plan quality (Quality Gate)
+/workflow:action-plan-verify --session WFS-{session-id}
+# → Read-only analysis to catch issues before execution
+
+# Step 4: Start implementation
+/workflow:execute --session WFS-{session-id}
+```
+
+### Option 2: TDD Workflow
+```bash
+# Step 1: Verify conceptual clarity
+/workflow:concept-verify --session WFS-{session-id}
+
+# Step 2: Generate TDD task chains (RED-GREEN-REFACTOR)
+/workflow:tdd-plan --session WFS-{session-id} "Feature description"
+
+# Step 3: Verify TDD plan quality
+/workflow:action-plan-verify --session WFS-{session-id}
+
+# Step 4: Execute TDD workflow
+/workflow:execute --session WFS-{session-id}
+```
+
+### Quality Gates Explained
+
+**`/workflow:concept-verify`** (Phase 2 - After Brainstorming):
+- **Purpose**: Detect and resolve conceptual ambiguities before detailed planning
+- **Time**: 10-20 minutes (interactive)
+- **Value**: Reduces downstream rework by 40-60%
+- **Output**: Updated synthesis-specification.md with clarifications
+
+**`/workflow:action-plan-verify`** (Phase 4 - After Planning):
+- **Purpose**: Validate IMPL_PLAN.md and task.json consistency and completeness
+- **Time**: 5-10 minutes (read-only analysis)
+- **Value**: Prevents execution of flawed plans, saves 2-5 days
+- **Output**: Verification report with actionable recommendations
+
+### Skip Verification? (Not Recommended)
+
+If you want to skip verification and proceed directly:
+```bash
+/workflow:plan --session WFS-{session-id}
+/workflow:execute --session WFS-{session-id}
+```
+
+⚠️ **Warning**: Skipping verification increases risk of late-stage issues and rework.

.claude/commands/workflow/concept-verify.md

@@ -0,0 +1,311 @@
+---
+name: concept-verify
+description: Identify underspecified areas in brainstorming artifacts through targeted clarification questions before action planning
+usage: /workflow:concept-verify [--session <session-id>]
+argument-hint: "optional: --session <session-id>"
+examples:
+  - /workflow:concept-verify
+  - /workflow:concept-verify --session WFS-auth
+allowed-tools: Read(*), Write(*), Edit(*), TodoWrite(*), Glob(*), Bash(*)
+---
+
+## User Input
+
+```text
+$ARGUMENTS
+```
+
+You **MUST** consider the user input before proceeding (if not empty).
+
+## Outline
+
+**Goal**: Detect and reduce ambiguity or missing decision points in brainstorming artifacts (synthesis-specification.md, topic-framework.md, role analyses) before moving to action planning phase.
+
+**Timing**: This command runs AFTER `/workflow:brainstorm:synthesis` and BEFORE `/workflow:plan`. It serves as a quality gate to ensure conceptual clarity before detailed task planning.
+
+**Execution steps**:
+
+1. **Session Detection & Validation**
+   ```bash
+   # Detect active workflow session
+   IF --session parameter provided:
+       session_id = provided session
+   ELSE:
+       CHECK: .workflow/.active-* marker files
+       IF active_session EXISTS:
+           session_id = get_active_session()
+       ELSE:
+           ERROR: "No active workflow session found. Use --session <session-id> or start a session."
+           EXIT
+
+   # Validate brainstorming completion
+   brainstorm_dir = .workflow/WFS-{session}/.brainstorming/
+
+   CHECK: brainstorm_dir/synthesis-specification.md
+   IF NOT EXISTS:
+       ERROR: "synthesis-specification.md not found. Run /workflow:brainstorm:synthesis first"
+       EXIT
+
+   CHECK: brainstorm_dir/topic-framework.md
+   IF NOT EXISTS:
+       WARN: "topic-framework.md not found. Verification will be limited."
+   ```
+
+2. **Load Brainstorming Artifacts**
+   ```bash
+   # Load primary artifacts
+   synthesis_spec = Read(brainstorm_dir + "/synthesis-specification.md")
+   topic_framework = Read(brainstorm_dir + "/topic-framework.md") # if exists
+
+   # Discover role analyses
+   role_analyses = Glob(brainstorm_dir + "/*/analysis.md")
+   participating_roles = extract_role_names(role_analyses)
+   ```
+
+3. **Ambiguity & Coverage Scan**
+
+   Perform structured scan using this taxonomy. For each category, mark status: **Clear** / **Partial** / **Missing**.
+
+   **Requirements Clarity**:
+   - Functional requirements specificity and measurability
+   - Non-functional requirements with quantified targets
+   - Business requirements with success metrics
+   - Acceptance criteria completeness
+
+   **Architecture & Design Clarity**:
+   - Architecture decisions with rationale
+   - Data model completeness (entities, relationships, constraints)
+   - Technology stack justification
+   - Integration points and API contracts
+
+   **User Experience & Interface**:
+   - User journey completeness
+   - Critical interaction flows
+   - Error/edge case handling
+   - Accessibility and localization considerations
+
+   **Implementation Feasibility**:
+   - Team capability vs. required skills
+   - External dependencies and failure modes
+   - Resource constraints (timeline, personnel)
+   - Technical constraints and tradeoffs
+
+   **Risk & Mitigation**:
+   - Critical risks identified
+   - Mitigation strategies defined
+   - Success factors clarity
+   - Monitoring and quality gates
+
+   **Process & Collaboration**:
+   - Role responsibilities and handoffs
+   - Collaboration patterns defined
+   - Timeline and milestone clarity
+   - Dependency management strategy
+
+   **Decision Traceability**:
+   - Controversial points documented
+   - Alternatives considered and rejected
+   - Decision rationale clarity
+   - Consensus vs. dissent tracking
+
+   **Terminology & Consistency**:
+   - Canonical terms defined
+   - Consistent naming across artifacts
+   - No unresolved placeholders (TODO, TBD, ???)
+
+   For each category with **Partial** or **Missing** status, add to candidate question queue unless:
+   - Clarification would not materially change implementation strategy
+   - Information is better deferred to planning phase
+
+4. **Generate Prioritized Question Queue**
+
+   Internally generate prioritized queue of candidate questions (maximum 5):
+
+   **Constraints**:
+   - Maximum 5 questions per session
+   - Each question must be answerable with:
+     * Multiple-choice (2-5 mutually exclusive options), OR
+     * Short answer (≤5 words)
+   - Only include questions whose answers materially impact:
+     * Architecture decisions
+     * Data modeling
+     * Task decomposition
+     * Risk mitigation
+     * Success criteria
+   - Ensure category coverage balance
+   - Favor clarifications that reduce downstream rework risk
+
+   **Prioritization Heuristic**:
+   ```
+   priority_score = (impact_on_planning * 0.4) +
+                    (uncertainty_level * 0.3) +
+                    (risk_if_unresolved * 0.3)
+   ```
+
+   If zero high-impact ambiguities found, proceed to **Step 8** (report success).
+
+5. **Sequential Question Loop** (Interactive)
+
+   Present **EXACTLY ONE** question at a time:
+
+   **Multiple-choice format**:
+   ```markdown
+   **Question {N}/5**: {Question text}
+
+   | Option | Description |
+   |--------|-------------|
+   | A | {Option A description} |
+   | B | {Option B description} |
+   | C | {Option C description} |
+   | D | {Option D description} |
+   | Short | Provide different answer (≤5 words) |
+   ```
+
+   **Short-answer format**:
+   ```markdown
+   **Question {N}/5**: {Question text}
+
+   Format: Short answer (≤5 words)
+   ```
+
+   **Answer Validation**:
+   - Validate answer maps to option or fits ≤5 word constraint
+   - If ambiguous, ask quick disambiguation (doesn't count as new question)
+   - Once satisfactory, record in working memory and proceed to next question
+
+   **Stop Conditions**:
+   - All critical ambiguities resolved
+   - User signals completion ("done", "no more", "proceed")
+   - Reached 5 questions
+
+   **Never reveal future queued questions in advance**.
+
+6. **Integration After Each Answer** (Incremental Update)
+
+   After each accepted answer:
+
+   ```bash
+   # Ensure Clarifications section exists
+   IF synthesis_spec NOT contains "## Clarifications":
+       Insert "## Clarifications" section after "# [Topic]" heading
+
+   # Create session subsection
+   IF NOT contains "### Session YYYY-MM-DD":
+       Create "### Session {today's date}" under "## Clarifications"
+
+   # Append clarification entry
+   APPEND: "- Q: {question} → A: {answer}"
+
+   # Apply clarification to appropriate section
+   CASE category:
+       Functional Requirements → Update "## Requirements & Acceptance Criteria"
+       Architecture → Update "## Key Designs & Decisions" or "## Design Specifications"
+       User Experience → Update "## Design Specifications > UI/UX Guidelines"
+       Risk → Update "## Risk Assessment & Mitigation"
+       Process → Update "## Process & Collaboration Concerns"
+       Data Model → Update "## Key Designs & Decisions > Data Model Overview"
+       Non-Functional → Update "## Requirements & Acceptance Criteria > Non-Functional Requirements"
+
+   # Remove obsolete/contradictory statements
+   IF clarification invalidates existing statement:
+       Replace statement instead of duplicating
+
+   # Save immediately
+   Write(synthesis_specification.md)
+   ```
+
+7. **Validation After Each Write**
+
+   - [ ] Clarifications section contains exactly one bullet per accepted answer
+   - [ ] Total asked questions ≤ 5
+   - [ ] Updated sections contain no lingering placeholders
+   - [ ] No contradictory earlier statements remain
+   - [ ] Markdown structure valid
+   - [ ] Terminology consistent across all updated sections
+
+8. **Completion Report**
+
+   After questioning loop ends or early termination:
+
+   ```markdown
+   ## ✅ Concept Verification Complete
+
+   **Session**: WFS-{session-id}
+   **Questions Asked**: {count}/5
+   **Artifacts Updated**: synthesis-specification.md
+   **Sections Touched**: {list section names}
+
+   ### Coverage Summary
+
+   | Category | Status | Notes |
+   |----------|--------|-------|
+   | Requirements Clarity | ✅ Resolved | Acceptance criteria quantified |
+   | Architecture & Design | ✅ Clear | No ambiguities found |
+   | Implementation Feasibility | ⚠️ Deferred | Team training plan to be defined in IMPL_PLAN |
+   | Risk & Mitigation | ✅ Resolved | Critical risks now have mitigation strategies |
+   | ... | ... | ... |
+
+   **Legend**:
+   - ✅ Resolved: Was Partial/Missing, now addressed
+   - ✅ Clear: Already sufficient
+   - ⚠️ Deferred: Low impact, better suited for planning phase
+   - ❌ Outstanding: Still Partial/Missing but question quota reached
+
+   ### Recommendations
+
+   - ✅ **PROCEED to /workflow:plan**: Conceptual foundation is clear
+   - OR ⚠️ **Address Outstanding Items First**: {list critical outstanding items}
+   - OR 🔄 **Run /workflow:concept-verify Again**: If new information available
+
+   ### Next Steps
+   ```bash
+   /workflow:plan  # Generate IMPL_PLAN.md and task.json
+   ```
+   ```
+
+9. **Update Session Metadata**
+
+   ```json
+   {
+     "phases": {
+       "BRAINSTORM": {
+         "status": "completed",
+         "concept_verification": {
+           "completed": true,
+           "completed_at": "timestamp",
+           "questions_asked": 3,
+           "categories_clarified": ["Requirements", "Risk", "Architecture"],
+           "outstanding_items": [],
+           "recommendation": "PROCEED_TO_PLANNING"
+         }
+       }
+     }
+   }
+   ```
+
+## Behavior Rules
+
+- **If no meaningful ambiguities found**: Report "No critical ambiguities detected. Conceptual foundation is clear." and suggest proceeding to `/workflow:plan`.
+- **If synthesis-specification.md missing**: Instruct user to run `/workflow:brainstorm:synthesis` first.
+- **Never exceed 5 questions** (disambiguation retries don't count as new questions).
+- **Respect user early termination**: Signals like "stop", "done", "proceed" should stop questioning.
+- **If quota reached with high-impact items unresolved**: Explicitly flag them under "Outstanding" with recommendation to address before planning.
+- **Avoid speculative tech stack questions** unless absence blocks conceptual clarity.
+
+## Operating Principles
+
+### Context Efficiency
+- **Minimal high-signal tokens**: Focus on actionable clarifications
+- **Progressive disclosure**: Load artifacts incrementally
+- **Deterministic results**: Rerunning without changes produces consistent analysis
+
+### Verification Guidelines
+- **NEVER hallucinate missing sections**: Report them accurately
+- **Prioritize high-impact ambiguities**: Focus on what affects planning
+- **Use examples over exhaustive rules**: Cite specific instances
+- **Report zero issues gracefully**: Emit success report with coverage statistics
+- **Update incrementally**: Save after each answer to minimize context loss
+
+## Context
+
+{ARGS}

.claude/commands/workflow/plan.md

@@ -143,7 +143,12 @@ Planning complete for session: [sessionId]
 Tasks generated: [count]
 Plan: .workflow/[sessionId]/IMPL_PLAN.md
 
-Next: /workflow:execute or /workflow:status
+✅ Recommended Next Steps:
+1. /workflow:action-plan-verify --session [sessionId]  # Verify plan quality before execution
+2. /workflow:status  # Review task breakdown
+3. /workflow:execute  # Start implementation (after verification)
+
+⚠️ Quality Gate: Consider running /workflow:action-plan-verify to catch issues early
 ```
 
 ## TodoWrite Pattern

.claude/commands/workflow/tdd-plan.md

@@ -26,10 +26,11 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*)
 2. **No Preliminary Analysis**: Do not read files before Phase 1
 3. **Parse Every Output**: Extract required data for next phase
 4. **Sequential Execution**: Each phase depends on previous output
-5. **Complete All Phases**: Do not return until Phase 5 completes
+5. **Complete All Phases**: Do not return until Phase 7 completes (with concept verification)
 6. **TDD Context**: All descriptions include "TDD:" prefix
+7. **Quality Gate**: Phase 5 concept verification ensures clarity before task generation
 
-## 6-Phase Execution
+## 7-Phase Execution (with Concept Verification)
 
 ### Phase 1: Session Discovery
 **Command**: `/workflow:session:start --auto "TDD: [structured-description]"`
@@ -79,7 +80,22 @@ TEST_FOCUS: [Test scenarios]
 
 **Parse**: Verify ANALYSIS_RESULTS.md contains TDD breakdown sections
 
-### Phase 5: TDD Task Generation
+### Phase 5: Concept Verification (NEW QUALITY GATE)
+**Command**: `/workflow:concept-verify --session [sessionId]`
+
+**Purpose**: Verify conceptual clarity before TDD task generation
+- Clarify test requirements and acceptance criteria
+- Resolve ambiguities in expected behavior
+- Validate TDD approach is appropriate
+
+**Behavior**:
+- If no ambiguities found → Auto-proceed to Phase 6
+- If ambiguities exist → Interactive clarification (up to 5 questions)
+- After clarifications → Auto-proceed to Phase 6
+
+**Parse**: Verify concept verification completed (check for clarifications section in ANALYSIS_RESULTS.md or synthesis file if exists)
+
+### Phase 6: TDD Task Generation
 **Command**:
 - Manual: `/workflow:tools:task-generate-tdd --session [sessionId]`
 - Agent: `/workflow:tools:task-generate-tdd --session [sessionId] --agent`
@@ -93,10 +109,10 @@ TEST_FOCUS: [Test scenarios]
 - IMPL tasks include test-fix-cycle configuration
 - IMPL_PLAN.md contains workflow_type: "tdd" in frontmatter
 
-### Phase 6: TDD Structure Validation
+### Phase 7: TDD Structure Validation & Action Plan Verification (RECOMMENDED)
-**Internal validation (no command)**
+**Internal validation first, then recommend external verification**
 
-**Validate**:
+**Internal Validation**:
 1. Each feature has TEST → IMPL → REFACTOR chain
 2. Dependencies: IMPL depends_on TEST, REFACTOR depends_on IMPL
 3. Meta fields: tdd_phase correct ("red"/"green"/"refactor")
@@ -117,20 +133,26 @@ Structure:
 
 Plan:
 - Unified Implementation Plan: .workflow/[sessionId]/IMPL_PLAN.md
-  (includes TDD Task Chains section)
+  (includes TDD Task Chains section with workflow_type: "tdd")
 
-Next: /workflow:execute or /workflow:tdd-verify
+✅ Recommended Next Steps:
+1. /workflow:action-plan-verify --session [sessionId]  # Verify TDD plan quality
+2. /workflow:execute --session [sessionId]  # Start TDD execution
+3. /workflow:tdd-verify [sessionId]  # Post-execution TDD compliance check
+
+⚠️ Quality Gate: Consider running /workflow:action-plan-verify to validate TDD task dependencies
 ```
 
 ## TodoWrite Pattern
 
 ```javascript
-// Initialize (6 phases now)
+// Initialize (7 phases now with concept verification)
 [
   {content: "Execute session discovery", status: "in_progress", activeForm: "Executing session discovery"},
-  {content: "Execute context gathering", status: "pending", activeForm: "Executing context gathering"},
+  {content: "Execute context gathering", status: "pending", activeForm": "Executing context gathering"},
-  {content: "Execute test coverage analysis", status: "pending", activeForm: "Executing test coverage analysis"},
+  {content: "Execute test coverage analysis", status: "pending", activeForm": "Executing test coverage analysis"},
-  {content: "Execute TDD analysis", status: "pending", activeForm: "Executing TDD analysis"},
+  {content: "Execute TDD analysis", status: "pending", activeForm": "Executing TDD analysis"},
+  {content: "Execute concept verification", status: "pending", activeForm": "Executing concept verification"},
   {content: "Execute TDD task generation", status: "pending", activeForm: "Executing TDD task generation"},
   {content: "Validate TDD structure", status: "pending", activeForm: "Validating TDD structure"}
 ]

.claude/commands/workflow/tools/docs.md

@@ -1,256 +1,590 @@
 ---
 name: docs
-description: Generate hierarchical architecture and API documentation using doc-generator agent with flow_control
+description: Documentation planning and orchestration - creates structured documentation tasks for execution
-usage: /workflow:docs <type> [scope]
+usage: /workflow:docs <type> [options]
-argument-hint: "architecture"|"api"|"all"
+argument-hint: "architecture"|"api"|"all" [--tool <gemini|qwen|codex>] [--scope <path>]
 examples:
-  - /workflow:docs all
+  - /workflow:docs all                          # Complete documentation (gemini default)
-  - /workflow:docs architecture src/modules
+  - /workflow:docs all --tool qwen              # Use Qwen for architecture focus
-  - /workflow:docs api --scope api/
+  - /workflow:docs architecture --scope src/modules
+  - /workflow:docs api --tool gemini --scope api/
 ---
 
 # Workflow Documentation Command
 
+## Purpose
+
+**`/workflow:docs` is a lightweight planner/orchestrator** - it analyzes project structure using metadata tools, decomposes documentation work into tasks, and generates execution plans. It does **NOT** generate any documentation content itself.
+
+**Key Principle**: Lightweight Planning + Targeted Execution
+- **docs.md** → Collect metadata (paths, structure), generate task JSONs with path references
+- **doc-generator.md** → Execute targeted analysis on focus_paths, generate content
+
+**Optimization Philosophy**:
+- **Planning phase**: Minimal context - only metadata (module paths, file lists via `get_modules_by_depth.sh` and Code Index MCP)
+- **Task JSON**: Store path references, not content
+- **Execution phase**: Targeted deep analysis within focus_paths scope
+
 ## Usage
+
 ```bash
-/workflow:docs <type> [scope]
+/workflow:docs <type> [--tool <gemini|qwen|codex>] [--scope <path>]
 ```
 
-## Input Detection
+### Parameters
-- **Document Types**: `architecture`, `api`, `all` → Creates appropriate documentation tasks
-- **Scope**: Optional module/directory filtering → Focuses documentation generation
-- **Default**: `all` → Complete documentation suite
 
-## Core Workflow
+- **type**: `architecture` | `api` | `all` (required)
+  - `architecture`: System design, module interactions, patterns
+  - `api`: Endpoint documentation, API specifications
+  - `all`: Complete documentation suite
 
-### Planning & Task Creation Process
+- **--tool**: `gemini` | `qwen` | `codex` (optional, default: gemini)
-The command performs structured planning and task creation:
+  - `gemini`: Comprehensive documentation, pattern recognition
+  - `qwen`: Architecture analysis, system design focus
+  - `codex`: Implementation validation, code quality
 
-**0. Pre-Planning Architecture Analysis** ⚠️ MANDATORY FIRST STEP
+- **--scope**: Directory path filter (optional)
-- **System Structure Analysis**: MUST run `bash(~/.claude/scripts/get_modules_by_depth.sh)` for dynamic task decomposition
-- **Module Boundary Identification**: Understand module organization and dependencies
-- **Architecture Pattern Recognition**: Identify architectural styles and design patterns
-- **Foundation for documentation**: Use structure analysis to guide task decomposition
 
-**1. Documentation Planning**
+## Planning Workflow
-- **Type Analysis**: Determine documentation scope (architecture/api/all)
-- **Module Discovery**: Use architecture analysis results to identify components
-- **Dynamic Task Decomposition**: Analyze project structure to determine optimal task count and module grouping
-- **Session Management**: Create or use existing documentation session
 
-**2. Task Generation**
+### Complete Execution Flow
-- **Create session**: `.workflow/WFS-docs-[timestamp]/`
-- **Create active marker**: `.workflow/.active-WFS-docs-[timestamp]` (must match session folder name)
-- **Generate IMPL_PLAN.md**: Documentation requirements and task breakdown
-- **Create task.json files**: Individual documentation tasks with flow_control
-- **Setup TODO_LIST.md**: Progress tracking for documentation generation
 
-### Session Management ⚠️ CRITICAL
-- **Check for active sessions**: Look for `.workflow/.active-WFS-docs-*` markers
-- **Marker naming**: Active marker must exactly match session folder name
-- **Session creation**: `WFS-docs-[timestamp]` folder with matching `.active-WFS-docs-[timestamp]` marker
-- **Task execution**: Use `/workflow:execute` to run individual documentation tasks within active session
-- **Session isolation**: Each documentation session maintains independent context and state
-
-## Output Structure
 ```
-.workflow/docs/
+/workflow:docs [type] [--tool] [--scope]
-├── README.md              # System navigation
+    ↓
-├── modules/               # Level 1: Module documentation
+Phase 1: Init Session → Create session dir & active marker
-│   ├── [module-1]/
+    ↓
-│   │   ├── overview.md
+Phase 2: Module Analysis → Run get_modules_by_depth.sh
-│   │   ├── api.md
+    ↓
-│   │   ├── dependencies.md
+Phase 3: Quick Assess → Check existing docs
-│   │   └── examples.md
+    ↓
-│   └── [module-n]/...
+Phase 4: Decompose → Create task list & TodoWrite
-├── architecture/          # Level 2: System architecture
+    ↓
-│   ├── system-design.md
+Phase 5: Generate Tasks → Build IMPL-*.json & plans
-│   ├── module-map.md
+    ↓
-│   ├── data-flow.md
+✅ Planning Complete → Show TodoWrite status
-│   └── tech-stack.md
-└── api/                   # Level 2: Unified API docs
-    ├── unified-api.md
-    └── openapi.yaml
 ```
 
-## Task Decomposition Standards
+### Phase Details
 
-### Dynamic Task Planning Rules
+#### Phase 1: Session Initialization
-**Module Grouping**: Max 3 modules per task, max 30 files per task
+```bash
-**Task Count**: Calculate based on `total_modules ÷ 3 (rounded up) + base_tasks`
+# Parse arguments and create session structure
-**File Limits**: Split tasks when file count exceeds 30 in any module group
+doc_type="all"  # architecture|api|all
-**Base Tasks**: System overview (1) + Architecture (1) + API consolidation (1)
+tool="gemini"   # gemini|qwen|codex (default: gemini)
-**Module Tasks**: Group related modules by dependency depth and functional similarity
+scope=""        # optional path filter
 
-### Documentation Task Types
+timestamp=$(date +%Y%m%d-%H%M%S)
-**IMPL-001**: System Overview Documentation
+session_dir=".workflow/WFS-docs-${timestamp}"
-- Project structure analysis
+mkdir -p "${session_dir}"/{.task,.process,.summaries}
-- Technology stack documentation
+touch ".workflow/.active-WFS-docs-${timestamp}"
-- Main navigation creation
-
-**IMPL-002**: Module Documentation (per module)
-- Individual module analysis
-- API surface documentation
-- Dependencies and relationships
-- Usage examples
-
-**IMPL-003**: Architecture Documentation
-- System design patterns
-- Module interaction mapping
-- Data flow documentation
-- Design principles
-
-**IMPL-004**: API Documentation
-- Endpoint discovery and analysis
-- OpenAPI specification generation
-- Authentication documentation
-- Integration examples
-
-### Task JSON Schema (5-Field Architecture)
-Each documentation task uses the workflow-architecture.md 5-field schema:
-- **id**: IMPL-N format
-- **title**: Documentation task name
-- **status**: pending|active|completed|blocked
-- **meta**: { type: "documentation", agent: "@doc-generator" }
-- **context**: { requirements, focus_paths, acceptance, scope }
-- **flow_control**: { pre_analysis[], implementation_approach, target_files[] }
-
-## Document Generation
-
-### Workflow Process
-**Input Analysis** → **Session Creation** → **IMPL_PLAN.md** → **.task/IMPL-NNN.json** → **TODO_LIST.md** → **Execute Tasks**
-
-**Always Created**:
-- **IMPL_PLAN.md**: Documentation requirements and task breakdown
-- **Session state**: Task references and documentation paths
-
-**Auto-Created (based on scope)**:
-- **TODO_LIST.md**: Progress tracking for documentation tasks
-- **.task/IMPL-*.json**: Individual documentation tasks with flow_control
-- **.process/ANALYSIS_RESULTS.md**: Documentation analysis artifacts
-
-**Document Structure**:
-```
-.workflow/
-├── .active-WFS-docs-20231201-143022  # Active session marker (matches folder name)
-└── WFS-docs-20231201-143022/         # Documentation session folder
-    ├── IMPL_PLAN.md                  # Main documentation plan
-    ├── TODO_LIST.md                  # Progress tracking
-    ├── .process/
-    │   └── ANALYSIS_RESULTS.md       # Documentation analysis
-    └── .task/
-        ├── IMPL-001.json             # System overview task
-        ├── IMPL-002.json             # Module documentation task
-        ├── IMPL-003.json             # Architecture documentation task
-        └── IMPL-004.json             # API documentation task
 ```
 
-### Task Flow Control Templates
+#### Phase 2: Lightweight Metadata Collection (MANDATORY)
+```bash
+# Step 1: Run get_modules_by_depth.sh for module hierarchy (metadata only)
+module_data=$(~/.claude/scripts/get_modules_by_depth.sh)
+# Format: depth:N|path:<PATH>|files:N|size:N|has_claude:yes/no
 
-**System Overview Task (IMPL-001)**:
+# Step 2: Use Code Index MCP for file discovery (optional, for better precision)
+# Example: mcp__code-index__find_files(pattern="src/**/")
+# This finds directories without loading content
+
+# IMPORTANT: Do NOT read file contents in planning phase
+# Only collect: paths, file counts, module structure
+```
+
+#### Phase 3: Quick Documentation Assessment
+```bash
+# Lightweight check - no heavy analysis
+existing_docs=$(find . -maxdepth 2 -name "*.md" -not -path "./.workflow/*" | wc -l)
+
+if [[ $existing_docs -gt 5 ]]; then
+    find . -maxdepth 3 -name "*.md" > "${session_dir}/.process/existing-docs.txt"
+fi
+
+# Record strategy
+cat > "${session_dir}/.process/strategy.md" <<EOF
+**Type**: ${doc_type}
+**Tool**: ${tool}
+**Scope**: ${scope:-"Full project"}
+EOF
+```
+
+#### Phase 4: Task Decomposition & TodoWrite Setup
+
+**Decomposition Strategy**:
+1. **Always create**: System Overview task (IMPL-001)
+2. **If architecture/all**: Architecture Documentation task
+3. **If api/all**: Unified API Documentation task
+4. **For each module**: Module Documentation task (grouped)
+
+**Grouping Rules**:
+- Max 3 modules per task
+- Max 30 files per task
+- Group by dependency depth and functional similarity
+
+**TodoWrite Setup**:
+```
+✅ Session initialization (completed)
+⏳ IMPL-001: Project Overview (pending)
+⏳ IMPL-002: Module 'auth' (pending)
+⏳ IMPL-003: Module 'api' (pending)
+⏳ IMPL-004: Architecture Documentation (pending)
+⏳ IMPL-005: API Documentation (pending)
+```
+
+#### Phase 5: Task JSON Generation
+
+Each task follows the 5-field schema with detailed flow_control.
+
+**Command Generation Logic**:
+```bash
+# Build tool-specific command at planning time
+if [[ "$tool" == "codex" ]]; then
+    cmd="codex -C ${dir} --full-auto exec \"...\""
+else
+    cmd="bash(cd ${dir} && ~/.claude/scripts/${tool}-wrapper -p \"...\")"
+fi
+```
+
+## Task Templates
+
+### 1. System Overview (IMPL-001)
+**Purpose**: Project-level documentation
+**Output**: `.workflow/docs/README.md`
+
+**Complete JSON Structure**:
 ```json
-"flow_control": {
+{
+  "id": "IMPL-001",
+  "title": "Generate Project Overview Documentation",
+  "status": "pending",
+  "meta": {
+    "type": "docs",
+    "agent": "@doc-generator",
+    "tool": "gemini",
+    "template": "project-overview"
+  },
+  "context": {
+    "requirements": [
+      "Document project purpose, architecture, and getting started guide",
+      "Create navigation structure for all documentation",
+      "Use Project-Level Documentation Template"
+    ],
+    "focus_paths": ["."],
+    "acceptance": [
+      "Complete .workflow/docs/README.md following template",
+      "All template sections populated with accurate information",
+      "Navigation links to module and API documentation"
+    ],
+    "scope": "Project root and overall structure"
+  },
+  "flow_control": {
     "pre_analysis": [
       {
-      "step": "system_architecture_analysis",
+        "step": "discover_project_structure",
-      "action": "Discover system architecture and module hierarchy",
+        "action": "Get project module hierarchy metadata",
         "command": "bash(~/.claude/scripts/get_modules_by_depth.sh)",
-      "output_to": "system_structure"
+        "output_to": "system_structure",
-    },
+        "on_error": "fail",
-    {
+        "note": "Lightweight metadata only - no file content"
-      "step": "project_discovery",
-      "action": "Discover project structure and entry points",
-      "command": "bash(find . -type f -name '*.json' -o -name '*.md' -o -name 'package.json' | head -20)",
-      "output_to": "project_structure"
       },
       {
         "step": "analyze_tech_stack",
-      "action": "Analyze technology stack and dependencies using structure analysis",
+        "action": "Analyze technology stack from key config files",
-      "command": "~/.claude/scripts/gemini-wrapper -p \"Analyze project technology stack and dependencies based on: [system_structure]\"",
+        "command": "bash(~/.claude/scripts/gemini-wrapper -p \"PURPOSE: Analyze project technology stack\\nTASK: Extract tech stack from key config files\\nMODE: analysis\\nCONTEXT: @{package.json,pom.xml,build.gradle,requirements.txt,go.mod,Cargo.toml,CLAUDE.md}\\nEXPECTED: Technology list and architecture style\\nRULES: Be concise, focus on stack only\")",
-      "output_to": "tech_analysis"
+        "output_to": "tech_stack_analysis",
+        "on_error": "skip_optional",
+        "note": "Only analyze config files - small, controlled context"
       }
     ],
+    "implementation_approach": {
+      "task_description": "Use system_structure and tech_stack_analysis to populate Project Overview Template",
+      "logic_flow": [
+        "Load template: ~/.claude/workflows/cli-templates/prompts/documentation/project-overview.txt",
+        "Fill sections using [system_structure] and [tech_stack_analysis]",
+        "Generate navigation links based on module paths",
+        "Format output as Markdown"
+      ]
+    },
     "target_files": [".workflow/docs/README.md"]
+  }
 }
 ```
 
-**Module Documentation Task (IMPL-002)**:
+### 2. Module Documentation (IMPL-002+)
+**Purpose**: Module-level documentation
+**Output**: `.workflow/docs/modules/[name]/README.md`
+
+**Complete JSON Structure**:
 ```json
-"flow_control": {
+{
+  "id": "IMPL-002",
+  "title": "Document Module: 'auth'",
+  "status": "pending",
+  "meta": {
+    "type": "docs",
+    "agent": "@doc-generator",
+    "tool": "gemini",
+    "template": "module-documentation"
+  },
+  "context": {
+    "requirements": [
+      "Document module purpose, internal architecture, public API",
+      "Include dependencies and usage examples",
+      "Use Module-Level Documentation Template"
+    ],
+    "focus_paths": ["src/auth"],
+    "acceptance": [
+      "Complete .workflow/docs/modules/auth/README.md",
+      "All exported functions/classes documented",
+      "Working code examples included"
+    ],
+    "scope": "auth module only"
+  },
+  "flow_control": {
     "pre_analysis": [
       {
-      "step": "load_system_structure",
+        "step": "analyze_module_content",
-      "action": "Load system architecture analysis from previous task",
+        "action": "Perform deep analysis of the specific module's content",
-      "command": "bash(cat .workflow/WFS-docs-*/IMPL-001-system_structure.output 2>/dev/null || ~/.claude/scripts/get_modules_by_depth.sh)",
+        "command": "bash(cd src/auth && ~/.claude/scripts/gemini-wrapper -p \"PURPOSE: Document 'auth' module comprehensively\\nTASK: Extract module purpose, architecture, public API, dependencies\\nMODE: analysis\\nCONTEXT: @{**/*}\\nEXPECTED: Structured analysis of module content\\nRULES: $(cat ~/.claude/workflows/cli-templates/prompts/documentation/module-documentation.txt)\")",
-      "output_to": "system_context"
+        "output_to": "module_analysis",
-    },
+        "on_error": "fail",
-    {
+        "note": "Analysis strictly limited to focus_paths ('src/auth') - controlled context"
-      "step": "module_analysis",
-      "action": "Analyze specific module structure and API within system context",
-      "command": "~/.claude/scripts/gemini-wrapper -p \"Analyze module [MODULE_NAME] structure and exported API within system: [system_context]\"",
-      "output_to": "module_context"
       }
     ],
-  "target_files": [".workflow/docs/modules/[MODULE_NAME]/overview.md"]
+    "implementation_approach": {
+      "task_description": "Use the detailed [module_analysis] to populate the Module-Level Documentation Template",
+      "logic_flow": [
+        "Load template: ~/.claude/workflows/cli-templates/prompts/documentation/module-documentation.txt",
+        "Fill sections using [module_analysis]",
+        "Generate code examples from actual usage",
+        "Format output as Markdown"
+      ]
+    },
+    "target_files": [".workflow/docs/modules/auth/README.md"]
+  }
 }
 ```
 
-## Analysis Templates
+### 3. Architecture Documentation (if requested)
+**Purpose**: System design and patterns
+**Output**: `.workflow/docs/architecture/`
 
-### Project Structure Analysis Rules
+**Complete JSON Structure**:
-- Identify main modules and purposes
+```json
-- Map directory organization patterns
+{
-- Extract entry points and configuration files
+  "id": "IMPL-N-1",
-- Recognize architectural styles and design patterns
+  "title": "Generate Architecture Documentation",
-- Analyze module relationships and dependencies
+  "status": "pending",
-- Document technology stack and requirements
+  "meta": {
+    "type": "docs",
+    "agent": "@doc-generator",
+    "tool": "qwen",
+    "template": "architecture"
+  },
+  "context": {
+    "requirements": [
+      "Document system design patterns and architectural decisions",
+      "Create module interaction diagrams",
+      "Explain data flow and component relationships"
+    ],
+    "focus_paths": ["."],
+    "acceptance": [
+      "Complete architecture documentation in .workflow/docs/architecture/",
+      "Diagrams explaining system design",
+      "Clear explanation of architectural patterns"
+    ]
+  },
+  "flow_control": {
+    "pre_analysis": [
+      {
+        "step": "load_all_module_docs",
+        "action": "Aggregate all module documentation",
+        "command": "bash(find .workflow/docs/modules -name 'README.md' -exec cat {} \\;)",
+        "output_to": "module_docs",
+        "on_error": "fail"
+      },
+      {
+        "step": "analyze_architecture",
+        "action": "Synthesize system architecture from modules",
+        "command": "bash(~/.claude/scripts/gemini-wrapper -p \"PURPOSE: Synthesize system architecture\\nTASK: Create architecture documentation from module docs\\nMODE: analysis\\nCONTEXT: [module_docs]\\nEXPECTED: Architecture documentation with patterns\\nRULES: $(cat ~/.claude/workflows/cli-templates/prompts/documentation/project-overview.txt) | Focus on design patterns, data flow, component interactions\")",
+        "output_to": "architecture_analysis",
+        "on_error": "fail",
+        "note": "Command varies: gemini-wrapper (default) | qwen-wrapper | codex exec"
+      }
+    ],
+    "implementation_approach": {
+      "task_description": "Create architecture documentation from synthesis",
+      "logic_flow": [
+        "Parse architecture_analysis for patterns and design decisions",
+        "Create text-based diagrams (mermaid/ASCII) for module interactions",
+        "Document data flow between components",
+        "Explain architectural decisions and trade-offs",
+        "Format as structured documentation"
+      ]
+    },
+    "target_files": [
+      ".workflow/docs/architecture/system-design.md",
+      ".workflow/docs/architecture/module-map.md",
+      ".workflow/docs/architecture/data-flow.md"
+    ]
+  }
+}
+```
 
-### Module Analysis Rules
+### 4. API Documentation (if requested)
-- Identify module boundaries and entry points
+**Purpose**: API reference and specifications
-- Extract exported functions, classes, interfaces
+**Output**: `.workflow/docs/api/README.md`
-- Document internal organization and structure
-- Analyze API surfaces with types and parameters
-- Map dependencies within and between modules
-- Extract usage patterns and examples
 
-### API Analysis Rules
+**Complete JSON Structure**:
-- Classify endpoint types (REST, GraphQL, WebSocket, RPC)
+```json
-- Extract request/response parameters and schemas
+{
-- Document authentication and authorization requirements
+  "id": "IMPL-N",
-- Generate OpenAPI 3.0 specification structure
+  "title": "Generate Unified API Documentation",
-- Create comprehensive endpoint documentation
+  "status": "pending",
-- Provide usage examples and integration guides
+  "meta": {
+    "type": "docs",
+    "agent": "@doc-generator",
+    "tool": "gemini",
+    "template": "api-reference"
+  },
+  "context": {
+    "requirements": [
+      "Document all API endpoints with request/response formats",
+      "Include authentication and error handling",
+      "Generate OpenAPI specification if applicable",
+      "Use API-Level Documentation Template"
+    ],
+    "focus_paths": ["src/api", "src/routes", "src/controllers"],
+    "acceptance": [
+      "Complete .workflow/docs/api/README.md following template",
+      "All endpoints documented with examples",
+      "OpenAPI spec generated if REST API detected"
+    ]
+  },
+  "flow_control": {
+    "pre_analysis": [
+      {
+        "step": "discover_api_endpoints",
+        "action": "Find all API routes and endpoints using MCP",
+        "command": "mcp__code-index__search_code_advanced(pattern='router\\.|app\\.|@(Get|Post|Put|Delete|Patch)', file_pattern='*.{ts,js}', output_mode='content', head_limit=100)",
+        "output_to": "endpoint_discovery",
+        "on_error": "skip_optional",
+        "note": "Use MCP instead of rg for better structure"
+      },
+      {
+        "step": "analyze_api_structure",
+        "action": "Analyze API structure and patterns",
+        "command": "bash(~/.claude/scripts/gemini-wrapper -p \"PURPOSE: Document API comprehensively\\nTASK: Extract endpoints, auth, request/response formats\\nMODE: analysis\\nCONTEXT: @{src/api/**/*,src/routes/**/*,src/controllers/**/*}\\nEXPECTED: Complete API documentation\\nRULES: $(cat ~/.claude/workflows/cli-templates/prompts/documentation/api-reference.txt)\")",
+        "output_to": "api_analysis",
+        "on_error": "fail",
+        "note": "Analysis limited to API-related paths - controlled context"
+      }
+    ],
+    "implementation_approach": {
+      "task_description": "Use api_analysis to populate API-Level Documentation Template",
+      "logic_flow": [
+        "Load template: ~/.claude/workflows/cli-templates/prompts/documentation/api-reference.txt",
+        "Parse api_analysis for: endpoints, auth, request/response",
+        "Fill template sections with extracted information",
+        "Generate OpenAPI spec if REST API detected",
+        "Format output as Markdown"
+      ]
+    },
+    "target_files": [
+      ".workflow/docs/api/README.md",
+      ".workflow/docs/api/openapi.yaml"
+    ]
+  }
+}
+```
+
+## Planning Outputs
+
+### File Structure
+```
+.workflow/
+├── .active-WFS-docs-20240120-143022
+└── WFS-docs-20240120-143022/
+    ├── IMPL_PLAN.md              # Implementation plan
+    ├── TODO_LIST.md              # Progress tracker
+    ├── .process/
+    │   ├── strategy.md           # Doc strategy
+    │   └── existing-docs.txt     # Existing docs list
+    └── .task/
+        ├── IMPL-001.json         # System overview
+        ├── IMPL-002.json         # Module: auth
+        ├── IMPL-003.json         # Module: api
+        ├── IMPL-004.json         # Architecture
+        └── IMPL-005.json         # API docs
+```
+
+### IMPL_PLAN.md
+```markdown
+# Documentation Implementation Plan
+
+**Session**: WFS-docs-[timestamp]
+**Type**: [architecture|api|all]
+**Tool**: [gemini|qwen|codex]
+
+## Task Breakdown
+
+### IMPL-001: System Overview
+- **Output**: .workflow/docs/README.md
+- **Template**: project-overview.txt
+
+### IMPL-002+: Module Documentation
+- **Modules**: [list]
+- **Template**: module-documentation.txt
+
+### IMPL-N: Architecture/API (if requested)
+- **Template**: architecture.txt / api-reference.txt
+
+## Execution Order
+1. IMPL-001 (Foundation)
+2. IMPL-002 to IMPL-[M] (Modules - can parallelize)
+3. IMPL-[M+1] (Architecture - needs modules)
+4. IMPL-[N] (API - can run after IMPL-001)
+```
+
+### TODO_LIST.md
+```markdown
+# Documentation Progress Tracker
+
+- [ ] **IMPL-001**: Generate Project Overview
+- [ ] **IMPL-002**: Document Module: 'auth'
+- [ ] **IMPL-003**: Document Module: 'api'
+- [ ] **IMPL-004**: Generate Architecture Documentation
+- [ ] **IMPL-005**: Generate Unified API Documentation
+
+## Execution
+```bash
+/workflow:execute IMPL-001
+/workflow:execute IMPL-002
+# ...
+```
+```
+
+## Execution Phase
+
+### Via /workflow:execute
+
+```
+For Each Task (IMPL-001, IMPL-002, ...):
+
+/workflow:execute IMPL-NNN
+    ↓
+TodoWrite: pending → in_progress
+    ↓
+Execute flow_control (pre_analysis steps)
+    ↓
+Generate Documentation (apply template)
+    ↓
+TodoWrite: in_progress → completed
+    ↓
+✅ Task Complete
+```
+
+### TodoWrite Status Tracking
+
+**Planning Phase**:
+```
+✅ Session initialization (completed)
+⏳ IMPL-001: Project Overview (pending)
+⏳ IMPL-002: Module 'auth' (pending)
+```
+
+**Execution Phase**:
+```
+Executing IMPL-001:
+✅ Session initialization
+🔄 IMPL-001: Project Overview (in_progress)
+⏳ IMPL-002: Module 'auth'
+
+After IMPL-001:
+✅ Session initialization
+✅ IMPL-001: Project Overview (completed)
+🔄 IMPL-002: Module 'auth' (in_progress)
+```
+
+## Documentation Output
+
+### Final Structure
+```
+.workflow/docs/
+├── README.md                     # IMPL-001: Project overview
+├── modules/
+│   ├── auth/README.md           # IMPL-002: Auth module
+│   └── api/README.md            # IMPL-003: API module
+├── architecture/                # IMPL-004: Architecture
+│   ├── system-design.md
+│   ├── module-map.md
+│   └── data-flow.md
+└── api/                         # IMPL-005: API docs
+    ├── README.md
+    └── openapi.yaml
+```
+
+## Next Steps
+
+### 1. Review Planning Output
+```bash
+cat .workflow/WFS-docs-*/IMPL_PLAN.md
+cat .workflow/WFS-docs-*/TODO_LIST.md
+```
+
+### 2. Execute Documentation Tasks
+```bash
+# Sequential (recommended)
+/workflow:execute IMPL-001  # System overview first
+/workflow:execute IMPL-002  # Module docs
+/workflow:execute IMPL-003
+/workflow:execute IMPL-004  # Architecture
+/workflow:execute IMPL-005  # API docs
+
+# Parallel (module docs only)
+/workflow:execute IMPL-002 &
+/workflow:execute IMPL-003 &
+wait
+```
+
+### 3. Review Generated Documentation
+```bash
+ls -lah .workflow/docs/
+cat .workflow/docs/README.md
+```
+
+### 4. TodoWrite Progress
+- Planning: All tasks `pending`
+- Execution: `pending` → `in_progress` → `completed`
+- Real-time status updates via TodoWrite
 
 ## Error Handling
-- **Invalid document type**: Clear error message with valid options
+
-- **Module not found**: Skip missing modules with warning
+- **No modules found**: Create only IMPL-001 (system overview)
-- **Analysis failures**: Fall back to file-based analysis
+- **Scope path invalid**: Show error and exit
-- **Permission issues**: Clear guidance on directory access
+- **Active session exists**: Prompt to complete or pause
+- **Tool unavailable**: Fall back to gemini
 
 ## Key Benefits
 
-### Structured Documentation Process
+### Clear Separation of Concerns
-- **Task-based approach**: Documentation broken into manageable, trackable tasks
+- **Planning**: Session creation, task decomposition (this command)
-- **Flow control integration**: Systematic analysis ensures completeness
+- **Execution**: Content generation, quality assurance (doc-generator agent)
-- **Progress visibility**: TODO_LIST.md provides clear completion status
-- **Quality assurance**: Each task has defined acceptance criteria
 
-### Workflow Integration
+### Scalable Task Management
-- **Planning foundation**: Documentation provides context for implementation planning
+- Independent, self-contained tasks
-- **Execution consistency**: Same task execution model as implementation
+- Parallelizable module documentation
-- **Context accumulation**: Documentation builds comprehensive project understanding
+- Clear dependencies (architecture needs modules)
 
-## Usage Examples
+### Template-Driven Consistency
+- All documentation follows standard templates
+- Reusable and maintainable
+- Easy to update standards
 
-### Complete Documentation Workflow
+### Full Context for Execution
-```bash
+- Each task JSON contains complete instructions
-# Step 1: Create documentation plan and tasks
+- flow_control defines exact analysis steps
-/workflow:docs all
+- Tool selection for flexibility
-
-# Step 2: Execute documentation tasks (after planning)
-/workflow:execute IMPL-001  # System overview
-/workflow:execute IMPL-002  # Module documentation
-/workflow:execute IMPL-003  # Architecture documentation
-/workflow:execute IMPL-004  # API documentation
-```
-The system creates structured documentation tasks with proper session management, task.json files, and integration with the broader workflow system for systematic and trackable documentation generation.

.claude/commands/workflow/tools/status.md

@@ -1,258 +0,0 @@
----
-name: workflow:status
-description: Generate on-demand views from JSON task data
-usage: /workflow:status [task-id] [--format=<format>] [--validate]
-argument-hint: [optional: task-id, format, validation]
-examples:
-  - /workflow:status
-  - /workflow:status impl-1
-  - /workflow:status --format=hierarchy
-  - /workflow:status --validate
----
-
-# Workflow Status Command (/workflow:status)
-
-## Overview
-Generates on-demand views from JSON task data. No synchronization needed - all views are calculated from the current state of JSON files.
-
-## Core Principles
-**Data Source:** @~/.claude/workflows/workflow-architecture.md
-
-## Key Features
-
-### Pure View Generation
-- **No Sync**: Views are generated, not synchronized
-- **Always Current**: Reads latest JSON data every time
-- **No Persistence**: Views are temporary, not saved
-- **Single Source**: All data comes from JSON files only
-
-### Multiple View Formats
-- **Overview** (default): Current tasks and status
-- **Hierarchy**: Task relationships and structure
-- **Details**: Specific task information
-
-## Usage
-
-### Default Overview
-```bash
-/workflow:status
-```
-
-Generates current workflow overview:
-```markdown
-# Workflow Overview
-**Session**: WFS-user-auth
-**Phase**: IMPLEMENT
-**Type**: medium
-
-## Active Tasks
-- [⚠️] impl-1: Build authentication module (code-developer)
-- [⚠️] impl-2: Setup user management (code-developer)
-
-## Completed Tasks
-- [✅] impl-0: Project setup
-
-## Stats
-- **Total**: 8 tasks
-- **Completed**: 3
-- **Active**: 2
-- **Remaining**: 3
-```
-
-### Specific Task View
-```bash
-/workflow:status impl-1
-```
-
-Shows detailed task information:
-```markdown
-# Task: impl-1
-
-**Title**: Build authentication module
-**Status**: active
-**Agent**: @code-developer
-**Type**: feature
-
-## Context
-- **Requirements**: JWT authentication, OAuth2 support
-- **Scope**: src/auth/*, tests/auth/*
-- **Acceptance**: Module handles JWT tokens, OAuth2 flow implemented
-- **Inherited From**: WFS-user-auth
-
-## Relations
-- **Parent**: none
-- **Subtasks**: impl-1.1, impl-1.2
-- **Dependencies**: impl-0
-
-## Execution
-- **Attempts**: 0
-- **Last Attempt**: never
-
-## Metadata
-- **Created**: 2025-09-05T10:30:00Z
-- **Updated**: 2025-09-05T10:35:00Z
-```
-
-### Hierarchy View
-```bash
-/workflow:status --format=hierarchy
-```
-
-Shows task relationships:
-```markdown
-# Task Hierarchy
-
-## Main Tasks
-- impl-0: Project setup ✅
-- impl-1: Build authentication module ⚠️
-  - impl-1.1: Design auth schema
-  - impl-1.2: Implement auth logic
-- impl-2: Setup user management ⚠️
-
-## Dependencies
-- impl-1 → depends on → impl-0
-- impl-2 → depends on → impl-1
-```
-
-## View Generation Process
-
-### Data Loading
-```pseudo
-function generate_workflow_status(task_id, format):
-  // Load all current data
-  session = load_workflow_session()
-  all_tasks = load_all_task_json_files()
-
-  // Filter if specific task requested
-  if task_id:
-    target_task = find_task(all_tasks, task_id)
-    return generate_task_detail_view(target_task)
-
-  // Generate requested format
-  switch format:
-    case 'hierarchy':
-      return generate_hierarchy_view(all_tasks)
-    default:
-      return generate_overview(session, all_tasks)
-```
-
-### Real-Time Calculation
-- **Task Counts**: Calculated from JSON file status fields
-- **Relationships**: Built from JSON relations fields
-- **Status**: Read directly from current JSON state
-
-## Validation Mode
-
-### Basic Validation
-```bash
-/workflow:status --validate
-```
-
-Performs integrity checks:
-```markdown
-# Validation Results
-
-## JSON File Validation
-✅ All task JSON files are valid
-✅ Session file is valid and readable
-
-## Relationship Validation
-✅ All parent-child relationships are valid
-✅ All dependencies reference existing tasks
-✅ No circular dependencies detected
-
-## Hierarchy Validation
-✅ Task hierarchy within depth limits (max 3 levels)
-✅ All subtask references are bidirectional
-
-## Issues Found
-⚠️ impl-3: No subtasks defined (expected for leaf task)
-
-**Status**: All systems operational
-```
-
-### Validation Checks
-- **JSON Schema**: All files parse correctly
-- **References**: All task IDs exist
-- **Hierarchy**: Parent-child relationships are valid
-- **Dependencies**: No circular dependencies
-- **Depth**: Task hierarchy within limits
-
-## Error Handling
-
-### Missing Files
-```bash
-❌ Session file not found
-→ Initialize new workflow session? (y/n)
-
-❌ Task impl-5 not found
-→ Available tasks: impl-1, impl-2, impl-3, impl-4
-```
-
-### Invalid Data
-```bash
-❌ Invalid JSON in impl-2.json
-→ Cannot generate view for impl-2
-→ Repair file manually or recreate task
-
-⚠️ Circular dependency detected: impl-1 → impl-2 → impl-1
-→ Task relationships may be incorrect
-```
-
-## Performance Benefits
-
-### Fast Generation
-- **No File Writes**: Only reads JSON files
-- **No Sync Logic**: No complex synchronization
-- **Instant Results**: Generate views on demand
-- **No Conflicts**: No state consistency issues
-
-### Scalability
-- **Large Task Sets**: Handles hundreds of tasks efficiently
-- **Complex Hierarchies**: No performance degradation
-- **Concurrent Access**: Multiple views can be generated simultaneously
-
-## Integration
-
-### Workflow Integration
-- Use after task creation to see current state
-- Use for debugging task relationships
-
-### Command Integration
-```bash
-# Common workflow
-/task:create "New feature"
-/workflow:status                    # Check current state
-/task:breakdown impl-1
-/workflow:status --format=hierarchy # View new structure
-/task:execute impl-1.1
-```
-
-## Output Formats
-
-### Supported Formats
-- `overview` (default): General workflow status
-- `hierarchy`: Task relationships
-- `tasks`: Simple task list
-- `details`: Comprehensive information
-
-### Custom Filtering
-```bash
-# Show only active tasks
-/workflow:status --format=tasks --filter=active
-
-# Show completed tasks only
-/workflow:status --format=tasks --filter=completed
-
-# Show tasks for specific agent
-/workflow:status --format=tasks --agent=@code-developer
-```
-
-## Related Commands
-
-- `/task:create` - Create tasks (generates JSON data)
-- `/task:execute` - Execute tasks (updates JSON data)
-- `/task:breakdown` - Create subtasks (generates more JSON data)
-- `/workflow:vibe` - Coordinate agents (uses workflow status for coordination)
-
-This workflow status system provides instant, accurate views of workflow state without any synchronization complexity or performance overhead.

.claude/commands/workflow/tools/task-generate-agent.md

@@ -238,35 +238,231 @@ Task(
 \`\`\`markdown
 ---
 identifier: WFS-{session-id}
-source: "User requirements"
+source: "User requirements" | "File: path" | "Issue: ISS-001"
 analysis: .workflow/{session-id}/.process/ANALYSIS_RESULTS.md
+artifacts: .workflow/{session-id}/.brainstorming/
+context_package: .workflow/{session-id}/.process/context-package.json  # CCW smart context
+workflow_type: "standard | tdd | design"  # Indicates execution model
+verification_history:  # CCW quality gates
+  concept_verify: "passed | skipped | pending"
+  action_plan_verify: "pending"
+phase_progression: "brainstorm → context → analysis → concept_verify → planning"  # CCW workflow phases
 ---
 
 # Implementation Plan: {Project Title}
 
-## Summary
+## 1. Summary
-Core requirements, objectives, and technical approach.
+Core requirements, objectives, technical approach summary (2-3 paragraphs max).
 
-## Context Analysis
+**Core Objectives**:
-- **Project**: Type, patterns, tech stack
+- [Key objective 1]
-- **Modules**: Components and integration points
+- [Key objective 2]
-- **Dependencies**: External libraries and constraints
-- **Patterns**: Code conventions and guidelines
 
-## Brainstorming Artifacts
+**Technical Approach**:
-- synthesis-specification.md (Highest priority)
+- [High-level approach]
-- topic-framework.md (Medium priority)
-- Role analyses: ui-designer, system-architect, etc.
 
-## Task Breakdown
+## 2. Context Analysis
-- **Task Count**: N tasks, complexity level
-- **Hierarchy**: Flat/Two-level structure
-- **Dependencies**: Task dependency graph
 
-## Implementation Plan
+### CCW Workflow Context
-- **Execution Strategy**: Sequential/Parallel approach
+**Phase Progression**:
-- **Resource Requirements**: Tools, dependencies, artifacts
+- ✅ Phase 1: Brainstorming (synthesis-specification.md generated)
-- **Success Criteria**: Metrics and acceptance conditions
+- ✅ Phase 2: Context Gathering (context-package.json: {N} files, {M} modules analyzed)
+- ✅ Phase 3: Enhanced Analysis (ANALYSIS_RESULTS.md: Gemini/Qwen/Codex parallel insights)
+- ✅ Phase 4: Concept Verification ({X} clarifications answered, synthesis updated | skipped)
+- ⏳ Phase 5: Action Planning (current phase - generating IMPL_PLAN.md)
+
+**Quality Gates**:
+- concept-verify: ✅ Passed (0 ambiguities remaining) | ⏭️ Skipped (user decision) | ⏳ Pending
+- action-plan-verify: ⏳ Pending (recommended before /workflow:execute)
+
+**Context Package Summary**:
+- **Focus Paths**: {list key directories from context-package.json}
+- **Key Files**: {list primary files for modification}
+- **Module Depth Analysis**: {from get_modules_by_depth.sh output}
+- **Smart Context**: {total file count} files, {module count} modules, {dependency count} dependencies identified
+
+### Project Profile
+- **Type**: Greenfield/Enhancement/Refactor
+- **Scale**: User count, data volume, complexity
+- **Tech Stack**: Primary technologies
+- **Timeline**: Duration and milestones
+
+### Module Structure
+\`\`\`
+[Directory tree showing key modules]
+\`\`\`
+
+### Dependencies
+**Primary**: [Core libraries and frameworks]
+**APIs**: [External services]
+**Development**: [Testing, linting, CI/CD tools]
+
+### Patterns & Conventions
+- **Architecture**: [Key patterns like DI, Event-Driven]
+- **Component Design**: [Design patterns]
+- **State Management**: [State strategy]
+- **Code Style**: [Naming, TypeScript coverage]
+
+## 3. Brainstorming Artifacts Reference
+
+### Artifact Usage Strategy
+**Primary Reference (synthesis-specification.md)**:
+- **What**: Comprehensive implementation blueprint from multi-role synthesis
+- **When**: Every task references this first for requirements and design decisions
+- **How**: Extract architecture decisions, UI/UX patterns, functional requirements, non-functional requirements
+- **Priority**: Authoritative - overrides role-specific analyses when conflicts arise
+- **CCW Value**: Consolidates insights from all brainstorming roles into single source of truth
+
+**Context Intelligence (context-package.json)**:
+- **What**: Smart context gathered by CCW's context-gather phase
+- **Content**: Focus paths, dependency graph, existing patterns, module structure
+- **Usage**: Tasks load this via \`flow_control.preparatory_steps\` for environment setup
+- **CCW Value**: Automated intelligent context discovery replacing manual file exploration
+
+**Technical Analysis (ANALYSIS_RESULTS.md)**:
+- **What**: Gemini/Qwen/Codex parallel analysis results
+- **Content**: Optimization strategies, risk assessment, architecture review, implementation patterns
+- **Usage**: Referenced in task planning for technical guidance and risk mitigation
+- **CCW Value**: Multi-model parallel analysis providing comprehensive technical intelligence
+
+### Integrated Specifications (Highest Priority)
+- **synthesis-specification.md**: Comprehensive implementation blueprint
+  - Contains: Architecture design, UI/UX guidelines, functional/non-functional requirements, implementation roadmap, risk assessment
+
+### Supporting Artifacts (Reference)
+- **topic-framework.md**: Role-specific discussion points and analysis framework
+- **system-architect/analysis.md**: Detailed architecture specifications
+- **ui-designer/analysis.md**: Layout and component specifications
+- **product-manager/analysis.md**: Product vision and user stories
+
+**Artifact Priority in Development**:
+1. synthesis-specification.md (primary reference for all tasks)
+2. context-package.json (smart context for execution environment)
+3. ANALYSIS_RESULTS.md (technical analysis and optimization strategies)
+4. Role-specific analyses (fallback for detailed specifications)
+
+## 4. Implementation Strategy
+
+### Execution Strategy
+**Execution Model**: [Sequential | Parallel | Phased | TDD Cycles]
+
+**Rationale**: [Why this execution model fits the project]
+
+**Parallelization Opportunities**:
+- [List independent workstreams]
+
+**Serialization Requirements**:
+- [List critical dependencies]
+
+### Architectural Approach
+**Key Architecture Decisions**:
+- [ADR references from synthesis]
+- [Justification for architecture patterns]
+
+**Integration Strategy**:
+- [How modules communicate]
+- [State management approach]
+
+### Key Dependencies
+**Task Dependency Graph**:
+\`\`\`
+[High-level dependency visualization]
+\`\`\`
+
+**Critical Path**: [Identify bottleneck tasks]
+
+### Testing Strategy
+**Testing Approach**:
+- Unit testing: [Tools, scope]
+- Integration testing: [Key integration points]
+- E2E testing: [Critical user flows]
+
+**Coverage Targets**:
+- Lines: ≥70%
+- Functions: ≥70%
+- Branches: ≥65%
+
+**Quality Gates**:
+- [CI/CD gates]
+- [Performance budgets]
+
+## 5. Task Breakdown Summary
+
+### Task Count
+**{N} tasks** (flat hierarchy | two-level hierarchy, sequential | parallel execution)
+
+### Task Structure
+- **IMPL-1**: [Main task title]
+- **IMPL-2**: [Main task title]
+...
+
+### Complexity Assessment
+- **High**: [List with rationale]
+- **Medium**: [List]
+- **Low**: [List]
+
+### Dependencies
+[Reference Section 4.3 for dependency graph]
+
+**Parallelization Opportunities**:
+- [Specific task groups that can run in parallel]
+
+## 6. Implementation Plan (Detailed Phased Breakdown)
+
+### Execution Strategy
+
+**Phase 1 (Weeks 1-2): [Phase Name]**
+- **Tasks**: IMPL-1, IMPL-2
+- **Deliverables**:
+  - [Specific deliverable 1]
+  - [Specific deliverable 2]
+- **Success Criteria**:
+  - [Measurable criterion]
+
+**Phase 2 (Weeks 3-N): [Phase Name]**
+...
+
+### Resource Requirements
+
+**Development Team**:
+- [Team composition and skills]
+
+**External Dependencies**:
+- [Third-party services, APIs]
+
+**Infrastructure**:
+- [Development, staging, production environments]
+
+## 7. Risk Assessment & Mitigation
+
+| Risk | Impact | Probability | Mitigation Strategy | Owner |
+|------|--------|-------------|---------------------|-------|
+| [Risk description] | High/Med/Low | High/Med/Low | [Strategy] | [Role] |
+
+**Critical Risks** (High impact + High probability):
+- [Risk 1]: [Detailed mitigation plan]
+
+**Monitoring Strategy**:
+- [How risks will be monitored]
+
+## 8. Success Criteria
+
+**Functional Completeness**:
+- [ ] All requirements from synthesis-specification.md implemented
+- [ ] All acceptance criteria from task.json files met
+
+**Technical Quality**:
+- [ ] Test coverage ≥70%
+- [ ] Bundle size within budget
+- [ ] Performance targets met
+
+**Operational Readiness**:
+- [ ] CI/CD pipeline operational
+- [ ] Monitoring and logging configured
+- [ ] Documentation complete
+
+**Business Metrics**:
+- [ ] [Key business metrics from synthesis]
 \`\`\`
 
 #### 3. TODO_LIST.md

.claude/commands/workflow/tools/task-generate-tdd.md

@@ -305,27 +305,279 @@ For each feature, generate 3 tasks with ID format:
 
 ### Phase 4: Unified IMPL_PLAN.md Generation
 
-Generate single comprehensive IMPL_PLAN.md with:
+Generate single comprehensive IMPL_PLAN.md with enhanced 8-section structure:
 
 **Frontmatter**:
 ```yaml
 ---
 identifier: WFS-{session-id}
-workflow_type: "tdd"
+source: "User requirements" | "File: path" | "Issue: ISS-001"
+analysis: .workflow/{session-id}/.process/ANALYSIS_RESULTS.md
+artifacts: .workflow/{session-id}/.brainstorming/
+context_package: .workflow/{session-id}/.process/context-package.json  # CCW smart context
+workflow_type: "tdd"  # TDD-specific workflow
+verification_history:  # CCW quality gates
+  concept_verify: "passed | skipped | pending"
+  action_plan_verify: "pending"
+phase_progression: "brainstorm → context → test_context → analysis → concept_verify → tdd_planning"  # TDD workflow phases
 feature_count: N
 task_count: 3N
 tdd_chains: N
 ---
 ```
 
-**Structure**:
+**Complete Structure** (8 Sections):
-1. **Summary**: Project overview
+
-2. **TDD Task Chains** (TDD-specific section):
+```markdown
-   - Visual representation of TEST → IMPL → REFACTOR chains
+# Implementation Plan: {Project Title}
-   - Feature-by-feature breakdown with phase indicators
+
-3. **Task Breakdown**: Standard task listing
+## 1. Summary
-4. **Implementation Strategy**: Execution approach
+Core requirements, objectives, and TDD-specific technical approach (2-3 paragraphs max).
-5. **Success Criteria**: Acceptance conditions
+
+**Core Objectives**:
+- [Key objective 1]
+- [Key objective 2]
+
+**Technical Approach**:
+- TDD-driven development with Red-Green-Refactor cycles
+- [Other high-level approaches]
+
+## 2. Context Analysis
+
+### CCW Workflow Context
+**Phase Progression** (TDD-specific):
+- ✅ Phase 1: Brainstorming (synthesis-specification.md generated)
+- ✅ Phase 2: Context Gathering (context-package.json: {N} files, {M} modules analyzed)
+- ✅ Phase 3: Test Coverage Analysis (test-context-package.json: existing test patterns identified)
+- ✅ Phase 4: TDD Analysis (ANALYSIS_RESULTS.md: test-first requirements with Gemini/Qwen insights)
+- ✅ Phase 5: Concept Verification ({X} clarifications answered, test requirements clarified | skipped)
+- ⏳ Phase 6: TDD Task Generation (current phase - generating IMPL_PLAN.md with TDD chains)
+
+**Quality Gates**:
+- concept-verify: ✅ Passed (test requirements clarified, 0 ambiguities) | ⏭️ Skipped (user decision) | ⏳ Pending
+- action-plan-verify: ⏳ Pending (recommended before /workflow:execute for TDD dependency validation)
+
+**Context Package Summary**:
+- **Focus Paths**: {list key directories from context-package.json}
+- **Key Files**: {list primary files for modification}
+- **Test Context**: {existing test patterns, coverage baseline, test framework detected}
+- **Module Depth Analysis**: {from get_modules_by_depth.sh output}
+- **Smart Context**: {total file count} files, {module count} modules, {test file count} tests identified
+
+### Project Profile
+- **Type**: Greenfield/Enhancement/Refactor
+- **Scale**: User count, data volume, complexity
+- **Tech Stack**: Primary technologies
+- **Timeline**: Duration and milestones
+- **TDD Framework**: Testing framework and tools
+
+### Module Structure
+```
+[Directory tree showing key modules and test directories]
+```
+
+### Dependencies
+**Primary**: [Core libraries and frameworks]
+**Testing**: [Test framework, mocking libraries]
+**Development**: [Linting, CI/CD tools]
+
+### Patterns & Conventions
+- **Architecture**: [Key patterns]
+- **Testing Patterns**: [Unit, integration, E2E patterns]
+- **Code Style**: [Naming, TypeScript coverage]
+
+## 3. Brainstorming Artifacts Reference
+
+### Artifact Usage Strategy
+**Primary Reference (synthesis-specification.md)**:
+- **What**: Comprehensive implementation blueprint from multi-role synthesis
+- **When**: Every TDD task (TEST/IMPL/REFACTOR) references this for requirements and acceptance criteria
+- **How**: Extract testable requirements, architecture decisions, expected behaviors
+- **Priority**: Authoritative - defines what to test and how to implement
+- **CCW Value**: Consolidates insights from all brainstorming roles into single source of truth for TDD
+
+**Context Intelligence (context-package.json & test-context-package.json)**:
+- **What**: Smart context from CCW's context-gather and test-context-gather phases
+- **Content**: Focus paths, dependency graph, existing test patterns, test framework configuration
+- **Usage**: RED phase loads test patterns, GREEN phase loads implementation context
+- **CCW Value**: Automated discovery of existing tests and patterns for TDD consistency
+
+**Technical Analysis (ANALYSIS_RESULTS.md)**:
+- **What**: Gemini/Qwen parallel analysis with TDD-specific breakdown
+- **Content**: Testable requirements, test scenarios, implementation strategies, risk assessment
+- **Usage**: RED phase references test cases, GREEN phase references implementation approach
+- **CCW Value**: Multi-model analysis providing comprehensive TDD guidance
+
+### Integrated Specifications (Highest Priority)
+- **synthesis-specification.md**: Comprehensive implementation blueprint
+  - Contains: Architecture design, functional/non-functional requirements
+
+### Supporting Artifacts (Reference)
+- **topic-framework.md**: Discussion framework
+- **system-architect/analysis.md**: Architecture specifications
+- **Role-specific analyses**: [Other relevant analyses]
+
+**Artifact Priority in Development**:
+1. synthesis-specification.md (primary reference for test cases and implementation)
+2. test-context-package.json (existing test patterns for TDD consistency)
+3. context-package.json (smart context for execution environment)
+4. ANALYSIS_RESULTS.md (technical analysis with TDD breakdown)
+5. Role-specific analyses (supplementary)
+
+## 4. Implementation Strategy
+
+### Execution Strategy
+**Execution Model**: TDD Cycles (Red-Green-Refactor)
+
+**Rationale**: Test-first approach ensures correctness and reduces bugs
+
+**TDD Cycle Pattern**:
+- RED: Write failing test
+- GREEN: Implement minimal code to pass (with test-fix cycle if needed)
+- REFACTOR: Improve code quality while keeping tests green
+
+**Parallelization Opportunities**:
+- [Independent features that can be developed in parallel]
+
+### Architectural Approach
+**Key Architecture Decisions**:
+- [ADR references from synthesis]
+- [TDD-compatible architecture patterns]
+
+**Integration Strategy**:
+- [How modules communicate]
+- [Test isolation strategy]
+
+### Key Dependencies
+**Task Dependency Graph**:
+```
+Feature 1:
+  TEST-1.1 (RED)
+      ↓
+  IMPL-1.1 (GREEN) [with test-fix cycle]
+      ↓
+  REFACTOR-1.1 (REFACTOR)
+
+Feature 2:
+  TEST-2.1 (RED) [depends on REFACTOR-1.1 if related]
+      ↓
+  IMPL-2.1 (GREEN)
+      ↓
+  REFACTOR-2.1 (REFACTOR)
+```
+
+**Critical Path**: [Identify bottleneck features]
+
+### Testing Strategy
+**TDD Testing Approach**:
+- Unit testing: Each feature has comprehensive unit tests
+- Integration testing: Cross-feature integration
+- E2E testing: Critical user flows after all TDD cycles
+
+**Coverage Targets**:
+- Lines: ≥80% (TDD ensures high coverage)
+- Functions: ≥80%
+- Branches: ≥75%
+
+**Quality Gates**:
+- All tests must pass before moving to next phase
+- Refactor phase must maintain test success
+
+## 5. TDD Task Chains (TDD-Specific Section)
+
+### Feature-by-Feature TDD Chains
+
+**Feature 1: {Feature Name}**
+```
+🔴 TEST-1.1: Write failing test for {feature}
+    ↓
+🟢 IMPL-1.1: Implement to pass tests (includes test-fix cycle: max 3 iterations)
+    ↓
+🔵 REFACTOR-1.1: Refactor implementation while keeping tests green
+```
+
+**Feature 2: {Feature Name}**
+```
+🔴 TEST-2.1: Write failing test for {feature}
+    ↓
+🟢 IMPL-2.1: Implement to pass tests (includes test-fix cycle)
+    ↓
+🔵 REFACTOR-2.1: Refactor implementation
+```
+
+[Continue for all N features]
+
+### TDD Task Breakdown Summary
+- **Total Features**: {N}
+- **Total Tasks**: {3N} (N TEST + N IMPL + N REFACTOR)
+- **TDD Chains**: {N}
+
+## 6. Implementation Plan (Detailed Phased Breakdown)
+
+### Execution Strategy
+
+**TDD Cycle Execution**: Feature-by-feature sequential TDD cycles
+
+**Phase 1 (Weeks 1-2): Foundation Features**
+- **Features**: Feature 1, Feature 2
+- **Tasks**: TEST-1.1, IMPL-1.1, REFACTOR-1.1, TEST-2.1, IMPL-2.1, REFACTOR-2.1
+- **Deliverables**:
+  - Complete TDD cycles for foundation features
+  - All tests passing
+- **Success Criteria**:
+  - ≥80% test coverage
+  - All RED-GREEN-REFACTOR cycles completed
+
+**Phase 2 (Weeks 3-N): Advanced Features**
+[Continue with remaining features]
+
+### Resource Requirements
+
+**Development Team**:
+- [Team composition with TDD experience]
+
+**External Dependencies**:
+- [Testing frameworks, mocking services]
+
+**Infrastructure**:
+- [CI/CD with test automation]
+
+## 7. Risk Assessment & Mitigation
+
+| Risk | Impact | Probability | Mitigation Strategy | Owner |
+|------|--------|-------------|---------------------|-------|
+| Tests fail repeatedly in GREEN phase | High | Medium | Test-fix cycle (max 3 iterations) with auto-revert | Dev Team |
+| Complex features hard to test | High | Medium | Break down into smaller testable units | Architect |
+| [Other risks] | Med/Low | Med/Low | [Strategies] | [Owner] |
+
+**Critical Risks** (TDD-Specific):
+- **GREEN phase failures**: Mitigated by test-fix cycle with Gemini diagnosis
+- **Test coverage gaps**: Mitigated by TDD-first approach ensuring tests before code
+
+**Monitoring Strategy**:
+- Track TDD cycle completion rate
+- Monitor test success rate per iteration
+
+## 8. Success Criteria
+
+**Functional Completeness**:
+- [ ] All features implemented through TDD cycles
+- [ ] All RED-GREEN-REFACTOR cycles completed successfully
+
+**Technical Quality**:
+- [ ] Test coverage ≥80% (ensured by TDD)
+- [ ] All tests passing (GREEN state achieved)
+- [ ] Code refactored for quality (REFACTOR phase completed)
+
+**Operational Readiness**:
+- [ ] CI/CD pipeline with automated test execution
+- [ ] Test failure alerting configured
+
+**TDD Compliance**:
+- [ ] Every feature has TEST → IMPL → REFACTOR chain
+- [ ] No implementation without tests (RED-first principle)
+- [ ] Refactoring did not break tests
+```
 
 ### Phase 5: TODO_LIST.md Generation
 

.claude/commands/workflow/tools/task-generate.md

@@ -240,33 +240,229 @@ Generate task JSON files and IMPL_PLAN.md from analysis results with automatic a
 identifier: WFS-{session-id}
 source: "User requirements" | "File: path" | "Issue: ISS-001"
 analysis: .workflow/{session-id}/.process/ANALYSIS_RESULTS.md
+artifacts: .workflow/{session-id}/.brainstorming/
+context_package: .workflow/{session-id}/.process/context-package.json  # CCW smart context
+workflow_type: "standard | tdd | design"  # Indicates execution model
+verification_history:  # CCW quality gates
+  concept_verify: "passed | skipped | pending"
+  action_plan_verify: "pending"
+phase_progression: "brainstorm → context → analysis → concept_verify → planning"  # CCW workflow phases
 ---
 
 # Implementation Plan: {Project Title}
 
-## Summary
+## 1. Summary
-Core requirements, objectives, and technical approach.
+Core requirements, objectives, technical approach summary (2-3 paragraphs max).
 
-## Context Analysis
+**Core Objectives**:
-- **Project**: Type, patterns, tech stack
+- [Key objective 1]
-- **Modules**: Components and integration points
+- [Key objective 2]
-- **Dependencies**: External libraries and constraints
-- **Patterns**: Code conventions and guidelines
 
-## Brainstorming Artifacts
+**Technical Approach**:
-- synthesis-specification.md (Highest priority)
+- [High-level approach]
-- topic-framework.md (Medium priority)
-- Role analyses: ui-designer, system-architect, etc.
 
-## Task Breakdown
+## 2. Context Analysis
-- **Task Count**: N tasks, complexity level
-- **Hierarchy**: Flat/Two-level structure
-- **Dependencies**: Task dependency graph
 
-## Implementation Plan
+### CCW Workflow Context
-- **Execution Strategy**: Sequential/Parallel approach
+**Phase Progression**:
-- **Resource Requirements**: Tools, dependencies, artifacts
+- ✅ Phase 1: Brainstorming (synthesis-specification.md generated)
-- **Success Criteria**: Metrics and acceptance conditions
+- ✅ Phase 2: Context Gathering (context-package.json: {N} files, {M} modules analyzed)
+- ✅ Phase 3: Enhanced Analysis (ANALYSIS_RESULTS.md: Gemini/Qwen/Codex parallel insights)
+- ✅ Phase 4: Concept Verification ({X} clarifications answered, synthesis updated | skipped)
+- ⏳ Phase 5: Action Planning (current phase - generating IMPL_PLAN.md)
+
+**Quality Gates**:
+- concept-verify: ✅ Passed (0 ambiguities remaining) | ⏭️ Skipped (user decision) | ⏳ Pending
+- action-plan-verify: ⏳ Pending (recommended before /workflow:execute)
+
+**Context Package Summary**:
+- **Focus Paths**: {list key directories from context-package.json}
+- **Key Files**: {list primary files for modification}
+- **Module Depth Analysis**: {from get_modules_by_depth.sh output}
+- **Smart Context**: {total file count} files, {module count} modules, {dependency count} dependencies identified
+
+### Project Profile
+- **Type**: Greenfield/Enhancement/Refactor
+- **Scale**: User count, data volume, complexity
+- **Tech Stack**: Primary technologies
+- **Timeline**: Duration and milestones
+
+### Module Structure
+```
+[Directory tree showing key modules]
+```
+
+### Dependencies
+**Primary**: [Core libraries and frameworks]
+**APIs**: [External services]
+**Development**: [Testing, linting, CI/CD tools]
+
+### Patterns & Conventions
+- **Architecture**: [Key patterns like DI, Event-Driven]
+- **Component Design**: [Design patterns]
+- **State Management**: [State strategy]
+- **Code Style**: [Naming, TypeScript coverage]
+
+## 3. Brainstorming Artifacts Reference
+
+### Artifact Usage Strategy
+**Primary Reference (synthesis-specification.md)**:
+- **What**: Comprehensive implementation blueprint from multi-role synthesis
+- **When**: Every task references this first for requirements and design decisions
+- **How**: Extract architecture decisions, UI/UX patterns, functional requirements, non-functional requirements
+- **Priority**: Authoritative - overrides role-specific analyses when conflicts arise
+- **CCW Value**: Consolidates insights from all brainstorming roles into single source of truth
+
+**Context Intelligence (context-package.json)**:
+- **What**: Smart context gathered by CCW's context-gather phase
+- **Content**: Focus paths, dependency graph, existing patterns, module structure
+- **Usage**: Tasks load this via `flow_control.preparatory_steps` for environment setup
+- **CCW Value**: Automated intelligent context discovery replacing manual file exploration
+
+**Technical Analysis (ANALYSIS_RESULTS.md)**:
+- **What**: Gemini/Qwen/Codex parallel analysis results
+- **Content**: Optimization strategies, risk assessment, architecture review, implementation patterns
+- **Usage**: Referenced in task planning for technical guidance and risk mitigation
+- **CCW Value**: Multi-model parallel analysis providing comprehensive technical intelligence
+
+### Integrated Specifications (Highest Priority)
+- **synthesis-specification.md**: Comprehensive implementation blueprint
+  - Contains: Architecture design, UI/UX guidelines, functional/non-functional requirements, implementation roadmap, risk assessment
+
+### Supporting Artifacts (Reference)
+- **topic-framework.md**: Role-specific discussion points and analysis framework
+- **system-architect/analysis.md**: Detailed architecture specifications
+- **ui-designer/analysis.md**: Layout and component specifications
+- **product-manager/analysis.md**: Product vision and user stories
+
+**Artifact Priority in Development**:
+1. synthesis-specification.md (primary reference for all tasks)
+2. context-package.json (smart context for execution environment)
+3. ANALYSIS_RESULTS.md (technical analysis and optimization strategies)
+4. Role-specific analyses (fallback for detailed specifications)
+
+## 4. Implementation Strategy
+
+### Execution Strategy
+**Execution Model**: [Sequential | Parallel | Phased | TDD Cycles]
+
+**Rationale**: [Why this execution model fits the project]
+
+**Parallelization Opportunities**:
+- [List independent workstreams]
+
+**Serialization Requirements**:
+- [List critical dependencies]
+
+### Architectural Approach
+**Key Architecture Decisions**:
+- [ADR references from synthesis]
+- [Justification for architecture patterns]
+
+**Integration Strategy**:
+- [How modules communicate]
+- [State management approach]
+
+### Key Dependencies
+**Task Dependency Graph**:
+```
+[High-level dependency visualization]
+```
+
+**Critical Path**: [Identify bottleneck tasks]
+
+### Testing Strategy
+**Testing Approach**:
+- Unit testing: [Tools, scope]
+- Integration testing: [Key integration points]
+- E2E testing: [Critical user flows]
+
+**Coverage Targets**:
+- Lines: ≥70%
+- Functions: ≥70%
+- Branches: ≥65%
+
+**Quality Gates**:
+- [CI/CD gates]
+- [Performance budgets]
+
+## 5. Task Breakdown Summary
+
+### Task Count
+**{N} tasks** (flat hierarchy | two-level hierarchy, sequential | parallel execution)
+
+### Task Structure
+- **IMPL-1**: [Main task title]
+- **IMPL-2**: [Main task title]
+...
+
+### Complexity Assessment
+- **High**: [List with rationale]
+- **Medium**: [List]
+- **Low**: [List]
+
+### Dependencies
+[Reference Section 4.3 for dependency graph]
+
+**Parallelization Opportunities**:
+- [Specific task groups that can run in parallel]
+
+## 6. Implementation Plan (Detailed Phased Breakdown)
+
+### Execution Strategy
+
+**Phase 1 (Weeks 1-2): [Phase Name]**
+- **Tasks**: IMPL-1, IMPL-2
+- **Deliverables**:
+  - [Specific deliverable 1]
+  - [Specific deliverable 2]
+- **Success Criteria**:
+  - [Measurable criterion]
+
+**Phase 2 (Weeks 3-N): [Phase Name]**
+...
+
+### Resource Requirements
+
+**Development Team**:
+- [Team composition and skills]
+
+**External Dependencies**:
+- [Third-party services, APIs]
+
+**Infrastructure**:
+- [Development, staging, production environments]
+
+## 7. Risk Assessment & Mitigation
+
+| Risk | Impact | Probability | Mitigation Strategy | Owner |
+|------|--------|-------------|---------------------|-------|
+| [Risk description] | High/Med/Low | High/Med/Low | [Strategy] | [Role] |
+
+**Critical Risks** (High impact + High probability):
+- [Risk 1]: [Detailed mitigation plan]
+
+**Monitoring Strategy**:
+- [How risks will be monitored]
+
+## 8. Success Criteria
+
+**Functional Completeness**:
+- [ ] All requirements from synthesis-specification.md implemented
+- [ ] All acceptance criteria from task.json files met
+
+**Technical Quality**:
+- [ ] Test coverage ≥70%
+- [ ] Bundle size within budget
+- [ ] Performance targets met
+
+**Operational Readiness**:
+- [ ] CI/CD pipeline operational
+- [ ] Monitoring and logging configured
+- [ ] Documentation complete
+
+**Business Metrics**:
+- [ ] [Key business metrics from synthesis]
 ```
 
 ### Phase 5: TODO_LIST.md Generation

.claude/commands/workflow/ui-design/consolidate.md

@@ -0,0 +1,419 @@
+---
+name: consolidate
+description: Consolidate style variants into independent design systems and plan layout strategies
+usage: /workflow:ui-design:consolidate [--base-path <path>] [--session <id>] [--variants <count>] [--layout-variants <count>]
+argument-hint: "[--base-path \".workflow/WFS-xxx/design-run-xxx\"] [--variants 3] [--layout-variants 3]"
+parameters:
+  - name: --variants
+    type: number
+    default: all available variants from style-cards.json
+    description: "Number of style variants to consolidate (1-N). Processes first N variants from style-cards.json. Creates style-N directories."
+  - name: --session
+    type: string
+    description: "Workflow session ID (e.g., WFS-auth). Finds latest design run in session directory."
+  - name: --base-path
+    type: string
+    description: "Custom base path for input/output. Overrides --session if provided."
+examples:
+  - /workflow:ui-design:consolidate --base-path ".workflow/WFS-auth/design-run-20250109-143022" --variants 3
+  - /workflow:ui-design:consolidate --session WFS-auth --variants 2
+  - /workflow:ui-design:consolidate --base-path "./.workflow/.design/run-20250109-150533"  # Uses all variants
+  - /workflow:ui-design:consolidate --session WFS-auth  # Process all variants from extraction
+allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Task(*)
+---
+
+# Design System Consolidation Command
+
+## Overview
+Consolidate user-selected style variants into **independent production-ready design systems**. This command serves as the **Style Planning Phase**, focusing exclusively on design tokens and style guides for the subsequent generation phase.
+
+## Core Philosophy
+- **Style System Focus**: Exclusively handles design system consolidation
+- **Agent-Driven**: Uses ui-design-agent for multi-file generation efficiency
+- **Separate Design Systems**: Generates N independent design systems (one per variant)
+- **Token Refinement**: Refines `proposed_tokens` from each variant into complete systems
+- **Intelligent Synthesis**: Ensures completeness and consistency
+- **Production-Ready**: Complete design system(s) with documentation
+- **Matrix-Ready**: Provides style variants for style × layout matrix exploration in generate phase
+
+## Execution Protocol
+
+### Phase 1: Path Resolution & Variant Loading
+
+```bash
+# Determine base path
+IF --base-path: base_path = {provided_base_path}
+ELSE IF --session: base_path = find_latest_path_matching(".workflow/WFS-{session}/design-*")
+ELSE: base_path = find_latest_path_matching(".workflow/.design/*")
+
+# Verify extraction output exists
+style_cards_path = "{base_path}/style-extraction/style-cards.json"
+VERIFY: exists(style_cards_path)
+
+# Load style cards
+style_cards = Read(style_cards_path)
+total_variants = len(style_cards.style_cards)
+```
+
+### Phase 2: Variant Selection
+
+```bash
+# Determine how many variants to consolidate
+IF --variants:
+    variants_count = {provided_count}
+    VALIDATE: 1 <= variants_count <= total_variants
+ELSE:
+    variants_count = total_variants
+
+# Select first N variants
+selected_variants = style_cards.style_cards[0:variants_count]
+VERIFY: selected_variants.length > 0
+
+REPORT: "📦 Generating {variants_count} independent design systems"
+```
+
+### Phase 3: Load Design Context (Optional)
+
+```bash
+# Load brainstorming context if available
+design_context = ""
+IF exists({base_path}/.brainstorming/synthesis-specification.md):
+    design_context = Read(synthesis-specification.md)
+ELSE IF exists({base_path}/.brainstorming/ui-designer/analysis.md):
+    design_context = Read(ui-designer/analysis.md)
+
+# Load design space analysis from extraction phase
+design_space_analysis = {}
+design_space_path = "{base_path}/style-extraction/design-space-analysis.json"
+IF exists(design_space_path):
+    design_space_analysis = Read(design_space_path)
+    REPORT: "📊 Loaded design space analysis with {len(design_space_analysis.divergent_directions)} variant directions"
+ELSE:
+    REPORT: "⚠️ No design space analysis found - trend research will be skipped"
+```
+
+### Phase 4: Design System Synthesis (Agent Execution)
+
+```bash
+REPORT: "🤖 Using agent for separate design system generation..."
+
+# Create output directories
+Bash(mkdir -p "{base_path}/style-consolidation/style-{{1..{variants_count}}}")
+
+# Prepare agent task prompt
+agent_task_prompt = """
+Generate {variants_count} independent production-ready design systems with external trend research and WRITE them to the file system.
+
+## Context
+SESSION: {session_id}
+MODE: Separate design system generation with MCP trend research
+BASE_PATH: {base_path}
+VARIANTS TO PROCESS: {variants_count}
+
+## Variant Data
+{FOR each variant IN selected_variants:
+  ---
+  Variant ID: {variant.id} | Name: {variant.name}
+  Description: {variant.description}
+  Design Philosophy: {variant.design_philosophy}
+  Proposed Tokens: {JSON.stringify(variant.proposed_tokens, null, 2)}
+  ---
+}
+
+{IF design_context: DESIGN CONTEXT (from brainstorming): {design_context}}
+
+{IF design_space_analysis:
+## Design Space Analysis (for MCP Research)
+{JSON.stringify(design_space_analysis, null, 2)}
+
+Note: Each variant has search_keywords and anti_keywords for trend research.
+}
+
+## Task
+For EACH variant (1 to {variants_count}):
+1. **Perform Variant-Specific Trend Research** (if design space analysis available)
+2. **Refine design tokens** using research insights
+3. **Generate and WRITE 2 files** to the file system
+
+## Step 1: Variant-Specific Trend Research (MCP)
+
+IF design_space_analysis is provided, FOR EACH variant:
+
+1. **Extract Research Parameters** from design space analysis:
+   - philosophy_name: The variant's design philosophy
+   - search_keywords: Keywords for trend research
+   - anti_keywords: Patterns to avoid
+
+2. **Build Variant-Specific Queries**:
+   ```javascript
+   queries = [
+     `{philosophy_name} UI design color palettes {search_keywords[:3]} 2024 2025`,
+     `{philosophy_name} typography trends {search_keywords[:3]} web design 2024`,
+     `{philosophy_name} layout patterns {search_keywords[:3]} design systems 2024`,
+     `design systems {philosophy_name} NOT {anti_keywords[:2]}`
+   ]
+   ```
+
+3. **Execute MCP Searches**:
+   ```javascript
+   trend_research = {
+     colors: mcp__exa__get_code_context_exa(query=queries[0], tokensNum=2000),
+     typography: mcp__exa__get_code_context_exa(query=queries[1], tokensNum=2000),
+     layout: mcp__exa__get_code_context_exa(query=queries[2], tokensNum=2000),
+     contrast: mcp__exa__get_code_context_exa(query=queries[3], tokensNum=2000)
+   }
+   ```
+
+4. **Shared Accessibility Research** (execute once, apply to all variants):
+   ```javascript
+   accessibility_guidelines = mcp__exa__get_code_context_exa(
+     query="WCAG 2.2 accessibility color contrast ARIA best practices 2024",
+     tokensNum=1500
+   )
+   ```
+
+5. **Use Research Results** to inform token refinement:
+   - Color token refinement guided by `trend_research.colors`
+   - Typography refinement guided by `trend_research.typography`
+   - Layout spacing informed by `trend_research.layout`
+   - Contrast validation using `trend_research.contrast` and `accessibility_guidelines`
+
+IF design_space_analysis is NOT provided:
+- Skip trend research
+- Refine tokens based solely on variant's existing philosophy and proposed tokens
+
+## Step 2: Refinement Rules (apply to each variant)
+1. **Complete Token Coverage**: Ensure all categories present (colors, typography, spacing, etc.)
+2. **Fill Gaps**: Generate missing tokens based on variant's philosophy and trend research
+3. **Maintain Style Identity**: Preserve unique characteristics from proposed tokens
+4. **Semantic Naming**: Use clear names (e.g., "brand-primary" not "color-1")
+5. **Accessibility**: Validate WCAG AA contrast using accessibility guidelines (4.5:1 text, 3:1 UI)
+6. **OKLCH Format**: All colors use oklch(L C H / A) format
+7. **Design Philosophy**: Expand variant's design philosophy using trend insights
+8. **Trend Integration**: Incorporate modern trends from MCP research while maintaining variant identity
+
+## Step 3: File Write Instructions
+For EACH variant {variant_id} (1 to {variants_count}), WRITE these 2 files:
+
+### File 1: Design Tokens
+**Path**: {base_path}/style-consolidation/style-{variant_id}/design-tokens.json
+**Content**: Complete design token JSON with structure:
+```json
+{
+  "colors": {
+    "brand": {"primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)"},
+    "surface": {"background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)"},
+    "semantic": {"success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)"},
+    "text": {"primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)"},
+    "border": {"default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)"}
+  },
+  "typography": {"font_family": {...}, "font_size": {...}, "font_weight": {...}, "line_height": {...}, "letter_spacing": {...}},
+  "spacing": {"0": "0", "1": "0.25rem", ..., "24": "6rem"},
+  "border_radius": {"none": "0", "sm": "0.25rem", ..., "full": "9999px"},
+  "shadows": {"sm": "...", "md": "...", "lg": "...", "xl": "..."},
+  "breakpoints": {"sm": "640px", ..., "2xl": "1536px"}
+}
+```
+
+### File 2: Style Guide
+**Path**: {base_path}/style-consolidation/style-{variant_id}/style-guide.md
+**Content**: Markdown documentation with structure:
+```markdown
+# Design System Style Guide - {variant.name}
+
+## Design Philosophy
+{Expanded variant philosophy}
+
+## Color System
+### Brand Colors, Surface Colors, Semantic Colors, Text Colors, Border Colors
+{List all with usage and accessibility notes}
+
+## Typography
+### Font Families, Type Scale, Usage Examples
+{Complete typography documentation}
+
+## Spacing System, Component Guidelines
+{Spacing patterns and component token examples}
+
+## Accessibility
+- All text meets WCAG AA (4.5:1 minimum)
+- UI components meet WCAG AA (3:1 minimum)
+- Focus indicators are clearly visible
+```
+
+## Write Operation Instructions
+- Use Write() tool for each file with the absolute paths provided above
+- Verify each write operation succeeds
+- Report completion with file paths and sizes
+- DO NOT return file contents as text
+
+## Example Write Operations
+```javascript
+// For variant 1
+Write("{base_path}/style-consolidation/style-1/design-tokens.json", JSON.stringify(tokens, null, 2))
+Write("{base_path}/style-consolidation/style-1/style-guide.md", guide_content)
+
+// For variant 2
+Write("{base_path}/style-consolidation/style-2/design-tokens.json", JSON.stringify(tokens, null, 2))
+Write("{base_path}/style-consolidation/style-2/style-guide.md", guide_content)
+```
+
+## Expected Final Report
+Report which files were written and their sizes:
+```
+✅ Written: {base_path}/style-consolidation/style-1/design-tokens.json (12.5 KB)
+✅ Written: {base_path}/style-consolidation/style-1/style-guide.md (8.3 KB)
+✅ Written: {base_path}/style-consolidation/style-2/design-tokens.json (11.8 KB)
+✅ Written: {base_path}/style-consolidation/style-2/style-guide.md (7.9 KB)
+... (for all {variants_count} variants)
+```
+
+## Critical Requirements
+- Generate files for ALL {variants_count} variants
+- Use sequential IDs: style-1, style-2, ..., style-{variants_count}
+- Each variant must be complete and independent
+- Maintain consistent structure across all variants
+- Write files directly using Write() tool - do NOT return contents as text
+"""
+
+# Execute agent task
+Task(subagent_type="ui-design-agent", description="Generate {variants_count} separate design systems", prompt=agent_task_prompt)
+
+REPORT: "✅ Agent task dispatched for {variants_count} design systems"
+```
+
+### Phase 5: Verify Agent File Creation
+```bash
+REPORT: "📝 Verifying agent file creation for {variants_count} design systems..."
+
+# Verify each variant's files were created by agent
+FOR variant_id IN range(1, variants_count + 1):
+    tokens_path = "{base_path}/style-consolidation/style-{variant_id}/design-tokens.json"
+    guide_path = "{base_path}/style-consolidation/style-{variant_id}/style-guide.md"
+
+    # Verify files exist
+    VERIFY: exists(tokens_path), "Design tokens not created by agent for style-{variant_id}"
+    VERIFY: exists(guide_path), "Style guide not created by agent for style-{variant_id}"
+
+    # Optional: Validate JSON structure
+    TRY:
+        tokens = Read(tokens_path)
+        tokens_json = parse_json(tokens)
+        VALIDATE: tokens_json.colors exists, "Missing colors in design-tokens.json"
+        VALIDATE: tokens_json.typography exists, "Missing typography in design-tokens.json"
+        VALIDATE: tokens_json.spacing exists, "Missing spacing in design-tokens.json"
+
+        tokens_size = get_file_size(tokens_path)
+        guide_size = get_file_size(guide_path)
+        REPORT: "  ✅ style-{variant_id}/ verified ({tokens_size} KB tokens, {guide_size} KB guide)"
+    CATCH error:
+        ERROR: "Validation failed for style-{variant_id}: {error}"
+        REPORT: "  ⚠️ Files exist but validation failed - review agent output"
+
+REPORT: "✅ All {variants_count} design systems verified"
+```
+
+**Output Structure**:
+```
+{base_path}/style-consolidation/
+├── style-1/ (design-tokens.json, style-guide.md)
+├── style-2/ (same structure)
+└── style-N/ (same structure)
+```
+
+### Phase 6: Completion & Reporting
+
+```javascript
+TodoWrite({todos: [
+  {content: "Load session and style cards", status: "completed", activeForm: "Loading style cards"},
+  {content: "Select variants for consolidation", status: "completed", activeForm: "Selecting variants"},
+  {content: "Load design context and space analysis", status: "completed", activeForm: "Loading context"},
+  {content: "Perform variant-specific trend research", status: "completed", activeForm: "Researching design trends"},
+  {content: "Generate design systems via agent", status: "completed", activeForm: "Generating design systems"},
+  {content: "Process agent results and write files", status: "completed", activeForm: "Writing output files"}
+]});
+```
+
+**Completion Message**:
+```
+✅ Design system consolidation complete for session: {session_id}
+
+{IF design_space_analysis:
+🔍 Trend Research Performed:
+- {variants_count} × 4 variant-specific MCP queries ({variants_count * 4} total)
+- 1 shared accessibility research query
+- Each variant refined with independent trend guidance
+}
+
+Generated {variants_count} independent design systems:
+{FOR each variant: - {variant.name} ({variant.id})}
+
+📂 Output: {base_path}/style-consolidation/
+├── style-1/ (design-tokens.json, style-guide.md)
+├── style-2/ (same structure)
+└── style-{variants_count}/ (same structure)
+
+Next: /workflow:ui-design:generate --session {session_id} --style-variants {variants_count} --targets "dashboard,auth" --layout-variants N
+
+Note: When called from /workflow:ui-design:explore-auto, UI generation is triggered automatically.
+Layout planning is now handled in the generate phase for each specific target.
+```
+
+## design-tokens.json Format
+
+**Token structure** (all variants follow identical structure with different values):
+
+```json
+{
+  "colors": {
+    "brand": {"primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)"},
+    "surface": {"background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)"},
+    "semantic": {"success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)"},
+    "text": {"primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)"},
+    "border": {"default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)"}
+  },
+  "typography": {
+    "font_family": {"heading": "...", "body": "...", "mono": "..."},
+    "font_size": {"xs": "...", "sm": "...", "base": "...", "lg": "...", "xl": "...", "2xl": "...", "3xl": "...", "4xl": "..."},
+    "font_weight": {"normal": "400", "medium": "500", "semibold": "600", "bold": "700"},
+    "line_height": {"tight": "1.25", "normal": "1.5", "relaxed": "1.75"},
+    "letter_spacing": {"tight": "-0.025em", "normal": "0", "wide": "0.025em"}
+  },
+  "spacing": {"0": "0", "1": "0.25rem", ..., "24": "6rem"},
+  "border_radius": {"none": "0", "sm": "0.25rem", ..., "full": "9999px"},
+  "shadows": {"sm": "...", "md": "...", "lg": "...", "xl": "..."},
+  "breakpoints": {"sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px"}
+}
+```
+
+**Requirements**: All colors in OKLCH format, complete token coverage, semantic naming
+
+## Error Handling
+
+- **No style cards found**: Report error, suggest running `/workflow:ui-design:extract` first
+- **Invalid variant count**: List available count, auto-select all if called from auto workflow
+- **Parsing errors**: Retry with stricter format instructions
+- **Validation warnings**: Report but continue (non-blocking)
+- **Missing categories**: Claude will fill gaps based on design philosophy
+
+## Key Features
+
+1. **Variant-Specific Trend Research** 🆕 - Agent performs independent MCP queries for each variant (4 queries per variant); Uses design space analysis keywords from extraction phase; Each variant researches its specific design philosophy; Shared accessibility research applied to all variants; Eliminates convergence by maintaining variant-specific research
+2. **Agent-Driven Architecture** - Uses ui-design-agent for multi-file generation and MCP research; Parallel generation of N independent design systems with external trend integration; Structured output parsing with labeled sections; Agent handles both research and synthesis
+3. **Separate Design Systems (Matrix-Ready)** - Generates N independent design systems (one per variant); Each variant maintains unique style identity enhanced by trend research; Provides style foundation for style × layout matrix exploration in generate phase
+4. **Token Refinement with Trend Integration** 🆕 - Reads `proposed_tokens` from style cards; Loads design space analysis for research parameters; Agent performs MCP trend research per variant; Refines tokens using research insights while maintaining style identity
+5. **Complete Design System Output** - design-tokens.json (CSS tokens per variant); style-guide.md (documentation per variant with trend insights)
+6. **Production-Ready Quality** - WCAG AA accessibility validation with MCP research; OKLCH color format for perceptual uniformity; Semantic token naming; Complete token coverage; Modern trends integration
+7. **Streamlined Workflow** - Sequential phases with clear responsibilities; Agent handles MCP research, token refinement, and file generation; Reproducible with deterministic structure; Context-aware (integrates brainstorming and design space analysis)
+8. **Clear Separation of Concerns** - Consolidation focuses on style systems with trend research; Extraction focuses on Claude-native analysis; Layout planning delegated to generate phase for target-specific optimization
+
+## Integration Points
+
+- **Input**:
+  - `style-cards.json` from `/workflow:ui-design:extract` (with `proposed_tokens`)
+  - `design-space-analysis.json` from extraction phase (with search keywords for MCP research)
+  - `--variants` parameter (default: all variants)
+- **Output**: Style Systems: `style-consolidation/style-{n}/design-tokens.json` and `style-guide.md` for each variant (enhanced with trend research)
+- **Context**: Optional `synthesis-specification.md` or `ui-designer/analysis.md`
+- **Auto Integration**: Automatically triggered by `/workflow:ui-design:explore-auto` workflow
+- **Next Command**: `/workflow:ui-design:generate --style-variants N --targets "..." --layout-variants M` performs target-specific layout planning

.claude/commands/workflow/ui-design/explore-auto.md

@@ -0,0 +1,626 @@
+---
+name: explore-auto
+description: Exploratory UI design workflow - Generate and compare multiple style × layout combinations (3×3 matrix exploration)
+usage: /workflow:ui-design:explore-auto [--prompt "<desc>"] [--images "<glob>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--batch-plan]
+argument-hint: "[--prompt \"Modern SaaS with 3 styles\"] [--images \"refs/*.png\"] [--targets \"dashboard,auth,navbar,hero\"] [--target-type \"auto\"] [--session WFS-xxx] [--style-variants 3] [--layout-variants 3]"
+examples:
+  - /workflow:ui-design:explore-auto --prompt "Generate 3 style variants for modern blog: home, article, author"
+  - /workflow:ui-design:explore-auto --prompt "SaaS dashboard and settings with 2 layout options"
+  - /workflow:ui-design:explore-auto --images "refs/*.png" --prompt "E-commerce: home, product, cart" --style-variants 3 --layout-variants 3
+  - /workflow:ui-design:explore-auto --session WFS-auth --images "refs/*.png"
+  - /workflow:ui-design:explore-auto --targets "navbar,hero" --target-type "component" --prompt "Compare 3 navigation bar designs" --style-variants 3 --layout-variants 2
+  - /workflow:ui-design:explore-auto --targets "card,form,button" --images "refs/*.png" --style-variants 2 --layout-variants 3
+  - /workflow:ui-design:explore-auto --targets "home,dashboard" --target-type "page"
+allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*), Task(conceptual-planning-agent)
+---
+
+# UI Design Auto Workflow Command
+
+## Overview & Execution Model
+
+**Fully autonomous orchestrator**: Executes all design phases sequentially from style extraction to design integration, with optional batch planning.
+
+**Unified Target System**: Generates `style_variants × layout_variants × targets` prototypes, where targets can be:
+- **Pages** (full-page layouts): home, dashboard, settings, etc.
+- **Components** (isolated UI elements): navbar, card, hero, form, etc.
+- **Mixed**: Can combine both in a single workflow
+
+**Autonomous Flow**:
+1. User triggers: `/workflow:ui-design:explore-auto [params]`
+2. Phase 1 (style-extract) → Auto-continues
+3. Phase 2 (style-consolidate) → Auto-continues
+4. Phase 3 (ui-generate) → Auto-continues with unified target list
+5. Phase 4 (design-update) → Auto-continues
+6. Phase 5 (batch-plan, optional) → Reports completion
+
+**Auto-Continue Mechanism**: TodoWrite tracks phase status. Upon completion, coordinator constructs next command and executes immediately. No user intervention required.
+
+**Target Type Detection**: Automatically inferred from prompt/targets, or explicitly set via `--target-type`.
+
+## Core Rules
+
+1. **Start Immediately**: TodoWrite initialization → Phase 1 execution
+2. **No Preliminary Validation**: Sub-commands handle their own validation
+3. **Parse & Pass**: Extract data from each output for next phase
+4. **Default to All**: When selecting variants/prototypes, use ALL generated items
+5. **Track Progress**: Update TodoWrite after each phase
+
+## Parameter Requirements
+
+**Optional Parameters** (all have smart defaults):
+- `--targets "<list>"`: Comma-separated targets (pages/components) to generate (inferred from prompt/session if omitted)
+- `--target-type "page|component|auto"`: Explicitly set target type (default: `auto` - intelligent detection)
+- `--session <id>`: Workflow session ID (standalone mode if omitted)
+- `--images "<glob>"`: Reference image paths (default: `design-refs/*`)
+- `--prompt "<description>"`: Design style and target description
+- `--style-variants <count>`: Style variants (default: inferred from prompt or 3, range: 1-5)
+- `--layout-variants <count>`: Layout variants per style (default: inferred or 3, range: 1-5)
+- `--batch-plan`: Auto-generate implementation tasks after design-update
+
+**Legacy Parameters** (maintained for backward compatibility):
+- `--pages "<list>"`: Alias for `--targets` with `--target-type page`
+- `--components "<list>"`: Alias for `--targets` with `--target-type component`
+
+**Input Rules**:
+- Must provide at least one: `--images` or `--prompt` or `--targets`
+- Multiple parameters can be combined for guided analysis
+- If `--targets` not provided, intelligently inferred from prompt/session
+
+**Supported Target Types**:
+- **Pages** (full layouts): home, dashboard, settings, profile, login, etc.
+- **Components** (UI elements):
+  - Navigation: navbar, header, menu, breadcrumb, tabs, sidebar
+  - Content: hero, card, list, table, grid, timeline
+  - Input: form, search, filter, input-group
+  - Feedback: modal, alert, toast, badge, progress
+  - Media: gallery, carousel, video-player, image-card
+  - Other: footer, pagination, dropdown, tooltip, avatar
+
+**Intelligent Prompt Parsing**: Extracts variant counts from natural language:
+- "Generate **3 style variants**" → `--style-variants 3`
+- "**2 layout options**" → `--layout-variants 2`
+- "Create **4 styles** with **2 layouts each**" → `--style-variants 4 --layout-variants 2`
+- Explicit flags override prompt inference
+
+## Execution Modes
+
+**Matrix Mode** (unified):
+- Generates `style_variants × layout_variants × targets` prototypes
+- **Phase 1**: `style_variants` style options
+- **Phase 2**: `style_variants` independent design systems
+- **Phase 3**: `style_variants × layout_variants × targets` prototypes
+  - Pages: Full-page layouts with complete structure
+  - Components: Isolated elements with minimal wrapper
+  - Mixed: Combination based on intelligent detection
+
+**Integrated vs. Standalone**:
+- `--session` flag determines session integration or standalone execution
+
+## 6-Phase Execution
+
+### Phase 0a: Intelligent Prompt Parsing
+```bash
+# Extract variant counts from prompt if not explicitly provided
+IF --prompt provided AND (NOT --style-variants OR NOT --layout-variants):
+    # Parse: "3 style variants", "4 styles", "2 layout options", "3 layouts each"
+    style_match = regex_search(prompt_text, r"(\d+)\s*(style\s*variants?|styles?)")
+    layout_match = regex_search(prompt_text, r"(\d+)\s*(layout\s*(variants?|options?)|layouts?)")
+
+    style_variants = style_match ? int(match[1]) : (--style-variants OR 3)
+    layout_variants = layout_match ? int(match[1]) : (--layout-variants OR 3)
+ELSE:
+    style_variants = --style-variants OR 3
+    layout_variants = --layout-variants OR 3
+
+VALIDATE: 1 <= style_variants <= 5, 1 <= layout_variants <= 5
+STORE: style_variants, layout_variants
+```
+
+### Phase 0b: Run Initialization & Directory Setup
+```bash
+# Generate run ID and determine base path
+run_id = "run-$(date +%Y%m%d-%H%M%S)"
+
+IF --session:
+    base_path = ".workflow/WFS-{session_id}/design-${run_id}"
+ELSE:
+    base_path = ".workflow/.design/${run_id}"
+
+# Create directories
+Bash(mkdir -p "${base_path}/{style-extraction,style-consolidation,prototypes}")
+
+# Initialize metadata
+Write({base_path}/.run-metadata.json): {
+  "run_id": "${run_id}",
+  "session_id": "${session_id}",
+  "timestamp": "$(date -u +%Y-%m-%dT%H:%M:%SZ)",
+  "workflow": "ui-design:auto",
+  "parameters": {
+    "style_variants": ${style_variants},
+    "layout_variants": ${layout_variants},
+    "pages": "${inferred_page_list}",
+    "prompt": "${prompt_text}",
+    "images": "${images_pattern}"
+  },
+  "status": "in_progress"
+}
+
+STORE: run_id, base_path
+```
+
+### Phase 0c: Unified Target Inference with Intelligent Type Detection
+```bash
+target_list = []
+target_type = "auto"  # auto, page, component
+target_source = "none"
+
+# Step 1: Handle legacy parameters (backward compatibility)
+IF --pages provided:
+    target_list = split_and_clean(--pages, delimiters=[",", ";", "、"])
+    target_type = "page"
+    target_source = "explicit_legacy"
+    REPORT: "📋 Using explicitly provided pages (legacy): {', '.join(target_list)}"
+ELSE IF --components provided:
+    target_list = split_and_clean(--components, delimiters=[",", ";", "、"])
+    target_type = "component"
+    target_source = "explicit_legacy"
+    REPORT: "🧩 Using explicitly provided components (legacy): {', '.join(target_list)}"
+
+# Step 2: Handle unified --targets parameter
+ELSE IF --targets provided:
+    target_list = split_and_clean(--targets, delimiters=[",", ";", "、"])
+    target_source = "explicit"
+
+    # Override type if explicitly set
+    IF --target-type provided AND --target-type != "auto":
+        target_type = --target-type
+        REPORT: "🎯 Using explicitly provided targets with type '{target_type}': {', '.join(target_list)}"
+    ELSE:
+        # Intelligent type detection
+        target_type = detect_target_type(target_list)
+        REPORT: "🎯 Using explicitly provided targets (detected type: {target_type}): {', '.join(target_list)}"
+
+# Step 3: Dynamic prompt analysis
+ELSE IF --prompt provided:
+    REPORT: "🔍 Analyzing prompt to identify targets..."
+
+    # Internal Claude analysis
+    analysis_prompt = """
+    Analyze the UI design request and identify targets (pages or components) with their types.
+
+    Request: "{prompt_text}"
+
+    Output JSON:
+    {
+      "targets": [
+        {"name": "normalized-name", "type": "page|component", "purpose": "description", "priority": "high|medium|low"}
+      ],
+      "primary_type": "page|component|mixed",
+      "shared_elements": ["header", "footer"],
+      "context": "application context description"
+    }
+
+    Rules:
+    - Normalize to URL-friendly (lowercase, hyphens, no spaces)
+    - Detect type: page (full layouts like home, dashboard) vs component (UI elements like navbar, card)
+    - Consolidate synonyms (homepage → home, navigation → navbar)
+    - Common pages: home, dashboard, settings, profile, login, signup
+    - Common components: navbar, header, hero, card, form, button, modal, footer
+    - If prompt mentions "page", "screen", "view" → type: page
+    - If prompt mentions "component", "element", "widget" → type: component
+    """
+
+    target_structure = analyze_prompt_structure(analysis_prompt, prompt_text)
+    target_list = extract_target_names_from_structure(target_structure)
+    target_type = target_structure.primary_type OR detect_target_type(target_list)
+    target_source = "prompt_analysis"
+
+    IF target_list:
+        REPORT: "🎯 Identified targets from prompt (type: {target_type}):"
+        FOR target IN target_structure.targets:
+            icon = "📄" IF target.type == "page" ELSE "🧩"
+            REPORT: "   {icon} {target.name}: {target.purpose} [{target.priority}]"
+        IF target_structure.shared_elements:
+            REPORT: "🔧 Shared elements: {', '.join(shared_elements)}"
+
+# Step 4: Extract from synthesis-specification.md (for session mode)
+ELSE IF --session AND exists(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md):
+    synthesis = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
+    target_list = extract_targets_from_synthesis(synthesis)  # Returns pages by default
+    target_type = "page"
+    target_source = "synthesis"
+    REPORT: "📋 Extracted from synthesis: {', '.join(target_list)}"
+
+# Step 5: Fallback default
+IF NOT target_list:
+    target_list = ["home"]
+    target_type = "page"
+    target_source = "default"
+    REPORT: "⚠️ No targets identified, using default: 'home' (page)"
+
+# Validate and clean target names
+validated_targets = []
+invalid_targets = []
+FOR target IN target_list:
+    cleaned = target.strip().lower().replace(" ", "-")
+    IF regex_match(cleaned, r"^[a-z0-9][a-z0-9_-]*$"):
+        validated_targets.append(cleaned)
+    ELSE:
+        invalid_targets.append(target)
+
+IF invalid_targets:
+    REPORT: "⚠️ Skipped invalid: {', '.join(invalid_targets)}"
+
+IF NOT validated_targets:
+    validated_targets = ["home"]
+    target_type = "page"
+    REPORT: "⚠️ All invalid, using default: 'home'"
+
+# Override target type if explicitly set
+IF --target-type provided AND --target-type != "auto":
+    target_type = --target-type
+    REPORT: "🔧 Target type overridden to: {target_type}"
+
+# Interactive confirmation
+type_emoji = "📄" IF target_type == "page" ELSE ("🧩" IF target_type == "component" ELSE "🎯")
+type_label = "PAGES" IF target_type == "page" ELSE ("COMPONENTS" IF target_type == "component" ELSE "TARGETS")
+
+REPORT: ""
+REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+REPORT: "{type_emoji} {type_label} CONFIRMATION"
+REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+REPORT: "Type: {target_type}"
+REPORT: "Source: {target_source}"
+REPORT: "Targets ({len(validated_targets)}): {', '.join(validated_targets)}"
+REPORT: ""
+REPORT: "Options:"
+REPORT: "  • 'continue/yes' - proceed"
+REPORT: "  • 'targets: item1,item2' - replace list"
+REPORT: "  • 'skip: item-name' - remove targets"
+REPORT: "  • 'add: item-name' - add targets"
+REPORT: "  • 'type: page|component' - change type"
+REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+
+user_input = WAIT_FOR_USER_INPUT()
+
+# Process input
+IF user_input MATCHES r"^(continue|yes|ok|proceed)$":
+    REPORT: "✅ Proceeding with {len(validated_targets)} {target_type}(s): {', '.join(validated_targets)}"
+ELSE IF user_input MATCHES r"^targets:\s*(.+)$":
+    new_targets = split_and_clean(extract_after("targets:"), [",", ";"])
+    validated_targets = [t.strip().lower().replace(" ", "-") for t in new_targets if t.strip()]
+    REPORT: "✅ Updated: {', '.join(validated_targets)}"
+ELSE IF user_input MATCHES r"^skip:\s*(.+)$":
+    to_skip = [t.strip().lower() for t in extract_after("skip:").split(",")]
+    validated_targets = [t for t in validated_targets if t not in to_skip]
+    REPORT: "✅ Removed: {', '.join(to_skip)}, Final: {', '.join(validated_targets)}"
+ELSE IF user_input MATCHES r"^add:\s*(.+)$":
+    to_add = [t.strip().lower().replace(" ", "-") for t in extract_after("add:").split(",") if t.strip()]
+    validated_targets.extend(to_add)
+    validated_targets = list(dict.fromkeys(validated_targets))  # Remove duplicates
+    REPORT: "✅ Added: {', '.join(to_add)}, Final: {', '.join(validated_targets)}"
+ELSE IF user_input MATCHES r"^type:\s*(page|component)$":
+    target_type = extract_after("type:").strip()
+    REPORT: "✅ Type changed to: {target_type}"
+ELSE:
+    REPORT: "⚠️ Invalid input, proceeding with: {', '.join(validated_targets)}"
+
+IF NOT validated_targets:
+    validated_targets = ["home"]
+    target_type = "page"
+
+STORE: inferred_target_list = validated_targets
+STORE: target_type = target_type
+STORE: target_inference_source = target_source
+STORE: target_structure_data = target_structure IF exists(target_structure) ELSE {}
+```
+
+**Helper Function: detect_target_type()**
+```bash
+detect_target_type(target_list):
+    # Common page keywords
+    page_keywords = ["home", "dashboard", "settings", "profile", "login", "signup", "auth",
+                     "landing", "about", "contact", "pricing", "account", "admin"]
+
+    # Common component keywords
+    component_keywords = ["navbar", "header", "footer", "hero", "card", "button", "form",
+                          "modal", "alert", "toast", "menu", "sidebar", "breadcrumb", "tabs",
+                          "table", "list", "grid", "carousel", "gallery", "search", "filter"]
+
+    page_matches = 0
+    component_matches = 0
+
+    FOR target IN target_list:
+        IF target IN page_keywords:
+            page_matches += 1
+        ELSE IF target IN component_keywords:
+            component_matches += 1
+        ELSE IF contains_keyword(target, ["page", "screen", "view"]):
+            page_matches += 1
+        ELSE IF contains_keyword(target, ["component", "widget", "element"]):
+            component_matches += 1
+
+    # Decision logic
+    IF component_matches > page_matches:
+        RETURN "component"
+    ELSE IF page_matches > 0 OR len(target_list) == 0:
+        RETURN "page"
+    ELSE:
+        # Ambiguous - default to page
+        RETURN "page"
+```
+
+### Phase 1: Style Extraction
+**Command**:
+```bash
+images_flag = --images present ? "--images \"{image_glob}\"" : ""
+prompt_flag = --prompt present ? "--prompt \"{prompt_text}\"" : ""
+run_base_flag = "--base-path \"{base_path}\""
+
+command = "/workflow:ui-design:extract {run_base_flag} {images_flag} {prompt_flag} --variants {style_variants}"
+SlashCommand(command)
+```
+**Auto-Continue**: On completion → Phase 2
+
+---
+
+### Phase 2: Style Consolidation (Separate Design Systems)
+**Command**:
+```bash
+run_base_flag = "--base-path \"{base_path}\""
+
+# Consolidate generates independent design systems by default
+# IMPORTANT: Pass --layout-variants to ensure correct number of layout strategies are generated
+command = "/workflow:ui-design:consolidate {run_base_flag} --variants {style_variants} --layout-variants {layout_variants}"
+SlashCommand(command)
+```
+**Result**: Generates `style_variants` independent design systems:
+- `style-consolidation/style-1/design-tokens.json`
+- `style-consolidation/style-{N}/design-tokens.json`
+
+**Auto-Continue**: On completion → Phase 3
+
+---
+
+### Phase 3: Matrix UI Generation (Unified)
+**Command**:
+```bash
+run_base_flag = "--base-path \"{base_path}\""
+
+# Build unified targets string
+targets_string = ",".join(inferred_target_list)
+VERIFY: targets_string matches r"^[a-z0-9_-]+(,[a-z0-9_-]+)*$"
+
+# Prepare command with unified parameters
+targets_flag = "--targets \"{targets_string}\""
+type_flag = "--target-type \"{target_type}\""
+
+command = "/workflow:ui-design:generate {run_base_flag} {targets_flag} {type_flag} --style-variants {style_variants} --layout-variants {layout_variants}"
+
+total_prototypes = style_variants * layout_variants * len(inferred_target_list)
+
+# Report based on type
+IF target_type == "page":
+    type_icon = "📄"
+    type_label = "Pages"
+    context_note = "Full-page layouts"
+ELSE IF target_type == "component":
+    type_icon = "🧩"
+    type_label = "Components"
+    context_note = "Isolated elements with minimal wrapper"
+ELSE:
+    type_icon = "🎯"
+    type_label = "Targets"
+    context_note = "Mixed pages and components"
+
+REPORT: "🚀 Phase 3: Matrix UI Generation"
+REPORT: "   {type_icon} {type_label}: {targets_string}"
+REPORT: "   Matrix: {style_variants}×{layout_variants}"
+REPORT: "   Total: {total_prototypes} prototypes"
+REPORT: "   Context: {context_note}"
+
+SlashCommand(command)
+```
+
+**Result**:
+- File naming: `{target}-style-{s}-layout-{l}.html`
+- Total: `style_variants × layout_variants × targets`
+- Matrix view: `compare.html` with interactive grid
+- Rendering: Full-page for pages, minimal wrapper for components
+
+**Auto-Continue**: On completion → Phase 4
+
+---
+
+### Phase 4: Design System Integration
+**Command**:
+```bash
+session_flag = --session present ? "--session {session_id}" : ""
+
+# Omit --selected-prototypes to use ALL generated prototypes
+command = "/workflow:ui-design:update {session_flag}"
+SlashCommand(command)
+```
+**Auto-Continue**: If `--batch-plan` present → Phase 5, else complete
+
+---
+
+### Phase 5: Batch Task Generation (Optional)
+**Condition**: Only if `--batch-plan` flag present
+
+**Execution**:
+```bash
+FOR target IN inferred_target_list:
+    IF target_type == "page":
+        SlashCommand("/workflow:plan --agent \"Implement {target} page based on design system\"")
+    ELSE IF target_type == "component":
+        SlashCommand("/workflow:plan --agent \"Implement {target} component based on design system\"")
+    ELSE:
+        SlashCommand("/workflow:plan --agent \"Implement {target} based on design system\"")
+```
+**Completion**: Workflow complete
+
+## TodoWrite Pattern
+
+```javascript
+// Initialize
+TodoWrite({todos: [
+  {"content": "Execute style extraction", "status": "in_progress", "activeForm": "Executing style extraction"},
+  {"content": "Execute style consolidation", "status": "pending", "activeForm": "Executing style consolidation"},
+  {"content": "Execute UI prototype generation", "status": "pending", "activeForm": "Executing UI generation"},
+  {"content": "Execute design system integration", "status": "pending", "activeForm": "Executing design system integration"}
+]})
+
+// After each phase: Mark current completed, next in_progress, rest pending
+// Phase 1 done → Phase 2 in_progress
+// Phase 2 done → Phase 3 in_progress
+// ... continues until all completed
+```
+
+## Error Handling
+
+- **Phase Failures**: Workflow halts, keeps failed phase `in_progress`, reports error with recovery instructions
+- **Ambiguity**: Defaults to ALL available items (variants/prototypes) to ensure autonomous continuation
+
+## Key Features & Workflow Position
+
+**Core Improvements**:
+- **Zero External Dependencies**: Pure Claude + agents, no CLI tools
+- **Streamlined Commands**: Unified patterns, no tool-specific flags
+- **Reproducible Flow**: Deterministic phase dependencies
+- **Intelligent Parsing**: Natural language → variant counts, pages
+- **Run Isolation**: Each execution in timestamped run directory
+
+**Workflow Bridge**: Connects brainstorming (`synthesis-specification.md`) → design phase → planning (`/workflow:plan`) in fully automated fashion with matrix-based design exploration.
+
+## Example Execution Flows
+
+### Example 1: Default 3×3 Matrix (Page Mode - Prompt Inference)
+```bash
+/workflow:ui-design:explore-auto --prompt "Modern minimalist blog with home, article, and author pages"
+
+# Auto-detected type: page
+# Inferred: 3 style variants, 3 layout variants (default)
+# Targets: home, article, author
+# Total: 27 full-page prototypes (3×3×3)
+```
+
+### Example 2: Custom 2×2 Matrix with Session
+```bash
+/workflow:ui-design:explore-auto --session WFS-ecommerce --images "refs/*.png" --style-variants 2 --layout-variants 2
+
+# Auto-detected from session synthesis
+# Total: 2×2×N prototypes (N from inference)
+```
+
+### Example 3: Unified - Navbar Design Comparison
+```bash
+/workflow:ui-design:explore-auto --targets "navbar,hero" --target-type "component" --prompt "Compare 3 navigation bar designs for SaaS product" --style-variants 3 --layout-variants 2
+
+# Explicit type: component
+# Targets: navbar, hero
+# Matrix: 3 styles × 2 layouts
+# Total: 12 component prototypes (3×2×2)
+# Output: navbar-style-1-layout-1.html, navbar-style-1-layout-2.html, ...
+```
+
+### Example 4: Unified - Card & Form Exploration
+```bash
+/workflow:ui-design:explore-auto --targets "card,form,button" --images "refs/*.png" --style-variants 2 --layout-variants 3
+
+# Auto-detected type: component (based on keywords)
+# Targets: card, form, button
+# Matrix: 2 styles × 3 layouts
+# Total: 18 component prototypes (2×3×3)
+# Context: Each component in minimal wrapper for isolated comparison
+```
+
+### Example 5: Intelligent Parsing + Batch Planning
+```bash
+/workflow:ui-design:explore-auto --session WFS-saas --prompt "Create 4 styles with 2 layouts for SaaS dashboard and settings" --batch-plan
+
+# Auto-detected type: page
+# Parsed: 4 styles, 2 layouts
+# Targets: dashboard, settings
+# Total: 16 full-page prototypes (4×2×2)
+# Auto-generates implementation tasks for each target
+```
+
+### Example 6: Auto-Detected Components from Prompt
+```bash
+/workflow:ui-design:explore-auto --prompt "Design exploration for pricing table and testimonial card components" --style-variants 3 --layout-variants 2
+
+# Auto-detected type: component (keyword: "components")
+# Inferred targets: pricing-table, testimonial-card
+# Matrix: 3 styles × 2 layouts
+# Total: 12 component prototypes (3×2×2)
+```
+
+### Example 7: Legacy Parameter Support
+```bash
+# Using legacy --pages parameter (backward compatible)
+/workflow:ui-design:explore-auto --pages "home,dashboard,settings"
+
+# Equivalent to: --targets "home,dashboard,settings" --target-type "page"
+```
+
+### Example 8: Mixed Mode (Future Enhancement)
+```bash
+/workflow:ui-design:explore-auto --targets "home,dashboard,navbar,hero,card" --target-type "auto"
+
+# Auto-detection: home, dashboard → page; navbar, hero, card → component
+# Generates appropriate wrapper for each target type
+# Future: Support per-target type specification
+```
+
+## Final Completion Message
+
+**Unified Template**:
+```
+✅ UI Design Explore-Auto Workflow Complete!
+
+Run ID: {run_id}
+Session: {session_id or "standalone"}
+Type: {target_type_icon} {target_type_label}
+Matrix: {style_variants}×{layout_variants} ({total_prototypes} total prototypes)
+Input: {images and/or prompt summary}
+
+Phase 1 - Style Extraction: {style_variants} style variants
+Phase 2 - Style Consolidation: {style_variants} independent design systems
+Phase 3 - Matrix Generation: {style_variants}×{layout_variants}×{target_count} = {total_prototypes} prototypes
+Phase 4 - Design Update: Brainstorming artifacts updated
+{IF batch-plan: Phase 5 - Task Generation: {task_count} implementation tasks created}
+
+📂 Run Output: {base_path}/
+  ├── style-consolidation/  ({style_variants} design systems)
+  ├── prototypes/           ({total_prototypes} HTML/CSS files)
+  └── .run-metadata.json    (run configuration)
+
+🌐 Interactive Preview: {base_path}/prototypes/compare.html
+  - {style_variants}×{layout_variants} matrix view with synchronized scrolling
+  - {IF target_type == "component": "Isolated rendering with minimal wrapper" ELSE: "Full-page layouts"}
+  - Side-by-side comparison for design decisions
+  - Selection export for implementation
+
+{target_type_icon} Targets Explored: {', '.join(inferred_target_list)}
+  Type: {target_type}
+  Context: {IF target_type == "page": "Full-page layouts" ELSE IF target_type == "component": "Isolated UI elements" ELSE: "Mixed targets"}
+
+{IF batch-plan:
+📋 Implementation Tasks: .workflow/WFS-{session}/.task/
+Next: /workflow:execute to begin implementation
+}
+{ELSE:
+Next Steps:
+1. Open compare.html to preview all variants
+2. Select preferred style×layout combinations per target
+3. Run /workflow:plan to create implementation tasks
+{IF target_type == "component": "4. Integrate selected components into pages"}
+}
+```
+
+**Dynamic Values**:
+- `target_type_icon`: "📄" for page, "🧩" for component, "🎯" for mixed/auto
+- `target_type_label`: "Pages" for page, "Components" for component, "Targets" for mixed/auto
+- `target_count`: `len(inferred_target_list)`
+- All other placeholders are resolved from stored phase data

.claude/commands/workflow/ui-design/extract.md

@@ -0,0 +1,394 @@
+---
+name: extract
+description: Extract design style from reference images or text prompts using Claude's analysis
+usage: /workflow:ui-design:extract [--base-path <path>] [--session <id>] [--images "<glob>"] [--prompt "<desc>"] [--variants <count>]
+argument-hint: "[--base-path \".workflow/WFS-xxx/design-run-xxx\"] [--session WFS-xxx] [--images \"refs/*.png\"] [--prompt \"Modern minimalist\"] [--variants 3]"
+parameters:
+  - name: --variants
+    type: number
+    default: 1
+    description: "Number of design variants to extract (1-5). Each variant will be maximally contrasting. Generates style-cards.json with variant-N IDs."
+  - name: --images
+    type: string
+    description: "Glob pattern for reference images (e.g., 'refs/*.png'). Supports PNG, JPG, WebP."
+  - name: --prompt
+    type: string
+    description: "Text description of desired style (e.g., 'Modern minimalist blog'). Can be combined with --images."
+  - name: --session
+    type: string
+    description: "Workflow session ID (e.g., WFS-auth). Creates design run in session directory."
+  - name: --base-path
+    type: string
+    description: "Custom base path for output. Overrides --session if provided."
+examples:
+  - /workflow:ui-design:extract --images "design-refs/*.png" --variants 3
+  - /workflow:ui-design:extract --prompt "Modern minimalist blog, dark theme" --variants 3
+  - /workflow:ui-design:extract --session WFS-auth --images "refs/*.png" --prompt "Linear.app style" --variants 2
+  - /workflow:ui-design:extract --base-path ".workflow/WFS-auth/design-run-20250109-143022" --images "refs/*.png" --variants 3
+  - /workflow:ui-design:extract --prompt "Bold vibrant" --variants 1  # Single variant (default)
+allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*)
+---
+
+# Style Extraction Command
+
+## Overview
+Extract design style elements from reference images or text prompts using Claude's built-in analysis capabilities. Generates a single, comprehensive `style-cards.json` file containing multiple design variants with complete token proposals.
+
+## Core Philosophy
+- **Claude-Native**: 100% Claude-driven analysis, no external tools
+- **Single Output**: Only `style-cards.json` with embedded token proposals
+- **Sequential Execution**: Generate multiple style variants in one pass
+- **Flexible Input**: Images, text prompts, or both (hybrid mode)
+- **Reproducible**: Deterministic output structure
+
+## Execution Protocol
+
+### Phase 0: Parameter Detection & Validation
+
+```bash
+# Detect input source
+IF --images AND --prompt: input_mode = "hybrid"  # Text guides image analysis
+ELSE IF --images: input_mode = "image"
+ELSE IF --prompt: input_mode = "text"
+ELSE: ERROR: "Must provide --images or --prompt"
+
+# Determine base path (PRIORITY: --base-path > --session > standalone)
+IF --base-path:
+    base_path = {provided_base_path}; session_mode = "integrated"
+    session_id = base_path matches ".workflow/WFS-*/design-*" ? extract_session_id(base_path) : "standalone"
+ELSE:
+    run_id = "run-" + timestamp()
+    IF --session:
+        session_mode = "integrated"; session_id = {provided_session}
+        base_path = ".workflow/WFS-{session_id}/design-{run_id}/"
+    ELSE:
+        session_mode = "standalone"; base_path = ".workflow/.design/{run_id}/"
+
+# Set variant count
+variants_count = --variants OR 1; VALIDATE: 1 <= variants_count <= 5
+```
+
+### Phase 1: Input Loading & Validation
+
+```bash
+# Expand and validate inputs
+IF input_mode IN ["image", "hybrid"]:
+    expanded_images = Glob({--images pattern}); VERIFY: expanded_images.length > 0
+    FOR each image: image_data[i] = Read({image_path})
+
+IF input_mode IN ["text", "hybrid"]:
+    VALIDATE: --prompt is non-empty; prompt_guidance = {--prompt value}
+
+CREATE: {base_path}/style-extraction/
+```
+
+### Phase 0.5: AI-Driven Design Space Divergence
+
+```bash
+# Step 1: Load project context
+project_context = ""
+IF exists({base_path}/.brainstorming/synthesis-specification.md):
+    project_context = Read(synthesis-specification.md)
+ELSE IF exists({base_path}/.brainstorming/ui-designer/analysis.md):
+    project_context = Read(ui-designer/analysis.md)
+
+REPORT: "🎨 Analyzing design space to generate maximally contrasting directions..."
+
+# Step 2: AI-driven divergent direction generation
+divergence_prompt = """
+Analyze user requirements and generate {variants_count} MAXIMALLY CONTRASTING design directions.
+
+USER INPUT:
+{IF prompt_guidance: Prompt: "{prompt_guidance}"}
+{IF project_context: Project Context Summary: {extract_key_points(project_context, max_lines=10)}}
+{IF images: Reference Images: {image_count} images will be analyzed in next phase}
+
+DESIGN ATTRIBUTE SPACE (maximize contrast):
+- Color Saturation: [monochrome, muted, moderate, vibrant, hypersaturated]
+- Visual Weight: [minimal, light, balanced, bold, heavy]
+- Formality: [playful, casual, professional, formal, luxury]
+- Organic vs Geometric: [organic/fluid, soft, balanced, geometric, brutalist]
+- Innovation: [timeless, modern, contemporary, trendy, experimental]
+- Density: [spacious, airy, balanced, compact, dense]
+
+TASK:
+1. Identify design space center point from user requirements
+2. Generate {variants_count} directions that:
+   - Are MAXIMALLY DISTANT from each other in attribute space
+   - Each occupies a distinct region/quadrant of the design spectrum
+   - Together provide diverse aesthetic options
+   - Are contextually appropriate for project type
+   - Have clear, memorable philosophical differences
+3. For each direction, generate:
+   - Specific search keywords for MCP research (3-5 keywords)
+   - Anti-keywords to avoid (2-3 keywords)
+   - Clear rationale explaining contrast with other variants
+
+OUTPUT FORMAT: Valid JSON only, no markdown:
+{"design_space_center": {attributes}, "divergent_directions": [
+  {"id": "variant-1", "philosophy_name": "Brief name 2-3 words",
+   "design_attributes": {attribute_scores}, "search_keywords": [...],
+   "anti_keywords": [...], "rationale": "..."}
+], "contrast_verification": {"min_pairwise_distance": "0.75", "strategy": "..."}}
+
+RULES: Output ONLY valid JSON, maximize inter-variant distance, ensure each variant
+occupies distinct aesthetic region, avoid overlapping attributes
+"""
+
+# Execute AI analysis
+divergent_directions = parse_json(Claude_Native_Analysis(divergence_prompt))
+
+REPORT: "✅ Generated {variants_count} contrasting design directions:"
+FOR direction IN divergent_directions.divergent_directions:
+    REPORT: "  - {direction.philosophy_name}: {direction.rationale}"
+
+design_space_analysis = divergent_directions
+
+# Step 3: Save design space analysis for consolidation phase
+Write({file_path: "{base_path}/style-extraction/design-space-analysis.json",
+       content: JSON.stringify(design_space_analysis, null, 2)})
+REPORT: "💾 Saved design space analysis to design-space-analysis.json"
+```
+
+### Phase 2: Variant-Specific Style Synthesis (Claude Native Analysis)
+
+**Analysis Prompt Template**:
+```
+Generate {variants_count} design style proposals, each guided by its pre-analyzed design direction.
+
+INPUT MODE: {input_mode}
+{IF input_mode IN ["image", "hybrid"]: VISUAL REFERENCES: {list of loaded images}}
+{IF input_mode IN ["text", "hybrid"]: TEXT GUIDANCE: "{prompt_guidance}"}
+
+DESIGN SPACE ANALYSIS: {design_space_analysis summary}
+
+VARIANT-SPECIFIC DESIGN DIRECTIONS:
+{FOR each direction IN design_space_analysis.divergent_directions:
+---
+VARIANT: {direction.id} | PHILOSOPHY: {direction.philosophy_name}
+DESIGN ATTRIBUTES: {direction.design_attributes}
+SEARCH KEYWORDS: {direction.search_keywords}
+ANTI-PATTERNS (avoid): {direction.anti_keywords}
+RATIONALE: {direction.rationale}
+---}
+
+TASK: Generate {variants_count} design style variants where EACH variant:
+1. Strictly follows its pre-defined design philosophy and attributes
+2. Maintains maximum contrast with other variants' attributes
+3. Incorporates its design direction and avoids its anti-patterns
+4. Uses OKLCH color space for all color values
+5. Includes complete, production-ready design token proposals
+6. Applies WCAG AA accessibility guidelines (4.5:1 text, 3:1 UI)
+
+CRITICAL RULES FOR CONTRAST:
+- Variant-1 should feel completely different from Variant-2/3
+- Use each variant's specific attribute scores (e.g., "monochrome" vs "vibrant")
+- Each variant should embody its unique design direction
+- If Variant-1 is "minimal/geometric", Variant-2 must be "bold/organic" or similar contrast
+
+OUTPUT FORMAT: JSON matching this structure:
+{"extraction_metadata": {"session_id": "...", "input_mode": "...", "timestamp": "...", "variants_count": N},
+ "style_cards": [
+   {"id": "variant-1", "name": "Concise Style Name (2-3 words)", "description": "2-3 sentences",
+    "design_philosophy": "Core design principles",
+    "preview": {"primary": "oklch(...)", "background": "oklch(...)", "font_heading": "...", "border_radius": "..."},
+    "proposed_tokens": {
+      "colors": {"brand": {...}, "surface": {...}, "semantic": {...}, "text": {...}, "border": {...}},
+      "typography": {"font_family": {...}, "font_size": {...}, "font_weight": {...}, "line_height": {...}, "letter_spacing": {...}},
+      "spacing": {"0": "0", ..., "24": "6rem"},
+      "border_radius": {"none": "0", ..., "full": "9999px"},
+      "shadows": {"sm": "...", ..., "xl": "..."},
+      "breakpoints": {"sm": "640px", ..., "2xl": "1536px"}
+    }}
+   // Repeat for ALL {variants_count} variants
+ ]}
+
+RULES: Each variant must strictly adhere to pre-defined attributes; maximize visual contrast;
+all colors in OKLCH format; complete token structures; semantic naming;
+WCAG AA accessibility (4.5:1 text, 3:1 UI)
+```
+
+### Phase 3: Parse & Write Output
+
+```bash
+style_cards_data = parse_json(claude_response)
+Write({file_path: "{base_path}/style-extraction/style-cards.json", content: style_cards_data})
+```
+
+### Phase 4: Completion
+
+```javascript
+TodoWrite({todos: [
+  {content: "Validate inputs and create directories", status: "completed", activeForm: "Validating inputs"},
+  {content: "Analyze design space for maximum contrast", status: "completed", activeForm: "Analyzing design space"},
+  {content: `Generate ${variants_count} divergent design directions`, status: "completed", activeForm: "Generating directions"},
+  {content: "Save design space analysis for consolidation", status: "completed", activeForm: "Saving design space analysis"},
+  {content: `Generate ${variants_count} contrasting style variants`, status: "completed", activeForm: "Generating variants"}
+]});
+```
+
+**Completion Message**:
+```
+✅ Style extraction complete for session: {session_id}
+
+Input mode: {input_mode}
+{IF image mode: Images analyzed: {count}}
+{IF prompt mode: Prompt: "{truncated_prompt}"}
+
+🎨 Design Space Analysis:
+- Generated {variants_count} MAXIMALLY CONTRASTING design directions
+- Min pairwise contrast distance: {design_space_analysis.contrast_verification.min_pairwise_distance}
+- Strategy: {design_space_analysis.contrast_verification.strategy}
+
+Generated {variants_count} style variant(s):
+{FOR each card: - {card.name} ({card.id}) - {card.design_philosophy}}
+
+📂 Outputs:
+- {base_path}/style-extraction/style-cards.json
+- {base_path}/style-extraction/design-space-analysis.json
+
+Next: /workflow:ui-design:consolidate --session {session_id} --variants {variants_count} [--layout-variants <count>]
+
+Note: When called from /workflow:ui-design:auto, consolidation is triggered automatically.
+```
+
+## Output Structure
+
+```
+.workflow/WFS-{session}/design-{run_id}/style-extraction/
+├── style-cards.json              # Complete style variants with token proposals
+└── design-space-analysis.json    # Design directions for consolidation phase
+
+OR (standalone mode):
+
+.workflow/.design/{run_id}/style-extraction/
+├── style-cards.json
+└── design-space-analysis.json
+```
+
+### style-cards.json Format
+
+**Schema Structure**:
+
+```json
+{
+  "extraction_metadata": {"session_id": "string", "input_mode": "image|text|hybrid",
+                           "timestamp": "ISO 8601", "variants_count": "number"},
+  "style_cards": [
+    {
+      "id": "variant-{n}", "name": "Concise Style Name (2-3 words)",
+      "description": "2-3 sentence description of visual language and UX",
+      "design_philosophy": "Core design principles for this variant",
+      "preview": {"primary": "oklch(...)", "background": "oklch(...)",
+                  "font_heading": "Font family, fallbacks", "border_radius": "value"},
+      "proposed_tokens": {
+        "colors": {
+          "brand": {"primary": "oklch(...)", "secondary": "oklch(...)", "accent": "oklch(...)"},
+          "surface": {"background": "oklch(...)", "elevated": "oklch(...)", "overlay": "oklch(...)"},
+          "semantic": {"success": "oklch(...)", "warning": "oklch(...)", "error": "oklch(...)", "info": "oklch(...)"},
+          "text": {"primary": "oklch(...)", "secondary": "oklch(...)", "tertiary": "oklch(...)", "inverse": "oklch(...)"},
+          "border": {"default": "oklch(...)", "strong": "oklch(...)", "subtle": "oklch(...)"}
+        },
+        "typography": {
+          "font_family": {"heading": "...", "body": "...", "mono": "..."},
+          "font_size": {"xs": "...", "sm": "...", "base": "...", "lg": "...", "xl": "...", "2xl": "...", "3xl": "...", "4xl": "..."},
+          "font_weight": {"normal": "400", "medium": "500", "semibold": "600", "bold": "700"},
+          "line_height": {"tight": "1.25", "normal": "1.5", "relaxed": "1.75"},
+          "letter_spacing": {"tight": "-0.025em", "normal": "0", "wide": "0.025em"}
+        },
+        "spacing": {"0": "0", "1": "0.25rem", "2": "0.5rem", "3": "0.75rem", "4": "1rem",
+                    "5": "1.25rem", "6": "1.5rem", "8": "2rem", "10": "2.5rem", "12": "3rem",
+                    "16": "4rem", "20": "5rem", "24": "6rem"},
+        "border_radius": {"none": "0", "sm": "0.25rem", "md": "0.5rem", "lg": "0.75rem",
+                          "xl": "1rem", "full": "9999px"},
+        "shadows": {"sm": "0 1px 2px oklch(0.00 0.00 0 / 0.05)",
+                    "md": "0 4px 6px oklch(0.00 0.00 0 / 0.07)",
+                    "lg": "0 10px 15px oklch(0.00 0.00 0 / 0.10)",
+                    "xl": "0 20px 25px oklch(0.00 0.00 0 / 0.15)"},
+        "breakpoints": {"sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px"}
+      }
+    }
+    // Repeat structure for variants_count total (variant-1, variant-2, ..., variant-n)
+  ]
+}
+```
+
+**Key Structural Requirements**:
+- Each variant MUST have complete, independent token proposals (all categories present)
+- All colors MUST use OKLCH format: `oklch(L C H / A)`
+- Token keys MUST match exactly across all variants for consistency
+- Variants differ in VALUES, not structure
+- Production-ready: no placeholders or incomplete sections
+
+## Error Handling
+
+- **No images found**: Report glob pattern and suggest corrections
+- **Invalid prompt**: Require non-empty string for text mode
+- **Claude JSON parsing error**: Retry with stricter format instructions
+- **Invalid session**: Create standalone session automatically in `.workflow/.scratchpad/`
+- **Invalid variant count**: Clamp to 1-5 range and warn user
+
+## Key Features
+
+1. **🚀 AI-Driven Design Space Exploration** 🆕
+   - Phase 0.5: AI analyzes requirements and generates MAXIMALLY CONTRASTING design directions
+   - Uses 6-dimensional design attribute space (color saturation, visual weight, formality, organic/geometric, innovation, density)
+   - Ensures each variant occupies a distinct region of the design spectrum
+   - Generates search keywords and anti-patterns for each variant
+   - Provides contrast verification with minimum pairwise distance metrics
+
+2. **🎯 Variant-Specific Design Directions** 🆕
+   - AI generates search keywords and anti-patterns for each variant
+   - Each variant has distinct design philosophy (e.g., "minimal brutalist" vs "bold vibrant")
+   - Philosophy-specific keywords guide synthesis
+   - Design space analysis saved for consolidation phase
+   - Trend research deferred to consolidation for better integration
+
+3. **🔒 Maximum Contrast Guarantee**
+   - AI-driven divergence ensures variants are maximally distant in attribute space
+   - Each variant has distinct: philosophy, color saturation, visual weight, formality, etc.
+   - Explicit anti-patterns prevent variants from borrowing each other's characteristics
+   - Contrast verification built into design space analysis
+
+4. **100% Claude-Native Analysis**
+   - No external tools (gemini-wrapper, codex, or MCP) - pure Claude
+   - Single-pass comprehensive analysis guided by design space analysis
+   - Fast, deterministic style synthesis without external dependencies
+
+5. **Streamlined Output**
+   - Single file (`style-cards.json`) vs. multiple scattered files
+   - Eliminates `semantic_style_analysis.json`, `design-tokens.json`, `tailwind-tokens.js` clutter
+   - Each variant contains complete token proposals embedded
+
+6. **Flexible Input Modes**
+   - Image-only: Analyze visual references through each variant's philosophical lens
+   - Text-only: Generate from descriptions with maximum divergence
+   - Hybrid: Text guides image analysis while maintaining variant independence
+   - All modes enhanced with AI-driven design space analysis
+
+7. **Context-Aware & Dynamic**
+   - Extracts design keywords from user prompts (e.g., "minimalist", "Linear.app")
+   - Considers project type from brainstorming artifacts
+   - Dynamically generates design directions based on project context
+   - No hardcoded design philosophies - fully adaptive
+
+8. **Production-Ready Token Proposals**
+   - Complete design system proposals per variant
+   - OKLCH color format for perceptual uniformity and accessibility
+   - Semantic naming conventions
+   - WCAG AA accessibility considerations built-in
+   - Variant-specific token sets (not generic)
+
+9. **Workflow Integration**
+   - Integrated mode: Works within existing workflow sessions
+   - Standalone mode: Auto-creates session in scratchpad
+   - Context-aware: Can reference synthesis-specification.md or ui-designer/analysis.md
+   - Contrast metrics included in completion report
+
+## Integration Points
+
+- **Input**: Reference images (PNG, JPG, WebP) via glob patterns, or text prompts
+- **Output**: `style-cards.json` for `/workflow:ui-design:consolidate`
+- **Context**: Optional brainstorming artifacts (`synthesis-specification.md`, `ui-designer/analysis.md`)
+- **Auto Integration**: Automatically triggered by `/workflow:ui-design:auto` workflow
+- **Next Step**: `/workflow:ui-design:consolidate --session {session_id} --variants {count} [--layout-variants <count>]` (add `--keep-separate` for matrix mode)

.claude/commands/workflow/ui-design/generate.md

@@ -0,0 +1,836 @@
+---
+name: generate
+description: Generate UI prototypes in matrix mode (style × layout combinations) for pages or components
+usage: /workflow:ui-design:generate [--targets "<list>"] [--target-type "page|component"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
+argument-hint: "[--targets \"dashboard,auth,navbar,hero\"] [--target-type \"page\"] [--base-path \".workflow/WFS-xxx/design-run-xxx\"] [--style-variants 3] [--layout-variants 3]"
+parameters:
+  - name: --style-variants
+    type: number
+    default: 3
+    description: "Number of style variants to generate prototypes for (1-5). Auto-validates against actual style-* directories. ⚠️ Recommend omitting to use auto-detection."
+  - name: --layout-variants
+    type: number
+    default: auto-detected from layout-strategies.json
+    description: "Number of layout variants. Default: loaded from consolidation output. Can override for manual testing."
+  - name: --targets
+    type: string
+    description: "Comma-separated list of targets (pages or components) to generate"
+  - name: --target-type
+    type: string
+    default: page
+    description: "Type of targets: 'page' (full layout) or 'component' (isolated element)"
+examples:
+  - /workflow:ui-design:generate --base-path ".workflow/WFS-auth/design-run-20250109-143022" --targets "dashboard,settings" --target-type "page" --style-variants 3 --layout-variants 3
+  - /workflow:ui-design:generate --session WFS-auth --targets "home,pricing" --target-type "page" --style-variants 2 --layout-variants 2
+  - /workflow:ui-design:generate --base-path "./.workflow/.design/run-20250109-150533"  # ✅ Recommended: auto-detect variants
+  - /workflow:ui-design:generate --targets "navbar,hero,card" --target-type "component" --style-variants 3 --layout-variants 2
+  - /workflow:ui-design:generate --pages "home,dashboard" --style-variants 2 --layout-variants 2  # Legacy syntax
+executor: → @ui-design-agent
+allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
+---
+
+# UI Generation Command (Matrix Mode)
+
+**Executor**: → @ui-design-agent
+**Parallel Generation**: Phase 2a → @ui-design-agent (L×T tasks)
+
+## Overview
+Generate production-ready UI prototypes (HTML/CSS) in `style × layout` matrix mode, strictly adhering to consolidated design tokens from separate style design systems. Supports both full-page layouts and isolated component generation.
+
+## Core Philosophy
+- **Unified Generation**: Single mode generating `style_variants × layout_variants × targets` prototypes
+- **Target Types**: Supports pages (full layouts) and components (isolated UI elements)
+- **Agent-Driven**: Uses `Task(ui-design-agent)` for parallel generation
+- **Token-Driven**: All styles reference per-style design-tokens.json; no hardcoded values
+- **Production-Ready**: Semantic HTML5, ARIA attributes, responsive design
+- **Template-Based**: Decouples HTML structure from CSS styling for optimal performance
+- **Adaptive Wrapper**: Full-page structure for pages, minimal wrapper for components
+
+## Execution Protocol
+
+### Phase 1: Path Resolution & Context Loading
+
+```bash
+# 1. Determine base path
+IF --base-path: base_path = {provided_base_path}
+ELSE IF --session: base_path = find_latest_path_matching(".workflow/WFS-{session}/design-*")
+ELSE: base_path = find_latest_path_matching(".workflow/.design/*")
+
+# 2. Determine style variant count and layout variant count
+style_variants = --style-variants OR 3; VALIDATE: 1 <= style_variants <= 5
+layout_variants = --layout-variants OR 3; VALIDATE: 1 <= layout_variants <= 5
+
+# Validate against actual style directories
+actual_style_count = count_directories({base_path}/style-consolidation/style-*)
+
+IF actual_style_count == 0:
+    ERROR: "No style directories found"; SUGGEST: "Run /workflow:ui-design:consolidate first"; EXIT 1
+
+IF style_variants > actual_style_count:
+    WARN: "⚠️ Requested {style_variants}, but only {actual_style_count} exist"
+    REPORT: "   Available styles: {list_directories}"; style_variants = actual_style_count
+
+REPORT: "✅ Validated style variants: {style_variants}"
+
+# 3. Enhanced target list parsing with type detection
+target_list = []; target_type = "page"  # Default
+
+# Priority 1: Unified --targets parameter
+IF --targets:
+    raw_targets = {--targets value}
+    target_list = split_and_clean(raw_targets, delimiters=[",", ";", "、"])
+    target_list = [t.strip().lower().replace(" ", "-") for t in target_list if t.strip()]
+
+    target_type = --target-type provided ? {--target-type} : detect_target_type(target_list)
+    REPORT: "🎯 Using provided targets ({target_type}): {', '.join(target_list)}"
+
+# Priority 2: Legacy --pages parameter
+ELSE IF --pages:
+    raw_targets = {--pages value}
+    target_list = split_and_clean(raw_targets, delimiters=[",", ";", "、"])
+    target_list = [t.strip().lower().replace(" ", "-") for t in target_list if t.strip()]
+    target_type = "page"
+    REPORT: "📋 Using provided pages (legacy): {', '.join(target_list)}"
+
+# Priority 3: Extract from synthesis-specification.md
+ELSE IF --session:
+    synthesis_spec = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
+    target_list = extract_targets_from_synthesis(synthesis_spec); target_type = "page"
+    REPORT: "📋 Extracted from synthesis: {', '.join(target_list)}"
+
+# Priority 4: Detect from existing prototypes or default
+ELSE:
+    target_list = detect_from_prototypes({base_path}/prototypes/) OR ["home"]; target_type = "page"
+    REPORT: "📋 Detected/default targets: {', '.join(target_list)}"
+
+# 4. Validate target names
+validated_targets = [t for t in target_list if regex_match(t, r"^[a-z0-9][a-z0-9_-]*$")]
+invalid_targets = [t for t in target_list if t not in validated_targets]
+
+IF invalid_targets: REPORT: "⚠️ Skipped invalid target names: {', '.join(invalid_targets)}"
+VALIDATE: validated_targets not empty, "No valid targets found"
+target_list = validated_targets
+
+STORE: target_list, target_type
+
+# 5. Verify design systems exist
+FOR style_id IN range(1, style_variants + 1):
+    VERIFY: exists({base_path}/style-consolidation/style-{style_id}/design-tokens.json)
+    VERIFY: exists({base_path}/style-consolidation/style-{style_id}/style-guide.md)
+
+# 6. Load requirements (if integrated mode)
+IF --session: synthesis_spec = Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
+```
+
+### Phase 1.5: Target-Specific Layout Planning
+
+```bash
+REPORT: "📐 Planning {layout_variants} layout strategies for each target..."
+
+CREATE: {base_path}/prototypes/_templates/
+
+# For each target, plan its specific layouts
+FOR target IN target_list:
+    REPORT: "  Planning layouts for '{target}' ({target_type})..."
+
+    FOR layout_id IN range(1, layout_variants + 1):
+        Task(ui-design-agent): "
+          [TARGET_LAYOUT_PLANNING]
+
+          Generate a concrete, actionable layout plan for a specific target and WRITE it to the file system.
+
+          ## Context
+          TARGET: {target}
+          TARGET_TYPE: {target_type}
+          LAYOUT_ID: {layout_id}
+          BASE_PATH: {base_path}
+          {IF --session: PROJECT_REQUIREMENTS: Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)}
+
+          ## Task
+          Research, design, and WRITE a modern, innovative layout plan specifically for '{target}'.
+
+          ## Research Phase (Use MCP Tools)
+          1. Search for modern {target_type} layout patterns:
+             mcp__exa__get_code_context_exa(
+               query=\"modern {target} {target_type} layout design patterns 2024 2025\",
+               tokensNum=\"dynamic\"
+             )
+          2. Search for {target}-specific UI best practices
+
+          ## Layout Planning Rules
+
+          **For PAGES (target_type='page')**:
+          - Define macro-layout: main regions (header, sidebar, main, footer)
+          - Specify grid/flexbox structure for content organization
+          - Define responsive breakpoints and behavior
+          - Include navigation and page-level components
+
+          **For COMPONENTS (target_type='component')**:
+          - Define micro-layout: internal element arrangement
+          - Specify alignment, spacing, and element sizing
+          - Focus on component-specific structure (no header/footer)
+          - Optimize for reusability and composition
+
+          ## File Write Instructions
+          Generate layout plan JSON and WRITE it using Write() tool:
+
+          **Path**: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.json
+
+          **Content** - JSON with this EXACT structure:
+          ```json
+          {
+            \"id\": \"layout-{layout_id}\",
+            \"target\": \"{target}\",
+            \"target_type\": \"{target_type}\",
+            \"name\": \"Descriptive name (2-4 words)\",
+            \"description\": \"Detailed description (2-3 sentences explaining structure, use cases, and unique aspects)\",
+            \"structure\": {
+              // For pages, include:
+              \"type\": \"sidebar-main\" | \"centered\" | \"asymmetric\" | \"grid-dashboard\",
+              \"regions\": [\"header\", \"sidebar\", \"main\", \"footer\"],
+              \"grid\": {
+                \"columns\": 12,
+                \"rows\": \"auto\",
+                \"gap\": \"var(--spacing-6)\"
+              },
+              \"sidebar\": {
+                \"position\": \"left\" | \"right\",
+                \"width\": \"250px\",
+                \"fixed\": true,
+                \"collapsible\": true
+              },
+              \"responsive\": {
+                \"mobile\": {\"columns\": 1, \"sidebar\": \"hidden\"},
+                \"tablet\": {\"columns\": 6, \"sidebar\": \"overlay\"},
+                \"desktop\": {\"columns\": 12, \"sidebar\": \"fixed\"}
+              },
+
+              // For components, include:
+              \"arrangement\": \"flex-column\" | \"flex-row\" | \"grid\",
+              \"alignment\": \"center\" | \"start\" | \"end\" | \"stretch\",
+              \"spacing\": \"compact\" | \"normal\" | \"relaxed\",
+              \"element_order\": [\"icon\", \"title\", \"description\", \"action\"]
+            },
+            \"semantic_hints\": [
+              \"dashboard\",
+              \"data-visualization\",
+              \"navigation-sidebar\",
+              \"card-based\"
+            ],
+            \"accessibility_features\": [
+              \"skip-navigation\",
+              \"landmark-regions\",
+              \"keyboard-navigation\",
+              \"screen-reader-optimized\"
+            ],
+            \"research_references\": [
+              \"URL or description of research source 1\",
+              \"URL or description of research source 2\"
+            ]
+          }
+          ```
+
+          ## Write Operation Instructions
+          - Use Write() tool with the absolute path provided above
+          - Create directory if needed: Bash('mkdir -p {base_path}/prototypes/_templates')
+          - Verify write operation succeeds
+
+          ## Example Write Operation
+          ```javascript
+          Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.json\", JSON.stringify(layout_plan, null, 2))
+          ```
+
+          ## Completion
+          Report successful file creation with path confirmation.
+
+          ## Critical Requirements
+          - ✅ Layout plan is ONLY for '{target}' - tailor to this specific target's needs
+          - ✅ Consider {target_type} type (page vs component) when designing structure
+          - ✅ Research modern patterns using MCP tools before designing
+          - ✅ Provide concrete, implementable structure (not abstract descriptions)
+          - ✅ Different layout IDs should explore meaningfully different approaches
+          - ✅ Use semantic naming and clear documentation
+          - ✅ Write file directly using Write() tool - do NOT return contents as text
+        "
+
+# Wait for all agent tasks to complete
+REPORT: "⏳ Waiting for layout planning agents to complete..."
+
+# Verify agent created layout JSON files
+REPORT: "📝 Verifying agent file creation..."
+
+FOR target IN target_list:
+    FOR layout_id IN range(1, layout_variants + 1):
+        layout_json_label = f"{target}-layout-{layout_id}.json"
+        json_path = f"{base_path}/prototypes/_templates/{layout_json_label}"
+
+        # Verify file exists
+        VERIFY: exists(json_path), f"Layout JSON not created by agent: {layout_json_label}"
+
+        # Validate JSON structure
+        TRY:
+            layout_json_content = Read(json_path)
+            layout_plan = JSON.parse(layout_json_content)
+
+            # Validate required fields
+            VALIDATE: layout_plan.id == f"layout-{layout_id}", f"Invalid layout ID in {layout_json_label}"
+            VALIDATE: layout_plan.target == target, f"Invalid target in {layout_json_label}"
+            VALIDATE: layout_plan.target_type == target_type, f"Invalid target_type in {layout_json_label}"
+            VALIDATE: layout_plan.name exists, f"Missing 'name' field in {layout_json_label}"
+            VALIDATE: layout_plan.structure exists, f"Missing 'structure' field in {layout_json_label}"
+
+            file_size = get_file_size(json_path)
+            REPORT: f"   ✓ Verified: {layout_json_label} - {layout_plan.name} ({file_size} KB)"
+        CATCH error:
+            ERROR: f"Validation failed for {layout_json_label}: {error}"
+            REPORT: f"   ⚠️ File exists but validation failed - review agent output"
+
+REPORT: f"✅ Phase 1.5 complete: Verified {len(target_list) × layout_variants} target-specific layout files"
+```
+
+### Phase 1.6: Token Variable Name Extraction
+
+```bash
+REPORT: "📋 Extracting design token variable names..."
+tokens_json_path = "{base_path}/style-consolidation/style-1/design-tokens.json"
+VERIFY: exists(tokens_json_path), "Design tokens not found. Run /workflow:ui-design:consolidate first."
+
+design_tokens = Read(tokens_json_path)
+
+# Extract all available token categories and variable names
+token_reference = {
+  "colors": {"brand": list(keys), "surface": list(keys), "semantic": list(keys), "text": list(keys), "border": list(keys)},
+  "typography": {"font_family": list(keys), "font_size": list(keys), "font_weight": list(keys), "line_height": list(keys), "letter_spacing": list(keys)},
+  "spacing": list(keys), "border_radius": list(keys), "shadows": list(keys), "breakpoints": list(keys)
+}
+
+# Generate complete variable name lists for Agent prompt
+color_vars = []; FOR category, keys: FOR key: color_vars.append(f"--color-{category}-{key}")
+typography_vars = []; FOR category, keys: FOR key: typography_vars.append(f"--{category.replace('_', '-')}-{key}")
+spacing_vars = [f"--spacing-{key}" for key in token_reference.spacing]
+radius_vars = [f"--border-radius-{key}" for key in token_reference.border_radius]
+shadow_vars = [f"--shadow-{key}" for key in token_reference.shadows]
+breakpoint_vars = [f"--breakpoint-{key}" for key in token_reference.breakpoints]
+
+all_token_vars = color_vars + typography_vars + spacing_vars + radius_vars + shadow_vars + breakpoint_vars
+
+REPORT: f"✅ Extracted {len(all_token_vars)} design token variables from design-tokens.json"
+```
+
+### Phase 2: Optimized Matrix UI Generation
+
+**Strategy**: Two-layer generation reduces complexity from `O(S×L×T)` to `O(L×T)`, achieving **`S` times faster** performance.
+
+- **Layer 1**: Generate `L × T` layout templates (HTML structure + structural CSS) by agent
+- **Layer 2**: Instantiate `S × L × T` final prototypes via fast file operations
+
+#### Phase 2a: Layout Template Generation
+
+**Parallel Executor**: → @ui-design-agent
+
+```bash
+CREATE: {base_path}/prototypes/_templates/
+CREATE: {base_path}/prototypes/
+
+# Launch parallel template generation tasks → @ui-design-agent
+# Total agent tasks: layout_variants × len(target_list)
+FOR layout_id IN range(1, layout_variants + 1):
+    FOR target IN target_list:
+        # Read the target-specific layout plan
+        layout_json_path = f"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.json"
+        layout_plan = Read(layout_json_path)
+
+        Task(ui-design-agent): "
+          [UI_LAYOUT_TEMPLATE_GENERATION]
+
+          🚨 **CRITICAL: TARGET INDEPENDENCE REQUIREMENT** 🚨
+          You are generating a template for EXACTLY ONE target: '{target}'.
+          - Do NOT include content from other targets in the workflow
+          - This template is for '{target}' ONLY - treat it as a standalone UI entity
+          - Even if '{target}' might coexist with other targets in a final application,
+            your task is to create an INDEPENDENT, REUSABLE template for '{target}' alone
+
+          Generate a **style-agnostic** layout template for a specific {target_type} and layout strategy.
+
+          🎯 **CRITICAL REQUIREMENTS**:
+          ✅ **ADAPTIVE**: Multi-device responsive design (mobile, tablet, desktop)
+          ✅ **STYLE-SWITCHABLE**: Support runtime theme/style switching via CSS variables
+          ✅ **TOKEN-DRIVEN**: 100% CSS variable usage, zero hardcoded values
+          ✅ **INDEPENDENT**: Template for '{target}' only, no other targets included
+          ✅ **RESEARCH-INFORMED**: Use MCP tools to research modern UI patterns as needed
+
+          ## Context
+          LAYOUT_ID: {layout_id} | TARGET: {target} | TARGET_TYPE: {target_type}
+          BASE_PATH: {base_path}
+          {IF --session: Requirements: .workflow/WFS-{session}/.brainstorming/synthesis-specification.md}
+
+          **Target Type Details**:
+          {IF target_type == "page":
+            - Type: Full-page layout | Wrapper: Complete HTML document (<html>, <head>, <body>)
+            - Navigation: Include header/navigation | Footer: Include page footer
+            - Content: Complete page content structure
+          }
+          {ELSE IF target_type == "component":
+            - Type: Isolated UI component | Wrapper: Minimal container for demonstration
+            - Navigation: Exclude header/footer | Container: Simple wrapper (e.g., <div class=\"component-container\">)
+            - Content: Focus solely on component design
+          }
+
+          ## Task
+          Generate TWO files that work together as a reusable template.
+
+          ### File 1: HTML Template (`{target}-layout-{layout_id}.html`)
+
+          **Structure Requirements**:
+          - Semantic HTML5 elements with ARIA attributes
+          - Complete {target_type} wrapper (full document for pages, minimal for components)
+          - Zero hardcoded styles, colors, or spacing
+          - Responsive structure ready for mobile/tablet/desktop
+
+          **⚠️ CRITICAL: CSS Placeholder Links**
+
+          You MUST include these EXACT placeholder links in the `<head>` section:
+
+          ```html
+          <link rel=\"stylesheet\" href=\"{{STRUCTURAL_CSS}}\">
+          <link rel=\"stylesheet\" href=\"{{TOKEN_CSS}}\">
+          ```
+
+          **Placeholder Rules**:
+          1. Use EXACTLY `{{STRUCTURAL_CSS}}` and `{{TOKEN_CSS}}` with double curly braces
+          2. Place in `<head>` AFTER `<meta>` tags, BEFORE `</head>` closing tag
+          3. DO NOT substitute with actual paths - the script handles this
+          4. DO NOT add any other CSS `<link>` tags
+          5. These enable runtime style switching for all variants
+
+          **Complete HTML Template Examples**:
+
+          {IF target_type == \"page\":
+          ```html
+          <!DOCTYPE html>
+          <html lang=\"en\">
+          <head>
+            <meta charset=\"UTF-8\">
+            <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
+            <title>{target} - Layout {layout_id}</title>
+            <link rel=\"stylesheet\" href=\"{{STRUCTURAL_CSS}}\">
+            <link rel=\"stylesheet\" href=\"{{TOKEN_CSS}}\">
+          </head>
+          <body>
+            <header><nav aria-label=\"Main navigation\"><!-- Nav content --></nav></header>
+            <main><!-- Page content --></main>
+            <footer><!-- Footer content --></footer>
+          </body>
+          </html>
+          ```
+          }
+
+          {ELSE IF target_type == \"component\":
+          ```html
+          <!DOCTYPE html>
+          <html lang=\"en\">
+          <head>
+            <meta charset=\"UTF-8\">
+            <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
+            <title>{target} Component - Layout {layout_id}</title>
+            <link rel=\"stylesheet\" href=\"{{STRUCTURAL_CSS}}\">
+            <link rel=\"stylesheet\" href=\"{{TOKEN_CSS}}\">
+          </head>
+          <body>
+            <div class=\"component-container\">
+              <!-- Component content only -->
+            </div>
+          </body>
+          </html>
+          ```
+          }
+
+          ### File 2: CSS Template (`{target}-layout-{layout_id}.css`)
+          - 🎨 **TOKEN-DRIVEN STYLING**: ALL values use `var()` for dynamic theme switching
+          - 🔄 **RUNTIME SWITCHABLE**: `background-color: var(--color-surface-background);`
+          - 🚫 **ZERO LITERALS**: NO hardcoded values (#4F46E5, 16px, Arial)
+          - 📐 **SEMANTIC NAMING**: BEM or descriptive class naming
+          - 📱 **MOBILE-FIRST**: Responsive design using token-based breakpoints
+          - {IF target_type == "component": "Focus styles on component only, minimal global styles"}
+
+          ## Layout Plan (Target-Specific)
+          Implement the following pre-defined layout plan for this target:
+
+          **Layout JSON Path**: {layout_json_path}
+          **Layout Plan**:
+          ```json
+          {JSON.stringify(layout_plan, null, 2)}
+          ```
+
+          **Critical**: Your job is to IMPLEMENT this exact layout plan, not to redesign it.
+          - Follow the structure defined in the 'structure' field
+          - Use semantic hints for appropriate HTML elements
+          - Respect the target_type (page vs component) wrapper requirements
+          - Apply the specified responsive behavior
+
+          ## Token Usage Requirements (STRICT - USE EXACT NAMES)
+
+          **CRITICAL**: You MUST use ONLY the variable names listed below.
+          DO NOT invent variable names like --color-background-base, --radius-md, --transition-base, etc.
+
+          **Available Variables** ({len(all_token_vars)} total):
+          - Color variables ({len(color_vars)}): --color-brand-primary, --color-surface-background, --color-text-primary, etc.
+          - Typography variables ({len(typography_vars)}): --font-family-heading, --font-size-base, --font-weight-bold, etc.
+          - Spacing variables ({len(spacing_vars)}): --spacing-0, --spacing-1, ..., --spacing-24
+          - Border radius ({len(radius_vars)}): --border-radius-none, --border-radius-sm, ..., --border-radius-full
+          - Shadows ({len(shadow_vars)}): --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl
+          - Breakpoints ({len(breakpoint_vars)}): --breakpoint-sm, --breakpoint-md, --breakpoint-lg, etc.
+
+          **STRICT RULES**:
+          1. Use ONLY the variables listed above - NO custom variable names
+          2. If you need a value not in the list, use the closest semantic match
+          3. For missing tokens (like transitions), use literal CSS values: `transition: all 0.2s ease;`
+          4. NO hardcoded colors, fonts, or spacing (e.g., #4F46E5, 16px, Arial)
+          5. All `var()` references must match exact variable names above
+
+          ## File Write Instructions
+          Generate TWO template files and WRITE them using Write() tool:
+
+          ### File 1: HTML Template
+          **Path**: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.html
+          **Content**: Reusable HTML structure with CSS placeholders
+
+          ### File 2: CSS Template
+          **Path**: {base_path}/prototypes/_templates/{target}-layout-{layout_id}.css
+          **Content**: Structural CSS using var() for all values
+
+          ## Write Operation Instructions
+          - Use Write() tool for both files with absolute paths provided above
+          - Create directory if needed: Bash('mkdir -p {base_path}/prototypes/_templates')
+          - Verify each write operation succeeds
+
+          ## Example Write Operations
+          ```javascript
+          Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.html\", html_content)
+          Write(\"{base_path}/prototypes/_templates/{target}-layout-{layout_id}.css\", css_content)
+          ```
+
+          ## Completion
+          Report successful file creation for both HTML and CSS templates with path confirmation.
+
+          🎯 **CRITICAL QUALITY GATES**:
+          ✅ **ADAPTIVE**: Works on mobile (375px), tablet (768px), desktop (1024px+)
+          ✅ **STYLE-SWITCHABLE**: Change {{TOKEN_CSS}} link → instant theme switching
+          ✅ **TOKEN-ONLY**: 100% var() usage, inspectable with \"Search for: #|px|rem\" → 0 matches in values
+          ✅ **REUSABLE**: Same HTML/CSS structure works for ALL style variants
+          ✅ **FILE-WRITTEN**: Files written directly to file system, not returned as text
+
+          **Wrapper Strategy**:
+          {IF target_type == "page": Use complete HTML document structure with navigation and footer.}
+          {ELSE: Use minimal wrapper with component container only.}
+
+          DO NOT return file contents as text - write them directly using Write() tool.
+        "
+
+REPORT: "⏳ Phase 2a: Waiting for agents to complete template generation..."
+```
+
+#### Phase 2a.5: Verify Agent Template File Creation
+
+```bash
+REPORT: "📝 Phase 2a.5: Verifying agent template file creation..."
+
+# Verify each agent created template files
+FOR layout_id IN range(1, layout_variants + 1):
+    FOR target IN target_list:
+        html_label = f"{target}-layout-{layout_id}.html"
+        css_label = f"{target}-layout-{layout_id}.css"
+
+        html_path = f"{base_path}/prototypes/_templates/{html_label}"
+        css_path = f"{base_path}/prototypes/_templates/{css_label}"
+
+        # Verify files exist
+        VERIFY: exists(html_path), f"HTML template not created by agent: {html_label}"
+        VERIFY: exists(css_path), f"CSS template not created by agent: {css_label}"
+
+        # Validate content
+        TRY:
+            html_content = Read(html_path)
+            css_content = Read(css_path)
+
+            # Basic validation checks
+            VALIDATE: len(html_content) > 100, f"HTML template too short: {html_label}"
+            VALIDATE: len(css_content) > 50, f"CSS template too short: {css_label}"
+            VALIDATE: "<!DOCTYPE html>" in html_content OR "<div" in html_content, f"Invalid HTML structure: {html_label}"
+            VALIDATE: "var(--" in css_content, f"Missing CSS variables: {css_label}"
+
+            html_size = get_file_size(html_path)
+            css_size = get_file_size(css_path)
+            REPORT: f"   ✓ Verified: {html_label} ({html_size} KB) + {css_label} ({css_size} KB)"
+        CATCH error:
+            ERROR: f"Validation failed for {target}-layout-{layout_id}: {error}"
+            REPORT: f"   ⚠️ Files exist but validation failed - review agent output"
+
+REPORT: "✅ Phase 2a.5 complete: Verified {layout_variants * len(target_list) * 2} template files"
+```
+
+#### Phase 2b: Prototype Instantiation
+
+```bash
+REPORT: "🚀 Phase 2b: Instantiating prototypes from templates..."
+
+# Step 1: Convert design tokens to CSS for each style
+REPORT: "   Converting design tokens to CSS variables..."
+
+# Check for jq dependency
+IF NOT command_exists("jq"):
+    ERROR: "jq is not installed or not in PATH. The conversion script requires jq."
+    REPORT: "Please install jq: macOS: brew install jq | Linux: apt-get install jq | Windows: https://stedolan.github.io/jq/download/"
+    EXIT 1
+
+# Convert design tokens to CSS for each style variant
+FOR style_id IN range(1, style_variants + 1):
+    tokens_json_path = "{base_path}/style-consolidation/style-${style_id}/design-tokens.json"
+    tokens_css_path = "{base_path}/style-consolidation/style-${style_id}/tokens.css"
+    script_path = "~/.claude/scripts/convert_tokens_to_css.sh"
+
+    # Verify input file exists
+    IF NOT exists(tokens_json_path): REPORT: "   ✗ ERROR: Input file not found"; CONTINUE
+
+    # Execute conversion: cat input.json | script.sh > output.css
+    Bash(cat "${tokens_json_path}" | "${script_path}" > "${tokens_css_path}")
+
+    # Verify output was generated
+    IF exit_code == 0 AND exists(tokens_css_path):
+        REPORT: "   ✓ Generated tokens.css for style-${style_id}"
+    ELSE:
+        REPORT: "   ✗ ERROR: Failed to generate tokens.css for style-${style_id}"
+
+# Step 2: Use ui-instantiate-prototypes.sh script for instantiation
+prototypes_dir = "{base_path}/prototypes"; targets_csv = ','.join(target_list)
+session_id = --session provided ? {session_id} : "standalone"
+
+# Execute instantiation script with target type
+Bash(~/.claude/scripts/ui-instantiate-prototypes.sh "{prototypes_dir}" --session-id "{session_id}" --mode "{target_type}")
+
+# The script auto-detects: Targets, Style variants, Layout variants
+# The script generates:
+# 1. S × L × T HTML prototypes with CSS links
+# 2. Implementation notes for each prototype
+# 3. compare.html (interactive matrix)
+# 4. index.html (navigation page)
+# 5. PREVIEW.md (documentation)
+
+REPORT: "✅ Phase 2b complete: Instantiated {style_variants * layout_variants * len(target_list)} final prototypes"
+REPORT: "   Mode: {target_type} | Performance: {style_variants}× faster than original approach"
+```
+
+### Phase 3: Verify Preview Files
+
+```bash
+REPORT: "🔍 Phase 3: Verifying preview files..."
+
+expected_files = ["{base_path}/prototypes/compare.html", "{base_path}/prototypes/index.html", "{base_path}/prototypes/PREVIEW.md"]
+
+all_present = true
+FOR file_path IN expected_files:
+    IF exists(file_path): REPORT: "   ✓ Found: {basename(file_path)}"
+    ELSE: REPORT: "   ✗ Missing: {basename(file_path)}"; all_present = false
+
+IF all_present: REPORT: "✅ Phase 3 complete: All preview files verified"
+ELSE: WARN: "⚠️ Some preview files missing - script may have failed"
+
+# Optional: Generate fallback design-tokens.css for reference
+fallback_css_path = "{base_path}/prototypes/design-tokens.css"
+IF NOT exists(fallback_css_path):
+    Write(fallback_css_path, "/* Auto-generated fallback CSS custom properties */\n/* See style-consolidation/style-{n}/tokens.css for actual values */")
+    REPORT: "   ✓ Generated fallback design-tokens.css"
+```
+
+### Phase 3.5: Cross-Target Consistency Validation
+
+**Condition**: Only executes if `len(target_list) > 1 AND target_type == "page"`
+
+```bash
+# Skip if single target or component mode
+IF len(target_list) <= 1 OR target_type == "component": SKIP to Phase 4
+
+# For multi-page workflows, validate cross-page consistency → @ui-design-agent
+FOR style_id IN range(1, style_variants + 1):
+    FOR layout_id IN range(1, layout_variants + 1):
+        Task(@ui-design-agent): "
+          [CROSS_PAGE_CONSISTENCY_VALIDATION]
+
+          Validate design consistency across multiple {target_type}s for Style-{style_id} Layout-{layout_id}
+
+          🎯 **VALIDATION FOCUS**:
+          ✅ **ADAPTIVE CONSISTENCY**: Same responsive behavior across all pages
+          ✅ **STYLE-SWITCHING**: Verify token references enable uniform theme switching
+          ✅ **CROSS-PAGE HARMONY**: Shared components use identical CSS variables
+
+          ## Context
+          STYLE_ID: {style_id} | LAYOUT_ID: {layout_id} | TARGETS: {target_list} | TARGET_TYPE: {target_type}
+          BASE_PATH: {base_path}
+
+          ## Input Files
+          FOR each target: {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html/css
+
+          ## Validation Tasks
+          1. **Shared Component Consistency**: Check header/nav/footer structure matches
+          2. **Token Usage Consistency**: Verify same design-tokens file, no hardcoded values
+          3. **Accessibility Consistency**: ARIA attributes, heading hierarchy, landmark roles
+          4. **Layout Strategy Adherence**: Layout-{layout_id} strategy applied consistently
+
+          ## Output
+          Generate consistency report markdown file at:
+          {base_path}/prototypes/consistency-report-s{style_id}-l{layout_id}.md
+
+          Include validation results, issues found, and recommendations.
+          Focus on truly shared elements. Page-specific content variations are acceptable.
+        "
+
+# Aggregate consistency reports
+Write({base_path}/prototypes/CONSISTENCY_SUMMARY.md):
+# Multi-{target_type.capitalize()} Consistency Summary
+
+## Validated Combinations
+- Style Variants: {style_variants} | Layout Variants: {layout_variants}
+- Total Reports: {style_variants * layout_variants}
+
+## Report Files
+{FOR s, l: - [Style {s} Layout {l}](./consistency-report-s{s}-l{l}.md)}
+
+Run `/workflow:ui-design:update` once all issues are resolved.
+```
+
+### Phase 4: Completion
+
+```javascript
+TodoWrite({todos: [
+  {content: "Resolve paths and load design systems", status: "completed", activeForm: "Loading design systems"},
+  {content: `Plan ${target_list.length}×${layout_variants} target-specific layouts`, status: "completed", activeForm: "Planning layouts"},
+  {content: "Extract design token variable names", status: "completed", activeForm: "Extracting token variables"},
+  {content: `Generate ${layout_variants}×${target_list.length} layout templates using target-specific plans`, status: "completed", activeForm: "Generating templates"},
+  {content: "Convert design tokens to CSS variables", status: "completed", activeForm: "Converting tokens"},
+  {content: `Instantiate ${style_variants}×${layout_variants}×${target_list.length} prototypes using script`, status: "completed", activeForm: "Running script"},
+  {content: "Verify preview files generation", status: "completed", activeForm: "Verifying files"}
+]});
+```
+
+**Completion Message**:
+```
+✅ Optimized Matrix UI generation complete!
+
+Configuration:
+- Style Variants: {style_variants}
+- Layout Variants: {layout_variants} (target-specific planning)
+- Target Type: {target_type_icon} {target_type}
+- Targets: {target_list}
+- Total Prototypes: {style_variants * layout_variants * len(target_list)}
+- Layout Plans: {len(target_list) × layout_variants} target-specific JSON files generated
+
+Performance Metrics:
+- Layout Templates Generated: {layout_variants * len(target_list)} (Agent tasks)
+- Prototypes Instantiated: {style_variants * layout_variants * len(target_list)} (script-based)
+- Preview Files: compare.html, index.html, PREVIEW.md (auto-generated)
+- Speed Improvement: {style_variants}× faster than previous approach
+- Resource Efficiency: {100 * (1 - 1/style_variants)}% reduction in Agent calls
+- Script: ui-instantiate-prototypes.sh v3.0 with auto-detection
+
+Generated Structure:
+📂 {base_path}/prototypes/
+├── _templates/
+│   ├── {target}-layout-{l}.json ({len(target_list) × layout_variants} layout plans)
+│   ├── {target}-layout-{l}.html ({layout_variants * len(target_list)} HTML templates)
+│   └── {target}-layout-{l}.css ({layout_variants * len(target_list)} CSS templates)
+├── {target}-style-{s}-layout-{l}.html ({style_variants * layout_variants * len(target_list)} final prototypes)
+├── {target}-style-{s}-layout-{l}-notes.md
+├── compare.html (interactive matrix visualization)
+└── index.html (quick navigation)
+
+🌐 Interactive Preview:
+1. Matrix View: Open compare.html (recommended)
+2. Quick Index: Open index.html
+3. Instructions: See PREVIEW.md
+
+{IF target_type == "component": Note: Components are rendered with minimal wrapper for isolated comparison.}
+
+Next: /workflow:ui-design:update {--session flag if applicable}
+
+Note: When called from /workflow:ui-design:auto, design-update is triggered automatically.
+
+**Dynamic Values**: target_type_icon: "📄" for page, "🧩" for component
+```
+
+## Output Structure
+
+```
+{base_path}/prototypes/
+├── _templates/                            # Target-specific layout plans and templates
+│   ├── {target}-layout-1.json            # Layout plan JSON (target-specific)
+│   ├── {target}-layout-1.html            # Style-agnostic HTML structure
+│   ├── {target}-layout-1.css             # Structural CSS with var() references
+│   └── ... (T × L layout plans + templates)
+├── compare.html                           # Interactive matrix visualization
+├── index.html                             # Simple navigation page
+├── PREVIEW.md                             # Preview instructions
+├── design-tokens.css                      # CSS custom properties fallback
+├── {target}-style-{s}-layout-{l}.html    # Final prototypes (copied from templates)
+├── {target}-style-{s}-layout-{l}-notes.md  # Implementation notes
+└── ... (S × L × T total final files)
+
+{base_path}/style-consolidation/
+├── style-1/ (design-tokens.json, tokens.css, style-guide.md)
+├── style-2/ (same structure)
+└── ...
+```
+
+## Error Handling
+
+### Pre-execution Checks
+- **No design systems found**: Error - Run `/workflow:ui-design:consolidate` first
+- **Invalid target names**: Extract from synthesis-specification.md or error with validation message
+- **Missing templates directory**: Auto-created in Phase 1.5
+- **Unsupported target type**: Error if target_type not in ["page", "component"]
+- **Layout planning failures**: Check Phase 1.5 agent outputs for errors
+
+### Phase-Specific Errors
+- **Agent execution errors (Phase 2a)**: Report details, suggest retry with specific phase
+- **Token conversion errors (Phase 2b)**: Check design-tokens.json format, validate JSON schema
+- **Script execution errors (Phase 2b)**: Check script exists, permissions, output for specific errors
+- **Preview generation errors (Phase 3)**: Check script completed, verify template exists, review Phase 2b output
+
+### Recovery Strategies
+- **Partial failure**: Script reports generated vs failed counts - review logs
+- **Missing templates**: Indicates Phase 2a issue - regenerate templates
+- **Auto-detection failures**: Use manual mode with explicit parameters
+- **Permission errors**: Run `chmod +x ~/.claude/scripts/ui-instantiate-prototypes.sh`
+
+## Quality Checks
+
+After generation, ensure:
+- [ ] All CSS values reference design token custom properties
+- [ ] No hardcoded colors, spacing, or typography
+- [ ] Semantic HTML structure with proper element hierarchy
+- [ ] ARIA attributes present for accessibility
+- [ ] Responsive design implemented with mobile-first approach
+- [ ] File naming follows `{target}-style-{s}-layout-{l}` convention
+- [ ] compare.html loads correctly with all prototypes
+- [ ] Template files are reusable and style-agnostic
+- [ ] Appropriate wrapper used (full-page for pages, minimal for components)
+
+## Key Features
+
+1. **Target-Specific Layout Planning** 🆕 - Each target gets custom-designed layouts; Agent researches modern patterns using MCP tools; Layout plans saved as structured JSON
+2. **Unified Target Generation** - Supports both pages (full layouts) and components (isolated elements); Backward compatible with legacy `--pages` parameter
+3. **Optimized Template-Based Architecture** - Generates `L × T` reusable templates plus `L × T` layout plans; **`S` times faster**
+4. **Three-Layer Generation Strategy** - Layer 1: Layout planning (target-specific); Layer 2: Template generation (implements plans); Layer 3: Fast instantiation; Agent autonomously uses MCP tools
+5. **Script-Based Instantiation (v3.0)** - Uses `ui-instantiate-prototypes.sh` for efficient file operations; Auto-detection; Robust error handling; Integrated preview generation; Supports both page and component modes
+6. **Consistent Cross-Style Layouts** - Same layout structure applied uniformly; Easier to compare styles; Simplified maintenance
+7. **Dynamic Style Injection** - CSS custom properties enable runtime style switching; Each style variant has its own `tokens.css` file
+8. **Interactive Visualization** - Full-featured compare.html; Matrix grid view with synchronized scrolling; Enhanced index.html with statistics; Comprehensive PREVIEW.md
+9. **Production-Ready Output** - Semantic HTML5 and ARIA attributes (WCAG 2.2); Mobile-first responsive design; Token-driven styling; Implementation notes
+
+## Integration Points
+
+- **Input**: Per-style `design-tokens.json` from `/workflow:ui-design:consolidate`; `--targets` and `--layout-variants` parameters; Optional: `synthesis-specification.md` for target requirements; Target type specification
+- **Output**: Target-specific `layout-{n}.json` files; Matrix HTML/CSS prototypes for `/workflow:ui-design:update`
+- **Template**: `~/.claude/workflows/_template-compare-matrix.html` (global)
+- **Auto Integration**: Automatically triggered by `/workflow:ui-design:explore-auto` workflow
+- **Key Change**: Layout planning moved from consolidate to generate phase; Each target gets custom-designed layouts
+- **Backward Compatibility**: Legacy `--pages` parameter continues to work

.claude/commands/workflow/ui-design/imitate-auto.md

@@ -0,0 +1,537 @@
+---
+name: imitate-auto
+description: Imitation-focused UI design workflow - Rapidly replicate a single design style from URL or images (skip exploration, direct to implementation)
+usage: /workflow:ui-design:imitate-auto [--url "<url>"] [--images "<glob>"] [--prompt "<desc>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>]
+argument-hint: "[--url \"https://example.com\"] [--images \"refs/*.png\"] [--prompt \"Imitate dark mode style\"] [--targets \"dashboard,settings\"] [--target-type \"page\"]"
+examples:
+  - /workflow:ui-design:imitate-auto --url "https://linear.app" --targets "home,features,pricing"
+  - /workflow:ui-design:imitate-auto --images "refs/design.png" --prompt "Imitate this minimalist design for dashboard and settings"
+  - /workflow:ui-design:imitate-auto --url "https://stripe.com" --session WFS-payment
+  - /workflow:ui-design:imitate-auto --images "refs/*.png" --targets "home"
+  - /workflow:ui-design:imitate-auto --url "https://example.com" --targets "navbar,hero" --target-type "component"
+  - /workflow:ui-design:imitate-auto --images "refs/*.png" --pages "home"  # Legacy syntax
+allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*)
+---
+
+# UI Design Imitate-Auto Workflow Command
+
+## Overview & Philosophy
+
+**Fast-track UI imitation workflow**: Replicates a single design style from reference source (URL or images), bypassing exploration and consolidation phases for maximum speed (~2-3× faster than explore-auto).
+
+**Core Philosophy**:
+- **Imitation over Exploration**: Focus on replicating specific design, not generating variants
+- **Single Mode**: Always 1 style × 1 layout × N pages
+- **Speed Optimized**: Bypasses `consolidate` step via direct token extraction
+- **Reference-Driven**: Requires URL or images as primary input
+- **Auto-Screenshot**: Supports Playwright/Chrome with manual upload fallback
+
+**Streamlined Flow**:
+1. User triggers → Phase 0 (initialization) → Phase 0.5 (screenshot capture) → Phase 1 (style extraction) → Phase 2 (token adaptation) → Phase 3 (prototype generation) → Phase 4 (integration) → Complete
+
+**Performance**: ~2-3× faster than explore-auto for single-style scenarios
+
+**Ideal For**: MVP development, high-fidelity prototyping, design replication, studying successful patterns
+**Not For**: Design exploration, generating multiple alternatives, novel design creation
+
+## Core Rules
+
+1. **Start Immediately**: TodoWrite initialization → Phase 0 execution
+2. **No Multi-Variant**: Always 1 style × 1 layout × N pages
+3. **Reference Required**: Must provide `--url` OR `--images`
+4. **Auto-Continue**: Automatic phase progression without pausing
+5. **Track Progress**: Update TodoWrite after each phase
+
+## Parameter Requirements
+
+**Required** (at least one):
+- `--url "<url>"`: Website URL to imitate (e.g., "https://linear.app")
+- `--images "<glob>"`: Local reference images (e.g., "refs/*.png")
+
+**Optional**:
+- `--targets "<list>"`: Comma-separated targets (pages/components) to generate (inferred from prompt if omitted)
+- `--target-type "page|component"`: Explicitly set target type (default: intelligent detection)
+- `--session <id>"`: Workflow session ID (standalone if omitted)
+- `--prompt "<desc>"`: Additional design guidance (e.g., "Focus on dark mode")
+
+**Legacy Parameters** (maintained for backward compatibility):
+- `--pages "<list>"`: Alias for `--targets` with `--target-type page`
+
+**Not Supported**:
+- `--style-variants`: Always 1 (single style)
+- `--layout-variants`: Always 1 (single layout)
+- `--batch-plan`: Not supported in imitate mode
+
+## 5-Phase Execution
+
+### Phase 0: Simplified Initialization
+```bash
+# Generate run ID and determine base path
+run_id = "run-$(date +%Y%m%d-%H%M%S)"
+
+IF --session:
+    base_path = ".workflow/WFS-{session_id}/design-${run_id}"
+ELSE:
+    base_path = ".workflow/.design/${run_id}"
+
+# Create directories (simpler than explore-auto)
+Bash(mkdir -p "${base_path}/{style-extraction,style-consolidation/style-1,prototypes}")
+
+# Initialize metadata
+Write({base_path}/.run-metadata.json): {
+  "run_id": "${run_id}",
+  "session_id": "${session_id}",
+  "timestamp": "$(date -u +%Y-%m-%dT%H:%M:%SZ)",
+  "workflow": "ui-design:imitate-auto",
+  "mode": "single_style_imitation",
+  "parameters": {
+    "url": "${url_value}",
+    "images": "${images_pattern}",
+    "pages": "${inferred_page_list}",
+    "prompt": "${prompt_text}"
+  },
+  "status": "in_progress"
+}
+
+# Unified target inference (simplified for imitate mode, no interactive confirmation)
+target_list = []
+target_type = "page"  # Default to page for imitate mode
+target_source = "none"
+
+# Step 1: Handle legacy --pages parameter (backward compatibility)
+IF --pages provided:
+    target_list = split_and_clean({--pages value}, [",", ";", "、"])
+    target_type = "page"
+    target_source = "explicit_legacy"
+    REPORT: "📋 Using explicitly provided pages (legacy): {', '.join(target_list)}"
+
+# Step 2: Handle unified --targets parameter
+ELSE IF --targets provided:
+    target_list = split_and_clean({--targets value}, [",", ";", "、"])
+    target_source = "explicit"
+
+    # Override type if explicitly set
+    IF --target-type provided:
+        target_type = --target-type
+        REPORT: "🎯 Using explicitly provided targets with type '{target_type}': {', '.join(target_list)}"
+    ELSE:
+        # Intelligent type detection (same logic as explore-auto)
+        target_type = detect_target_type(target_list)
+        REPORT: "🎯 Using explicitly provided targets (detected type: {target_type}): {', '.join(target_list)}"
+
+# Step 3: Extract from prompt
+ELSE IF --prompt provided:
+    # Extract from prompt: "for dashboard and settings" or "pages: home, about"
+    target_list = extract_targets_from_prompt(prompt_text)
+    target_source = "prompt_inferred"
+    IF NOT target_list:
+        target_list = ["home"]
+
+    # Detect type from prompt or targets
+    IF --target-type provided:
+        target_type = --target-type
+    ELSE:
+        target_type = detect_target_type(target_list)
+
+# Step 4: Fallback default
+ELSE:
+    target_list = ["home"]
+    target_type = "page"
+    target_source = "default"
+
+# Validate and clean target names
+validated_targets = []
+FOR target IN target_list:
+    cleaned = target.strip().lower().replace(" ", "-")
+    IF regex_match(cleaned, r"^[a-z0-9][a-z0-9_-]*$"):
+        validated_targets.append(cleaned)
+
+IF NOT validated_targets:
+    validated_targets = ["home"]
+    target_type = "page"
+
+type_emoji = "📄" IF target_type == "page" ELSE "🧩"
+type_label = "pages" IF target_type == "page" ELSE "components"
+
+REPORT: "📋 Imitate mode: {len(validated_targets)} {type_label} with single style"
+REPORT: "   {type_emoji} Targets: {', '.join(validated_targets)}"
+REPORT: "   Type: {target_type}"
+REPORT: "   Reference: {url_value OR images_pattern}"
+
+STORE: run_id, base_path, inferred_target_list = validated_targets, target_type = target_type
+```
+
+---
+
+### Phase 0.5: URL Screenshot Capture (Auto-Fallback)
+
+**Condition**: Only if `--url` provided
+
+**Execution**:
+```bash
+IF --url provided:
+    REPORT: "📸 Phase 0.5: Capturing screenshots..."
+    screenshot_dir = "{base_path}/screenshots"
+    Bash(mkdir -p "{screenshot_dir}")
+
+    screenshot_success = false
+    screenshot_files = []
+
+    # Method 1: Playwright CLI (preferred)
+    TRY:
+        REPORT: "   Attempting Playwright..."
+        Bash(npx playwright screenshot "{url_value}" "{screenshot_dir}/full-page.png" --full-page --timeout 30000)
+        screenshot_files.append("{screenshot_dir}/full-page.png")
+        screenshot_success = true
+        REPORT: "   ✅ Playwright screenshot captured"
+    CATCH:
+        REPORT: "   ⚠️ Playwright failed"
+
+    # Method 2: Chrome DevTools (fallback)
+    IF NOT screenshot_success:
+        TRY:
+            REPORT: "   Attempting Chrome headless..."
+            Bash(google-chrome --headless --disable-gpu --screenshot="{screenshot_dir}/full-page.png" --window-size=1920,1080 "{url_value}")
+            screenshot_files.append("{screenshot_dir}/full-page.png")
+            screenshot_success = true
+            REPORT: "   ✅ Chrome screenshot captured"
+        CATCH:
+            REPORT: "   ⚠️ Chrome failed"
+
+    # Manual upload fallback
+    IF NOT screenshot_success:
+        REPORT: ""
+        REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+        REPORT: "⚠️  AUTOMATED SCREENSHOT FAILED"
+        REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+        REPORT: "Unable to capture: {url_value}"
+        REPORT: ""
+        REPORT: "Manual screenshot required:"
+        REPORT: "  1. Visit: {url_value}"
+        REPORT: "  2. Take full-page screenshot"
+        REPORT: "  3. Save to: {screenshot_dir}/"
+        REPORT: ""
+        REPORT: "Options:"
+        REPORT: "  • 'ready' - screenshot saved"
+        REPORT: "  • 'skip' - use URL analysis only"
+        REPORT: "  • 'abort' - cancel workflow"
+        REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+
+        user_response = WAIT_FOR_USER_INPUT()
+
+        IF user_response MATCHES r"^(ready|done|ok)$":
+            screenshot_files = Glob("{screenshot_dir}/*.{png,jpg,jpeg}")
+            IF screenshot_files:
+                screenshot_success = true
+                REPORT: "✅ Manual screenshot detected"
+            ELSE:
+                REPORT: "❌ No screenshot found, using URL analysis only"
+        ELSE IF user_response MATCHES r"^skip$":
+            REPORT: "⏭️  Skipping screenshot, using URL analysis"
+        ELSE IF user_response MATCHES r"^abort$":
+            ERROR: "Workflow aborted by user"
+            EXIT
+        ELSE:
+            REPORT: "⚠️ Invalid input, proceeding with URL analysis"
+
+    # Store results
+    IF screenshot_success:
+        STORE: screenshot_mode = "with_screenshots", screenshot_paths = screenshot_files
+        REPORT: "✅ Screenshot capture complete: {len(screenshot_files)} image(s)"
+    ELSE:
+        STORE: screenshot_mode = "url_only", screenshot_paths = []
+        REPORT: "ℹ️  Proceeding with URL analysis only"
+ELSE:
+    STORE: screenshot_mode = "manual_images", screenshot_paths = []
+    REPORT: "ℹ️  Using provided images (--images parameter)"
+```
+
+**Auto-Continue**: On completion → Phase 1
+
+---
+
+### Phase 1: Single Style Extraction
+
+**Command**:
+```bash
+# Determine input based on screenshot capture
+IF screenshot_mode == "with_screenshots":
+    screenshot_glob = "{base_path}/screenshots/*.{png,jpg,jpeg}"
+    images_flag = "--images \"{screenshot_glob}\""
+    url_flag = ""
+    source_desc = "captured screenshots from {url_value}"
+ELSE IF screenshot_mode == "url_only":
+    url_flag = "--url \"{url_value}\""
+    images_flag = ""
+    source_desc = "URL analysis of {url_value}"
+ELSE IF screenshot_mode == "manual_images":
+    images_flag = --images present ? "--images \"{image_glob}\"" : ""
+    url_flag = ""
+    source_desc = "user-provided images"
+
+prompt_flag = --prompt present ? "--prompt \"{prompt_text}\"" : ""
+run_base_flag = "--base-path \"{base_path}\""
+
+# Construct optimized extraction prompt
+enhanced_prompt = "Extract a single, high-fidelity design system that accurately imitates the visual style from {source_desc}. {prompt_text}"
+
+# Force single variant
+command = "/workflow:ui-design:extract {run_base_flag} {url_flag} {images_flag} --prompt \"{enhanced_prompt}\" --variants 1"
+
+REPORT: "🚀 Phase 1: Style Extraction"
+REPORT: "   Source: {source_desc}"
+REPORT: "   Mode: Single style (imitation-optimized)"
+
+SlashCommand(command)
+```
+**Auto-Continue**: On completion → Phase 2
+
+---
+
+### Phase 2: Fast Token Adaptation (Bypass Consolidate)
+
+**Action**: Direct extraction of design tokens, bypassing heavy `consolidate` step
+
+**Execution**:
+```bash
+REPORT: "🚀 Phase 2: Fast token adaptation (bypassing consolidate)"
+
+# Read single style card
+style_cards = Read({base_path}/style-extraction/style-cards.json)
+style_card = style_cards.style_cards[0]
+
+design_tokens = style_card.proposed_tokens
+philosophy = style_card.design_philosophy
+style_name = style_card.name
+
+# Write design-tokens.json directly
+Write({base_path}/style-consolidation/style-1/design-tokens.json, JSON.stringify(design_tokens, null, 2))
+
+# Create minimal style-guide.md
+Write({base_path}/style-consolidation/style-1/style-guide.md):
+# Design System: {style_name}
+
+## Design Philosophy
+{philosophy}
+
+## Description
+{style_card.description}
+
+## Design Tokens
+All tokens in `design-tokens.json` follow OKLCH color space.
+
+**Key Colors**:
+- Primary: {design_tokens.colors.brand.primary}
+- Background: {design_tokens.colors.surface.background}
+- Text: {design_tokens.colors.text.primary}
+
+**Typography**:
+- Heading: {design_tokens.typography.font_family.heading}
+- Body: {design_tokens.typography.font_family.body}
+
+**Spacing Scale**: {design_tokens.spacing.keys().length} values
+
+*Note: Generated in imitate mode for fast replication.*
+
+REPORT: "✅ Tokens extracted and formatted"
+REPORT: "   Style: {style_name}"
+REPORT: "   Bypassed consolidate for {performance_gain}× speed"
+```
+
+**Auto-Continue**: On completion → Phase 3
+
+---
+
+### Phase 3: Single Prototype Generation
+
+**Command**:
+```bash
+run_base_flag = "--base-path \"{base_path}\""
+targets_string = ",".join(inferred_target_list)
+targets_flag = "--targets \"{targets_string}\""
+type_flag = "--target-type \"{target_type}\""
+
+# Force 1×1 mode
+command = "/workflow:ui-design:generate {run_base_flag} {targets_flag} {type_flag} --style-variants 1 --layout-variants 1"
+
+type_emoji = "📄" IF target_type == "page" ELSE "🧩"
+type_label = "page(s)" IF target_type == "page" ELSE "component(s)"
+
+REPORT: "🚀 Phase 3: Generating {len(inferred_target_list)} {type_label}"
+REPORT: "   {type_emoji} Targets: {targets_string}"
+REPORT: "   Mode: 1×1 (imitation-optimized)"
+
+SlashCommand(command)
+```
+
+**Result**:
+- Prototypes: `{target}-style-1-layout-1.html`
+- Total: `len(inferred_target_list)`
+- Type: {target_type} (full-page for pages, minimal wrapper for components)
+
+**Auto-Continue**: On completion → Phase 4
+
+---
+
+### Phase 4: Design System Integration
+
+**Command**:
+```bash
+IF --session:
+    session_flag = "--session {session_id}"
+    command = "/workflow:ui-design:update {session_flag}"
+    SlashCommand(command)
+ELSE:
+    REPORT: "ℹ️ Standalone mode: Skipping integration"
+    REPORT: "   Prototypes at: {base_path}/prototypes/"
+```
+
+**Completion**: Workflow complete
+
+## TodoWrite Pattern
+
+```javascript
+// Initialize
+TodoWrite({todos: [
+  {"content": "Initialize run directory and infer targets", "status": "in_progress", "activeForm": "Initializing"},
+  {"content": "Capture screenshots from URL (if provided)", "status": "pending", "activeForm": "Capturing screenshots"},
+  {"content": "Extract single design style from reference", "status": "pending", "activeForm": "Extracting style"},
+  {"content": "Adapt tokens (bypass consolidate)", "status": "pending", "activeForm": "Adapting tokens"},
+  {"content": "Generate single-style prototypes", "status": "pending", "activeForm": "Generating prototypes"},
+  {"content": "Integrate design system", "status": "pending", "activeForm": "Integrating design"}
+]})
+
+// Update after each phase: Mark current completed, next in_progress
+```
+
+## Error Handling
+
+- **No reference source**: Error if neither `--url` nor `--images` provided
+- **Screenshot capture failure**:
+  - Tries 2 methods: Playwright → Chrome DevTools
+  - Falls back to manual upload: user uploads screenshot, skips, or aborts
+  - Gracefully handles missing Playwright/Chrome
+- **Invalid URL/images**: Report error, suggest alternative input
+- **Token extraction failure**: Fallback to minimal default design system
+
+## Performance Comparison
+
+| Aspect | explore-auto | imitate-auto |
+|--------|--------------|--------------|
+| **Purpose** | Design exploration | Design replication |
+| **Input** | Optional URL/images | **Required** URL or images |
+| **Variants** | 1-5 styles × 1-5 layouts | Always 1 × 1 |
+| **Consolidate** | Full consolidation | **Bypassed** (direct tokens) |
+| **Speed** | Baseline | **~2-3× faster** |
+| **Output** | Matrix (S×L×P) | Direct (1×1×P) |
+| **Phases** | 6 phases | 5 phases |
+
+**Performance Benefits**:
+1. **Skipped consolidate**: Saves ~30-60s (most expensive phase)
+2. **Single variant**: Reduces extraction complexity
+3. **Direct token mapping**: Simple file ops vs AI synthesis
+4. **Streamlined decisions**: No variant selection/confirmation
+
+## Example Execution Flows
+
+### Example 1: URL with Auto-Screenshot (Pages)
+```bash
+/workflow:ui-design:imitate-auto --url "https://linear.app" --targets "home,features,pricing"
+
+# Flow:
+# 0. Init: 3 pages identified
+# 0.5. Screenshot: Playwright captures linear.app
+# 1. Extract: Single style from screenshot
+# 2. Adapt: Direct tokens (~2s vs consolidate's ~45s)
+# 3. Generate: 3 page prototypes
+# 4. Complete
+# Time: ~2-3 min (vs 5-7 min with explore-auto)
+```
+
+### Example 2: Images with Guidance (Page Mode)
+```bash
+/workflow:ui-design:imitate-auto --images "refs/dark-theme.png" --prompt "Focus on dark mode" --targets "dashboard"
+
+# Flow: 0 → 0.5 (skip) → 1 → 2 → 3 → 4
+# Output: dashboard-style-1-layout-1.html
+# Type: page (full-page layout)
+```
+
+### Example 3: Component Mode
+```bash
+/workflow:ui-design:imitate-auto --url "https://example.com" --targets "navbar,hero,card" --target-type "component"
+
+# Flow: 0 → 0.5 → 1 → 2 → 3 → 4
+# Output: navbar-style-1-layout-1.html, hero-style-1-layout-1.html, card-style-1-layout-1.html
+# Type: component (minimal wrapper for isolated comparison)
+```
+
+### Example 4: URL with Manual Screenshot
+```bash
+/workflow:ui-design:imitate-auto --url "https://stripe.com/pricing" --targets "pricing"
+
+# 0.5. Screenshot:
+#      ⚠️ Playwright failed → Chrome failed
+#      📸 User prompted for manual upload
+#      User saves screenshot → types 'ready' → ✅ continues
+#      OR types 'skip' → ⚠️ uses URL analysis only
+# Continues: 1 → 2 → 3 → 4
+```
+
+### Example 5: Legacy Parameter Support
+```bash
+# Using legacy --pages parameter (backward compatible)
+/workflow:ui-design:imitate-auto --url "https://example.com" --pages "home,dashboard"
+
+# Equivalent to: --targets "home,dashboard" --target-type "page"
+```
+
+## Final Completion Message
+
+```
+✅ UI Design Imitation Complete!
+
+Mode: Single Style Replication
+Run ID: {run_id}
+Session: {session_id or "standalone"}
+Reference: {url OR images}
+Type: {target_type_icon} {target_type_label}
+
+Phase 0 - Initialization: {target_count} {target_type}(s) prepared
+Phase 0.5 - Screenshot Capture: {screenshot_status}
+  {IF success: ✅ Captured via {method}}
+  {ELSE: ⚠️ URL analysis only}
+Phase 1 - Style Extraction: Single style extracted
+Phase 2 - Token Adaptation: Bypassed consolidate (⚡ {time_saved}s saved)
+Phase 3 - Prototype Generation: {target_count} {target_type} prototypes created
+Phase 4 - Design Integration: {integrated OR "Standalone mode"}
+
+📂 Output: {base_path}/
+  ├── style-extraction/style-cards.json (1 style card)
+  ├── style-consolidation/style-1/ (design tokens)
+  └── prototypes/ ({target_count} HTML/CSS files)
+
+🌐 Preview: {base_path}/prototypes/index.html
+
+{target_type_icon} Targets: {', '.join(inferred_target_list)}
+  Type: {target_type}
+  Context: {IF target_type == "page": "Full-page layouts" ELSE: "Isolated components with minimal wrapper"}
+
+Performance:
+- Design system: ~{time}s (vs ~{consolidate_time}s with consolidate)
+- Total workflow: ~{total_time}s
+- Speed improvement: ~{improvement}× faster than explore-auto
+
+{IF session:
+Next: /workflow:plan to create implementation tasks
+}
+{ELSE:
+Prototypes ready: {base_path}/prototypes/
+}
+```
+
+**Dynamic Values**:
+- `target_type_icon`: "📄" for page, "🧩" for component
+- `target_type_label`: "Pages" for page, "Components" for component
+- `target_count`: `len(inferred_target_list)`
+```

.claude/commands/workflow/ui-design/update.md

@@ -0,0 +1,331 @@
+---
+name: update
+description: Update brainstorming artifacts with finalized design system references
+usage: /workflow:ui-design:update --session <session_id> [--selected-prototypes "<list>"]
+argument-hint: "--session WFS-session-id [--selected-prototypes \"dashboard-variant-1,auth-variant-2\"]"
+examples:
+  - /workflow:ui-design:update --session WFS-auth
+  - /workflow:ui-design:update --session WFS-dashboard --selected-prototypes "dashboard-variant-1"
+allowed-tools: Read(*), Write(*), Edit(*), TodoWrite(*), Glob(*), Bash(*)
+---
+
+# Design Update Command
+
+## Overview
+Synchronize finalized design system references to brainstorming artifacts, preparing them for `/workflow:plan` consumption. This command updates **references only** (via @ notation), not content duplication.
+
+## Core Philosophy
+- **Reference-Only Updates**: Use @ references, no content duplication
+- **Main Claude Execution**: Direct updates by main Claude (no Agent handoff)
+- **Synthesis Alignment**: Update synthesis-specification.md UI/UX Guidelines section
+- **Plan-Ready Output**: Ensure design artifacts discoverable by task-generate
+- **Minimal Reading**: Verify file existence, don't read design content
+
+## Execution Protocol
+
+### Phase 1: Session & Artifact Validation
+
+```bash
+# Validate session
+CHECK: .workflow/.active-* marker files
+VALIDATE: session_id matches active session
+
+# Verify required design artifacts exist in latest design run
+latest_design = find_latest_path_matching(".workflow/WFS-{session}/design-*")
+
+# Detect design system structure (unified vs separate)
+IF exists({latest_design}/style-consolidation/design-tokens.json):
+    # Unified mode (single design system)
+    design_system_mode = "unified"
+    design_tokens_path = "style-consolidation/design-tokens.json"
+    style_guide_path = "style-consolidation/style-guide.md"
+ELSE IF exists({latest_design}/style-consolidation/style-1/design-tokens.json):
+    # Separate mode (per-style design systems)
+    design_system_mode = "separate"
+    design_tokens_path = "style-consolidation/style-1/design-tokens.json"
+    style_guide_path = "style-consolidation/style-1/style-guide.md"
+ELSE:
+    ERROR: "No design tokens found. Run /workflow:ui-design:consolidate first"
+
+VERIFY:
+- {latest_design}/{design_tokens_path}
+- {latest_design}/{style_guide_path}
+- {latest_design}/prototypes/*.html (at least one prototype)
+
+REPORT: "📋 Design system mode: {design_system_mode}"
+REPORT: "   Tokens: {design_tokens_path}"
+
+# Prototype selection
+IF --selected-prototypes provided:
+    VALIDATE: Specified prototypes exist
+    selected_list = parse_comma_separated(--selected-prototypes)
+ELSE:
+    AUTO-SELECT: Use all generated prototypes
+    selected_list = Glob({latest_design}/prototypes/*.html)
+
+REPORT: "Found {count} design artifacts, {prototype_count} prototypes"
+```
+
+### Phase 2: Load Target Artifacts Only
+
+**What to Load**: Only the files we need to **update**, not the design files we're referencing.
+
+```bash
+# Load target brainstorming artifacts (files to be updated)
+Read(.workflow/WFS-{session}/.brainstorming/synthesis-specification.md)
+Read(.workflow/WFS-{session}/.brainstorming/ui-designer/analysis.md) [if exists]
+
+# Optional: Read prototype notes for descriptions (minimal context)
+FOR each selected_prototype IN selected_list:
+    Read(.workflow/WFS-{session}/.design/prototypes/{selected_prototype}-notes.md)
+    # Extract: layout_strategy, page_name only
+```
+
+**Note**: We do **NOT** read design-tokens.json, style-guide.md, or prototype HTML. We only verify they exist and generate @ references to them.
+
+### Phase 3: Update Synthesis Specification
+
+Update `.brainstorming/synthesis-specification.md` with design system references.
+
+**Target Section**: `## UI/UX Guidelines`
+
+**Content Template**:
+```markdown
+## UI/UX Guidelines
+
+### Design System Reference
+**Finalized Design Tokens**: @../design-{run_id}/{design_tokens_path}
+**Style Guide**: @../design-{run_id}/{style_guide_path}
+**Design System Mode**: {design_system_mode}
+
+### Implementation Requirements
+**Token Adherence**: All UI implementations MUST use design token CSS custom properties
+**Accessibility**: WCAG AA compliance validated in design-tokens.json
+**Responsive**: Mobile-first design using token-based breakpoints
+**Component Patterns**: Follow patterns documented in style-guide.md
+
+### Reference Prototypes
+{FOR each selected_prototype:
+- **{page_name}**: @../design-{run_id}/prototypes/{prototype}.html
+  - Layout: {layout_strategy from notes}
+}
+
+### Design System Assets
+```json
+{
+  "design_tokens": "design-{run_id}/{design_tokens_path}",
+  "style_guide": "design-{run_id}/{style_guide_path}",
+  "design_system_mode": "{design_system_mode}",
+  "prototypes": [
+    {FOR each: "design-{run_id}/prototypes/{prototype}.html"}
+  ]
+}
+```
+```
+
+**Implementation**:
+```bash
+# Option 1: Edit existing section
+Edit(
+  file_path=".workflow/WFS-{session}/.brainstorming/synthesis-specification.md",
+  old_string="## UI/UX Guidelines\n[existing content]",
+  new_string="## UI/UX Guidelines\n\n[new design reference content]"
+)
+
+# Option 2: Append if section doesn't exist
+IF section not found:
+    Edit(
+      file_path=".workflow/WFS-{session}/.brainstorming/synthesis-specification.md",
+      old_string="[end of document]",
+      new_string="\n\n## UI/UX Guidelines\n\n[new design reference content]"
+    )
+```
+
+### Phase 4: Update UI Designer Style Guide
+
+Create or update `.brainstorming/ui-designer/style-guide.md`:
+
+```markdown
+# UI Designer Style Guide
+
+## Design System Integration
+This style guide references the finalized design system from the design refinement phase.
+
+**Design Tokens**: @../../design-{run_id}/{design_tokens_path}
+**Style Guide**: @../../design-{run_id}/{style_guide_path}
+**Design System Mode**: {design_system_mode}
+
+## Implementation Guidelines
+1. **Use CSS Custom Properties**: All styles reference design tokens
+2. **Follow Semantic HTML**: Use HTML5 semantic elements
+3. **Maintain Accessibility**: WCAG AA compliance required
+4. **Responsive Design**: Mobile-first with token-based breakpoints
+
+## Reference Prototypes
+{FOR each selected_prototype:
+- **{page_name}**: @../../design-{run_id}/prototypes/{prototype}.html
+}
+
+## Token System
+For complete token definitions and usage examples, see:
+- Design Tokens: @../../design-{run_id}/{design_tokens_path}
+- Style Guide: @../../design-{run_id}/{style_guide_path}
+
+---
+*Auto-generated by /workflow:ui-design:update*
+*Last updated: {timestamp}*
+```
+
+**Implementation**:
+```bash
+Write(
+  file_path=".workflow/WFS-{session}/.brainstorming/ui-designer/style-guide.md",
+  content="[generated content with @ references]"
+)
+```
+
+### Phase 5: Completion
+
+```javascript
+TodoWrite({
+  todos: [
+    {content: "Validate session and design system artifacts", status: "completed", activeForm: "Validating artifacts"},
+    {content: "Load target brainstorming artifacts", status: "completed", activeForm: "Loading target files"},
+    {content: "Update synthesis-specification.md with design references", status: "completed", activeForm: "Updating synthesis spec"},
+    {content: "Create/update ui-designer/style-guide.md", status: "completed", activeForm: "Updating UI designer guide"}
+  ]
+});
+```
+
+**Completion Message**:
+```
+✅ Design system references updated for session: WFS-{session}
+
+Updated artifacts:
+✓ synthesis-specification.md - UI/UX Guidelines section with @ references
+✓ ui-designer/style-guide.md - Design system reference guide
+
+Design system assets ready for /workflow:plan:
+- design-tokens.json
+- style-guide.md
+- {prototype_count} reference prototypes
+
+Next: /workflow:plan [--agent] "<task description>"
+      The plan phase will automatically discover and utilize the design system.
+```
+
+## Output Structure
+
+**Updated Files**:
+```
+.workflow/WFS-{session}/.brainstorming/
+├── synthesis-specification.md       # Updated with UI/UX Guidelines section
+└── ui-designer/
+    └── style-guide.md               # New or updated design reference guide
+```
+
+**@ Reference Format** (used in synthesis-specification.md):
+```
+@../design-{run_id}/style-consolidation/design-tokens.json
+@../design-{run_id}/style-consolidation/style-guide.md
+@../design-{run_id}/prototypes/{prototype}.html
+```
+
+**@ Reference Format** (used in ui-designer/style-guide.md):
+```
+@../../design-{run_id}/style-consolidation/design-tokens.json
+@../../design-{run_id}/style-consolidation/style-guide.md
+@../../design-{run_id}/prototypes/{prototype}.html
+```
+
+## Integration with /workflow:plan
+
+After this update, `/workflow:plan` will discover design assets through:
+
+**Phase 3: Intelligent Analysis** (`/workflow:tools:concept-enhanced`)
+- Reads synthesis-specification.md
+- Discovers @ references to design system files
+- Includes design system context in ANALYSIS_RESULTS.md
+
+**Phase 4: Task Generation** (`/workflow:tools:task-generate`)
+- Reads ANALYSIS_RESULTS.md
+- Discovers design assets from synthesis-specification.md
+- Includes design system paths in task JSON files
+
+**Example Task JSON** (generated by task-generate):
+```json
+{
+  "task_id": "IMPL-001",
+  "context": {
+    "design_system": {
+      "tokens": "design-{run_id}/style-consolidation/design-tokens.json",
+      "style_guide": "design-{run_id}/style-consolidation/style-guide.md",
+      "prototypes": ["design-{run_id}/prototypes/dashboard-variant-1.html"]
+    }
+  }
+}
+```
+
+## Error Handling
+
+- **Missing design artifacts**: Error with message "Run /workflow:ui-design:consolidate and /workflow:ui-design:generate first"
+- **synthesis-specification.md not found**: Warning, create minimal version with just UI/UX Guidelines
+- **ui-designer/ directory missing**: Create directory and file
+- **Edit conflicts**: Preserve existing content, append or replace only UI/UX Guidelines section
+- **Invalid prototype names**: Skip invalid entries, continue with valid ones
+
+## Validation Checks
+
+After update, verify:
+- [ ] synthesis-specification.md contains UI/UX Guidelines section
+- [ ] UI/UX Guidelines include @ references (not content duplication)
+- [ ] ui-designer/style-guide.md created or updated
+- [ ] All @ referenced files exist and are accessible
+- [ ] @ reference paths are relative and correct
+
+## Key Features
+
+1. **Reference-Only Updates**
+   - Uses @ notation for file references
+   - No content duplication between design and brainstorming spaces
+   - Lightweight, maintainable approach
+
+2. **Main Claude Direct Execution**
+   - No Agent handoff (preserves context)
+   - Simple reference generation (no complex synthesis)
+   - Reliable path resolution
+
+3. **Plan-Ready Output**
+   - `/workflow:plan` Phase 3 can discover design system
+   - Task generation includes design asset paths
+   - Clear integration points for implementation tasks
+
+4. **Minimal Reading**
+   - Only reads target files to update (synthesis-specification.md, ui-designer/analysis.md)
+   - Verifies design file existence (no content reading)
+   - Optional: reads prototype notes for descriptions
+
+5. **Flexible Prototype Selection**
+   - Auto-select all prototypes (default)
+   - Manual selection via --selected-prototypes parameter
+   - Validates prototype existence before referencing
+
+## Integration Points
+
+- **Input**: Design system artifacts from `/workflow:ui-design:consolidate` and `/workflow:ui-design:generate`
+- **Output**: Updated synthesis-specification.md, ui-designer/style-guide.md with @ references
+- **Next Phase**: `/workflow:plan` discovers and utilizes design system through @ references
+- **Auto Integration**: Automatically triggered by `/workflow:ui-design:auto` workflow
+
+## Why Main Claude Execution?
+
+This command is executed directly by main Claude (not delegated to an Agent) because:
+
+1. **Simple Reference Generation**: Only generating file paths, not complex synthesis
+2. **Context Preservation**: Main Claude has full session and conversation context
+3. **Minimal Transformation**: Primarily updating references, not analyzing content
+4. **Path Resolution**: Requires precise relative path calculation
+5. **Edit Operations**: Better error recovery for Edit conflicts
+6. **Synthesis Pattern**: Follows same direct-execution pattern as other reference updates
+
+This ensures reliable, lightweight integration without Agent handoff overhead.

.claude/scripts/convert_tokens_to_css.sh

@@ -0,0 +1,225 @@
+#!/bin/bash
+# Convert design-tokens.json to tokens.css with Google Fonts import and global font rules
+# Usage: cat design-tokens.json | ./convert_tokens_to_css.sh > tokens.css
+# Or: ./convert_tokens_to_css.sh < design-tokens.json > tokens.css
+
+# Read JSON from stdin
+json_input=$(cat)
+
+# Extract metadata for header comment
+style_name=$(echo "$json_input" | jq -r '.meta.name // "Unknown Style"' 2>/dev/null || echo "Design Tokens")
+
+# Generate header
+cat <<EOF
+/* ========================================
+   Design Tokens: ${style_name}
+   Auto-generated from design-tokens.json
+   ======================================== */
+
+EOF
+
+# ========================================
+# Google Fonts Import Generation
+# ========================================
+# Extract font families and generate Google Fonts import URL
+fonts=$(echo "$json_input" | jq -r '
+  .typography.font_family | to_entries[] | .value
+' 2>/dev/null | sed "s/'//g" | cut -d',' -f1 | sort -u)
+
+# Build Google Fonts URL
+google_fonts_url="https://fonts.googleapis.com/css2?"
+font_params=""
+
+while IFS= read -r font; do
+  # Skip system fonts and empty lines
+  if [[ -z "$font" ]] || [[ "$font" =~ ^(system-ui|sans-serif|serif|monospace|cursive|fantasy)$ ]]; then
+    continue
+  fi
+
+  # Special handling for common web fonts with weights
+  case "$font" in
+    "Comic Neue")
+      font_params+="family=Comic+Neue:wght@300;400;700&"
+      ;;
+    "Patrick Hand"|"Caveat"|"Dancing Script"|"Architects Daughter"|"Indie Flower"|"Shadows Into Light"|"Permanent Marker")
+      # URL-encode font name and add common weights
+      encoded_font=$(echo "$font" | sed 's/ /+/g')
+      font_params+="family=${encoded_font}:wght@400;700&"
+      ;;
+    "Segoe Print"|"Bradley Hand"|"Chilanka")
+      # These are system fonts, skip
+      ;;
+    *)
+      # Generic font: add with default weights
+      encoded_font=$(echo "$font" | sed 's/ /+/g')
+      font_params+="family=${encoded_font}:wght@400;500;600;700&"
+      ;;
+  esac
+done <<< "$fonts"
+
+# Generate @import if we have fonts
+if [[ -n "$font_params" ]]; then
+  # Remove trailing &
+  font_params="${font_params%&}"
+  echo "/* Import Web Fonts */"
+  echo "@import url('${google_fonts_url}${font_params}&display=swap');"
+  echo ""
+fi
+
+# ========================================
+# CSS Custom Properties Generation
+# ========================================
+echo ":root {"
+
+# Colors - Brand
+echo "  /* Colors - Brand */"
+echo "$json_input" | jq -r '
+  .colors.brand | to_entries[] |
+  "  --color-brand-\(.key): \(.value);"
+' 2>/dev/null
+
+echo ""
+
+# Colors - Surface
+echo "  /* Colors - Surface */"
+echo "$json_input" | jq -r '
+  .colors.surface | to_entries[] |
+  "  --color-surface-\(.key): \(.value);"
+' 2>/dev/null
+
+echo ""
+
+# Colors - Semantic
+echo "  /* Colors - Semantic */"
+echo "$json_input" | jq -r '
+  .colors.semantic | to_entries[] |
+  "  --color-semantic-\(.key): \(.value);"
+' 2>/dev/null
+
+echo ""
+
+# Colors - Text
+echo "  /* Colors - Text */"
+echo "$json_input" | jq -r '
+  .colors.text | to_entries[] |
+  "  --color-text-\(.key): \(.value);"
+' 2>/dev/null
+
+echo ""
+
+# Colors - Border
+echo "  /* Colors - Border */"
+echo "$json_input" | jq -r '
+  .colors.border | to_entries[] |
+  "  --color-border-\(.key): \(.value);"
+' 2>/dev/null
+
+echo ""
+
+# Typography - Font Family
+echo "  /* Typography - Font Family */"
+echo "$json_input" | jq -r '
+  .typography.font_family | to_entries[] |
+  "  --font-family-\(.key): \(.value);"
+' 2>/dev/null
+
+echo ""
+
+# Typography - Font Size
+echo "  /* Typography - Font Size */"
+echo "$json_input" | jq -r '
+  .typography.font_size | to_entries[] |
+  "  --font-size-\(.key): \(.value);"
+' 2>/dev/null
+
+echo ""
+
+# Typography - Font Weight
+echo "  /* Typography - Font Weight */"
+echo "$json_input" | jq -r '
+  .typography.font_weight | to_entries[] |
+  "  --font-weight-\(.key): \(.value);"
+' 2>/dev/null
+
+echo ""
+
+# Typography - Line Height
+echo "  /* Typography - Line Height */"
+echo "$json_input" | jq -r '
+  .typography.line_height | to_entries[] |
+  "  --line-height-\(.key): \(.value);"
+' 2>/dev/null
+
+echo ""
+
+# Typography - Letter Spacing
+echo "  /* Typography - Letter Spacing */"
+echo "$json_input" | jq -r '
+  .typography.letter_spacing | to_entries[] |
+  "  --letter-spacing-\(.key): \(.value);"
+' 2>/dev/null
+
+echo ""
+
+# Spacing
+echo "  /* Spacing */"
+echo "$json_input" | jq -r '
+  .spacing | to_entries[] |
+  "  --spacing-\(.key): \(.value);"
+' 2>/dev/null
+
+echo ""
+
+# Border Radius
+echo "  /* Border Radius */"
+echo "$json_input" | jq -r '
+  .border_radius | to_entries[] |
+  "  --border-radius-\(.key): \(.value);"
+' 2>/dev/null
+
+echo ""
+
+# Shadows
+echo "  /* Shadows */"
+echo "$json_input" | jq -r '
+  .shadows | to_entries[] |
+  "  --shadow-\(.key): \(.value);"
+' 2>/dev/null
+
+echo ""
+
+# Breakpoints
+echo "  /* Breakpoints */"
+echo "$json_input" | jq -r '
+  .breakpoints | to_entries[] |
+  "  --breakpoint-\(.key): \(.value);"
+' 2>/dev/null
+
+echo "}"
+echo ""
+
+# ========================================
+# Global Font Application
+# ========================================
+echo "/* ========================================"
+echo "   Global Font Application"
+echo "   ======================================== */"
+echo ""
+echo "body {"
+echo "  font-family: var(--font-family-body);"
+echo "  font-size: var(--font-size-base);"
+echo "  line-height: var(--line-height-normal);"
+echo "  color: var(--color-text-primary);"
+echo "  background-color: var(--color-surface-background);"
+echo "}"
+echo ""
+echo "h1, h2, h3, h4, h5, h6, legend {"
+echo "  font-family: var(--font-family-heading);"
+echo "}"
+echo ""
+echo "/* Reset default margins for better control */"
+echo "* {"
+echo "  margin: 0;"
+echo "  padding: 0;"
+echo "  box-sizing: border-box;"
+echo "}"

.claude/scripts/ui-instantiate-prototypes.sh

@@ -0,0 +1,811 @@
+#!/bin/bash
+
+# UI Prototype Instantiation Script with Preview Generation (v3.0 - Auto-detect)
+# Purpose: Generate S × L × P final prototypes from templates + interactive preview files
+# Usage:
+#   Simple: ui-instantiate-prototypes.sh <prototypes_dir>
+#   Full:   ui-instantiate-prototypes.sh <base_path> <pages> <style_variants> <layout_variants> [options]
+
+# Use safer error handling
+set -o pipefail
+
+# ============================================================================
+# Helper Functions
+# ============================================================================
+
+log_info() {
+    echo "$1"
+}
+
+log_success() {
+    echo "✅ $1"
+}
+
+log_error() {
+    echo "❌ $1"
+}
+
+log_warning() {
+    echo "⚠️  $1"
+}
+
+# Auto-detect pages from templates directory
+auto_detect_pages() {
+    local templates_dir="$1/_templates"
+
+    if [ ! -d "$templates_dir" ]; then
+        log_error "Templates directory not found: $templates_dir"
+        return 1
+    fi
+
+    # Find unique page names from template files (e.g., login-layout-1.html -> login)
+    local pages=$(find "$templates_dir" -name "*-layout-*.html" -type f | \
+                  sed 's|.*/||' | \
+                  sed 's|-layout-[0-9]*\.html||' | \
+                  sort -u | \
+                  tr '\n' ',' | \
+                  sed 's/,$//')
+
+    echo "$pages"
+}
+
+# Auto-detect style variants count
+auto_detect_style_variants() {
+    local base_path="$1"
+    local style_dir="$base_path/../style-consolidation"
+
+    if [ ! -d "$style_dir" ]; then
+        log_warning "Style consolidation directory not found: $style_dir"
+        echo "3"  # Default
+        return
+    fi
+
+    # Count style-* directories
+    local count=$(find "$style_dir" -maxdepth 1 -type d -name "style-*" | wc -l)
+
+    if [ "$count" -eq 0 ]; then
+        echo "3"  # Default
+    else
+        echo "$count"
+    fi
+}
+
+# Auto-detect layout variants count
+auto_detect_layout_variants() {
+    local templates_dir="$1/_templates"
+
+    if [ ! -d "$templates_dir" ]; then
+        echo "3"  # Default
+        return
+    fi
+
+    # Find the first page and count its layouts
+    local first_page=$(find "$templates_dir" -name "*-layout-1.html" -type f | head -1 | sed 's|.*/||' | sed 's|-layout-1\.html||')
+
+    if [ -z "$first_page" ]; then
+        echo "3"  # Default
+        return
+    fi
+
+    # Count layout files for this page
+    local count=$(find "$templates_dir" -name "${first_page}-layout-*.html" -type f | wc -l)
+
+    if [ "$count" -eq 0 ]; then
+        echo "3"  # Default
+    else
+        echo "$count"
+    fi
+}
+
+# ============================================================================
+# Parse Arguments
+# ============================================================================
+
+show_usage() {
+    cat <<'EOF'
+Usage:
+  Simple (auto-detect): ui-instantiate-prototypes.sh <prototypes_dir> [options]
+  Full:                 ui-instantiate-prototypes.sh <base_path> <pages> <style_variants> <layout_variants> [options]
+
+Simple Mode (Recommended):
+  prototypes_dir    Path to prototypes directory (auto-detects everything)
+
+Full Mode:
+  base_path         Base path to prototypes directory
+  pages             Comma-separated list of pages/components
+  style_variants    Number of style variants (1-5)
+  layout_variants   Number of layout variants (1-5)
+
+Options:
+  --run-id <id>         Run ID (default: auto-generated)
+  --session-id <id>     Session ID (default: standalone)
+  --mode <page|component>  Exploration mode (default: page)
+  --template <path>     Path to compare.html template (default: ~/.claude/workflows/_template-compare-matrix.html)
+  --no-preview          Skip preview file generation
+  --help                Show this help message
+
+Examples:
+  # Simple usage (auto-detect everything)
+  ui-instantiate-prototypes.sh .design/prototypes
+
+  # With options
+  ui-instantiate-prototypes.sh .design/prototypes --session-id WFS-auth
+
+  # Full manual mode
+  ui-instantiate-prototypes.sh .design/prototypes "login,dashboard" 3 3 --session-id WFS-auth
+EOF
+}
+
+# Default values
+BASE_PATH=""
+PAGES=""
+STYLE_VARIANTS=""
+LAYOUT_VARIANTS=""
+RUN_ID="run-$(date +%Y%m%d-%H%M%S)"
+SESSION_ID="standalone"
+MODE="page"
+TEMPLATE_PATH="$HOME/.claude/workflows/_template-compare-matrix.html"
+GENERATE_PREVIEW=true
+AUTO_DETECT=false
+
+# Parse arguments
+if [ $# -lt 1 ]; then
+    log_error "Missing required arguments"
+    show_usage
+    exit 1
+fi
+
+# Check if using simple mode (only 1 positional arg before options)
+if [ $# -eq 1 ] || [[ "$2" == --* ]]; then
+    # Simple mode - auto-detect
+    AUTO_DETECT=true
+    BASE_PATH="$1"
+    shift 1
+else
+    # Full mode - manual parameters
+    if [ $# -lt 4 ]; then
+        log_error "Full mode requires 4 positional arguments"
+        show_usage
+        exit 1
+    fi
+
+    BASE_PATH="$1"
+    PAGES="$2"
+    STYLE_VARIANTS="$3"
+    LAYOUT_VARIANTS="$4"
+    shift 4
+fi
+
+# Parse optional arguments
+while [[ $# -gt 0 ]]; do
+    case $1 in
+        --run-id)
+            RUN_ID="$2"
+            shift 2
+            ;;
+        --session-id)
+            SESSION_ID="$2"
+            shift 2
+            ;;
+        --mode)
+            MODE="$2"
+            shift 2
+            ;;
+        --template)
+            TEMPLATE_PATH="$2"
+            shift 2
+            ;;
+        --no-preview)
+            GENERATE_PREVIEW=false
+            shift
+            ;;
+        --help)
+            show_usage
+            exit 0
+            ;;
+        *)
+            log_error "Unknown option: $1"
+            show_usage
+            exit 1
+            ;;
+    esac
+done
+
+# ============================================================================
+# Auto-detection (if enabled)
+# ============================================================================
+
+if [ "$AUTO_DETECT" = true ]; then
+    log_info "🔍 Auto-detecting configuration from directory..."
+
+    # Detect pages
+    PAGES=$(auto_detect_pages "$BASE_PATH")
+    if [ -z "$PAGES" ]; then
+        log_error "Could not auto-detect pages from templates"
+        exit 1
+    fi
+    log_info "   Pages: $PAGES"
+
+    # Detect style variants
+    STYLE_VARIANTS=$(auto_detect_style_variants "$BASE_PATH")
+    log_info "   Style variants: $STYLE_VARIANTS"
+
+    # Detect layout variants
+    LAYOUT_VARIANTS=$(auto_detect_layout_variants "$BASE_PATH")
+    log_info "   Layout variants: $LAYOUT_VARIANTS"
+
+    echo ""
+fi
+
+# ============================================================================
+# Validation
+# ============================================================================
+
+# Validate base path
+if [ ! -d "$BASE_PATH" ]; then
+    log_error "Base path not found: $BASE_PATH"
+    exit 1
+fi
+
+# Validate style and layout variants
+if [ "$STYLE_VARIANTS" -lt 1 ] || [ "$STYLE_VARIANTS" -gt 5 ]; then
+    log_error "Style variants must be between 1 and 5 (got: $STYLE_VARIANTS)"
+    exit 1
+fi
+
+if [ "$LAYOUT_VARIANTS" -lt 1 ] || [ "$LAYOUT_VARIANTS" -gt 5 ]; then
+    log_error "Layout variants must be between 1 and 5 (got: $LAYOUT_VARIANTS)"
+    exit 1
+fi
+
+# Validate STYLE_VARIANTS against actual style directories
+if [ "$STYLE_VARIANTS" -gt 0 ]; then
+    style_dir="$BASE_PATH/../style-consolidation"
+
+    if [ ! -d "$style_dir" ]; then
+        log_error "Style consolidation directory not found: $style_dir"
+        log_info "Run /workflow:ui-design:consolidate first"
+        exit 1
+    fi
+
+    actual_styles=$(find "$style_dir" -maxdepth 1 -type d -name "style-*" 2>/dev/null | wc -l)
+
+    if [ "$actual_styles" -eq 0 ]; then
+        log_error "No style directories found in: $style_dir"
+        log_info "Run /workflow:ui-design:consolidate first to generate style design systems"
+        exit 1
+    fi
+
+    if [ "$STYLE_VARIANTS" -gt "$actual_styles" ]; then
+        log_warning "Requested $STYLE_VARIANTS style variants, but only found $actual_styles directories"
+        log_info "Available style directories:"
+        find "$style_dir" -maxdepth 1 -type d -name "style-*" 2>/dev/null | sed 's|.*/||' | sort
+        log_info "Auto-correcting to $actual_styles style variants"
+        STYLE_VARIANTS=$actual_styles
+    fi
+fi
+
+# Parse pages into array
+IFS=',' read -ra PAGE_ARRAY <<< "$PAGES"
+
+if [ ${#PAGE_ARRAY[@]} -eq 0 ]; then
+    log_error "No pages found"
+    exit 1
+fi
+
+# ============================================================================
+# Header Output
+# ============================================================================
+
+echo "========================================="
+echo "UI Prototype Instantiation & Preview"
+if [ "$AUTO_DETECT" = true ]; then
+    echo "(Auto-detected configuration)"
+fi
+echo "========================================="
+echo "Base Path: $BASE_PATH"
+echo "Mode: $MODE"
+echo "Pages/Components: $PAGES"
+echo "Style Variants: $STYLE_VARIANTS"
+echo "Layout Variants: $LAYOUT_VARIANTS"
+echo "Run ID: $RUN_ID"
+echo "Session ID: $SESSION_ID"
+echo "========================================="
+echo ""
+
+# Change to base path
+cd "$BASE_PATH" || exit 1
+
+# ============================================================================
+# Phase 1: Instantiate Prototypes
+# ============================================================================
+
+log_info "🚀 Phase 1: Instantiating prototypes from templates..."
+echo ""
+
+total_generated=0
+total_failed=0
+
+for page in "${PAGE_ARRAY[@]}"; do
+    # Trim whitespace
+    page=$(echo "$page" | xargs)
+
+    log_info "Processing page/component: $page"
+
+    for s in $(seq 1 "$STYLE_VARIANTS"); do
+        for l in $(seq 1 "$LAYOUT_VARIANTS"); do
+            # Define file paths
+            TEMPLATE_HTML="_templates/${page}-layout-${l}.html"
+            STRUCTURAL_CSS="_templates/${page}-layout-${l}.css"
+            TOKEN_CSS="../style-consolidation/style-${s}/tokens.css"
+            OUTPUT_HTML="${page}-style-${s}-layout-${l}.html"
+
+            # Copy template and replace placeholders
+            if [ -f "$TEMPLATE_HTML" ]; then
+                cp "$TEMPLATE_HTML" "$OUTPUT_HTML" || {
+                    log_error "Failed to copy template: $TEMPLATE_HTML"
+                    ((total_failed++))
+                    continue
+                }
+
+                # Replace CSS placeholders (Windows-compatible sed syntax)
+                sed -i "s|{{STRUCTURAL_CSS}}|${STRUCTURAL_CSS}|g" "$OUTPUT_HTML" || true
+                sed -i "s|{{TOKEN_CSS}}|${TOKEN_CSS}|g" "$OUTPUT_HTML" || true
+
+                log_success "Created: $OUTPUT_HTML"
+                ((total_generated++))
+
+                # Create implementation notes (simplified)
+                NOTES_FILE="${page}-style-${s}-layout-${l}-notes.md"
+
+                # Generate notes with simple heredoc
+                cat > "$NOTES_FILE" <<NOTESEOF
+# Implementation Notes: ${page}-style-${s}-layout-${l}
+
+## Generation Details
+- **Template**: ${TEMPLATE_HTML}
+- **Structural CSS**: ${STRUCTURAL_CSS}
+- **Style Tokens**: ${TOKEN_CSS}
+- **Layout Strategy**: Layout ${l}
+- **Style Variant**: Style ${s}
+- **Mode**: ${MODE}
+
+## Template Reuse
+This prototype was generated from a shared layout template to ensure consistency
+across all style variants. The HTML structure is identical for all ${page}-layout-${l}
+prototypes, with only the design tokens (colors, fonts, spacing) varying.
+
+## Design System Reference
+Refer to \`../style-consolidation/style-${s}/style-guide.md\` for:
+- Design philosophy
+- Token usage guidelines
+- Component patterns
+- Accessibility requirements
+
+## Customization
+To modify this prototype:
+1. Edit the layout template: \`${TEMPLATE_HTML}\` (affects all styles)
+2. Edit the structural CSS: \`${STRUCTURAL_CSS}\` (affects all styles)
+3. Edit design tokens: \`${TOKEN_CSS}\` (affects only this style variant)
+
+## Run Information
+- **Run ID**: ${RUN_ID}
+- **Session ID**: ${SESSION_ID}
+- **Generated**: $(date -u +%Y-%m-%dT%H:%M:%SZ 2>/dev/null || date -u +%Y-%m-%d)
+NOTESEOF
+
+            else
+                log_error "Template not found: $TEMPLATE_HTML"
+                ((total_failed++))
+            fi
+        done
+    done
+done
+
+echo ""
+log_success "Phase 1 complete: Generated ${total_generated} prototypes"
+if [ $total_failed -gt 0 ]; then
+    log_warning "Failed: ${total_failed} prototypes"
+fi
+echo ""
+
+# ============================================================================
+# Phase 2: Generate Preview Files (if enabled)
+# ============================================================================
+
+if [ "$GENERATE_PREVIEW" = false ]; then
+    log_info "⏭️  Skipping preview generation (--no-preview flag)"
+    exit 0
+fi
+
+log_info "🎨 Phase 2: Generating preview files..."
+echo ""
+
+# ============================================================================
+# 2a. Generate compare.html from template
+# ============================================================================
+
+if [ ! -f "$TEMPLATE_PATH" ]; then
+    log_warning "Template not found: $TEMPLATE_PATH"
+    log_info "   Skipping compare.html generation"
+else
+    log_info "📄 Generating compare.html from template..."
+
+    # Convert page array to JSON format
+    PAGES_JSON="["
+    for i in "${!PAGE_ARRAY[@]}"; do
+        page=$(echo "${PAGE_ARRAY[$i]}" | xargs)
+        PAGES_JSON+="\"$page\""
+        if [ $i -lt $((${#PAGE_ARRAY[@]} - 1)) ]; then
+            PAGES_JSON+=", "
+        fi
+    done
+    PAGES_JSON+="]"
+
+    TIMESTAMP=$(date -u +%Y-%m-%dT%H:%M:%SZ 2>/dev/null || date -u +%Y-%m-%d)
+
+    # Read template and replace placeholders
+    cat "$TEMPLATE_PATH" | \
+        sed "s|{{run_id}}|${RUN_ID}|g" | \
+        sed "s|{{session_id}}|${SESSION_ID}|g" | \
+        sed "s|{{timestamp}}|${TIMESTAMP}|g" | \
+        sed "s|{{style_variants}}|${STYLE_VARIANTS}|g" | \
+        sed "s|{{layout_variants}}|${LAYOUT_VARIANTS}|g" | \
+        sed "s|{{pages_json}}|${PAGES_JSON}|g" \
+        > compare.html
+
+    log_success "Generated: compare.html"
+fi
+
+# ============================================================================
+# 2b. Generate index.html
+# ============================================================================
+
+log_info "📄 Generating index.html..."
+
+# Calculate total prototypes
+TOTAL_PROTOTYPES=$((STYLE_VARIANTS * LAYOUT_VARIANTS * ${#PAGE_ARRAY[@]}))
+
+# Generate index.html with simple heredoc
+cat > index.html <<'INDEXEOF'
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>UI Prototypes - __MODE__ Mode - __RUN_ID__</title>
+  <style>
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      max-width: 900px;
+      margin: 2rem auto;
+      padding: 0 2rem;
+      background: #f9fafb;
+    }
+    .header {
+      background: white;
+      padding: 2rem;
+      border-radius: 0.75rem;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+      margin-bottom: 2rem;
+    }
+    h1 {
+      color: #2563eb;
+      margin-bottom: 0.5rem;
+      font-size: 2rem;
+    }
+    .meta {
+      color: #6b7280;
+      font-size: 0.875rem;
+      margin-top: 0.5rem;
+    }
+    .info {
+      background: #f3f4f6;
+      padding: 1.5rem;
+      border-radius: 0.5rem;
+      margin: 1.5rem 0;
+      border-left: 4px solid #2563eb;
+    }
+    .cta {
+      display: inline-block;
+      background: #2563eb;
+      color: white;
+      padding: 1rem 2rem;
+      border-radius: 0.5rem;
+      text-decoration: none;
+      font-weight: 600;
+      margin: 1rem 0;
+      transition: background 0.2s;
+    }
+    .cta:hover {
+      background: #1d4ed8;
+    }
+    .stats {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 1rem;
+      margin: 1.5rem 0;
+    }
+    .stat {
+      background: white;
+      border: 1px solid #e5e7eb;
+      padding: 1.5rem;
+      border-radius: 0.5rem;
+      text-align: center;
+      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+    }
+    .stat-value {
+      font-size: 2.5rem;
+      font-weight: bold;
+      color: #2563eb;
+      margin-bottom: 0.25rem;
+    }
+    .stat-label {
+      color: #6b7280;
+      font-size: 0.875rem;
+    }
+    .section {
+      background: white;
+      padding: 2rem;
+      border-radius: 0.75rem;
+      margin-bottom: 2rem;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    h2 {
+      color: #1f2937;
+      margin-bottom: 1rem;
+      font-size: 1.5rem;
+    }
+    ul {
+      line-height: 1.8;
+      color: #374151;
+    }
+    .pages-list {
+      list-style: none;
+      padding: 0;
+    }
+    .pages-list li {
+      background: #f9fafb;
+      padding: 0.75rem 1rem;
+      margin: 0.5rem 0;
+      border-radius: 0.375rem;
+      border-left: 3px solid #2563eb;
+    }
+    .badge {
+      display: inline-block;
+      background: #dbeafe;
+      color: #1e40af;
+      padding: 0.25rem 0.75rem;
+      border-radius: 0.25rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      margin-left: 0.5rem;
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>🎨 UI Prototype __MODE__ Mode</h1>
+    <div class="meta">
+      <strong>Run ID:</strong> __RUN_ID__ |
+      <strong>Session:</strong> __SESSION_ID__ |
+      <strong>Generated:</strong> __TIMESTAMP__
+    </div>
+  </div>
+
+  <div class="info">
+    <p><strong>Matrix Configuration:</strong> __STYLE_VARIANTS__ styles × __LAYOUT_VARIANTS__ layouts × __PAGE_COUNT__ __MODE__s</p>
+    <p><strong>Total Prototypes:</strong> __TOTAL_PROTOTYPES__ interactive HTML files</p>
+  </div>
+
+  <a href="compare.html" class="cta">🔍 Open Interactive Matrix Comparison →</a>
+
+  <div class="stats">
+    <div class="stat">
+      <div class="stat-value">__STYLE_VARIANTS__</div>
+      <div class="stat-label">Style Variants</div>
+    </div>
+    <div class="stat">
+      <div class="stat-value">__LAYOUT_VARIANTS__</div>
+      <div class="stat-label">Layout Options</div>
+    </div>
+    <div class="stat">
+      <div class="stat-value">__PAGE_COUNT__</div>
+      <div class="stat-label">__MODE__s</div>
+    </div>
+    <div class="stat">
+      <div class="stat-value">__TOTAL_PROTOTYPES__</div>
+      <div class="stat-label">Total Prototypes</div>
+    </div>
+  </div>
+
+  <div class="section">
+    <h2>🌟 Features</h2>
+    <ul>
+      <li><strong>Interactive Matrix View:</strong> __STYLE_VARIANTS__×__LAYOUT_VARIANTS__ grid with synchronized scrolling</li>
+      <li><strong>Flexible Zoom:</strong> 25%, 50%, 75%, 100% viewport scaling</li>
+      <li><strong>Fullscreen Mode:</strong> Detailed view for individual prototypes</li>
+      <li><strong>Selection System:</strong> Mark favorites with export to JSON</li>
+      <li><strong>__MODE__ Switcher:</strong> Compare different __MODE__s side-by-side</li>
+      <li><strong>Persistent State:</strong> Selections saved in localStorage</li>
+    </ul>
+  </div>
+
+  <div class="section">
+    <h2>📄 Generated __MODE__s</h2>
+    <ul class="pages-list">
+__PAGES_LIST__
+    </ul>
+  </div>
+
+  <div class="section">
+    <h2>📚 Next Steps</h2>
+    <ol>
+      <li>Open <code>compare.html</code> to explore all variants in matrix view</li>
+      <li>Use zoom and sync scroll controls to compare details</li>
+      <li>Select your preferred style×layout combinations</li>
+      <li>Export selections as JSON for implementation planning</li>
+      <li>Review implementation notes in <code>*-notes.md</code> files</li>
+    </ol>
+  </div>
+</body>
+</html>
+INDEXEOF
+
+# Build pages list HTML
+PAGES_LIST_HTML=""
+for page in "${PAGE_ARRAY[@]}"; do
+    page=$(echo "$page" | xargs)
+    VARIANT_COUNT=$((STYLE_VARIANTS * LAYOUT_VARIANTS))
+    PAGES_LIST_HTML+="      <li>\n"
+    PAGES_LIST_HTML+="        <strong>${page}</strong>\n"
+    PAGES_LIST_HTML+="        <span class=\"badge\">${STYLE_VARIANTS}×${LAYOUT_VARIANTS} = ${VARIANT_COUNT} variants</span>\n"
+    PAGES_LIST_HTML+="      </li>\n"
+done
+
+# Replace all placeholders in index.html
+MODE_UPPER=$(echo "$MODE" | awk '{print toupper(substr($0,1,1)) tolower(substr($0,2))}')
+sed -i "s|__RUN_ID__|${RUN_ID}|g" index.html
+sed -i "s|__SESSION_ID__|${SESSION_ID}|g" index.html
+sed -i "s|__TIMESTAMP__|${TIMESTAMP}|g" index.html
+sed -i "s|__MODE__|${MODE_UPPER}|g" index.html
+sed -i "s|__STYLE_VARIANTS__|${STYLE_VARIANTS}|g" index.html
+sed -i "s|__LAYOUT_VARIANTS__|${LAYOUT_VARIANTS}|g" index.html
+sed -i "s|__PAGE_COUNT__|${#PAGE_ARRAY[@]}|g" index.html
+sed -i "s|__TOTAL_PROTOTYPES__|${TOTAL_PROTOTYPES}|g" index.html
+sed -i "s|__PAGES_LIST__|${PAGES_LIST_HTML}|g" index.html
+
+log_success "Generated: index.html"
+
+# ============================================================================
+# 2c. Generate PREVIEW.md
+# ============================================================================
+
+log_info "📄 Generating PREVIEW.md..."
+
+cat > PREVIEW.md <<PREVIEWEOF
+# UI Prototype Preview Guide
+
+## Quick Start
+1. Open \`index.html\` for overview and navigation
+2. Open \`compare.html\` for interactive matrix comparison
+3. Use browser developer tools to inspect responsive behavior
+
+## Configuration
+
+- **Exploration Mode:** ${MODE_UPPER}
+- **Run ID:** ${RUN_ID}
+- **Session ID:** ${SESSION_ID}
+- **Style Variants:** ${STYLE_VARIANTS}
+- **Layout Options:** ${LAYOUT_VARIANTS}
+- **${MODE_UPPER}s:** ${PAGES}
+- **Total Prototypes:** ${TOTAL_PROTOTYPES}
+- **Generated:** ${TIMESTAMP}
+
+## File Naming Convention
+
+\`\`\`
+{${MODE}}-style-{s}-layout-{l}.html
+\`\`\`
+
+**Example:** \`dashboard-style-1-layout-2.html\`
+- ${MODE_UPPER}: dashboard
+- Style: Design system 1
+- Layout: Layout variant 2
+
+## Interactive Features (compare.html)
+
+### Matrix View
+- **Grid Layout:** ${STYLE_VARIANTS}×${LAYOUT_VARIANTS} table with all prototypes visible
+- **Synchronized Scroll:** All iframes scroll together (toggle with button)
+- **Zoom Controls:** Adjust viewport scale (25%, 50%, 75%, 100%)
+- **${MODE_UPPER} Selector:** Switch between different ${MODE}s instantly
+
+### Prototype Actions
+- **⭐ Selection:** Click star icon to mark favorites
+- **⛶ Fullscreen:** View prototype in fullscreen overlay
+- **↗ New Tab:** Open prototype in dedicated browser tab
+
+### Selection Export
+1. Select preferred prototypes using star icons
+2. Click "Export Selection" button
+3. Downloads JSON file: \`selection-${RUN_ID}.json\`
+4. Use exported file for implementation planning
+
+## Design System References
+
+Each prototype references a specific style design system:
+PREVIEWEOF
+
+# Add style references
+for s in $(seq 1 "$STYLE_VARIANTS"); do
+    cat >> PREVIEW.md <<STYLEEOF
+
+### Style ${s}
+- **Tokens:** \`../style-consolidation/style-${s}/design-tokens.json\`
+- **CSS Variables:** \`../style-consolidation/style-${s}/tokens.css\`
+- **Style Guide:** \`../style-consolidation/style-${s}/style-guide.md\`
+STYLEEOF
+done
+
+cat >> PREVIEW.md <<'FOOTEREOF'
+
+## Responsive Testing
+
+All prototypes are mobile-first responsive. Test at these breakpoints:
+
+- **Mobile:** 375px - 767px
+- **Tablet:** 768px - 1023px
+- **Desktop:** 1024px+
+
+Use browser DevTools responsive mode for testing.
+
+## Accessibility Features
+
+- Semantic HTML5 structure
+- ARIA attributes for screen readers
+- Keyboard navigation support
+- Proper heading hierarchy
+- Focus indicators
+
+## Next Steps
+
+1. **Review:** Open `compare.html` and explore all variants
+2. **Select:** Mark preferred prototypes using star icons
+3. **Export:** Download selection JSON for implementation
+4. **Implement:** Use `/workflow:ui-design:update` to integrate selected designs
+5. **Plan:** Run `/workflow:plan` to generate implementation tasks
+
+---
+
+**Generated by:** `ui-instantiate-prototypes.sh`
+**Version:** 3.0 (auto-detect mode)
+FOOTEREOF
+
+log_success "Generated: PREVIEW.md"
+
+# ============================================================================
+# Completion Summary
+# ============================================================================
+
+echo ""
+echo "========================================="
+echo "✅ Generation Complete!"
+echo "========================================="
+echo ""
+echo "📊 Summary:"
+echo "   Prototypes: ${total_generated} generated"
+if [ $total_failed -gt 0 ]; then
+    echo "   Failed: ${total_failed}"
+fi
+echo "   Preview Files: compare.html, index.html, PREVIEW.md"
+echo "   Matrix: ${STYLE_VARIANTS}×${LAYOUT_VARIANTS} (${#PAGE_ARRAY[@]} ${MODE}s)"
+echo "   Total Files: ${TOTAL_PROTOTYPES} prototypes + preview files"
+echo ""
+echo "🌐 Next Steps:"
+echo "   1. Open: ${BASE_PATH}/index.html"
+echo "   2. Explore: ${BASE_PATH}/compare.html"
+echo "   3. Review: ${BASE_PATH}/PREVIEW.md"
+echo ""
+echo "Performance: Template-based approach with ${STYLE_VARIANTS}× speedup"
+echo "========================================="

.claude/version.json

@@ -1,7 +0,0 @@
-{
-  "version": "3.4.0",
-  "installation_mode": "Local",
-  "installation_path": "D:\\Claude_dms3\\.claude",
-  "source_branch": "main",
-  "installation_date_utc": "2025-10-04T00:00:00Z"
-}

.claude/workflows/_template-compare-matrix.html

@@ -0,0 +1,692 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>UI Design Matrix Comparison - {{run_id}}</title>
+  <style>
+    :root {
+      --color-primary: #2563eb;
+      --color-bg: #f9fafb;
+      --color-surface: #ffffff;
+      --color-border: #e5e7eb;
+      --color-text: #1f2937;
+      --color-text-secondary: #6b7280;
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      background: var(--color-bg);
+      color: var(--color-text);
+      line-height: 1.6;
+    }
+
+    .container {
+      max-width: 1600px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+
+    header {
+      background: var(--color-surface);
+      padding: 1.5rem 2rem;
+      border-radius: 0.5rem;
+      margin-bottom: 2rem;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+
+    h1 {
+      color: var(--color-primary);
+      font-size: 1.875rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .meta {
+      color: var(--color-text-secondary);
+      font-size: 0.875rem;
+    }
+
+    .controls {
+      background: var(--color-surface);
+      padding: 1.5rem;
+      border-radius: 0.5rem;
+      margin-bottom: 2rem;
+      display: flex;
+      gap: 1.5rem;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    .control-group {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    label {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+    }
+
+    select, button {
+      padding: 0.5rem 1rem;
+      border: 1px solid var(--color-border);
+      border-radius: 0.375rem;
+      font-size: 0.875rem;
+      background: white;
+      cursor: pointer;
+    }
+
+    select:focus, button:focus {
+      outline: 2px solid var(--color-primary);
+      outline-offset: 2px;
+    }
+
+    button {
+      background: var(--color-primary);
+      color: white;
+      border: none;
+      font-weight: 500;
+      transition: background 0.2s;
+    }
+
+    button:hover {
+      background: #1d4ed8;
+    }
+
+    .matrix-container {
+      background: var(--color-surface);
+      border-radius: 0.5rem;
+      overflow: hidden;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+
+    .matrix-table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    .matrix-table th,
+    .matrix-table td {
+      border: 1px solid var(--color-border);
+      padding: 0.75rem;
+      text-align: center;
+    }
+
+    .matrix-table th {
+      background: #f3f4f6;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    .matrix-table thead th {
+      background: var(--color-primary);
+      color: white;
+    }
+
+    .matrix-table tbody th {
+      background: #f9fafb;
+      font-weight: 600;
+    }
+
+    .prototype-cell {
+      position: relative;
+      padding: 0;
+      height: 400px;
+      vertical-align: top;
+    }
+
+    .prototype-wrapper {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .prototype-header {
+      padding: 0.5rem;
+      background: #f9fafb;
+      border-bottom: 1px solid var(--color-border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .prototype-title {
+      font-size: 0.75rem;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+    }
+
+    .prototype-actions {
+      display: flex;
+      gap: 0.25rem;
+    }
+
+    .icon-btn {
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: none;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      border-radius: 0.25rem;
+    }
+
+    .icon-btn:hover {
+      background: #e5e7eb;
+      color: var(--color-text);
+    }
+
+    .icon-btn.selected {
+      background: var(--color-primary);
+      color: white;
+    }
+
+    .prototype-iframe-container {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .prototype-iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+      transform-origin: top left;
+    }
+
+    .zoom-info {
+      position: absolute;
+      bottom: 0.5rem;
+      right: 0.5rem;
+      background: rgba(0,0,0,0.7);
+      color: white;
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.25rem;
+      font-size: 0.75rem;
+      pointer-events: none;
+    }
+
+    .tabs {
+      display: flex;
+      gap: 0.5rem;
+      margin-bottom: 1rem;
+      border-bottom: 2px solid var(--color-border);
+    }
+
+    .tab {
+      padding: 0.75rem 1.5rem;
+      background: transparent;
+      border: none;
+      border-bottom: 2px solid transparent;
+      cursor: pointer;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      margin-bottom: -2px;
+    }
+
+    .tab.active {
+      color: var(--color-primary);
+      border-bottom-color: var(--color-primary);
+    }
+
+    .tab-content {
+      display: none;
+    }
+
+    .tab-content.active {
+      display: block;
+    }
+
+    .fullscreen-overlay {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0,0,0,0.95);
+      z-index: 1000;
+      padding: 2rem;
+    }
+
+    .fullscreen-overlay.active {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .fullscreen-header {
+      color: white;
+      margin-bottom: 1rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .fullscreen-iframe {
+      flex: 1;
+      border: none;
+      background: white;
+      border-radius: 0.5rem;
+    }
+
+    .close-btn {
+      background: rgba(255,255,255,0.2);
+      color: white;
+      border: none;
+      padding: 0.5rem 1rem;
+      border-radius: 0.375rem;
+      cursor: pointer;
+    }
+
+    .close-btn:hover {
+      background: rgba(255,255,255,0.3);
+    }
+
+    .selection-summary {
+      background: #fef3c7;
+      border-left: 4px solid #f59e0b;
+      padding: 1rem;
+      margin-bottom: 2rem;
+      border-radius: 0.375rem;
+    }
+
+    .selection-summary h3 {
+      color: #92400e;
+      margin-bottom: 0.5rem;
+      font-size: 1rem;
+    }
+
+    .selection-list {
+      list-style: none;
+      color: #78350f;
+      font-size: 0.875rem;
+    }
+
+    .selection-list li {
+      padding: 0.25rem 0;
+    }
+
+    @media (max-width: 1200px) {
+      .prototype-cell {
+        height: 300px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>🎨 UI Design Matrix Comparison</h1>
+      <div class="meta">
+        <strong>Run ID:</strong> {{run_id}} |
+        <strong>Session:</strong> {{session_id}} |
+        <strong>Generated:</strong> {{timestamp}}
+      </div>
+    </header>
+
+    <div class="controls">
+      <div class="control-group">
+        <label for="page-select">Page:</label>
+        <select id="page-select">
+          <!-- Populated by JavaScript -->
+        </select>
+      </div>
+
+      <div class="control-group">
+        <label for="zoom-level">Zoom:</label>
+        <select id="zoom-level">
+          <option value="0.25">25%</option>
+          <option value="0.5">50%</option>
+          <option value="0.75">75%</option>
+          <option value="1" selected>100%</option>
+        </select>
+      </div>
+
+      <div class="control-group">
+        <label>&nbsp;</label>
+        <button id="sync-scroll-toggle">🔗 Sync Scroll: ON</button>
+      </div>
+
+      <div class="control-group">
+        <label>&nbsp;</label>
+        <button id="export-selection">📥 Export Selection</button>
+      </div>
+    </div>
+
+    <div id="selection-summary" class="selection-summary" style="display:none">
+      <h3>Selected Prototypes (<span id="selection-count">0</span>)</h3>
+      <ul id="selection-list" class="selection-list"></ul>
+    </div>
+
+    <div class="tabs">
+      <button class="tab active" data-tab="matrix">Matrix View</button>
+      <button class="tab" data-tab="comparison">Side-by-Side</button>
+      <button class="tab" data-tab="runs">Compare Runs</button>
+    </div>
+
+    <div class="tab-content active" data-content="matrix">
+      <div class="matrix-container">
+        <table class="matrix-table">
+          <thead>
+            <tr>
+              <th>Style ↓ / Layout →</th>
+              <th>Layout 1</th>
+              <th>Layout 2</th>
+              <th>Layout 3</th>
+            </tr>
+          </thead>
+          <tbody id="matrix-body">
+            <!-- Populated by JavaScript -->
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="tab-content" data-content="comparison">
+      <p>Select two prototypes from the matrix to compare side-by-side.</p>
+      <div id="comparison-view"></div>
+    </div>
+
+    <div class="tab-content" data-content="runs">
+      <p>Compare the same prototype across different runs.</p>
+      <div id="runs-comparison"></div>
+    </div>
+  </div>
+
+  <div id="fullscreen-overlay" class="fullscreen-overlay">
+    <div class="fullscreen-header">
+      <h2 id="fullscreen-title"></h2>
+      <button class="close-btn" onclick="closeFullscreen()">✕ Close</button>
+    </div>
+    <iframe id="fullscreen-iframe" class="fullscreen-iframe"></iframe>
+  </div>
+
+  <script>
+    // Configuration - Replace with actual values during generation
+    const CONFIG = {
+      runId: "{{run_id}}",
+      sessionId: "{{session_id}}",
+      styleVariants: {{style_variants}},  // e.g., 3
+      layoutVariants: {{layout_variants}},  // e.g., 3
+      pages: {{pages_json}},  // e.g., ["dashboard", "auth"]
+      basePath: "."  // Relative path to prototypes
+    };
+
+    // State
+    let state = {
+      currentPage: CONFIG.pages[0],
+      zoomLevel: 1,
+      syncScroll: true,
+      selected: new Set(),
+      fullscreenSrc: null
+    };
+
+    // Initialize
+    document.addEventListener('DOMContentLoaded', () => {
+      populatePageSelect();
+      renderMatrix();
+      setupEventListeners();
+      loadSelectionFromStorage();
+    });
+
+    function populatePageSelect() {
+      const select = document.getElementById('page-select');
+      CONFIG.pages.forEach(page => {
+        const option = document.createElement('option');
+        option.value = page;
+        option.textContent = capitalize(page);
+        select.appendChild(option);
+      });
+    }
+
+    function renderMatrix() {
+      const tbody = document.getElementById('matrix-body');
+      tbody.innerHTML = '';
+
+      for (let s = 1; s <= CONFIG.styleVariants; s++) {
+        const row = document.createElement('tr');
+
+        // Style header cell
+        const headerCell = document.createElement('th');
+        headerCell.textContent = `Style ${s}`;
+        row.appendChild(headerCell);
+
+        // Prototype cells for each layout
+        for (let l = 1; l <= CONFIG.layoutVariants; l++) {
+          const cell = document.createElement('td');
+          cell.className = 'prototype-cell';
+
+          const filename = `${state.currentPage}-style-${s}-layout-${l}.html`;
+          const id = `${state.currentPage}-s${s}-l${l}`;
+
+          cell.innerHTML = `
+            <div class="prototype-wrapper">
+              <div class="prototype-header">
+                <span class="prototype-title">S${s}L${l}</span>
+                <div class="prototype-actions">
+                  <button class="icon-btn select-btn" data-id="${id}" title="Select">
+                    ${state.selected.has(id) ? '★' : '☆'}
+                  </button>
+                  <button class="icon-btn" onclick="openFullscreen('${filename}', 'Style ${s} Layout ${l}')" title="Fullscreen">
+                    ⛶
+                  </button>
+                  <button class="icon-btn" onclick="openInNewTab('${filename}')" title="Open in new tab">
+                    ↗
+                  </button>
+                </div>
+              </div>
+              <div class="prototype-iframe-container">
+                <iframe
+                  class="prototype-iframe"
+                  src="${filename}"
+                  data-cell="s${s}-l${l}"
+                  style="transform: scale(${state.zoomLevel});"
+                ></iframe>
+                <div class="zoom-info">${Math.round(state.zoomLevel * 100)}%</div>
+              </div>
+            </div>
+          `;
+
+          row.appendChild(cell);
+        }
+
+        tbody.appendChild(row);
+      }
+
+      // Re-attach selection event listeners
+      document.querySelectorAll('.select-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => toggleSelection(e.target.dataset.id, e.target));
+      });
+
+      // Setup scroll sync
+      if (state.syncScroll) {
+        setupScrollSync();
+      }
+    }
+
+    function setupScrollSync() {
+      const iframes = document.querySelectorAll('.prototype-iframe');
+      let isScrolling = false;
+
+      iframes.forEach(iframe => {
+        iframe.addEventListener('load', () => {
+          const iframeWindow = iframe.contentWindow;
+
+          iframe.contentDocument.addEventListener('scroll', (e) => {
+            if (!state.syncScroll || isScrolling) return;
+
+            isScrolling = true;
+            const scrollTop = iframe.contentDocument.documentElement.scrollTop;
+            const scrollLeft = iframe.contentDocument.documentElement.scrollLeft;
+
+            iframes.forEach(otherIframe => {
+              if (otherIframe !== iframe && otherIframe.contentDocument) {
+                otherIframe.contentDocument.documentElement.scrollTop = scrollTop;
+                otherIframe.contentDocument.documentElement.scrollLeft = scrollLeft;
+              }
+            });
+
+            setTimeout(() => { isScrolling = false; }, 50);
+          });
+        });
+      });
+    }
+
+    function setupEventListeners() {
+      // Page selector
+      document.getElementById('page-select').addEventListener('change', (e) => {
+        state.currentPage = e.target.value;
+        renderMatrix();
+      });
+
+      // Zoom level
+      document.getElementById('zoom-level').addEventListener('change', (e) => {
+        state.zoomLevel = parseFloat(e.target.value);
+        renderMatrix();
+      });
+
+      // Sync scroll toggle
+      document.getElementById('sync-scroll-toggle').addEventListener('click', (e) => {
+        state.syncScroll = !state.syncScroll;
+        e.target.textContent = `🔗 Sync Scroll: ${state.syncScroll ? 'ON' : 'OFF'}`;
+        if (state.syncScroll) setupScrollSync();
+      });
+
+      // Export selection
+      document.getElementById('export-selection').addEventListener('click', exportSelection);
+
+      // Tab switching
+      document.querySelectorAll('.tab').forEach(tab => {
+        tab.addEventListener('click', (e) => {
+          const tabName = e.target.dataset.tab;
+          switchTab(tabName);
+        });
+      });
+    }
+
+    function toggleSelection(id, btn) {
+      if (state.selected.has(id)) {
+        state.selected.delete(id);
+        btn.textContent = '☆';
+        btn.classList.remove('selected');
+      } else {
+        state.selected.add(id);
+        btn.textContent = '★';
+        btn.classList.add('selected');
+      }
+
+      updateSelectionSummary();
+      saveSelectionToStorage();
+    }
+
+    function updateSelectionSummary() {
+      const summary = document.getElementById('selection-summary');
+      const count = document.getElementById('selection-count');
+      const list = document.getElementById('selection-list');
+
+      count.textContent = state.selected.size;
+
+      if (state.selected.size > 0) {
+        summary.style.display = 'block';
+        list.innerHTML = Array.from(state.selected)
+          .map(id => `<li>${id}</li>`)
+          .join('');
+      } else {
+        summary.style.display = 'none';
+      }
+    }
+
+    function saveSelectionToStorage() {
+      localStorage.setItem(`selection-${CONFIG.runId}`, JSON.stringify(Array.from(state.selected)));
+    }
+
+    function loadSelectionFromStorage() {
+      const stored = localStorage.getItem(`selection-${CONFIG.runId}`);
+      if (stored) {
+        state.selected = new Set(JSON.parse(stored));
+        updateSelectionSummary();
+      }
+    }
+
+    function exportSelection() {
+      const report = {
+        runId: CONFIG.runId,
+        sessionId: CONFIG.sessionId,
+        timestamp: new Date().toISOString(),
+        selections: Array.from(state.selected).map(id => ({
+          id,
+          file: `${id.replace(/-s(\d+)-l(\d+)/, '-style-$1-layout-$2')}.html`
+        }))
+      };
+
+      const blob = new Blob([JSON.stringify(report, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `selection-${CONFIG.runId}.json`;
+      a.click();
+      URL.revokeObjectURL(url);
+
+      alert(`Exported ${state.selected.size} selections to selection-${CONFIG.runId}.json`);
+    }
+
+    function openFullscreen(src, title) {
+      const overlay = document.getElementById('fullscreen-overlay');
+      const iframe = document.getElementById('fullscreen-iframe');
+      const titleEl = document.getElementById('fullscreen-title');
+
+      iframe.src = src;
+      titleEl.textContent = title;
+      overlay.classList.add('active');
+      state.fullscreenSrc = src;
+    }
+
+    function closeFullscreen() {
+      const overlay = document.getElementById('fullscreen-overlay');
+      const iframe = document.getElementById('fullscreen-iframe');
+
+      overlay.classList.remove('active');
+      iframe.src = '';
+      state.fullscreenSrc = null;
+    }
+
+    function openInNewTab(src) {
+      window.open(src, '_blank');
+    }
+
+    function switchTab(tabName) {
+      document.querySelectorAll('.tab').forEach(tab => {
+        tab.classList.toggle('active', tab.dataset.tab === tabName);
+      });
+
+      document.querySelectorAll('.tab-content').forEach(content => {
+        content.classList.toggle('active', content.dataset.content === tabName);
+      });
+    }
+
+    function capitalize(str) {
+      return str.charAt(0).toUpperCase() + str.slice(1);
+    }
+
+    // Close fullscreen on ESC key
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && state.fullscreenSrc) {
+        closeFullscreen();
+      }
+    });
+  </script>
+</body>
+</html>

.claude/workflows/cli-templates/prompts/documentation/api-reference.txt

@@ -0,0 +1,240 @@
+# API-Level Documentation Template
+
+Generate comprehensive API documentation following this structure:
+
+## Overview
+[Brief description of the API's purpose and capabilities]
+
+## Authentication
+### Authentication Method
+[e.g., JWT, OAuth2, API Keys]
+
+### Obtaining Credentials
+```bash
+# Example authentication flow
+```
+
+### Using Credentials
+```http
+GET /api/resource HTTP/1.1
+Authorization: Bearer <token>
+```
+
+---
+
+## Base URL
+```
+Production: https://api.example.com/v1
+Staging: https://staging.api.example.com/v1
+```
+
+## Common Response Codes
+| Code | Description |
+|------|-------------|
+| 200  | Success |
+| 201  | Created |
+| 400  | Bad Request |
+| 401  | Unauthorized |
+| 403  | Forbidden |
+| 404  | Not Found |
+| 500  | Internal Server Error |
+
+---
+
+## Endpoints
+
+### Resource: Users
+
+#### GET /users
+**Description**: Retrieves a paginated list of users.
+
+**Query Parameters**:
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `limit` | number | No | Number of results (default: 20, max: 100) |
+| `offset` | number | No | Pagination offset (default: 0) |
+| `sort` | string | No | Sort field (e.g., `name`, `-created_at`) |
+
+**Example Request**:
+```http
+GET /users?limit=10&offset=0&sort=-created_at HTTP/1.1
+Authorization: Bearer <token>
+```
+
+**Response (200 OK)**:
+```json
+{
+  "data": [
+    {
+      "id": 1,
+      "name": "John Doe",
+      "email": "john@example.com",
+      "created_at": "2024-01-01T00:00:00Z"
+    }
+  ],
+  "pagination": {
+    "total": 100,
+    "limit": 10,
+    "offset": 0
+  }
+}
+```
+
+**Error Response (401 Unauthorized)**:
+```json
+{
+  "error": {
+    "code": "UNAUTHORIZED",
+    "message": "Invalid or expired token"
+  }
+}
+```
+
+---
+
+#### GET /users/:id
+**Description**: Retrieves a single user by ID.
+
+**Path Parameters**:
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `id` | number | User ID |
+
+**Example Request**:
+```http
+GET /users/123 HTTP/1.1
+Authorization: Bearer <token>
+```
+
+**Response (200 OK)**:
+```json
+{
+  "id": 123,
+  "name": "John Doe",
+  "email": "john@example.com",
+  "created_at": "2024-01-01T00:00:00Z",
+  "updated_at": "2024-01-15T10:30:00Z"
+}
+```
+
+---
+
+#### POST /users
+**Description**: Creates a new user.
+
+**Request Body**:
+```json
+{
+  "name": "Jane Smith",
+  "email": "jane@example.com",
+  "password": "securePassword123"
+}
+```
+
+**Validation Rules**:
+- `name`: Required, 2-100 characters
+- `email`: Required, valid email format, must be unique
+- `password`: Required, minimum 8 characters
+
+**Response (201 Created)**:
+```json
+{
+  "id": 124,
+  "name": "Jane Smith",
+  "email": "jane@example.com",
+  "created_at": "2024-01-20T12:00:00Z"
+}
+```
+
+**Error Response (400 Bad Request)**:
+```json
+{
+  "error": {
+    "code": "VALIDATION_ERROR",
+    "message": "Validation failed",
+    "details": [
+      {
+        "field": "email",
+        "message": "Email already exists"
+      }
+    ]
+  }
+}
+```
+
+---
+
+#### PUT /users/:id
+**Description**: Updates an existing user.
+
+**Path Parameters**:
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `id` | number | User ID |
+
+**Request Body** (all fields optional):
+```json
+{
+  "name": "Jane Doe",
+  "email": "jane.doe@example.com"
+}
+```
+
+**Response (200 OK)**:
+```json
+{
+  "id": 124,
+  "name": "Jane Doe",
+  "email": "jane.doe@example.com",
+  "updated_at": "2024-01-21T09:15:00Z"
+}
+```
+
+---
+
+#### DELETE /users/:id
+**Description**: Deletes a user.
+
+**Path Parameters**:
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `id` | number | User ID |
+
+**Response (204 No Content)**:
+[Empty response body]
+
+---
+
+## Rate Limiting
+- **Limit**: 1000 requests per hour per API key
+- **Headers**:
+  - `X-RateLimit-Limit`: Total requests allowed
+  - `X-RateLimit-Remaining`: Requests remaining
+  - `X-RateLimit-Reset`: Unix timestamp when limit resets
+
+---
+
+## SDKs and Client Libraries
+- [JavaScript/TypeScript SDK](./sdks/javascript.md)
+- [Python SDK](./sdks/python.md)
+
+---
+
+## Webhooks
+[Description of webhook system if applicable]
+
+---
+
+## Changelog
+### v1.1.0 (2024-01-20)
+- Added user sorting functionality
+- Improved error messages
+
+### v1.0.0 (2024-01-01)
+- Initial API release
+
+---
+
+**API Version**: 1.1.0
+**Last Updated**: [Auto-generated timestamp]
+**Support**: api-support@example.com

.claude/workflows/cli-templates/prompts/documentation/module-documentation.txt

@@ -0,0 +1,91 @@
+# Module-Level Documentation Template
+
+Generate detailed module documentation following this structure:
+
+## 1. Purpose and Responsibilities
+[What this module does, its boundaries, and its role in the larger system]
+
+## 2. Internal Architecture
+- **Key Components**:
+  - [Component 1]: [Description and responsibility]
+  - [Component 2]: [Description and responsibility]
+- **Data Flow**: [How data moves through the module, with diagrams if applicable]
+- **Core Logic**: [Explanation of the main business logic and algorithms]
+- **State Management**: [How state is managed within the module]
+
+## 3. Public API / Interface
+### Exported Functions
+```typescript
+/**
+ * Function description
+ * @param param1 - Parameter description
+ * @returns Return value description
+ */
+export function exampleFunction(param1: Type): ReturnType;
+```
+
+### Exported Classes
+```typescript
+/**
+ * Class description
+ */
+export class ExampleClass {
+  // Public methods and properties
+}
+```
+
+### Usage Examples
+```typescript
+import { exampleFunction } from './module';
+
+// Example 1: Basic usage
+const result = exampleFunction(input);
+
+// Example 2: Advanced usage
+// ...
+```
+
+## 4. Dependencies
+### Internal Dependencies
+- **[Module A]**: [Why this dependency exists, what it provides]
+- **[Module B]**: [Purpose of dependency]
+
+### External Dependencies
+- **[Library 1]** (`version`): [Purpose and usage]
+- **[Library 2]** (`version`): [Purpose and usage]
+
+## 5. Configuration
+### Environment Variables
+- `ENV_VAR_NAME`: [Description, default value]
+
+### Configuration Options
+```typescript
+interface ModuleConfig {
+  option1: Type; // Description
+  option2: Type; // Description
+}
+```
+
+## 6. Testing
+### Running Tests
+```bash
+npm test -- module-name
+```
+
+### Test Coverage
+- Unit tests: [Coverage percentage or key test files]
+- Integration tests: [Coverage or test scenarios]
+
+## 7. Common Use Cases
+1. **Use Case 1**: [Description and code example]
+2. **Use Case 2**: [Description and code example]
+
+## 8. Troubleshooting
+### Common Issues
+- **Issue 1**: [Description and solution]
+- **Issue 2**: [Description and solution]
+
+---
+**Module Path**: [File path]
+**Last Updated**: [Auto-generated timestamp]
+**Owner/Maintainer**: [Team or individual]

.claude/workflows/cli-templates/prompts/documentation/project-overview.txt

@@ -0,0 +1,58 @@
+# Project-Level Documentation Template
+
+Generate comprehensive project documentation following this structure:
+
+## 1. Overview
+- **Purpose**: [High-level mission and goals of the project]
+- **Target Audience**: [Primary users, developers, stakeholders]
+- **Key Features**: [List of major functionalities and capabilities]
+
+## 2. System Architecture
+- **Architectural Style**: [e.g., Monolith, Microservices, Layered, Event-Driven]
+- **Core Components**: [Diagram or list of major system parts and their interactions]
+- **Technology Stack**:
+  - Languages: [Programming languages used]
+  - Frameworks: [Key frameworks and libraries]
+  - Databases: [Data storage solutions]
+  - Infrastructure: [Deployment and hosting]
+- **Design Principles**: [Guiding principles like SOLID, DRY, separation of concerns]
+
+## 3. Getting Started
+- **Prerequisites**: [Required software, tools, versions]
+- **Installation**:
+  ```bash
+  # Installation commands
+  ```
+- **Configuration**: [Environment setup, config files]
+- **Running the Project**:
+  ```bash
+  # Startup commands
+  ```
+
+## 4. Development Workflow
+- **Branching Strategy**: [e.g., GitFlow, trunk-based]
+- **Coding Standards**: [Style guide, linting rules]
+- **Testing**:
+  ```bash
+  # Test commands
+  ```
+- **Build & Deployment**: [CI/CD pipeline overview]
+
+## 5. Project Structure
+```
+project-root/
+├── src/           # [Description]
+├── tests/         # [Description]
+├── docs/          # [Description]
+└── config/        # [Description]
+```
+
+## 6. Navigation
+- [Module Documentation](./modules/)
+- [API Reference](./api/)
+- [Architecture Details](./architecture/)
+- [Contributing Guidelines](./CONTRIBUTING.md)
+
+---
+**Last Updated**: [Auto-generated timestamp]
+**Documentation Version**: [Project version]

.claude/workflows/design-tokens-schema.md

@@ -0,0 +1,534 @@
+---
+name: design-tokens-schema
+description: Design tokens JSON schema specification for UI design workflow
+type: specification
+---
+
+# Design Tokens Schema Specification
+
+## Overview
+Standardized JSON schema for design tokens used in `/workflow:design/*` commands. Ensures consistency across style extraction, consolidation, and UI generation phases.
+
+## Core Principles
+
+1. **OKLCH Color Format**: All colors use OKLCH color space for perceptual uniformity
+2. **Semantic Naming**: User-centric token names (brand-primary, surface-elevated, not color-1, bg-2)
+3. **rem-Based Sizing**: All spacing and typography use rem units for scalability
+4. **Comprehensive Coverage**: Complete token set for production-ready design systems
+5. **Accessibility First**: WCAG AA compliance validated and documented
+
+## Full Schema
+
+```json
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Design Tokens",
+  "description": "Design token definitions for UI design workflow",
+  "type": "object",
+  "required": ["colors", "typography", "spacing", "border_radius", "shadow"],
+  "properties": {
+    "meta": {
+      "type": "object",
+      "properties": {
+        "version": {"type": "string", "pattern": "^\\d+\\.\\d+\\.\\d+$"},
+        "generated_at": {"type": "string", "format": "date-time"},
+        "session_id": {"type": "string", "pattern": "^WFS-"},
+        "description": {"type": "string"}
+      }
+    },
+    "colors": {
+      "type": "object",
+      "required": ["brand", "surface", "semantic", "text"],
+      "properties": {
+        "brand": {
+          "type": "object",
+          "description": "Brand identity colors",
+          "required": ["primary", "secondary"],
+          "properties": {
+            "primary": {"$ref": "#/definitions/color"},
+            "secondary": {"$ref": "#/definitions/color"},
+            "accent": {"$ref": "#/definitions/color"}
+          }
+        },
+        "surface": {
+          "type": "object",
+          "description": "Surface and background colors",
+          "required": ["background", "elevated"],
+          "properties": {
+            "background": {"$ref": "#/definitions/color"},
+            "elevated": {"$ref": "#/definitions/color"},
+            "sunken": {"$ref": "#/definitions/color"},
+            "overlay": {"$ref": "#/definitions/color"}
+          }
+        },
+        "semantic": {
+          "type": "object",
+          "description": "Semantic state colors",
+          "required": ["success", "warning", "error", "info"],
+          "properties": {
+            "success": {"$ref": "#/definitions/color"},
+            "warning": {"$ref": "#/definitions/color"},
+            "error": {"$ref": "#/definitions/color"},
+            "info": {"$ref": "#/definitions/color"}
+          }
+        },
+        "text": {
+          "type": "object",
+          "description": "Text colors with WCAG AA validated contrast",
+          "required": ["primary", "secondary"],
+          "properties": {
+            "primary": {"$ref": "#/definitions/color"},
+            "secondary": {"$ref": "#/definitions/color"},
+            "tertiary": {"$ref": "#/definitions/color"},
+            "inverse": {"$ref": "#/definitions/color"},
+            "disabled": {"$ref": "#/definitions/color"}
+          }
+        },
+        "border": {
+          "type": "object",
+          "description": "Border and divider colors",
+          "properties": {
+            "subtle": {"$ref": "#/definitions/color"},
+            "default": {"$ref": "#/definitions/color"},
+            "strong": {"$ref": "#/definitions/color"}
+          }
+        }
+      }
+    },
+    "typography": {
+      "type": "object",
+      "required": ["font_family", "font_size", "line_height", "font_weight"],
+      "properties": {
+        "font_family": {
+          "type": "object",
+          "required": ["heading", "body"],
+          "properties": {
+            "heading": {"type": "string"},
+            "body": {"type": "string"},
+            "mono": {"type": "string"}
+          }
+        },
+        "font_size": {
+          "type": "object",
+          "required": ["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl"],
+          "properties": {
+            "xs": {"$ref": "#/definitions/size_rem"},
+            "sm": {"$ref": "#/definitions/size_rem"},
+            "base": {"$ref": "#/definitions/size_rem"},
+            "lg": {"$ref": "#/definitions/size_rem"},
+            "xl": {"$ref": "#/definitions/size_rem"},
+            "2xl": {"$ref": "#/definitions/size_rem"},
+            "3xl": {"$ref": "#/definitions/size_rem"},
+            "4xl": {"$ref": "#/definitions/size_rem"},
+            "5xl": {"$ref": "#/definitions/size_rem"}
+          }
+        },
+        "line_height": {
+          "type": "object",
+          "required": ["tight", "normal", "relaxed"],
+          "properties": {
+            "tight": {"type": "string", "pattern": "^\\d+(\\.\\d+)?$"},
+            "normal": {"type": "string", "pattern": "^\\d+(\\.\\d+)?$"},
+            "relaxed": {"type": "string", "pattern": "^\\d+(\\.\\d+)?$"}
+          }
+        },
+        "font_weight": {
+          "type": "object",
+          "properties": {
+            "light": {"type": "integer", "enum": [300]},
+            "normal": {"type": "integer", "enum": [400]},
+            "medium": {"type": "integer", "enum": [500]},
+            "semibold": {"type": "integer", "enum": [600]},
+            "bold": {"type": "integer", "enum": [700]}
+          }
+        }
+      }
+    },
+    "spacing": {
+      "type": "object",
+      "description": "Spacing scale (rem-based)",
+      "required": ["0", "1", "2", "3", "4", "6", "8"],
+      "patternProperties": {
+        "^\\d+$": {"$ref": "#/definitions/size_rem"}
+      }
+    },
+    "border_radius": {
+      "type": "object",
+      "required": ["none", "sm", "md", "lg", "full"],
+      "properties": {
+        "none": {"type": "string", "const": "0"},
+        "sm": {"$ref": "#/definitions/size_rem"},
+        "md": {"$ref": "#/definitions/size_rem"},
+        "lg": {"$ref": "#/definitions/size_rem"},
+        "xl": {"$ref": "#/definitions/size_rem"},
+        "2xl": {"$ref": "#/definitions/size_rem"},
+        "full": {"type": "string", "const": "9999px"}
+      }
+    },
+    "shadow": {
+      "type": "object",
+      "required": ["sm", "md", "lg"],
+      "properties": {
+        "none": {"type": "string", "const": "none"},
+        "sm": {"type": "string"},
+        "md": {"type": "string"},
+        "lg": {"type": "string"},
+        "xl": {"type": "string"},
+        "2xl": {"type": "string"}
+      }
+    },
+    "breakpoint": {
+      "type": "object",
+      "description": "Responsive breakpoints",
+      "properties": {
+        "sm": {"type": "string", "pattern": "^\\d+px$"},
+        "md": {"type": "string", "pattern": "^\\d+px$"},
+        "lg": {"type": "string", "pattern": "^\\d+px$"},
+        "xl": {"type": "string", "pattern": "^\\d+px$"},
+        "2xl": {"type": "string", "pattern": "^\\d+px$"}
+      }
+    },
+    "accessibility": {
+      "type": "object",
+      "description": "WCAG AA compliance data",
+      "properties": {
+        "contrast_ratios": {
+          "type": "object",
+          "patternProperties": {
+            ".*": {
+              "type": "object",
+              "properties": {
+                "background": {"type": "string"},
+                "foreground": {"type": "string"},
+                "ratio": {"type": "number"},
+                "wcag_aa_pass": {"type": "boolean"},
+                "wcag_aaa_pass": {"type": "boolean"}
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "definitions": {
+    "color": {
+      "type": "string",
+      "pattern": "^oklch\\(\\s*\\d+(\\.\\d+)?\\s+\\d+(\\.\\d+)?\\s+\\d+(\\.\\d+)?\\s*(\\/\\s*\\d+(\\.\\d+)?)?\\s*\\)$",
+      "description": "OKLCH color format: oklch(L C H / A)"
+    },
+    "size_rem": {
+      "type": "string",
+      "pattern": "^\\d+(\\.\\d+)?rem$",
+      "description": "rem-based size value"
+    }
+  }
+}
+```
+
+## Example: Complete Design Tokens
+
+```json
+{
+  "meta": {
+    "version": "1.0.0",
+    "generated_at": "2025-10-05T15:30:00Z",
+    "session_id": "WFS-auth-dashboard",
+    "description": "Modern minimalist design system with high contrast"
+  },
+  "colors": {
+    "brand": {
+      "primary": "oklch(0.45 0.20 270 / 1)",
+      "secondary": "oklch(0.60 0.15 200 / 1)",
+      "accent": "oklch(0.65 0.18 30 / 1)"
+    },
+    "surface": {
+      "background": "oklch(0.98 0.01 270 / 1)",
+      "elevated": "oklch(1.00 0.00 0 / 1)",
+      "sunken": "oklch(0.95 0.02 270 / 1)",
+      "overlay": "oklch(0.00 0.00 0 / 0.5)"
+    },
+    "semantic": {
+      "success": "oklch(0.55 0.15 150 / 1)",
+      "warning": "oklch(0.70 0.18 60 / 1)",
+      "error": "oklch(0.50 0.20 20 / 1)",
+      "info": "oklch(0.60 0.15 240 / 1)"
+    },
+    "text": {
+      "primary": "oklch(0.20 0.02 270 / 1)",
+      "secondary": "oklch(0.45 0.02 270 / 1)",
+      "tertiary": "oklch(0.60 0.02 270 / 1)",
+      "inverse": "oklch(0.98 0.01 270 / 1)",
+      "disabled": "oklch(0.70 0.01 270 / 0.5)"
+    },
+    "border": {
+      "subtle": "oklch(0.90 0.01 270 / 1)",
+      "default": "oklch(0.80 0.02 270 / 1)",
+      "strong": "oklch(0.60 0.05 270 / 1)"
+    }
+  },
+  "typography": {
+    "font_family": {
+      "heading": "Inter, system-ui, -apple-system, sans-serif",
+      "body": "Inter, system-ui, -apple-system, sans-serif",
+      "mono": "Fira Code, Consolas, monospace"
+    },
+    "font_size": {
+      "xs": "0.75rem",
+      "sm": "0.875rem",
+      "base": "1rem",
+      "lg": "1.125rem",
+      "xl": "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem"
+    },
+    "line_height": {
+      "tight": "1.25",
+      "normal": "1.5",
+      "relaxed": "1.75"
+    },
+    "font_weight": {
+      "light": 300,
+      "normal": 400,
+      "medium": 500,
+      "semibold": 600,
+      "bold": 700
+    }
+  },
+  "spacing": {
+    "0": "0",
+    "1": "0.25rem",
+    "2": "0.5rem",
+    "3": "0.75rem",
+    "4": "1rem",
+    "5": "1.25rem",
+    "6": "1.5rem",
+    "8": "2rem",
+    "10": "2.5rem",
+    "12": "3rem",
+    "16": "4rem",
+    "20": "5rem",
+    "24": "6rem"
+  },
+  "border_radius": {
+    "none": "0",
+    "sm": "0.25rem",
+    "md": "0.5rem",
+    "lg": "0.75rem",
+    "xl": "1rem",
+    "2xl": "1.5rem",
+    "full": "9999px"
+  },
+  "shadow": {
+    "none": "none",
+    "sm": "0 1px 2px oklch(0.00 0.00 0 / 0.05)",
+    "md": "0 4px 6px oklch(0.00 0.00 0 / 0.07), 0 2px 4px oklch(0.00 0.00 0 / 0.06)",
+    "lg": "0 10px 15px oklch(0.00 0.00 0 / 0.1), 0 4px 6px oklch(0.00 0.00 0 / 0.05)",
+    "xl": "0 20px 25px oklch(0.00 0.00 0 / 0.15), 0 10px 10px oklch(0.00 0.00 0 / 0.04)",
+    "2xl": "0 25px 50px oklch(0.00 0.00 0 / 0.25)"
+  },
+  "breakpoint": {
+    "sm": "640px",
+    "md": "768px",
+    "lg": "1024px",
+    "xl": "1280px",
+    "2xl": "1536px"
+  },
+  "accessibility": {
+    "contrast_ratios": {
+      "text_primary_on_background": {
+        "background": "oklch(0.98 0.01 270 / 1)",
+        "foreground": "oklch(0.20 0.02 270 / 1)",
+        "ratio": 14.2,
+        "wcag_aa_pass": true,
+        "wcag_aaa_pass": true
+      },
+      "brand_primary_on_background": {
+        "background": "oklch(0.98 0.01 270 / 1)",
+        "foreground": "oklch(0.45 0.20 270 / 1)",
+        "ratio": 6.8,
+        "wcag_aa_pass": true,
+        "wcag_aaa_pass": false
+      }
+    }
+  }
+}
+```
+
+## CSS Custom Properties Generation
+
+Design tokens should be converted to CSS custom properties for use in generated UI:
+
+```css
+:root {
+  /* Brand Colors */
+  --color-brand-primary: oklch(0.45 0.20 270 / 1);
+  --color-brand-secondary: oklch(0.60 0.15 200 / 1);
+  --color-brand-accent: oklch(0.65 0.18 30 / 1);
+
+  /* Surface Colors */
+  --color-surface-background: oklch(0.98 0.01 270 / 1);
+  --color-surface-elevated: oklch(1.00 0.00 0 / 1);
+  --color-surface-sunken: oklch(0.95 0.02 270 / 1);
+
+  /* Semantic Colors */
+  --color-semantic-success: oklch(0.55 0.15 150 / 1);
+  --color-semantic-warning: oklch(0.70 0.18 60 / 1);
+  --color-semantic-error: oklch(0.50 0.20 20 / 1);
+  --color-semantic-info: oklch(0.60 0.15 240 / 1);
+
+  /* Text Colors */
+  --color-text-primary: oklch(0.20 0.02 270 / 1);
+  --color-text-secondary: oklch(0.45 0.02 270 / 1);
+  --color-text-tertiary: oklch(0.60 0.02 270 / 1);
+
+  /* Typography */
+  --font-family-heading: Inter, system-ui, sans-serif;
+  --font-family-body: Inter, system-ui, sans-serif;
+  --font-family-mono: Fira Code, Consolas, monospace;
+
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* Spacing */
+  --spacing-0: 0;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+  --spacing-12: 3rem;
+  --spacing-16: 4rem;
+
+  /* Border Radius */
+  --border-radius-none: 0;
+  --border-radius-sm: 0.25rem;
+  --border-radius-md: 0.5rem;
+  --border-radius-lg: 0.75rem;
+  --border-radius-xl: 1rem;
+  --border-radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px oklch(0.00 0.00 0 / 0.05);
+  --shadow-md: 0 4px 6px oklch(0.00 0.00 0 / 0.07), 0 2px 4px oklch(0.00 0.00 0 / 0.06);
+  --shadow-lg: 0 10px 15px oklch(0.00 0.00 0 / 0.1), 0 4px 6px oklch(0.00 0.00 0 / 0.05);
+}
+```
+
+## Tailwind Configuration Generation
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          primary: 'oklch(0.45 0.20 270 / <alpha-value>)',
+          secondary: 'oklch(0.60 0.15 200 / <alpha-value>)',
+          accent: 'oklch(0.65 0.18 30 / <alpha-value>)'
+        },
+        surface: {
+          background: 'oklch(0.98 0.01 270 / <alpha-value>)',
+          elevated: 'oklch(1.00 0.00 0 / <alpha-value>)',
+          sunken: 'oklch(0.95 0.02 270 / <alpha-value>)'
+        },
+        semantic: {
+          success: 'oklch(0.55 0.15 150 / <alpha-value>)',
+          warning: 'oklch(0.70 0.18 60 / <alpha-value>)',
+          error: 'oklch(0.50 0.20 20 / <alpha-value>)',
+          info: 'oklch(0.60 0.15 240 / <alpha-value>)'
+        }
+      },
+      fontFamily: {
+        heading: ['Inter', 'system-ui', 'sans-serif'],
+        body: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['Fira Code', 'Consolas', 'monospace']
+      },
+      fontSize: {
+        'xs': '0.75rem',
+        'sm': '0.875rem',
+        'base': '1rem',
+        'lg': '1.125rem',
+        'xl': '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.25rem'
+      },
+      spacing: {
+        '1': '0.25rem',
+        '2': '0.5rem',
+        '3': '0.75rem',
+        '4': '1rem',
+        '6': '1.5rem',
+        '8': '2rem',
+        '12': '3rem',
+        '16': '4rem'
+      },
+      borderRadius: {
+        'sm': '0.25rem',
+        'md': '0.5rem',
+        'lg': '0.75rem',
+        'xl': '1rem',
+        '2xl': '1.5rem'
+      },
+      boxShadow: {
+        'sm': '0 1px 2px oklch(0.00 0.00 0 / 0.05)',
+        'md': '0 4px 6px oklch(0.00 0.00 0 / 0.07), 0 2px 4px oklch(0.00 0.00 0 / 0.06)',
+        'lg': '0 10px 15px oklch(0.00 0.00 0 / 0.1), 0 4px 6px oklch(0.00 0.00 0 / 0.05)'
+      }
+    }
+  }
+}
+```
+
+## Validation Requirements
+
+### Color Validation
+- All colors MUST use OKLCH format
+- Alpha channel optional (defaults to 1)
+- Lightness: 0-1 (0% to 100%)
+- Chroma: 0-0.4 (typical range, can exceed for vibrant colors)
+- Hue: 0-360 (degrees)
+
+### Accessibility Validation
+- Text on background: minimum 4.5:1 contrast (WCAG AA)
+- Large text (18pt+ or 14pt+ bold): minimum 3:1 contrast
+- UI components: minimum 3:1 contrast
+- Non-text focus indicators: minimum 3:1 contrast
+
+### Consistency Validation
+- Spacing scale maintains consistent ratio (e.g., 1.5x or 2x progression)
+- Typography scale follows modular scale principles
+- Border radius values progress logically
+- Shadow layers increase in offset and blur systematically
+
+## Usage in Commands
+
+### style-extract Output
+Generates initial `design-tokens.json` from visual analysis
+
+### style-consolidate Output
+Finalizes validated `design-tokens.json` with accessibility data
+
+### ui-generate Input
+Reads `design-tokens.json` to generate CSS custom properties
+
+### design-update Integration
+References `design-tokens.json` path in synthesis-specification.md
+
+## Version History
+
+- **1.0.0**: Initial schema with OKLCH colors, semantic naming, WCAG AA validation

.claude/workflows/intelligent-tools-strategy.md

@@ -6,11 +6,22 @@ type: strategic-guideline
 
 # Intelligent Tools Selection Strategy
 
+## 📋 Table of Contents
+1. [Core Framework](#-core-framework)
+2. [Tool Specifications](#-tool-specifications)
+3. [Command Templates](#-command-templates)
+4. [Tool Selection Guide](#-tool-selection-guide)
+5. [Usage Patterns](#-usage-patterns)
+6. [Best Practices](#-best-practices)
+
+---
+
 ## ⚡ Core Framework
 
-**Gemini**: Analysis, understanding, exploration & documentation
+### Tool Overview
-**Qwen**: Architecture analysis, code generation & implementation
+- **Gemini**: Analysis, understanding, exploration & documentation
-**Codex**: Development, implementation & automation
+- **Qwen**: Architecture analysis, code generation & implementation
+- **Codex**: Development, implementation & automation
 
 ### Decision Principles
 - **Use tools early and often** - Tools are faster, more thorough, and reliable than manual approaches
@@ -27,40 +38,118 @@ type: strategic-guideline
 4. **Not sure?** → Use multiple tools in parallel
 5. **Small task?** → Still use tools - they're faster than manual work
 
-### Core Execution Rules
+---
-- **Dynamic Timeout (20-120min)**: Allocate execution time based on task complexity
-  - Simple tasks (analysis, search): 20-40min (1200000-2400000ms)
-  - Medium tasks (refactoring, documentation): 40-60min (2400000-3600000ms)
-  - Complex tasks (implementation, migration): 60-120min (3600000-7200000ms)
-- **Codex Multiplier**: Codex commands use 1.5x of allocated time
-- **Apply to All Tools**: All bash() wrapped commands including Gemini, Qwen wrapper and Codex executions
-- **Command Examples**: `bash(~/.claude/scripts/gemini-wrapper -p "prompt")`, `bash(codex -C directory --full-auto exec "task")`
-- **Auto-detect**: Analyze PURPOSE and TASK fields to determine appropriate timeout
 
-### Permission Framework
+## 🎯 Tool Specifications
-- **⚠️ WRITE PROTECTION**: Local codebase write/modify requires EXPLICIT user confirmation
-  - **Analysis Mode (default)**: Read-only, safe for auto-execution
-  - **Write Mode**: Requires user explicitly states MODE=write or MODE=auto in prompt
-  - **Exception**: User provides clear instructions like "modify", "create", "implement"
-- **Gemini/Qwen Write Access**: Use `--approval-mode yolo` ONLY when MODE=write explicitly specified
-- **Codex Write Access**: Use `-s danger-full-access` and `--skip-git-repo-check` ONLY when MODE=auto explicitly specified
-- **Default Behavior**: All tools default to analysis/read-only mode without explicit write permission
 
-## 🎯 Universal Command Template
+### Gemini
+- **Command**: `~/.claude/scripts/gemini-wrapper`
+- **Strengths**: Large context window, pattern recognition
+- **Best For**: Analysis, documentation generation, code exploration
+- **Permissions**: Default read-only analysis, MODE=write requires explicit specification (auto-enables --approval-mode yolo)
+- **Default MODE**: `analysis` (read-only)
+- **⚠️ Write Trigger**: Only when user explicitly requests "generate documentation", "modify code", or specifies MODE=write
 
-### Standard Format (REQUIRED)
+#### MODE Options
+- `analysis` (default) - Read-only analysis and documentation generation
+- `write` - ⚠️ Create/modify codebase files (requires explicit specification, auto-enables --approval-mode yolo)
+
+### Qwen
+- **Command**: `~/.claude/scripts/qwen-wrapper`
+- **Strengths**: Architecture analysis, pattern recognition
+- **Best For**: System design analysis, architectural review
+- **Permissions**: Architecture analysis only, no automatic code generation
+- **Default MODE**: `analysis` (read-only)
+- **⚠️ Write Trigger**: Explicitly prohibited from auto-calling write mode
+
+#### MODE Options
+- `analysis` (default) - Architecture analysis only, no code generation/modification (read-only)
+- `write` - ⚠️ Code generation (requires explicit specification, disabled by default)
+
+### Codex
+- **Command**: `codex --full-auto exec`
+- **Strengths**: Autonomous development, mathematical reasoning
+- **Best For**: Implementation, testing, automation
+- **Permissions**: Requires explicit MODE=auto or MODE=write specification
+- **Default MODE**: No default, must be explicitly specified
+- **⚠️ Write Trigger**: Only when user explicitly requests "implement", "modify", "generate code" AND specifies MODE
+
+#### MODE Options
+- `auto` - ⚠️ Autonomous development with full file operations (requires explicit specification, enables -s danger-full-access)
+- `write` - ⚠️ Test generation and file modification (requires explicit specification)
+- **Default**: No default mode, MODE must be explicitly specified
+
+#### Session Management
+- `codex resume` - Resume previous interactive session (picker by default)
+- `codex exec "task" resume --last` - Continue most recent session with new task (maintains context)
+- `codex -i <image_file>` - Attach image(s) to initial prompt (useful for UI/design references)
+- **Multi-task Pattern**: First task uses `exec`, subsequent tasks use `exec "..." resume --last` for context continuity
+  - **Parameter Position**: `resume --last` must be placed AFTER the prompt string at command END
+  - **Example**:
+    ```bash
+    # First task - establish session
+    codex -C project --full-auto exec "Implement auth module" --skip-git-repo-check -s danger-full-access
+
+    # Subsequent tasks - continue same session
+    codex --full-auto exec "Add JWT validation" resume --last --skip-git-repo-check -s danger-full-access
+    codex --full-auto exec "Write auth tests" resume --last --skip-git-repo-check -s danger-full-access
+    ```
+
+#### Auto-Resume Decision Rules
+**When to use `resume --last`**:
+- Current task is related to/extends previous Codex task in conversation memory
+- Current task requires context from previous implementation
+- Current task is part of multi-step workflow (e.g., implement → enhance → test)
+- Session memory indicates recent Codex execution on same module/feature
+
+**When NOT to use `resume --last`**:
+- First Codex task in conversation
+- New independent task unrelated to previous work
+- Switching to different module/feature area
+- No recent Codex task in conversation memory
+
+---
+
+## 🎯 Command Templates
+
+### Universal Template Structure
+Every command MUST follow this structure:
+- [ ] **PURPOSE** - Clear goal and intent
+- [ ] **TASK** - Specific execution task
+- [ ] **MODE** - Execution mode and permission level
+- [ ] **CONTEXT** - File references and memory context from previous sessions
+- [ ] **EXPECTED** - Clear expected results
+- [ ] **RULES** - Template reference and constraints
+
+### Standard Command Formats
+
+#### Gemini Commands
 ```bash
-# Gemini Analysis (read/write capable)
+# Gemini Analysis (read-only, default)
 cd [directory] && ~/.claude/scripts/gemini-wrapper -p "
 PURPOSE: [clear analysis goal]
 TASK: [specific analysis task]
-MODE: [analysis|write]
+MODE: analysis
 CONTEXT: [file references and memory context]
 EXPECTED: [expected output]
 RULES: [template reference and constraints]
 "
 
-# Qwen Architecture Analysis (read-only analysis)
+# Gemini Write Mode (requires explicit MODE=write)
+# NOTE: --approval-mode yolo must be placed AFTER wrapper command, BEFORE -p
+cd [directory] && ~/.claude/scripts/gemini-wrapper --approval-mode yolo -p "
+PURPOSE: [clear goal]
+TASK: [specific task]
+MODE: write
+CONTEXT: [file references and memory context]
+EXPECTED: [expected output]
+RULES: [template reference and constraints]
+"
+```
+
+#### Qwen Commands
+```bash
+# Qwen Architecture Analysis (read-only, default)
 cd [directory] && ~/.claude/scripts/qwen-wrapper -p "
 PURPOSE: [clear architecture goal]
 TASK: [specific analysis task]
@@ -70,43 +159,44 @@ EXPECTED: [expected deliverables]
 RULES: [template reference and constraints]
 "
 
-# Codex Development
+# Qwen Write Mode (requires explicit MODE=write)
+# NOTE: --approval-mode yolo must be placed AFTER wrapper command, BEFORE -p
+cd [directory] && ~/.claude/scripts/qwen-wrapper --approval-mode yolo -p "
+PURPOSE: [clear goal]
+TASK: [specific task]
+MODE: write
+CONTEXT: [file references and memory context]
+EXPECTED: [expected deliverables]
+RULES: [template reference and constraints]
+"
+```
+
+#### Codex Commands
+```bash
+# Codex Development (requires explicit MODE=auto)
+# NOTE: --skip-git-repo-check and -s danger-full-access must be placed at command END
 codex -C [directory] --full-auto exec "
 PURPOSE: [clear development goal]
 TASK: [specific development task]
-MODE: [auto|write]
+MODE: auto
+CONTEXT: [file references and memory context]
+EXPECTED: [expected deliverables]
+RULES: [template reference and constraints]
+" --skip-git-repo-check -s danger-full-access
+
+# Codex Test/Write Mode (requires explicit MODE=write)
+# NOTE: --skip-git-repo-check and -s danger-full-access must be placed at command END
+codex -C [directory] --full-auto exec "
+PURPOSE: [clear goal]
+TASK: [specific task]
+MODE: write
 CONTEXT: [file references and memory context]
 EXPECTED: [expected deliverables]
 RULES: [template reference and constraints]
 " --skip-git-repo-check -s danger-full-access
 ```
 
-### Template Structure
+### Directory Context Configuration
-- [ ] **PURPOSE** - Clear goal and intent
-- [ ] **TASK** - Specific execution task
-- [ ] **MODE** - Execution mode and permission level
-- [ ] **CONTEXT** - File references and memory context from previous sessions
-- [ ] **EXPECTED** - Clear expected results
-- [ ] **RULES** - Template reference and constraints
-
-### MODE Field Definition
-
-The MODE field controls execution behavior and file permissions:
-
-**For Gemini**:
-- `analysis` (default) - Read-only analysis and documentation generation
-- `write` - ⚠️ Create/modify codebase files (requires explicit specification, auto-enables --approval-mode yolo)
-
-**For Qwen**:
-- `analysis` (default) - Architecture analysis only, no code generation/modification (read-only)
-- `write` - ⚠️ Code generation (requires explicit specification, disabled by default)
-
-**For Codex**:
-- `auto` - ⚠️ Autonomous development with full file operations (requires explicit specification, enables -s danger-full-access)
-- `write` - ⚠️ Test generation and file modification (requires explicit specification)
-- **Default**: No default mode, MODE must be explicitly specified
-
-### Directory Context
 Tools execute in current working directory:
 - **Gemini**: `cd path/to/project && ~/.claude/scripts/gemini-wrapper -p "prompt"`
 - **Qwen**: `cd path/to/project && ~/.claude/scripts/qwen-wrapper -p "prompt"`
@@ -114,7 +204,7 @@ Tools execute in current working directory:
 - **Path types**: Supports both relative (`../project`) and absolute (`/full/path`) paths
 - **Token analysis**: For gemini-wrapper and qwen-wrapper, token counting happens in current directory
 
-### Rules Field Format
+### RULES Field Format
 ```bash
 RULES: $(cat "~/.claude/workflows/cli-templates/prompts/[category]/[template].txt") | [constraints]
 ```
@@ -125,7 +215,44 @@ RULES: $(cat "~/.claude/workflows/cli-templates/prompts/[category]/[template].tx
 - No template: `Focus on security patterns, include dependency analysis`
 - File patterns: `@{src/**/*.ts,CLAUDE.md} - Stay within scope`
 
-## 📊 Tool Selection Matrix
+### File Pattern Reference
+- All files: `@{**/*}`
+- Source files: `@{src/**/*}`
+- TypeScript: `@{*.ts,*.tsx}`
+- With docs: `@{CLAUDE.md,**/*CLAUDE.md}`
+- Tests: `@{src/**/*.test.*}`
+
+**Complex Pattern Discovery**:
+For complex file pattern requirements, use semantic discovery tools BEFORE CLI execution:
+- **rg (ripgrep)**: Content-based file discovery with regex patterns
+- **Code Index MCP**: Semantic file search based on task requirements
+- **Workflow**: Discover → Extract precise paths → Build CONTEXT field
+
+**Example**:
+```bash
+# Step 1: Discover files semantically
+rg "export.*Component" --files-with-matches --type ts  # Find component files
+mcp__code-index__search_code_advanced(pattern="interface.*Props", file_pattern="*.tsx")  # Find interface files
+
+# Step 2: Build precise CONTEXT from discovery results
+CONTEXT: @{src/components/Auth.tsx,src/types/auth.d.ts,src/hooks/useAuth.ts}
+
+# Step 3: Execute CLI with precise file references
+cd src && ~/.claude/scripts/gemini-wrapper -p "
+PURPOSE: Analyze authentication components
+TASK: Review auth component patterns and props interfaces
+MODE: analysis
+CONTEXT: @{components/Auth.tsx,types/auth.d.ts,hooks/useAuth.ts}
+EXPECTED: Pattern analysis and improvement suggestions
+RULES: Focus on type safety and component composition
+"
+```
+
+---
+
+## 📊 Tool Selection Guide
+
+### Selection Matrix
 
 | Task Type | Tool | Use Case | Template |
 |-----------|------|----------|-----------|
@@ -138,11 +265,11 @@ RULES: $(cat "~/.claude/workflows/cli-templates/prompts/[category]/[template].tx
 | **Security** | Codex | Vulnerability assessment, fixes | `analysis/security.txt` |
 | **Refactoring** | Multiple | Gemini for analysis, Qwen/Codex for execution | `development/refactor.txt` |
 
-## 📁 Template System
+### Template System
 
 **Base Structure**: `~/.claude/workflows/cli-templates/`
 
-### Available Templates
+#### Available Templates
 ```
 prompts/
 ├── analysis/
@@ -168,6 +295,8 @@ tech-stacks/
 └── react-dev.md         - React architecture
 ```
 
+---
+
 ## 🚀 Usage Patterns
 
 ### Workflow Integration (REQUIRED)
@@ -179,8 +308,9 @@ When planning any coding task, **ALWAYS** integrate CLI tools:
 4. **Quality Phase**: Use Codex for testing and validation
 
 ### Common Scenarios
+
+#### Code Analysis
 ```bash
-# Gemini - Code Analysis
 ~/.claude/scripts/gemini-wrapper -p "
 PURPOSE: Understand codebase architecture
 TASK: Analyze project structure and identify patterns
@@ -189,8 +319,10 @@ CONTEXT: @{src/**/*.ts,CLAUDE.md} Previous analysis of auth system
 EXPECTED: Architecture overview and integration points
 RULES: $(cat '~/.claude/workflows/cli-templates/prompts/analysis/architecture.txt') | Focus on integration points
 "
+```
 
-# Gemini - Generate Documentation
+#### Documentation Generation
+```bash
 ~/.claude/scripts/gemini-wrapper -p "
 PURPOSE: Generate API documentation
 TASK: Create comprehensive API reference from code
@@ -199,8 +331,10 @@ CONTEXT: @{src/api/**/*}
 EXPECTED: API.md with all endpoints documented
 RULES: Follow project documentation standards
 "
+```
 
-# Qwen - Architecture Analysis
+#### Architecture Analysis
+```bash
 cd src/auth && ~/.claude/scripts/qwen-wrapper -p "
 PURPOSE: Analyze authentication system architecture
 TASK: Review JWT-based auth system design
@@ -209,8 +343,11 @@ CONTEXT: @{src/auth/**/*} Existing patterns and requirements
 EXPECTED: Architecture analysis report with recommendations
 RULES: $(cat '~/.claude/workflows/cli-templates/prompts/analysis/architecture.txt') | Focus on security
 "
+```
 
-# Codex - Feature Development
+#### Feature Development (Multi-task with Resume)
+```bash
+# First task - establish session
 codex -C path/to/project --full-auto exec "
 PURPOSE: Implement user authentication
 TASK: Create JWT-based authentication system
@@ -220,74 +357,46 @@ EXPECTED: Complete auth module with tests
 RULES: $(cat '~/.claude/workflows/cli-templates/prompts/development/feature.txt') | Follow security best practices
 " --skip-git-repo-check -s danger-full-access
 
-# Codex - Test Generation
+# Continue in same session - Add JWT validation
-codex -C src/auth --full-auto exec "
+codex --full-auto exec "
+PURPOSE: Enhance authentication security
+TASK: Add JWT token validation and refresh logic
+MODE: auto
+CONTEXT: Previous auth implementation from current session
+EXPECTED: JWT validation middleware and token refresh endpoints
+RULES: Follow JWT best practices, maintain session context
+" resume --last --skip-git-repo-check -s danger-full-access
+
+# Continue in same session - Add tests
+codex --full-auto exec "
 PURPOSE: Increase test coverage
 TASK: Generate comprehensive tests for auth module
 MODE: write
-CONTEXT: @{**/*.ts} Exclude existing tests
+CONTEXT: Auth implementation from current session
 EXPECTED: Complete test suite with 80%+ coverage
 RULES: Use Jest, follow existing patterns
-" --skip-git-repo-check -s danger-full-access
+" resume --last --skip-git-repo-check -s danger-full-access
 ```
 
-## 📋 Planning Checklist
+#### Interactive Session Resume
+```bash
+# Resume previous session with picker
+codex resume
 
-For every development task:
+# Or resume most recent session directly
-- [ ] **Purpose defined** - Clear goal and intent
+codex resume --last
-- [ ] **Mode selected** - Execution mode and permission level determined
+```
-- [ ] **Context gathered** - File references and session memory documented
-- [ ] **Gemini analysis** completed for understanding
-- [ ] **Template selected** - Appropriate template chosen
-- [ ] **Constraints specified** - File patterns, scope, requirements
-- [ ] **Implementation approach** - Tool selection and workflow
-- [ ] **Quality measures** - Testing and validation plan
-- [ ] **Tool configuration** - Review `.gemini/CLAUDE.md` or `.codex/Agent.md` if needed
 
-## 🎯 Key Features
+---
-
-### Gemini
-- **Command**: `~/.claude/scripts/gemini-wrapper`
-- **Strengths**: Large context window, pattern recognition
-- **Best For**: Analysis, documentation generation, code exploration
-- **Permissions**: Default read-only analysis, MODE=write requires explicit specification (auto-enables --approval-mode yolo)
-- **Default MODE**: `analysis` (read-only)
-- **⚠️ Write Trigger**: Only when user explicitly requests "generate documentation", "modify code", or specifies MODE=write
-
-### Qwen
-- **Command**: `~/.claude/scripts/qwen-wrapper`
-- **Strengths**: Architecture analysis, pattern recognition
-- **Best For**: System design analysis, architectural review
-- **Permissions**: Architecture analysis only, no automatic code generation
-- **Default MODE**: `analysis` (read-only)
-- **⚠️ Write Trigger**: Explicitly prohibited from auto-calling write mode
-
-### Codex
-- **Command**: `codex --full-auto exec`
-- **Strengths**: Autonomous development, mathematical reasoning
-- **Best For**: Implementation, testing, automation
-- **Permissions**: Requires explicit MODE=auto or MODE=write specification
-- **Default MODE**: No default, must be explicitly specified
-- **⚠️ Write Trigger**: Only when user explicitly requests "implement", "modify", "generate code" AND specifies MODE
-- **Session Management**:
-  - `codex resume` - Resume previous interactive session (picker by default)
-  - `codex exec "task" resume --last` - Continue most recent session with new task (maintains context)
-  - `codex -i <image_file>` - Attach image(s) to initial prompt (useful for UI/design references)
-  - **Multi-task Pattern**: First task uses `exec`, subsequent tasks use `exec "..." resume --last` for context continuity
-
-### File Patterns
-- All files: `@{**/*}`
-- Source files: `@{src/**/*}`
-- TypeScript: `@{*.ts,*.tsx}`
-- With docs: `@{CLAUDE.md,**/*CLAUDE.md}`
-- Tests: `@{src/**/*.test.*}`
 
 ## 🔧 Best Practices
 
+### General Guidelines
 - **Start with templates** - Use predefined templates for consistency
 - **Be specific** - Clear PURPOSE, TASK, and EXPECTED fields
 - **Include constraints** - File patterns, scope, requirements in RULES
-- **Test patterns first** - Validate file patterns with `ls`
+- **Discover patterns first** - Use rg/MCP for complex file discovery before CLI execution
+- **Build precise CONTEXT** - Convert discovery results to explicit file references
 - **Document context** - Always reference CLAUDE.md for context
 
 ### Context Optimization Strategy
@@ -330,3 +439,41 @@ EXPECTED: Code improvements and fixes
 RULES: Maintain backward compatibility
 " --skip-git-repo-check -s danger-full-access
 ```
+
+### Planning Checklist
+
+For every development task:
+- [ ] **Purpose defined** - Clear goal and intent
+- [ ] **Mode selected** - Execution mode and permission level determined
+- [ ] **Context gathered** - File references and session memory documented
+- [ ] **Gemini analysis** completed for understanding
+- [ ] **Template selected** - Appropriate template chosen
+- [ ] **Constraints specified** - File patterns, scope, requirements
+- [ ] **Implementation approach** - Tool selection and workflow
+- [ ] **Quality measures** - Testing and validation plan
+- [ ] **Tool configuration** - Review `.gemini/CLAUDE.md` or `.codex/Agent.md` if needed
+
+---
+
+## ⚙️ Execution Configuration
+
+### Core Execution Rules
+- **Dynamic Timeout (20-120min)**: Allocate execution time based on task complexity
+  - Simple tasks (analysis, search): 20-40min (1200000-2400000ms)
+  - Medium tasks (refactoring, documentation): 40-60min (2400000-3600000ms)
+  - Complex tasks (implementation, migration): 60-120min (3600000-7200000ms)
+- **Codex Multiplier**: Codex commands use 1.5x of allocated time
+- **Apply to All Tools**: All bash() wrapped commands including Gemini, Qwen wrapper and Codex executions
+- **Command Examples**: `bash(~/.claude/scripts/gemini-wrapper -p "prompt")`, `bash(codex -C directory --full-auto exec "task")`
+- **Auto-detect**: Analyze PURPOSE and TASK fields to determine appropriate timeout
+
+### Permission Framework
+- **⚠️ WRITE PROTECTION**: Local codebase write/modify requires EXPLICIT user confirmation
+  - **Analysis Mode (default)**: Read-only, safe for auto-execution
+  - **Write Mode**: Requires user explicitly states MODE=write or MODE=auto in prompt
+  - **Exception**: User provides clear instructions like "modify", "create", "implement"
+- **Gemini/Qwen Write Access**: Use `--approval-mode yolo` ONLY when MODE=write explicitly specified
+  - **Parameter Position**: Place AFTER the wrapper command: `gemini-wrapper --approval-mode yolo -p "..."`
+- **Codex Write Access**: Use `-s danger-full-access` and `--skip-git-repo-check` ONLY when MODE=auto explicitly specified
+  - **Parameter Position**: Place AFTER the prompt string at command END: `codex ... exec "..." --skip-git-repo-check -s danger-full-access`
+- **Default Behavior**: All tools default to analysis/read-only mode without explicit write permission

.claude/workflows/workflow-architecture.md

@@ -266,20 +266,42 @@ All workflows use the same file structure definition regardless of complexity. *
 
 #### Complete Structure Reference
 ```
-.workflow/WFS-[topic-slug]/
+.workflow/
-├── workflow-session.json        # Session metadata and state (REQUIRED)
+├── [.scratchpad/]              # Non-session-specific outputs (created when needed)
-├── [.brainstorming/]           # Optional brainstorming phase (created when needed)
+│   ├── analyze-*-[timestamp].md        # One-off analysis results
-├── [.chat/]                    # CLI interaction sessions (created when analysis is run)
+│   ├── chat-*-[timestamp].md           # Standalone chat sessions
-│   ├── chat-*.md              # Saved chat sessions
+│   ├── plan-*-[timestamp].md           # Ad-hoc planning notes
-│   └── analysis-*.md          # Analysis results
+│   ├── bug-index-*-[timestamp].md      # Quick bug analyses
-├── [.process/]                 # Planning analysis results (created by /workflow:plan)
+│   ├── code-analysis-*-[timestamp].md  # Standalone code analysis
-│   └── ANALYSIS_RESULTS.md    # Analysis results and planning artifacts
+│   ├── execute-*-[timestamp].md        # Ad-hoc implementation logs
-├── IMPL_PLAN.md                # Planning document (REQUIRED)
+│   └── codex-execute-*-[timestamp].md  # Multi-stage execution logs
-├── TODO_LIST.md                # Progress tracking (REQUIRED)
+│
-├── [.summaries/]               # Task completion summaries (created when tasks complete)
+├── [.design/]                  # Standalone UI design outputs (created when needed)
-│   ├── IMPL-*-summary.md      # Main task summaries
+│   └── run-[timestamp]/        # Timestamped design runs without session
-│   └── IMPL-*.*-summary.md    # Subtask summaries
+│       ├── style-extraction/   # Style analysis results
-└── .task/                      # Task definitions (REQUIRED)
+│       ├── style-consolidation/ # Design system tokens
+│       ├── prototypes/         # Generated HTML/CSS prototypes
+│       └── .run-metadata.json  # Run configuration
+│
+└── WFS-[topic-slug]/
+    ├── workflow-session.json        # Session metadata and state (REQUIRED)
+    ├── [.brainstorming/]           # Optional brainstorming phase (created when needed)
+    ├── [.chat/]                    # CLI interaction sessions (created when analysis is run)
+    │   ├── chat-*.md              # Saved chat sessions
+    │   └── analysis-*.md          # Analysis results
+    ├── [.process/]                 # Planning analysis results (created by /workflow:plan)
+    │   └── ANALYSIS_RESULTS.md    # Analysis results and planning artifacts
+    ├── IMPL_PLAN.md                # Planning document (REQUIRED)
+    ├── TODO_LIST.md                # Progress tracking (REQUIRED)
+    ├── [.summaries/]               # Task completion summaries (created when tasks complete)
+    │   ├── IMPL-*-summary.md      # Main task summaries
+    │   └── IMPL-*.*-summary.md    # Subtask summaries
+    ├── [design-*/]                 # UI design outputs (created by ui-design workflows)
+    │   ├── style-extraction/       # Style analysis results
+    │   ├── style-consolidation/    # Design system tokens
+    │   ├── prototypes/             # Generated HTML/CSS prototypes
+    │   └── .run-metadata.json      # Run configuration
+    └── .task/                      # Task definitions (REQUIRED)
         ├── IMPL-*.json             # Main task definitions
         └── IMPL-*.*.json           # Subtask definitions (created dynamically)
 ```
@@ -288,6 +310,42 @@ All workflows use the same file structure definition regardless of complexity. *
 - **Initial Setup**: Create only `workflow-session.json`, `IMPL_PLAN.md`, `TODO_LIST.md`, and `.task/` directory
 - **On-Demand Creation**: Other directories created when first needed
 - **Dynamic Files**: Subtask JSON files created during task decomposition
+- **Scratchpad Usage**: `.scratchpad/` created when CLI commands run without active session
+- **Design Usage**: `design-{timestamp}/` created by UI design workflows, `.design/` for standalone design runs
+
+#### Scratchpad Directory (.scratchpad/)
+**Purpose**: Centralized location for non-session-specific CLI outputs
+
+**When to Use**:
+1. **No Active Session**: CLI analysis/chat commands run without an active workflow session
+2. **Unrelated Analysis**: Quick analysis not related to current active session
+3. **Exploratory Work**: Ad-hoc investigation before creating formal workflow
+4. **One-Off Queries**: Standalone questions or debugging without workflow context
+
+**Output Routing Logic**:
+- **IF** active session exists AND command is session-relevant:
+  - Save to `.workflow/WFS-[id]/.chat/[command]-[timestamp].md`
+- **ELSE** (no session OR one-off analysis):
+  - Save to `.workflow/.scratchpad/[command]-[description]-[timestamp].md`
+
+**File Naming Pattern**: `[command-type]-[brief-description]-[timestamp].md`
+
+**Examples**:
+
+*Analysis Commands (read-only):*
+- `/cli:analyze "security"` (no session) → `.scratchpad/analyze-security-20250105-143022.md`
+- `/cli:chat "build process"` (unrelated to active session) → `.scratchpad/chat-build-process-20250105-143045.md`
+- `/cli:mode:plan "feature idea"` (exploratory) → `.scratchpad/plan-feature-idea-20250105-143110.md`
+- `/cli:mode:code-analysis "trace auth flow"` (no session) → `.scratchpad/code-analysis-auth-flow-20250105-143130.md`
+
+*Implementation Commands (⚠️ modifies code):*
+- `/cli:execute "implement JWT auth"` (no session) → `.scratchpad/execute-jwt-auth-20250105-143200.md`
+- `/cli:codex-execute "refactor API layer"` (no session) → `.scratchpad/codex-execute-api-refactor-20250105-143230.md`
+
+**Maintenance**:
+- Periodically review and clean up old scratchpad files
+- Promote useful analyses to formal workflow sessions if needed
+- No automatic cleanup - manual management recommended
 
 ### File Naming Conventions
 

.codex/AGENTS.md

@@ -46,6 +46,30 @@ RULES: Build on previous subtask, maintain consistency
 
 ## Execution Requirements
 
+### System Optimization
+
+**Hard Requirement**: Call binaries directly in `functions.shell`, always set `workdir`, and avoid shell wrappers such as `bash -lc`, `sh -lc`, `zsh -lc`, `cmd /c`, `pwsh.exe -NoLogo -NoProfile -Command`, and `powershell.exe -NoLogo -NoProfile -Command`.
+
+**Text Editing Priority**: Use the `apply_patch` tool for all routine text edits; fall back to `sed` for single-line substitutions only if `apply_patch` is unavailable, and avoid `python` editing scripts unless both options fail.
+
+**`apply_patch` Usage**: Invoke `apply_patch` with the patch payload as the second element in the command array (no shell-style flags). Provide `workdir` and, when helpful, a short `justification` alongside the command.
+
+**Example invocation**:
+```json
+{
+  "command": ["apply_patch", "*** Begin Patch\n*** Update File: path/to/file\n@@\n- old\n+ new\n*** End Patch\n"],
+  "workdir": "<workdir>",
+  "justification": "Brief reason for the change"
+}
+```
+
+**Windows UTF-8 Encoding**: Before executing commands on Windows systems, ensure proper UTF-8 encoding by running:
+```powershell
+[Console]::InputEncoding  = [Text.UTF8Encoding]::new($false)
+[Console]::OutputEncoding = [Text.UTF8Encoding]::new($false)
+chcp 65001 > $null
+```
+
 ### ALWAYS
 
 - **Parse all fields** - Understand PURPOSE, TASK, MODE, CONTEXT, EXPECTED, RULES
@@ -58,6 +82,9 @@ RULES: Build on previous subtask, maintain consistency
 - **Match project style** - Follow existing patterns exactly
 - **Validate EXPECTED** - Ensure all deliverables are met
 - **Report context** (subtasks) - Summarize key info for next subtask
+- **Use direct binary calls** - Avoid shell wrappers for efficiency
+- **Prefer apply_patch** - Use for text edits over Python scripts
+- **Configure Windows encoding** - Set UTF-8 for Chinese character support
 
 ### NEVER
 
@@ -335,6 +362,10 @@ Subtask 3: Add authentication (resume --last)
 
 ---
 
-**Version**: 2.1.0
+**Version**: 2.2.0
 **Last Updated**: 2025-10-04
-**Changes**: Added multi-step task execution support with resume mechanism
+**Changes**:
+- Added system optimization requirements for direct binary calls
+- Added apply_patch tool priority for text editing
+- Added Windows UTF-8 encoding configuration for Chinese character support
+- Previous: Multi-step task execution support with resume mechanism

.github/release-notes-v3.5.0.md

@@ -0,0 +1,235 @@
+# 🎨 UI Design Workflow with Triple Vision Analysis & Interactive Preview
+
+This release introduces a comprehensive UI design workflow system with triple vision analysis capabilities, interactive user checkpoints, zero agent overhead, and enhanced preview tools for real-time prototype comparison.
+
+## 🌟 Major Features
+
+### UI Design Workflow System
+- **`/workflow:design:auto`**: Semi-autonomous workflow orchestrator with interactive checkpoints
+- **`/workflow:design:style-extract`**: Triple vision analysis (Claude Code + Gemini + Codex)
+- **`/workflow:design:style-consolidate`**: Token validation and style guide generation
+- **`/workflow:design:ui-generate`**: Token-driven HTML/CSS prototype generation with preview tools
+- **`/workflow:design:design-update`**: Design system integration into brainstorming artifacts
+
+### 👁️ Triple Vision Analysis
+- **Claude Code**: Quick initial visual analysis using native Read tool
+- **Gemini Vision**: Deep semantic understanding of design intent
+- **Codex Vision**: Structured pattern recognition with -i parameter
+- **Consensus Synthesis**: Weighted combination strategy for robust results
+
+### ⏸️ Interactive Checkpoints
+- **Checkpoint 1**: User selects preferred style variants after extraction
+- **Checkpoint 2**: User confirms selected prototypes before design update
+- Pause-and-continue pattern for critical design decisions
+
+### 🌐 Preview Enhancement System (NEW!)
+- **`index.html`**: Master preview navigation with grid layout
+- **`compare.html`**: Side-by-side comparison with responsive viewport toggles
+- **`PREVIEW.md`**: Comprehensive preview instructions and server setup guide
+- Synchronized scrolling for layout comparison
+- Dynamic page switching and real-time responsive testing
+
+### 🎯 Zero Agent Overhead
+- Removed Task(conceptual-planning-agent) wrappers from design commands
+- Direct bash execution for gemini-wrapper and codex commands
+- Improved performance while preserving all functionality
+
+## 🚀 Quick Start
+
+### Complete Design Workflow
+```bash
+# Semi-autonomous workflow with user checkpoints
+/workflow:design:auto --session WFS-auth --images "design-refs/*.png" --pages "login,register" --batch-plan
+```
+
+### Individual Commands
+```bash
+# Extract design styles (triple vision analysis)
+/workflow:design:style-extract --session WFS-auth --images "refs/*.png"
+
+# Consolidate selected variants
+/workflow:design:style-consolidate --session WFS-auth --variants "variant-1,variant-3"
+
+# Generate prototypes with preview tools
+/workflow:design:ui-generate --session WFS-auth --pages "login,register" --variants 2
+
+# Preview generated prototypes
+cd .workflow/WFS-auth/.design/prototypes
+python -m http.server 8080  # Visit http://localhost:8080
+
+# Integrate design system
+/workflow:design:design-update --session WFS-auth --selected-prototypes "login-variant-1,register-variant-2"
+```
+
+## 🎨 Design System Features
+- **OKLCH Color Format**: Perceptually uniform color space
+- **W3C Design Tokens**: Standard-compliant token format
+- **WCAG 2.1 AA Compliance**: Automated accessibility validation
+- **Style Override Support**: Runtime token customization with --style-overrides
+- **Batch Task Generation**: Automatic task creation with --batch-plan
+
+## 📊 Preview Tools
+
+### Master Navigation (index.html)
+- Grid layout of all generated prototypes
+- Quick links to individual variants
+- Metadata display (session ID, timestamps, page info)
+- Direct access to implementation notes
+
+### Side-by-Side Comparison (compare.html)
+- Iframe-based comparison for multiple variants
+- Responsive viewport toggles:
+  - Desktop (100%)
+  - Tablet (768px)
+  - Mobile (375px)
+- Synchronized scrolling option
+- Dynamic page switching dropdown
+- Real-time variant comparison
+
+### Preview Options
+```bash
+# Option 1: Direct browser (simplest)
+cd .workflow/WFS-{session}/.design/prototypes
+open index.html  # or double-click
+
+# Option 2: Local server (recommended)
+python -m http.server 8080      # Python
+npx http-server -p 8080         # Node.js
+php -S localhost:8080           # PHP
+# Visit: http://localhost:8080
+```
+
+## 📦 What's Included
+
+### New Commands (5)
+- `/workflow:design:auto`
+- `/workflow:design:style-extract`
+- `/workflow:design:style-consolidate`
+- `/workflow:design:ui-generate`
+- `/workflow:design:design-update`
+
+### Generated Files
+```
+.workflow/WFS-{session}/.design/
+├── style-extraction/
+│   ├── claude_vision_analysis.json
+│   ├── gemini_vision_analysis.json
+│   ├── codex_vision_analysis.json
+│   ├── semantic_style_analysis.json
+│   ├── design-tokens.json
+│   └── style-cards.json
+├── style-consolidation/
+│   ├── design-tokens.json (validated)
+│   ├── style-guide.md
+│   ├── tailwind.config.js
+│   └── validation-report.json
+└── prototypes/
+    ├── index.html (NEW - preview navigation)
+    ├── compare.html (NEW - side-by-side comparison)
+    ├── PREVIEW.md (NEW - setup instructions)
+    ├── {page}-variant-{n}.html
+    ├── {page}-variant-{n}.css
+    └── design-tokens.css
+```
+
+## 🔄 Workflow Integration
+
+Design phase fits seamlessly between brainstorming and planning:
+
+```
+Brainstorming → UI Design → Planning → Execution
+     ↓              ↓           ↓          ↓
+synthesis-   design-tokens  tasks with  token-driven
+specification   + style     design       implementation
+                 guide      context
+```
+
+**Optional but recommended** for UI-heavy projects:
+- User-facing applications
+- Design system creation
+- Brand-critical interfaces
+- Accessibility compliance projects
+
+## 💡 Benefits
+
+### User Experience
+- 🎨 Visual validation before implementation
+- ⏸️ Interactive control at critical decision points
+- 👁️ Comprehensive analysis from three AI vision sources
+- 🌐 Real-time preview with comparison tools
+- 🎯 Zero waiting with direct bash execution
+
+### Code Quality
+- 🔒 100% CSS values use custom properties
+- ♿ WCAG AA validated at design phase
+- 🎨 Single source of truth for visual design
+- 🧪 Production-ready prototypes (semantic HTML5, responsive, accessible)
+
+### Development Workflow
+- 🔄 Seamless integration with existing workflow
+- 🚀 Backward compatible (design phase optional)
+- 📊 Better planning with design system context
+- 🎯 Focused implementation from validated prototypes
+
+## 📚 Documentation
+
+- **README.md**: Updated with UI Design Workflow section
+- **README_CN.md**: Chinese documentation for design workflow
+- **CHANGELOG.md**: Comprehensive release notes with examples
+- **Command Files**: Detailed implementation guides for all 5 commands
+
+## 🔧 Technical Details
+
+**Triple Vision Analysis Flow**:
+```
+Reference Images
+  ↓
+Claude Code (Read tool) → claude_vision_analysis.json
+Gemini Vision (wrapper) → gemini_vision_analysis.json
+Codex Vision (codex -i) → codex_vision_analysis.json
+  ↓
+Main Claude Synthesis → semantic_style_analysis.json
+  ↓
+Codex Token Generation → design-tokens.json, style-cards.json
+```
+
+**Checkpoint Workflow Pattern**:
+```
+User: /workflow:design:auto --session WFS-xxx --images "refs/*.png" --pages "dashboard"
+  ↓
+Phase 1: style-extract (automatic)
+  ↓ [CHECKPOINT 1: User selects variants]
+User: /workflow:design:style-consolidate --session WFS-xxx --variants "variant-1"
+  ↓
+Phase 3: ui-generate (automatic)
+  ↓ [CHECKPOINT 2: User confirms prototypes]
+User: /workflow:design:design-update --session WFS-xxx --selected-prototypes "dashboard-variant-1"
+  ↓
+Phase 5: batch-plan (optional, if --batch-plan flag)
+```
+
+## 🆙 Upgrade Instructions
+
+```bash
+# Windows (PowerShell)
+Invoke-Expression (Invoke-WebRequest -Uri "https://raw.githubusercontent.com/catlog22/Claude-Code-Workflow/main/install-remote.ps1" -UseBasicParsing).Content
+
+# Linux/macOS (Bash/Zsh)
+bash <(curl -fsSL https://raw.githubusercontent.com/catlog22/Claude-Code-Workflow/main/install-remote.sh)
+```
+
+## 🐛 Bug Fixes & Improvements
+- Optimized agent architecture by removing unnecessary wrappers
+- Improved execution performance with direct bash commands
+- Enhanced documentation consistency across English and Chinese versions
+- Updated phase numbering to accommodate new design phase
+
+## 📝 Full Changelog
+See [CHANGELOG.md](https://github.com/catlog22/Claude-Code-Workflow/blob/main/CHANGELOG.md) for complete details.
+
+---
+
+**Questions or Issues?**
+- 📖 [Documentation](https://github.com/catlog22/Claude-Code-Workflow)
+- 🐛 [Report Issues](https://github.com/catlog22/Claude-Code-Workflow/issues)
+- 💬 [Discussions](https://github.com/catlog22/Claude-Code-Workflow/discussions)

.gitignore

@@ -19,3 +19,5 @@ Thumbs.db
 .env
 settings.local.json
 .workflow
+version.json
+ref

CHANGELOG.md

@@ -5,6 +5,847 @@ All notable changes to Claude Code Workflow (CCW) will be documented in this fil
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.2.1] - 2025-10-09
+
+### 📝 Documentation Refactoring: UI Design Workflow Commands
+
+This release refactors UI design workflow documentation for improved clarity and maintainability, with significant size reductions while preserving all functionality.
+
+#### Changed
+
+**explore-auto.md** (formerly `auto.md`):
+- **File Reorganization**: Reduced from 540 to 435 lines (19.4% reduction)
+- **Merged Duplicate Content**: Consolidated Overview, Coordinator Role, and Execution Model into single "Overview & Execution Model" section
+- **Simplified Core Rules**: From verbose descriptions to 5 concise rules
+- **Streamlined TodoWrite Pattern**: From detailed steps to concise mode with comments
+- **Preserved Functionality**: All 6-phase execution logic, intelligent parsing, interactive confirmation, and matrix mode intact
+
+**imitate-auto.md** (NEW command):
+- **File Reorganization**: Reduced from 566 to 475 lines (16.1% reduction)
+- **Merged Sections**: Combined Overview, Core Philosophy, Execution Model, and Workflow Position into unified structure
+- **Simplified Phase 0.5**: Screenshot capture logic complete but reduced redundant error handling
+- **Consolidated Performance**: Merged "Key Differences" and "Performance Benefits" into single comparison table
+- **Preserved Functionality**: All 5-phase execution, auto-screenshot mechanism, direct token extraction, and error handling intact
+
+#### Improved
+
+**Documentation Quality**:
+- 📚 Clearer structure with merged duplicate concepts
+- 🎯 Reduced redundancy across command documentation
+- ✨ Consistent formatting and organization patterns
+- 📖 Improved maintainability with better content separation
+- 🔍 All key functionality points preserved and highlighted
+
+**Total Impact**:
+- **explore-auto.md**: 105 lines removed (19.4% reduction)
+- **imitate-auto.md**: 91 lines removed (16.1% reduction)
+- **Combined**: 196 lines of documentation optimized
+- **Zero functionality loss**: All features, workflows, and technical details preserved
+
+## [4.2.0] - 2025-10-09
+
+### 🎯 Multi-Page Support Enhancement
+
+Based on Gemini's analysis of the UI Design Workflow, this version implements four key optimizations to improve the multi-page design experience.
+
+#### Added
+
+- **Cross-Page Consistency Validation**: New `Phase 3.5` in `generate` command automatically validates design consistency (shared components, tokens, accessibility) across multiple pages
+- **Side-by-Side Prototype Comparison**: `compare.html` preview tool now includes "Side-by-Side" tab to compare any two prototypes with intelligent consistency hints
+- **Batch Prototype Selection**: `compare.html` features "By Style" and "By Layout" buttons for quick bulk prototype selection
+
+#### Changed
+
+- **Enhanced Page Inference**: `auto` command's page detection uses multiple regex patterns with interactive user confirmation
+- **Improved Export**: Selection export from `compare.html` is now more structured with detailed metadata
+
+## [4.1.1] - 2025-10-09
+
+### 🔧 Symlink Fix & Agent Optimization
+
+#### Fixed
+
+- **Windows Symbolic Link Creation**: Corrected `auto.md` workflow to use `mklink /D` on Windows, preventing duplicate directories instead of symlinks
+
+#### Changed
+
+- **Agent Allocation Strategy**: `generate.md` now allocates tasks by layout (layout-based) instead of style, improving performance and consistency for high variant counts by having one agent handle one layout strategy across multiple styles
+
+## [4.1.0] - 2025-10-09
+
+### 🔄 Matrix-Only UI Design Workflow
+
+#### Changed
+
+- **Matrix Mode by Default**: UI Design workflow now exclusively uses `style × layout` matrix mode with `--style-variants` and `--layout-variants` as standard parameters
+- **Path Standardization**: Standalone design sessions saved to `.workflow/.scratchpad/` adhering to project architecture
+- **Simplified Orchestration**: `auto.md` command simplified to use single `SlashCommand` for generation phase, removing complex loop logic
+
+#### Removed
+
+- **Deprecated Parameters**: Removed `--variants` and `--creative-variants` in favor of explicit `--style-variants` and `--layout-variants`
+- **Standard/Creative Modes**: Distinction between these modes removed
+
+---
+
+## [4.0.2] - 2025-10-09
+
+### 🔄 UI Design Workflow - Complete Refactoring
+
+**BREAKING CHANGES**: Complete refactoring to pure Claude-native execution, removing all external tool dependencies.
+
+#### Breaking Changes
+
+**Command Path Migration**:
+```bash
+# ❌ Old (v4.0.1 and earlier)
+/workflow:design:style-extract
+/workflow:design:style-consolidate
+/workflow:design:ui-generate
+/workflow:design:design-update
+/workflow:design:auto
+
+# ✅ New (v4.0.2)
+/workflow:ui-design:extract
+/workflow:ui-design:consolidate
+/workflow:ui-design:generate
+/workflow:ui-design:update
+/workflow:ui-design:auto
+```
+
+**Parameter Removal**:
+- **`--tool` parameter removed**: All commands now use Claude-native execution exclusively
+- No more `--tool gemini` or `--tool codex` options
+- Simplified command syntax
+
+**Execution Model Changes**:
+```bash
+# ❌ Old: External CLI tools required
+# Required: gemini-wrapper, codex, qwen-wrapper
+/workflow:design:style-extract --tool gemini --images "refs/*.png"
+/workflow:design:style-consolidate --tool gemini --variants "variant-1,variant-2"
+/workflow:design:ui-generate --tool codex --pages "dashboard,auth"
+
+# ✅ New: Pure Claude + agents
+/workflow:ui-design:extract --images "refs/*.png" --variants 3
+/workflow:ui-design:consolidate --variants "variant-1,variant-2"
+/workflow:ui-design:generate --pages "dashboard,auth" --variants 2
+```
+
+#### Removed
+
+**External Tool Dependencies**:
+- `gemini-wrapper` calls removed from style-extract and style-consolidate
+- `codex` calls removed from style-consolidate and ui-generate
+- `qwen-wrapper` calls removed entirely
+- All `bash()` wrapped CLI tool invocations eliminated
+
+**Intermediate Output Files**:
+- `semantic_style_analysis.json` (replaced by embedded data in style-cards.json)
+- `initial_analysis.json` (analysis now done in single pass)
+- `style-philosophy.md` (integrated into style-guide.md)
+- Reduced from 7+ files to 4 essential files per phase
+
+**Execution Modes**:
+- "conventional" mode removed from ui-generate (codex dependency)
+- "cli" mode removed from style-consolidate (external tool dependency)
+- Unified to agent-only execution
+
+#### Changed
+
+**style-extract (`/workflow:ui-design:extract`)**:
+- **Before**: Multi-step with gemini-wrapper + codex
+  - Step 1: Claude analysis → initial_analysis.json
+  - Step 2: gemini-wrapper → semantic_style_analysis.json
+  - Step 3: codex → design-tokens.json + tailwind-tokens.js
+  - Output: 4 files
+- **After**: Single-pass Claude analysis
+  - Step 1: Claude analysis → style-cards.json (with embedded proposed_tokens)
+  - Output: 1 file
+- **New structure**: `style-cards.json` includes complete `proposed_tokens` object per variant
+- **Reproducibility**: 100% deterministic with Claude-only execution
+
+**style-consolidate (`/workflow:ui-design:consolidate`)**:
+- **Before**: Dual-tool approach
+  - Step 1: gemini-wrapper → style-philosophy.md
+  - Step 2: codex → design-tokens.json + validation
+  - Mode detection: cli vs agent
+- **After**: Single-pass Claude synthesis
+  - Step 1: Claude reads `proposed_tokens` from style-cards.json
+  - Step 2: Claude generates all 4 files in one prompt
+  - Output: design-tokens.json, style-guide.md, tailwind.config.js, validation-report.json
+- **Removed**: `--tool` parameter and mode detection logic
+
+**ui-generate (`/workflow:ui-design:generate`)**:
+- **Before**: Three execution modes
+  - conventional: codex CLI calls
+  - agent: Task(conceptual-planning-agent)
+  - Mode detection based on `--tool` flag
+- **After**: Unified agent-only execution
+  - standard: Single Task(conceptual-planning-agent) for consistent variants
+  - creative: Parallel Task(conceptual-planning-agent) for diverse layouts
+  - Only `--variants` or `--creative-variants` determines mode
+- **Removed**: `--tool` parameter, conventional mode
+
+**design-update (`/workflow:ui-design:update`)**:
+- **Before**: References `style-philosophy.md`
+- **After**: Extracts philosophy from `style-guide.md`
+- **Changed**: Adapted to new 4-file output structure from consolidate phase
+
+**auto (`/workflow:ui-design:auto`)**:
+- **Before**: Passed `--tool` flags to sub-commands
+- **After**: No tool parameters, pure orchestration
+- **Simplified**: Command construction logic (no mode detection)
+- **Examples**: Updated all 3 example flows
+
+#### Added
+
+**Enhanced style-cards.json Structure**:
+```json
+{
+  "extraction_metadata": {
+    "session_id": "WFS-xxx",
+    "input_mode": "image|text|hybrid",
+    "timestamp": "ISO-8601",
+    "variants_count": 3
+  },
+  "style_cards": [
+    {
+      "id": "variant-1",
+      "name": "Modern Minimalist",
+      "description": "...",
+      "design_philosophy": "...",
+      "preview": { "primary": "oklch(...)", ... },
+      "proposed_tokens": {
+        "colors": { /* complete color system */ },
+        "typography": { /* complete typography system */ },
+        "spacing": { /* complete spacing scale */ },
+        "border_radius": { /* border radius scale */ },
+        "shadows": { /* shadow system */ },
+        "breakpoints": { /* responsive breakpoints */ }
+      }
+    }
+  ]
+}
+```
+
+**Unified Output Structure**:
+- `style-extraction/`: style-cards.json (1 file)
+- `style-consolidation/`: design-tokens.json, style-guide.md, tailwind.config.js, validation-report.json (4 files)
+- `prototypes/`: HTML/CSS files + index.html + compare.html + PREVIEW.md
+
+#### Improved
+
+**Performance**:
+- **Faster execution**: No external process spawning
+- **Reduced I/O**: Fewer intermediate files
+- **Parallel efficiency**: Native agent parallelization
+
+**Reliability**:
+- **Zero external dependencies**: No gemini-wrapper, codex, or qwen-wrapper required
+- **No API failures**: Eliminates external API call failure points
+- **Consistent output**: Deterministic JSON structure
+
+**Maintainability**:
+- **Simpler codebase**: 5 commands, unified patterns
+- **Clear data flow**: style-cards → design-tokens → prototypes
+- **Easier debugging**: All logic visible in command files
+
+**Reproducibility**:
+- **Deterministic structure**: Same inputs → same output structure
+- **Version-controlled logic**: All prompts in .md files
+- **No black-box tools**: Complete transparency
+
+#### Migration Guide
+
+**For Standalone Usage**:
+```bash
+# Old command format
+/workflow:design:auto --tool gemini --prompt "Modern blog" --variants 3
+
+# New command format (auto-migrated)
+/workflow:ui-design:auto --prompt "Modern blog" --variants 3
+```
+
+**For Integrated Workflow Sessions**:
+```bash
+# Old workflow
+/workflow:design:style-extract --session WFS-xxx --tool gemini --images "refs/*.png"
+/workflow:design:style-consolidate --session WFS-xxx --tool gemini --variants "variant-1,variant-2"
+/workflow:design:ui-generate --session WFS-xxx --tool codex --pages "dashboard,auth"
+/workflow:design:design-update --session WFS-xxx
+
+# New workflow (simplified)
+/workflow:ui-design:extract --session WFS-xxx --images "refs/*.png" --variants 2
+/workflow:ui-design:consolidate --session WFS-xxx --variants "variant-1,variant-2"
+/workflow:ui-design:generate --session WFS-xxx --pages "dashboard,auth" --variants 2
+/workflow:ui-design:update --session WFS-xxx
+```
+
+**Configuration Changes Required**: None - all external tool configurations can be removed
+
+#### Files Changed
+
+**Renamed/Relocated**:
+- `.claude/commands/workflow/design/` → `.claude/commands/workflow/ui-design/`
+- All command files updated with new paths
+
+**Modified Commands**:
+- `style-extract.md` → `extract.md` (complete rewrite)
+- `style-consolidate.md` → `consolidate.md` (complete rewrite)
+- `ui-generate.md` → `generate.md` (simplified)
+- `design-update.md` → `update.md` (adapted to new structure)
+- `auto.md` (updated orchestration)
+
+**Documentation**:
+- Updated all command examples
+- Updated parameter descriptions
+- Added Key Improvements sections
+- Clarified Integration Points
+
+## [4.0.1] - 2025-10-07
+
+### 🎯 Intelligent Page Inference
+
+**IMPROVEMENT**: `--pages` parameter is now **optional** with smart inference from prompt or session context.
+
+**Changes**:
+- `--pages` parameter: Now optional, intelligently inferred from:
+  1. Explicit `--pages` if provided
+  2. `--prompt` text analysis (e.g., "blog with home, article pages" → ["home", "article"])
+  3. `--session` synthesis-specification.md extraction
+  4. Default: ["home"]
+
+**New Examples**:
+```bash
+# Simplest - pages inferred from prompt
+/workflow:ui-design:auto --prompt "Modern blog with home, article and author pages"
+
+# Explicit override if needed
+/workflow:ui-design:auto --prompt "SaaS app" --pages "dashboard,settings,billing"
+```
+
+**Commands Updated**:
+- `/workflow:ui-design:auto`: All parameters now optional
+- `/workflow:ui-design:ui-generate`: `--pages` optional with smart inference
+
+## [4.0.0] - 2025-10-07
+
+### 🚀 UI Design Workflow V2 - Agent Mode & Flexible Inputs
+
+**BREAKING CHANGES**: Complete redesign of UI design workflow with mandatory new parameter structure. All old command formats are deprecated.
+
+This major release introduces agent-driven creative exploration, unified variant control, dual-mode support (standalone/integrated), and flexible input sources (images + text prompts).
+
+#### Breaking Changes
+
+**Required Migration**:
+- **Old format no longer supported**: Commands using old parameter structure will fail
+- **All parameters now optional**: Smart defaults and inference for all parameters
+- **`--session`**: Optional, omitting enables standalone mode
+- **`--images`**: Optional with default `design-refs/*`
+- **`--pages`**: Optional, inferred from prompt or session (as of v4.0.1)
+- **Removed `--style-overrides`**: Use `--prompt` instead
+
+**Migration Guide**:
+```bash
+# ❌ Old (v3.5.0 and earlier) - NO LONGER WORKS
+/workflow:ui-design:style-extract --session WFS-auth --images "design-refs/*.png"
+/workflow:ui-design:ui-generate --session WFS-auth --pages "login,register"
+
+# ✅ New (v4.0.1) - All parameters optional
+/workflow:ui-design:style-extract --images "design-refs/*.png" --variants 3
+/workflow:ui-design:ui-generate --variants 2
+
+# ✅ Simplest form (pages inferred from prompt)
+/workflow:ui-design:auto --prompt "Modern blog with home, article and author pages"
+
+# ✅ With agent mode and explicit pages
+/workflow:ui-design:auto --prompt "Modern SaaS" --pages "dashboard,settings" --variants 3 --use-agent
+```
+
+**Deprecated Commands**:
+- Old `style-extract` format without `--variants`
+- Old `ui-generate` format without `--use-agent` support
+- `--style-overrides` parameter (replaced by `--prompt`)
+
+#### Added
+
+**Unified Variant Control**:
+- **`--variants <count>`**: Single parameter controls both style cards AND UI prototypes generation
+  - Default: 3 | Range: 1-5
+  - Data flow: `auto.md` → `style-extract` → `ui-generate`
+  - Example: `--variants 3` generates 3 style cards and 3 UI variants per page
+
+**Agent Creative Exploration Mode** (`--use-agent`):
+- **style-extract**: Parallel generation of distinctly different design directions
+  - Conventional mode: Subtle variations within same core style
+  - Agent mode: Dramatically different aesthetics (e.g., "Modern Minimalist" vs "Brutalist Tech" vs "Organic Warmth")
+  - Uses `conceptual-planning-agent` for creative exploration
+- **ui-generate**: Diverse layout strategies exploration
+  - Conventional mode: Minor layout differences
+  - Agent mode: Structural variations (F-Pattern, Asymmetric Grid, Card-Based Modular)
+  - Parallel execution for efficiency
+
+**Dual Mode Support**:
+- **Integrated Mode** (with `--session`): Works within existing workflow session
+  - Location: `.workflow/WFS-{session}/`
+  - Reads from `.brainstorming/` artifacts
+  - Phase 4 (design-update) updates synthesis-specification.md
+- **Standalone Mode** (without `--session`): Independent quick prototyping
+  - Auto-creates: `design-session-YYYYMMDD-HHMMSS/`
+  - No dependency on brainstorming phase
+  - Phase 4 (design-update) is skipped
+  - Outputs final summary instead
+
+**Dual Input Source Support**:
+- **`--images`**: Reference image paths (optional, default: `design-refs/*`)
+- **`--prompt`**: Text description of design style (NEW)
+- **Hybrid Mode**: Both combined - text guides image analysis
+- Input modes:
+  - Pure image: Existing triple vision analysis
+  - Pure text: Claude keywords → Gemini philosophy → Codex tokens
+  - Hybrid: Text as context for visual analysis
+
+#### Changed
+
+**New Command Interface** (v4.0.1):
+- **`/workflow:ui-design:auto`**:
+  - All parameters optional with smart defaults
+  - `--prompt <desc>`: Design description (infers pages automatically)
+  - `--images <glob>`: Reference images (default: `design-refs/*`)
+  - `--pages <list>`: Explicit page override (auto-inferred if omitted)
+  - `--session <id>`, `--variants <count>`, `--use-agent`, `--batch-plan`
+  - Examples:
+    - Minimal: `/workflow:ui-design:auto --prompt "Modern blog with home and article pages"`
+    - Agent Mode: `/workflow:ui-design:auto --prompt "SaaS dashboard and settings" --variants 3 --use-agent`
+    - Hybrid: `/workflow:ui-design:auto --images "refs/*.png" --prompt "E-commerce: home, product, cart"`
+
+- **`/workflow:ui-design:style-extract`**:
+  - At least one of `--images` or `--prompt` recommended
+  - All other parameters optional
+  - Agent mode: Parallel generation of diverse design directions
+
+- **`/workflow:ui-design:ui-generate`**:
+  - All parameters optional (pages inferred from session or defaults to ["home"])
+  - `--pages <list>`: Optional explicit page list
+  - Agent mode: Parallel layout exploration (F-Pattern, Grid, Asymmetric)
+
+#### Usage Examples
+
+**Standalone Quick Prototyping**:
+```bash
+# Pure text with page inference (simplest)
+/workflow:ui-design:auto --prompt "Modern minimalist blog with home, article and author pages, dark theme" --use-agent
+
+# Pure image with inferred pages
+/workflow:ui-design:auto --images "refs/*.png" --variants 2
+
+# Hybrid input with explicit page override
+/workflow:ui-design:auto --images "current-app.png" --prompt "Modernize to Linear.app style" --pages "tasks,settings" --use-agent
+```
+
+**Integrated Workflow Enhancement**:
+```bash
+# Within existing workflow (pages inferred from synthesis)
+/workflow:ui-design:auto --session WFS-app-refresh --images "refs/*.png" --variants 3 --use-agent
+```
+
+#### Technical Details
+
+**Agent Mode Architecture**:
+- Uses `conceptual-planning-agent` for both style-extract and ui-generate phases
+- Parallel task execution: N variants × M pages run concurrently
+- Theme diversity strategies:
+  - style-extract: Creative theme generation (Minimalist, Brutalist, Organic)
+  - ui-generate: Layout strategy assignment (F-Pattern, Grid, Asymmetric)
+- Quality assurance: All variants maintain strict token adherence and WCAG AA compliance
+
+**Mode Detection Logic**:
+```bash
+# Session mode
+IF --session provided: mode = "integrated"
+ELSE: mode = "standalone", auto-create design-session-YYYYMMDD-HHMMSS/
+
+# Execution mode
+IF --use-agent: mode = "agent" (creative exploration)
+ELSE: mode = "conventional" (triple vision)
+
+# Input mode
+IF --images AND --prompt: mode = "hybrid"
+ELSE IF --images: mode = "image"
+ELSE IF --prompt: mode = "text"
+```
+
+#### Upgrade Benefits
+
+**Simplified Workflow**:
+- Fewer required parameters (only `--pages` mandatory)
+- Smart defaults reduce boilerplate
+- Standalone mode for quick prototyping without workflow setup
+
+**Enhanced Capabilities**:
+- Agent-driven creative exploration produces diverse designs
+- Parallel execution improves performance
+- Text prompts enable design without reference images
+
+**Quality Improvements**:
+- All variants maintain strict token adherence
+- WCAG AA compliance validated automatically
+- Better separation of concerns (style vs layout)
+
+## [3.5.0] - 2025-10-06
+
+### 🎨 UI Design Workflow with Triple Vision Analysis & Interactive Preview
+
+This release introduces a comprehensive UI design workflow system with triple vision analysis capabilities, interactive user checkpoints, zero agent overhead, and enhanced preview tools for real-time prototype comparison.
+
+#### Added
+
+**New UI Design Workflow System**:
+- **`/workflow:ui-design:auto`**: Semi-autonomous UI design workflow orchestrator
+  - Interactive checkpoints for user style selection and prototype confirmation
+  - Optional batch task generation with `--batch-plan` flag
+  - Pause-and-continue pattern at critical decision points
+  - Automatic progression between phases after user input
+  - Support for multiple UI variants per page (`--variants` parameter)
+
+**Triple Vision Analysis Architecture**:
+- **Phase 1: Claude Code Vision Analysis**: Quick initial visual analysis using native Read tool
+- **Phase 2: Gemini Vision Analysis**: Deep semantic understanding of design intent
+- **Phase 3: Codex Vision Analysis**: Structured pattern recognition with `-i` parameter
+- **Phase 4: Consensus Synthesis**: Weighted combination by main Claude agent
+- **Synthesis Strategy**:
+  - Color system: Consensus with Codex precision preference
+  - Typography: Gemini semantic + Codex measurements
+  - Spacing: Cross-validation across all three sources
+  - Design philosophy: Weighted with Gemini highest priority
+  - Conflict resolution: Majority vote or synthesis-specification.md context
+
+**Individual Design Commands**:
+
+**`/workflow:ui-design:style-extract`** - Extract design styles from reference images
+- **Usage**: `/workflow:ui-design:style-extract --session <session_id> --images "<glob_pattern>"`
+- **Examples**:
+  ```bash
+  /workflow:ui-design:style-extract --session WFS-auth --images "design-refs/*.png"
+  /workflow:ui-design:style-extract --session WFS-dashboard --images "refs/dashboard-*.jpg"
+  ```
+- **Features**:
+  - Triple vision analysis (Claude Code + Gemini + Codex)
+  - Generates `semantic_style_analysis.json`, `design-tokens.json`, `style-cards.json`
+  - Outputs multiple style variant cards for user selection
+  - Direct bash execution (no agent wrappers)
+  - Supports PNG, JPG, WebP image formats
+- **Output**: `.design/style-extraction/` with analysis files and 2-3 style variant cards
+
+**`/workflow:ui-design:style-consolidate`** - Consolidate selected style variants
+- **Usage**: `/workflow:ui-design:style-consolidate --session <session_id> --variants "<variant_ids>"`
+- **Examples**:
+  ```bash
+  /workflow:ui-design:style-consolidate --session WFS-auth --variants "variant-1,variant-3"
+  /workflow:ui-design:style-consolidate --session WFS-dashboard --variants "variant-2"
+  ```
+- **Features**:
+  - Validates and merges design tokens from selected variants
+  - Generates finalized `design-tokens.json`, `style-guide.md`, `tailwind.config.js`
+  - WCAG AA compliance validation (contrast ≥4.5:1 for text)
+  - Token coverage ≥90% requirement
+  - OKLCH color format with fallback
+- **Output**: `.design/style-consolidation/` with validated design system files
+
+**`/workflow:ui-design:ui-generate`** - Generate production-ready UI prototypes *(NEW: with preview enhancement)*
+- **Usage**: `/workflow:ui-design:ui-generate --session <session_id> --pages "<page_list>" [--variants <count>] [--style-overrides "<path_or_json>"]`
+- **Examples**:
+  ```bash
+  /workflow:ui-design:ui-generate --session WFS-auth --pages "login,register"
+  /workflow:ui-design:ui-generate --session WFS-dashboard --pages "dashboard" --variants 3
+  /workflow:ui-design:ui-generate --session WFS-auth --pages "login" --style-overrides "overrides.json"
+  ```
+- **Features**:
+  - Token-driven HTML/CSS generation with Codex
+  - Support for `--style-overrides` parameter for runtime customization
+  - Generates `{page}-variant-{n}.html`, `{page}-variant-{n}.css` per page
+  - **🆕 Auto-generates preview files**: `index.html`, `compare.html`, `PREVIEW.md`
+  - Semantic HTML5 with ARIA attributes
+  - Responsive design with token-based breakpoints
+  - Complete standalone prototypes (no external dependencies)
+- **Output**: `.design/prototypes/` with HTML/CSS files and preview tools
+- **Preview**: Open `index.html` in browser or start local server for interactive preview
+
+**`/workflow:ui-design:design-update`** - Integrate design system into brainstorming
+- **Usage**: `/workflow:ui-design:design-update --session <session_id> [--selected-prototypes "<prototype_ids>"]`
+- **Examples**:
+  ```bash
+  /workflow:ui-design:design-update --session WFS-auth
+  /workflow:ui-design:design-update --session WFS-auth --selected-prototypes "login-variant-1,register-variant-2"
+  ```
+- **Features**:
+  - Updates `synthesis-specification.md` with UI/UX guidelines section
+  - Creates/updates `ui-designer/style-guide.md`
+  - Makes design tokens available for task generation phase
+  - Merges selected prototype recommendations into brainstorming artifacts
+- **Output**: Updated brainstorming files with design system integration
+
+**`/workflow:ui-design:auto`** - Semi-autonomous orchestrator with interactive checkpoints
+- **Usage**: `/workflow:ui-design:auto --session <session_id> --images "<glob>" --pages "<list>" [--variants <count>] [--batch-plan]`
+- **Examples**:
+  ```bash
+  /workflow:ui-design:auto --session WFS-auth --images "design-refs/*.png" --pages "login,register"
+  /workflow:ui-design:auto --session WFS-dashboard --images "refs/*.jpg" --pages "dashboard" --variants 3 --batch-plan
+  ```
+- **Features**:
+  - Orchestrates entire design workflow with pause-and-continue checkpoints
+  - Checkpoint 1: User selects style variants after extraction
+  - Checkpoint 2: User confirms prototypes before design-update
+  - Optional `--batch-plan` for automatic task generation after design-update
+  - Progress tracking with TodoWrite integration
+- **Workflow**: style-extract → [USER SELECTS] → style-consolidate → ui-generate → [USER CONFIRMS] → design-update → [optional batch-plan]
+
+**Interactive Checkpoint System**:
+- **Checkpoint 1 (After style-extract)**: User selects preferred style variants
+  - Command: `/workflow:ui-design:style-consolidate --session WFS-xxx --variants "variant-1,variant-3"`
+  - Workflow pauses until user runs consolidation command
+
+- **Checkpoint 2 (After ui-generate)**: User confirms selected prototypes
+  - Command: `/workflow:ui-design:design-update --session WFS-xxx --selected-prototypes "page-variant-1,page-variant-2"`
+  - Workflow pauses until user runs design-update command
+
+**Design System Features**:
+- **OKLCH Color Format**: Perceptually uniform color space for design tokens
+- **W3C Design Tokens Compatibility**: Standard-compliant token format
+- **Style Override Mechanism**: Runtime token merging using jq
+- **Batch Task Generation**: Automatic `/workflow:plan` invocation for each page
+- **Accessibility Validation**: WCAG 2.1 AA compliance checks
+
+**Preview Enhancement System** *(NEW)*:
+- **`index.html`**: Master preview navigation page
+  - Grid layout of all generated prototypes
+  - Quick links to individual variants
+  - Metadata display (session ID, timestamps, page info)
+  - Direct access to implementation notes
+
+- **`compare.html`**: Interactive side-by-side comparison
+  - Iframe-based comparison for multiple variants
+  - Responsive viewport toggles (Desktop 100%, Tablet 768px, Mobile 375px)
+  - Synchronized scrolling option
+  - Dynamic page switching dropdown
+  - Real-time variant comparison
+
+- **`PREVIEW.md`**: Comprehensive preview instructions
+  - Direct browser opening guide
+  - Local server setup (Python, Node.js, PHP, VS Code Live Server)
+  - Browser compatibility notes
+  - Troubleshooting guide
+  - File structure overview
+
+**Preview Workflow**:
+```bash
+# After ui-generate completes:
+cd .workflow/WFS-{session}/.design/prototypes
+
+# Option 1: Direct browser (simplest)
+open index.html  # or double-click
+
+# Option 2: Local server (recommended)
+python -m http.server 8080  # Visit http://localhost:8080
+
+# Features:
+- index.html: Browse all prototypes
+- compare.html: Side-by-side comparison with viewport controls
+- Responsive preview: Test mobile, tablet, desktop views
+- Synchronized scrolling: Compare layouts in sync
+```
+
+#### Changed
+
+**Agent Architecture Simplification**:
+- **Removed agent wrappers** from `style-extract` and `ui-generate` commands
+  - Previously used `Task(conceptual-planning-agent)` for simple bash execution
+  - Now executes `gemini-wrapper` and `codex` commands directly via Bash tool
+  - Reduced execution overhead and complexity
+  - Preserved all functionality while improving performance
+
+**Command Execution Pattern**:
+- **Direct Bash Execution**: All CLI tools now use direct bash commands
+  - Gemini Vision: `bash(gemini-wrapper --approval-mode yolo -p "...")`
+  - Codex Vision: `bash(codex -i {images} --full-auto exec "..." -s danger-full-access)`
+  - Codex Token Generation: `bash(codex --full-auto exec "..." -s danger-full-access)`
+  - No intermediate agent layers
+
+**Workflow Integration**:
+- Design phase now optional but recommended for UI-heavy projects
+- Seamless integration with existing brainstorming → planning → execution flow
+- Design artifacts automatically discovered by `task-generate` if present
+- UI tasks automatically include `load_design_tokens` in flow_control
+
+**Updated Documentation**:
+- **README.md**: Added UI Design Workflow section in Getting Started
+- **README_CN.md**: Chinese documentation updated with design workflow
+- **Command Reference**: Added 5 new `/workflow:ui-design:*` commands
+- **Phase Renumbering**: Shifted phases to accommodate new Phase 2 (UI Design)
+
+#### Benefits
+
+**User Experience**:
+- 🎨 **Visual Validation**: Users confirm design before implementation starts
+- ⏸️ **Interactive Control**: Critical design decisions require explicit user approval
+- 👁️ **Comprehensive Analysis**: Three AI vision sources provide robust style extraction
+- 🎯 **Zero Waiting**: Direct bash execution eliminates agent overhead
+- 📦 **Automation Ready**: Optional batch task generation accelerates workflow
+
+**Code Quality**:
+- 🔒 **Token Enforcement**: 100% CSS values use custom properties (verified)
+- ♿ **Accessibility**: WCAG AA validated at design phase
+- 🎨 **Consistency**: Single source of truth for visual design (design-tokens.json)
+- 🧪 **Production Ready**: Semantic HTML5, responsive, accessible prototypes
+
+**Development Workflow**:
+- 🔄 **Seamless Integration**: Optional design phase fits between brainstorming and planning
+- 🚀 **Backward Compatible**: Existing workflows unaffected if design phase skipped
+- 📊 **Better Planning**: Design system context improves task generation quality
+- 🎯 **Focused Implementation**: Developers work from validated prototypes and tokens
+
+#### Technical Details
+
+**Triple Vision Analysis Flow**:
+```
+Reference Images
+  ↓
+Phase 2: Claude Code (Read tool) → claude_vision_analysis.json
+Phase 3: Gemini Vision (gemini-wrapper) → gemini_vision_analysis.json
+Phase 4: Codex Vision (codex -i) → codex_vision_analysis.json
+  ↓
+Phase 5: Main Claude Synthesis → semantic_style_analysis.json
+  ↓
+Phase 6: Codex Token Generation → design-tokens.json, style-cards.json
+```
+
+**Checkpoint Workflow Pattern**:
+```
+User: /workflow:ui-design:auto --session WFS-xxx --images "refs/*.png" --pages "dashboard,auth"
+  ↓
+Phase 1: style-extract (automatic)
+  ↓ [CHECKPOINT 1: User selects style variants]
+User: /workflow:ui-design:style-consolidate --session WFS-xxx --variants "variant-1,variant-3"
+  ↓
+Phase 3: ui-generate (automatic after Phase 2)
+  ↓ [CHECKPOINT 2: User confirms prototypes]
+User: /workflow:ui-design:design-update --session WFS-xxx --selected-prototypes "dashboard-variant-1,auth-variant-2"
+  ↓
+Phase 5: batch-plan (optional, automatic if --batch-plan flag)
+```
+
+**Output Structure**:
+```
+.workflow/WFS-{session}/.design/
+├── style-extraction/
+│   ├── claude_vision_analysis.json
+│   ├── gemini_vision_analysis.json
+│   ├── codex_vision_analysis.json
+│   ├── semantic_style_analysis.json (synthesis)
+│   ├── design-tokens.json (preliminary)
+│   └── style-cards.json (variants for selection)
+├── style-consolidation/
+│   ├── style-philosophy.md
+│   ├── design-tokens.json (final, validated)
+│   ├── style-guide.md
+│   ├── tailwind.config.js
+│   └── validation-report.json
+└── prototypes/
+    ├── {page}-variant-{n}.html (per page, per variant)
+    ├── {page}-variant-{n}.css (token-driven styles)
+    ├── {page}-variant-{n}-notes.md (implementation notes)
+    └── design-tokens.css (CSS custom properties)
+```
+
+**New Agent Documentation**:
+- **`ui-design-agent.md`**: Specialized agent for UI/UX design workflows
+  - Vision analysis, token generation, prototype creation capabilities
+  - Multi-modal vision provider strategy (Gemini primary, Codex fallback)
+  - Quality gates: WCAG AA, token coverage ≥90%, component mapping ≥95%
+  - Flow control specification for 3 design phases
+
+#### Use Cases
+
+**When to Use Design Workflow**:
+- User-facing applications with visual design requirements
+- Design system creation and maintenance
+- Brand-critical user interfaces
+- Projects requiring accessibility compliance
+- Multi-page applications with consistent styling
+
+**When to Skip Design Workflow**:
+- Backend APIs without UI components
+- CLI tools and command-line applications
+- Quick prototypes and MVPs
+- Projects with existing design systems
+
+---
+
+## [3.4.2] - 2025-10-05
+
+### 📚 CLI Documentation Refactoring
+
+This release focuses on eliminating redundant documentation by establishing a single source of truth (SSOT) pattern for CLI command references.
+
+#### Changed
+
+**CLI Command Documentation Refactoring**:
+- Refactored 7 CLI command documentation files to eliminate redundancy
+- Removed **681 total lines** of duplicate content across all files
+- Established implicit reference pattern to `intelligent-tools-strategy.md` (loaded in memory)
+- Preserved all unique command-specific content and capabilities
+
+**Specific File Reductions**:
+- `analyze.md`: 117→61 lines (48% reduction)
+- `chat.md`: 118→62 lines (47% reduction)
+- `execute.md`: 180→100 lines (44% reduction)
+- `codex-execute.md`: 481→473 lines (2% - preserved unique workflow content)
+- `mode/bug-index.md`: 144→75 lines (48% reduction)
+- `mode/code-analysis.md`: 188→76 lines (60% reduction)
+- `mode/plan.md`: 100→76 lines (24% reduction)
+
+**Removed Duplicate Sections**:
+- Universal Command Template (now only in `intelligent-tools-strategy.md`)
+- File Pattern Reference (centralized in strategy guide)
+- Complex Pattern Discovery (centralized in strategy guide)
+- MODE Field Definition (centralized in strategy guide)
+- Enhancement Integration details (referenced implicitly)
+- Session Persistence details (referenced implicitly)
+
+**Preserved Unique Content**:
+- Command-specific purpose and parameters
+- Unique execution flows and capabilities
+- Specialized features (YOLO permissions, task decomposition, resume patterns)
+- Command-specific examples and workflows
+- File pattern auto-detection logic for analyze command
+- Group-based execution workflow for codex-execute command
+
+#### Added
+
+**Documentation Enhancement** (prior to refactoring):
+- Enhanced file pattern examples and complex pattern discovery documentation
+- Added semantic discovery workflow integration examples
+
+#### Technical Details
+
+**Single Source of Truth Pattern**:
+All CLI commands now reference `intelligent-tools-strategy.md` for:
+- Universal command template structure
+- File pattern syntax and examples
+- Complex pattern discovery workflows
+- MODE field definitions and permissions
+- Tool-specific features and capabilities
+
+**Reference Pattern**:
+```markdown
+## Notes
+- Command templates and file patterns: see intelligent-tools-strategy.md (loaded in memory)
+```
+
+This approach reduces maintenance overhead while ensuring documentation consistency across all CLI commands.
+
 ## [3.4.1] - 2025-10-04
 
 ### 🎯 Multi-Tool Support for Documentation Updates

Install-Claude.ps1

@@ -63,7 +63,9 @@ param(
 
     [string]$SourceVersion = "",
 
-    [string]$SourceBranch = ""
+    [string]$SourceBranch = "",
+
+    [string]$SourceCommit = ""
 )
 
 # Set encoding for proper Unicode support
@@ -78,7 +80,10 @@ if ($PSVersionTable.PSVersion.Major -ge 6) {
 
 # Script metadata
 $ScriptName = "Claude Code Workflow System Installer"
-$Version = "2.1.0"
+$ScriptVersion = "2.2.0"  # Installer script version
+
+# Default version (will be overridden by -SourceVersion from install-remote.ps1)
+$DefaultVersion = "unknown"
 
 # Initialize backup behavior - backup is enabled by default unless NoBackup is specified
 if (-not $BackupAll -and -not $NoBackup) {
@@ -141,8 +146,15 @@ function Show-Banner {
 }
 
 function Show-Header {
+    param(
+        [string]$InstallVersion = $DefaultVersion
+    )
+
     Show-Banner
-    Write-ColorOutput "    $ScriptName v$Version" $ColorInfo
+    Write-ColorOutput "    $ScriptName v$ScriptVersion" $ColorInfo
+    if ($InstallVersion -ne "unknown") {
+        Write-ColorOutput "    Installing Claude Code Workflow v$InstallVersion" $ColorInfo
+    }
     Write-ColorOutput "    Unified workflow system with comprehensive coordination" $ColorInfo
     Write-ColorOutput "========================================================================" $ColorInfo
     if ($NoBackup) {
@@ -638,24 +650,27 @@ function Create-VersionJson {
         [string]$InstallationMode
     )
 
-    # Determine version from source or default
+    # Determine version from source parameter (passed from install-remote.ps1)
-    $versionNumber = if ($SourceVersion) { $SourceVersion } else { $Version }
+    $versionNumber = if ($SourceVersion) { $SourceVersion } else { $DefaultVersion }
     $sourceBranch = if ($SourceBranch) { $SourceBranch } else { "unknown" }
+    $commitSha = if ($SourceCommit) { $SourceCommit } else { "unknown" }
 
     # Create version.json content
     $versionInfo = @{
         version = $versionNumber
+        commit_sha = $commitSha
         installation_mode = $InstallationMode
         installation_path = $TargetClaudeDir
         installation_date_utc = (Get-Date).ToUniversalTime().ToString("yyyy-MM-ddTHH:mm:ssZ")
         source_branch = $sourceBranch
+        installer_version = $ScriptVersion
     }
 
     $versionJsonPath = Join-Path $TargetClaudeDir "version.json"
 
     try {
         $versionInfo | ConvertTo-Json | Out-File -FilePath $versionJsonPath -Encoding utf8 -Force
-        Write-ColorOutput "Created version.json: $versionNumber ($InstallationMode)" $ColorSuccess
+        Write-ColorOutput "Created version.json: $versionNumber ($commitSha) - $InstallationMode" $ColorSuccess
         return $true
     } catch {
         Write-ColorOutput "WARNING: Failed to create version.json: $($_.Exception.Message)" $ColorWarning
@@ -1024,7 +1039,10 @@ function Show-Summary {
 }
 
 function Main {
-    Show-Header
+    # Use SourceVersion parameter if provided, otherwise use default
+    $installVersion = if ($SourceVersion) { $SourceVersion } else { $DefaultVersion }
+
+    Show-Header -InstallVersion $installVersion
 
     # Test prerequisites
     Write-ColorOutput "Checking system requirements..." $ColorInfo

Install-Claude.sh

@@ -24,6 +24,9 @@ FORCE=false
 NON_INTERACTIVE=false
 BACKUP_ALL=true  # Enabled by default
 NO_BACKUP=false
+SOURCE_VERSION=""  # Version from remote installer
+SOURCE_BRANCH=""   # Branch from remote installer
+SOURCE_COMMIT=""   # Commit SHA from remote installer
 
 # Functions
 function write_color() {
@@ -99,6 +102,7 @@ function test_prerequisites() {
     local claude_md="$script_dir/CLAUDE.md"
     local codex_dir="$script_dir/.codex"
     local gemini_dir="$script_dir/.gemini"
+    local qwen_dir="$script_dir/.qwen"
 
     if [ ! -d "$claude_dir" ]; then
         write_color "ERROR: .claude directory not found in $script_dir" "$COLOR_ERROR"
@@ -120,6 +124,11 @@ function test_prerequisites() {
         return 1
     fi
 
+    if [ ! -d "$qwen_dir" ]; then
+        write_color "ERROR: .qwen directory not found in $script_dir" "$COLOR_ERROR"
+        return 1
+    fi
+
     write_color "✓ Prerequisites check passed" "$COLOR_SUCCESS"
     return 0
 }
@@ -403,6 +412,7 @@ function install_global() {
     local global_claude_md="${global_claude_dir}/CLAUDE.md"
     local global_codex_dir="${user_home}/.codex"
     local global_gemini_dir="${user_home}/.gemini"
+    local global_qwen_dir="${user_home}/.qwen"
 
     write_color "Global installation path: $user_home" "$COLOR_INFO"
 
@@ -412,6 +422,7 @@ function install_global() {
     local source_claude_md="${script_dir}/CLAUDE.md"
     local source_codex_dir="${script_dir}/.codex"
     local source_gemini_dir="${script_dir}/.gemini"
+    local source_qwen_dir="${script_dir}/.qwen"
 
     # Create backup folder if needed
     local backup_folder=""
@@ -424,6 +435,8 @@ function install_global() {
             has_existing_files=true
         elif [ -d "$global_gemini_dir" ] && [ "$(ls -A "$global_gemini_dir" 2>/dev/null)" ]; then
             has_existing_files=true
+        elif [ -d "$global_qwen_dir" ] && [ "$(ls -A "$global_qwen_dir" 2>/dev/null)" ]; then
+            has_existing_files=true
         elif [ -f "$global_claude_md" ]; then
             has_existing_files=true
         fi
@@ -450,6 +463,10 @@ function install_global() {
     write_color "Merging .gemini directory contents..." "$COLOR_INFO"
     merge_directory_contents "$source_gemini_dir" "$global_gemini_dir" ".gemini directory contents" "$backup_folder"
 
+    # Merge .qwen directory contents
+    write_color "Merging .qwen directory contents..." "$COLOR_INFO"
+    merge_directory_contents "$source_qwen_dir" "$global_qwen_dir" ".qwen directory contents" "$backup_folder"
+
     # Remove empty backup folder
     if [ -n "$backup_folder" ] && [ -d "$backup_folder" ]; then
         if [ -z "$(ls -A "$backup_folder" 2>/dev/null)" ]; then
@@ -458,6 +475,10 @@ function install_global() {
         fi
     fi
 
+    # Create version.json in global .claude directory
+    write_color "Creating version.json..." "$COLOR_INFO"
+    create_version_json "$global_claude_dir" "Global"
+
     return 0
 }
 
@@ -477,16 +498,18 @@ function install_path() {
     local source_claude_md="${script_dir}/CLAUDE.md"
     local source_codex_dir="${script_dir}/.codex"
     local source_gemini_dir="${script_dir}/.gemini"
+    local source_qwen_dir="${script_dir}/.qwen"
 
     # Local paths
     local local_claude_dir="${target_dir}/.claude"
     local local_codex_dir="${target_dir}/.codex"
     local local_gemini_dir="${target_dir}/.gemini"
+    local local_qwen_dir="${target_dir}/.qwen"
 
     # Create backup folder if needed
     local backup_folder=""
     if [ "$NO_BACKUP" = false ]; then
-        if [ -d "$local_claude_dir" ] || [ -d "$local_codex_dir" ] || [ -d "$local_gemini_dir" ] || [ -d "$global_claude_dir" ]; then
+        if [ -d "$local_claude_dir" ] || [ -d "$local_codex_dir" ] || [ -d "$local_gemini_dir" ] || [ -d "$local_qwen_dir" ] || [ -d "$global_claude_dir" ]; then
             backup_folder=$(get_backup_directory "$target_dir")
             write_color "Backup folder created: $backup_folder" "$COLOR_INFO"
         fi
@@ -575,6 +598,10 @@ function install_path() {
     write_color "Merging .gemini directory contents to local location..." "$COLOR_INFO"
     merge_directory_contents "$source_gemini_dir" "$local_gemini_dir" ".gemini directory contents" "$backup_folder"
 
+    # Merge .qwen directory contents to local location
+    write_color "Merging .qwen directory contents to local location..." "$COLOR_INFO"
+    merge_directory_contents "$source_qwen_dir" "$local_qwen_dir" ".qwen directory contents" "$backup_folder"
+
     # Remove empty backup folder
     if [ -n "$backup_folder" ] && [ -d "$backup_folder" ]; then
         if [ -z "$(ls -A "$backup_folder" 2>/dev/null)" ]; then
@@ -583,12 +610,20 @@ function install_path() {
         fi
     fi
 
+    # Create version.json in local .claude directory
+    write_color "Creating version.json in local directory..." "$COLOR_INFO"
+    create_version_json "$local_claude_dir" "Path"
+
+    # Also create version.json in global .claude directory
+    write_color "Creating version.json in global directory..." "$COLOR_INFO"
+    create_version_json "$global_claude_dir" "Global"
+
     return 0
 }
 
 function get_installation_mode() {
     if [ -n "$INSTALL_MODE" ]; then
-        write_color "Installation mode: $INSTALL_MODE" "$COLOR_INFO"
+        write_color "Installation mode: $INSTALL_MODE" "$COLOR_INFO" >&2
         echo "$INSTALL_MODE"
         return
     fi
@@ -658,6 +693,42 @@ function get_installation_path() {
     done
 }
 
+function create_version_json() {
+    local target_claude_dir="$1"
+    local installation_mode="$2"
+
+    # Determine version from source parameter (passed from install-remote.sh)
+    local version_number="${SOURCE_VERSION:-unknown}"
+    local source_branch="${SOURCE_BRANCH:-unknown}"
+    local commit_sha="${SOURCE_COMMIT:-unknown}"
+
+    # Get current UTC timestamp
+    local installation_date_utc=$(date -u +"%Y-%m-%dT%H:%M:%SZ" 2>/dev/null || date -u +"%Y-%m-%dT%H:%M:%SZ")
+
+    # Create version.json content
+    local version_json_path="${target_claude_dir}/version.json"
+
+    cat > "$version_json_path" << EOF
+{
+  "version": "$version_number",
+  "commit_sha": "$commit_sha",
+  "installation_mode": "$installation_mode",
+  "installation_path": "$target_claude_dir",
+  "installation_date_utc": "$installation_date_utc",
+  "source_branch": "$source_branch",
+  "installer_version": "$VERSION"
+}
+EOF
+
+    if [ -f "$version_json_path" ]; then
+        write_color "Created version.json: $version_number ($commit_sha) - $installation_mode" "$COLOR_SUCCESS"
+        return 0
+    else
+        write_color "WARNING: Failed to create version.json" "$COLOR_WARNING"
+        return 1
+    fi
+}
+
 function show_summary() {
     local mode="$1"
     local path="$2"
@@ -676,11 +747,11 @@ function show_summary() {
     if [ "$mode" = "Path" ]; then
         echo "  Local Path: $path"
         echo "  Global Path: $HOME"
-        echo "  Local Components: agents, commands, output-styles, .codex, .gemini"
+        echo "  Local Components: agents, commands, output-styles, .codex, .gemini, .qwen"
         echo "  Global Components: workflows, scripts, python_script, etc."
     else
         echo "  Path: $path"
-        echo "  Global Components: .claude, .codex, .gemini"
+        echo "  Global Components: .claude, .codex, .gemini, .qwen"
     fi
 
     if [ "$NO_BACKUP" = true ]; then
@@ -696,10 +767,11 @@ function show_summary() {
     echo "1. Review CLAUDE.md - Customize guidelines for your project"
     echo "2. Review .codex/Agent.md - Codex agent execution protocol"
     echo "3. Review .gemini/CLAUDE.md - Gemini agent execution protocol"
-    echo "4. Configure settings - Edit .claude/settings.local.json as needed"
+    echo "4. Review .qwen/QWEN.md - Qwen agent execution protocol"
-    echo "5. Start using Claude Code with Agent workflow coordination!"
+    echo "5. Configure settings - Edit .claude/settings.local.json as needed"
-    echo "6. Use /workflow commands for task execution"
+    echo "6. Start using Claude Code with Agent workflow coordination!"
-    echo "7. Use /update-memory commands for memory system management"
+    echo "7. Use /workflow commands for task execution"
+    echo "8. Use /update-memory commands for memory system management"
 
     echo ""
     write_color "Documentation: https://github.com/catlog22/Claude-Code-Workflow" "$COLOR_INFO"
@@ -735,6 +807,18 @@ function parse_arguments() {
                 BACKUP_ALL=false
                 shift
                 ;;
+            -SourceVersion)
+                SOURCE_VERSION="$2"
+                shift 2
+                ;;
+            -SourceBranch)
+                SOURCE_BRANCH="$2"
+                shift 2
+                ;;
+            -SourceCommit)
+                SOURCE_COMMIT="$2"
+                shift 2
+                ;;
             --help|-h)
                 show_help
                 exit 0
@@ -761,6 +845,9 @@ Options:
     -NonInteractive       Run in non-interactive mode with default options
     -BackupAll            Automatically backup all existing files (default)
     -NoBackup             Disable automatic backup functionality
+    -SourceVersion <ver>  Source version (passed from install-remote.sh)
+    -SourceBranch <name>  Source branch (passed from install-remote.sh)
+    -SourceCommit <sha>   Source commit SHA (passed from install-remote.sh)
     --help, -h            Show this help message
 
 Examples:
@@ -776,6 +863,9 @@ Examples:
     # Installation without backup
     $0 -NoBackup
 
+    # With version info (typically called by install-remote.sh)
+    $0 -InstallMode Global -Force -SourceVersion "3.4.2" -SourceBranch "main" -SourceCommit "abc1234"
+
 EOF
 }
 

README.md

@@ -2,7 +2,7 @@
 
 <div align="center">
 
-[![Version](https://img.shields.io/badge/version-v3.4.0-blue.svg)](https://github.com/catlog22/Claude-Code-Workflow/releases)
+[![Version](https://img.shields.io/badge/version-v4.2.1-blue.svg)](https://github.com/catlog22/Claude-Code-Workflow/releases)
 [![License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
 [![Platform](https://img.shields.io/badge/platform-Windows%20%7C%20Linux%20%7C%20macOS-lightgrey.svg)]()
 [![MCP Tools](https://img.shields.io/badge/🔧_MCP_Tools-Experimental-orange.svg)](https://github.com/modelcontextprotocol)
@@ -15,15 +15,13 @@
 
 **Claude Code Workflow (CCW)** is a next-generation multi-agent automation framework that orchestrates complex software development tasks through intelligent workflow management and autonomous execution.
 
-> **🎉 Latest: v3.4.0** - TDD workflow optimization & test generation enhancements. See [CHANGELOG.md](CHANGELOG.md) for details.
+> **🎉 Latest: v4.2.1** - Documentation Refactoring for UI Design Workflow. See [CHANGELOG.md](CHANGELOG.md) for details.
 >
-> **What's New in v3.4.0**:
+> **What's New in v4.2.1**:
-> - 🧪 **TDD Workflow Streamlining**: Unified IMPL_PLAN.md structure, 33% reduction in redundant files
+> - 📚 **Documentation Optimization**: Reduced file sizes by 15-20% while preserving all functionality
-> - 🔄 **Test Coverage Analysis**: TDD workflow upgraded to 6 phases with Phase 3 test context gathering
+> - 🎯 **Clearer Structure**: Merged duplicate concepts and streamlined content organization
-> - 🔁 **Iterative Green Phase**: Built-in test-fix-cycle in IMPL tasks with Gemini auto-diagnosis
+> - ✨ **Improved Maintainability**: Better content separation and consistent formatting patterns
-> - 🛠️ **Manual-First Fixes**: Gemini + bug-fix template diagnosis by default, optional `--use-codex` automation
+> - 📖 **Zero Functionality Loss**: All features, workflows, and technical details preserved
-> - ✅ **Test-Gen Workflow Enhancement**: Added 3 supporting tool commands for complete test generation flow
-> - ⏱️ **Dynamic Timeout Allocation**: CLI tools default to 20-120min for large-scale analysis
 
 ---
 
@@ -250,7 +248,32 @@ MCP (Model Context Protocol) tools provide advanced codebase analysis. **Recomme
 /workflow:brainstorm:synthesis  # Generate consolidated specification
 ```
 
-**Phase 2: Action Planning**
+**Phase 2: UI Design Refinement** *(Optional for UI-heavy projects)*
+```bash
+# Matrix Exploration Mode - Multiple style/layout variants (v4.2.1+)
+/workflow:ui-design:explore-auto --prompt "Modern blog: home, article, author" --style-variants 3 --layout-variants 2
+
+# Fast Imitation Mode - Single design replication (v4.2.1+)
+/workflow:ui-design:imitate-auto --images "refs/design.png" --pages "dashboard,settings"
+
+# With session integration
+/workflow:ui-design:explore-auto --session WFS-auth --images "refs/*.png" --style-variants 2 --layout-variants 3
+
+# Or run individual design phases
+/workflow:ui-design:extract --images "refs/*.png" --variants 3
+/workflow:ui-design:consolidate --variants "variant-1,variant-3"
+/workflow:ui-design:generate --pages "dashboard,auth" --style-variants 2 --layout-variants 2
+
+# Preview generated prototypes
+# Option 1: Open .workflow/WFS-auth/.design/prototypes/compare.html in browser
+# Option 2: Start local server
+cd .workflow/WFS-auth/.design/prototypes && python -m http.server 8080
+# Visit http://localhost:8080 for interactive preview with comparison tools
+
+/workflow:ui-design:update --session WFS-auth --selected-prototypes "dashboard-s1-l2"
+```
+
+**Phase 3: Action Planning**
 ```bash
 # Create executable implementation plan
 /workflow:plan "Implement JWT-based authentication system"
@@ -259,7 +282,7 @@ MCP (Model Context Protocol) tools provide advanced codebase analysis. **Recomme
 /workflow:tdd-plan "Implement authentication with test-first development"
 ```
 
-**Phase 3: Execution**
+**Phase 4: Execution**
 ```bash
 # Execute tasks with AI agents
 /workflow:execute
@@ -268,7 +291,7 @@ MCP (Model Context Protocol) tools provide advanced codebase analysis. **Recomme
 /workflow:status
 ```
 
-**Phase 4: Testing & Quality Assurance**
+**Phase 5: Testing & Quality Assurance**
 ```bash
 # Generate independent test-fix workflow (v3.2.2+)
 /workflow:test-gen WFS-auth  # Creates WFS-test-auth session
@@ -341,6 +364,12 @@ MCP (Model Context Protocol) tools provide advanced codebase analysis. **Recomme
 |---|---|
 | `/workflow:session:*` | Manage development sessions (`start`, `pause`, `resume`, `list`, `switch`, `complete`). |
 | `/workflow:brainstorm:*` | Use role-based agents for multi-perspective planning. |
+| `/workflow:ui-design:explore-auto` | **v4.2.1** Matrix exploration mode - Generate multiple style × layout variants for comprehensive design exploration. |
+| `/workflow:ui-design:imitate-auto` | **v4.2.1** Fast imitation mode - Rapid single-design replication with auto-screenshot and direct token extraction. |
+| `/workflow:ui-design:extract` | **v4.2.1** Extract design from images/text using Claude-native analysis. Single-pass variant generation. |
+| `/workflow:ui-design:consolidate` | **v4.2.1** Consolidate style variants into validated design tokens using Claude synthesis. |
+| `/workflow:ui-design:generate` | **v4.2.1** Generate token-driven HTML/CSS prototypes in matrix mode (style × layout combinations). |
+| `/workflow:ui-design:update` | **v4.2.1** Integrate finalized design system into brainstorming artifacts. |
 | `/workflow:plan` | Create a detailed, executable plan from a description. |
 | `/workflow:tdd-plan` | Create TDD workflow (6 phases) with test coverage analysis and Red-Green-Refactor cycles. |
 | `/workflow:execute` | Execute the current workflow plan autonomously. |
@@ -352,6 +381,125 @@ MCP (Model Context Protocol) tools provide advanced codebase analysis. **Recomme
 | `/workflow:tools:test-concept-enhanced` | Generate test strategy and requirements analysis using Gemini. |
 | `/workflow:tools:test-task-generate` | Generate test task JSON with test-fix-cycle specification. |
 
+### **UI Design Workflow Commands (`/workflow:ui-design:*`)** *(v4.2.1)*
+
+The design workflow system provides complete UI design refinement with **pure Claude execution**, **intelligent page inference**, and **zero external dependencies**.
+
+#### Core Commands
+
+**`/workflow:ui-design:explore-auto`** - Matrix exploration mode
+```bash
+# Comprehensive exploration - multiple style × layout variants
+/workflow:ui-design:explore-auto --prompt "Modern blog: home, article, author" --style-variants 3 --layout-variants 2
+
+# With images and session integration
+/workflow:ui-design:explore-auto --session WFS-auth --images "refs/*.png" --style-variants 2 --layout-variants 3
+
+# Text-only mode with page inference
+/workflow:ui-design:explore-auto --prompt "E-commerce: home, product, cart" --style-variants 2 --layout-variants 2
+```
+- **🎯 Matrix Mode**: Generate all style × layout combinations
+- **📊 Comprehensive Exploration**: Compare multiple design directions
+- **🔍 Interactive Comparison**: Side-by-side comparison with viewport controls
+- **✅ Cross-page Validation**: Automatic consistency checks for multi-page designs
+- **⚡ Batch Selection**: Quick selection by style or layout
+
+**`/workflow:ui-design:imitate-auto`** - Fast imitation mode
+```bash
+# Rapid single-design replication
+/workflow:ui-design:imitate-auto --images "refs/design.png" --pages "dashboard,settings"
+
+# With session integration
+/workflow:ui-design:imitate-auto --session WFS-auth --images "refs/ui.png" --pages "home,product"
+
+# Auto-screenshot from URL (requires Playwright)
+/workflow:ui-design:imitate-auto --url "https://example.com" --pages "landing"
+```
+- **⚡ Speed Optimized**: 5-10x faster than explore-auto
+- **📸 Auto-Screenshot**: Automatic URL screenshot capture with Playwright/Chrome
+- **🎯 Direct Extraction**: Skip variant selection, go straight to implementation
+- **🔧 Single Design Focus**: Best for copying existing designs quickly
+
+**`/workflow:ui-design:extract`** - Style analysis with dual input sources
+```bash
+# Pure text prompt
+/workflow:ui-design:extract --prompt "Modern minimalist, dark theme" --variants 3
+
+# Pure images
+/workflow:ui-design:extract --images "refs/*.png" --variants 3
+
+# Hybrid (text guides image analysis)
+/workflow:ui-design:extract --images "refs/*.png" --prompt "Linear.app style" --variants 2
+```
+- **Claude-Native**: Single-pass analysis, no external tools
+- **Enhanced Output**: `style-cards.json` with embedded `proposed_tokens`
+- **Reproducible**: Deterministic structure, version-controlled logic
+- **Output**: 1 file (vs 4+ in previous versions)
+
+**`/workflow:ui-design:consolidate`** - Validate and merge tokens
+```bash
+# Consolidate selected style variants
+/workflow:ui-design:consolidate --session WFS-auth --variants "variant-1,variant-3"
+```
+- **Claude Synthesis**: Single-pass generation of all design system files
+- **Features**: WCAG AA validation, OKLCH colors, W3C token format
+- **Output**: `design-tokens.json`, `style-guide.md`, `tailwind.config.js`, `validation-report.json`
+
+**`/workflow:ui-design:generate`** - Generate HTML/CSS prototypes
+```bash
+# Matrix mode - style × layout combinations
+/workflow:ui-design:generate --pages "dashboard,auth" --style-variants 2 --layout-variants 3
+
+# Single page with multiple variants
+/workflow:ui-design:generate --pages "home" --style-variants 3 --layout-variants 2
+```
+- **🎯 Matrix Generation**: Creates all style × layout combinations
+- **📊 Multi-page Support**: Consistent design system across pages
+- **✅ Consistency Validation**: Automatic cross-page consistency reports (v4.2.0+)
+- **🔍 Interactive Preview**: `compare.html` with side-by-side comparison
+- **📋 Batch Selection**: Quick selection by style or layout filters
+
+**`/workflow:ui-design:update`** - Integrate design system
+```bash
+# Update brainstorming artifacts with design system
+/workflow:ui-design:update --session WFS-auth --selected-prototypes "login-variant-1"
+```
+- **Updates**: `synthesis-specification.md`, `ui-designer/style-guide.md`
+- **Makes design tokens available for task generation**
+
+#### Preview System
+
+After running `ui-generate`, you get interactive preview tools:
+
+**Quick Preview** (Direct Browser):
+```bash
+# Navigate to prototypes directory
+cd .workflow/WFS-auth/.design/prototypes
+# Open index.html in browser (double-click or):
+open index.html  # macOS
+start index.html  # Windows
+xdg-open index.html  # Linux
+```
+
+**Full Preview** (Local Server - Recommended):
+```bash
+cd .workflow/WFS-auth/.design/prototypes
+# Choose one:
+python -m http.server 8080      # Python
+npx http-server -p 8080         # Node.js
+php -S localhost:8080           # PHP
+# Visit: http://localhost:8080
+```
+
+**Preview Features**:
+- `index.html`: Master navigation with all prototypes
+- `compare.html`: Side-by-side comparison with viewport controls (Desktop/Tablet/Mobile)
+- Synchronized scrolling for layout comparison
+- Dynamic page switching
+- Real-time responsive testing
+
+---
+
 ### **Task & Memory Commands**
 
 | Command | Description |

README_CN.md

@@ -2,7 +2,7 @@
 
 <div align="center">
 
-[![Version](https://img.shields.io/badge/version-v3.4.0-blue.svg)](https://github.com/catlog22/Claude-Code-Workflow/releases)
+[![Version](https://img.shields.io/badge/version-v4.2.1-blue.svg)](https://github.com/catlog22/Claude-Code-Workflow/releases)
 [![License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
 [![Platform](https://img.shields.io/badge/platform-Windows%20%7C%20Linux%20%7C%20macOS-lightgrey.svg)]()
 [![MCP工具](https://img.shields.io/badge/🔧_MCP工具-实验性-orange.svg)](https://github.com/modelcontextprotocol)
@@ -15,15 +15,13 @@
 
 **Claude Code Workflow (CCW)** 是一个新一代的多智能体自动化开发框架，通过智能工作流管理和自主执行来协调复杂的软件开发任务。
 
-> **🎉 最新版本: v3.4.0** - TDD 工作流优化与测试生成增强。详见 [CHANGELOG.md](CHANGELOG.md)。
+> **🎉 最新版本: v4.2.1** - UI 设计工作流文档重构。详见 [CHANGELOG.md](CHANGELOG.md)。
 >
-> **v3.4.0 版本新特性**:
+> **v4.2.1 版本新特性**:
-> - 🧪 **TDD 工作流优化**: 精简文件结构，统一使用 IMPL_PLAN.md，减少 33% 冗余文件
+> - 📚 **文档优化**: 文件大小减少 15-20%，同时保留所有功能
-> - 🔄 **测试覆盖分析**: TDD 工作流升级至 6 阶段，新增 Phase 3 测试上下文收集
+> - 🎯 **更清晰的结构**: 合并重复概念，优化内容组织
-> - 🔁 **迭代 Green Phase**: IMPL 任务内置 test-fix-cycle，支持 Gemini 自动诊断和修复
+> - ✨ **改进的可维护性**: 更好的内容分离和一致的格式模式
-> - 🛠️ **手动优先修复**: 默认使用 Gemini + bug-fix 模板诊断，可选 `--use-codex` 自动化
+> - 📖 **零功能损失**: 保留所有特性、工作流和技术细节
-> - ✅ **test-gen 工作流增强**: 新增 3 个配套工具命令，完整测试生成和修复流程
-> - ⏱️ **动态超时分配**: CLI 工具默认 20-120 分钟超时，适应大型项目分析
 
 ---
 
@@ -250,7 +248,32 @@ MCP (模型上下文协议) 工具提供高级代码库分析。**推荐安装**
 /workflow:brainstorm:synthesis  # 生成综合规范
 ```
 
-**阶段 2：行动规划**
+**阶段 2：UI 设计精炼** *(UI 密集型项目可选)*
+```bash
+# 矩阵探索模式 - 多个风格×布局变体（v4.2.1+）
+/workflow:ui-design:explore-auto --prompt "现代博客：首页，文章，作者" --style-variants 3 --layout-variants 2
+
+# 快速模仿模式 - 单一设计快速复制（v4.2.1+）
+/workflow:ui-design:imitate-auto --images "refs/design.png" --pages "dashboard,settings"
+
+# 与会话集成
+/workflow:ui-design:explore-auto --session WFS-auth --images "refs/*.png" --style-variants 2 --layout-variants 3
+
+# 或者运行单独的设计阶段
+/workflow:ui-design:extract --images "refs/*.png" --variants 3
+/workflow:ui-design:consolidate --variants "variant-1,variant-3"
+/workflow:ui-design:generate --pages "dashboard,auth" --style-variants 2 --layout-variants 2
+
+# 预览生成的原型
+# 选项1：在浏览器中打开 .workflow/WFS-auth/.design/prototypes/compare.html
+# 选项2：启动本地服务器
+cd .workflow/WFS-auth/.design/prototypes && python -m http.server 8080
+# 访问 http://localhost:8080 获取交互式预览和对比工具
+
+/workflow:ui-design:update --session WFS-auth --selected-prototypes "dashboard-s1-l2"
+```
+
+**阶段 3：行动规划**
 ```bash
 # 创建可执行的实现计划
 /workflow:plan "实现基于 JWT 的认证系统"
@@ -259,7 +282,7 @@ MCP (模型上下文协议) 工具提供高级代码库分析。**推荐安装**
 /workflow:tdd-plan "使用测试优先开发实现认证"
 ```
 
-**阶段 3：执行**
+**阶段 4：执行**
 ```bash
 # 使用 AI 智能体执行任务
 /workflow:execute
@@ -268,7 +291,7 @@ MCP (模型上下文协议) 工具提供高级代码库分析。**推荐安装**
 /workflow:status
 ```
 
-**阶段 4：测试与质量保证**
+**阶段 5：测试与质量保证**
 ```bash
 # 生成独立测试修复工作流（v3.2.2+）
 /workflow:test-gen WFS-auth  # 创建 WFS-test-auth 会话
@@ -341,6 +364,12 @@ MCP (模型上下文协议) 工具提供高级代码库分析。**推荐安装**
 |---|---|
 | `/workflow:session:*` | 管理开发会话（`start`, `pause`, `resume`, `list`, `switch`, `complete`）。 |
 | `/workflow:brainstorm:*` | 使用基于角色的智能体进行多视角规划。 |
+| `/workflow:ui-design:explore-auto` | **v4.2.1** 矩阵探索模式 - 生成多个风格×布局变体，全面探索设计方向。 |
+| `/workflow:ui-design:imitate-auto` | **v4.2.1** 快速模仿模式 - 单一设计快速复制，自动截图和直接令牌提取。 |
+| `/workflow:ui-design:extract` | **v4.2.1** 使用 Claude 原生分析从图像/文本提取设计。单次生成变体。 |
+| `/workflow:ui-design:consolidate` | **v4.2.1** 使用 Claude 合成将风格变体整合为经过验证的设计令牌。 |
+| `/workflow:ui-design:generate` | **v4.2.1** 生成矩阵模式（风格×布局组合）的令牌驱动 HTML/CSS 原型。 |
+| `/workflow:ui-design:update` | **v4.2.1** 将最终确定的设计系统集成到头脑风暴产物中。 |
 | `/workflow:plan` | 从描述创建详细、可执行的计划。 |
 | `/workflow:tdd-plan` | 创建 TDD 工作流（6 阶段），包含测试覆盖分析和 Red-Green-Refactor 循环。 |
 | `/workflow:execute` | 自主执行当前的工作流计划。 |
@@ -352,6 +381,108 @@ MCP (模型上下文协议) 工具提供高级代码库分析。**推荐安装**
 | `/workflow:tools:test-concept-enhanced` | 使用 Gemini 生成测试策略和需求分析。 |
 | `/workflow:tools:test-task-generate` | 生成测试任务 JSON，包含 test-fix-cycle 规范。 |
 
+### **UI 设计工作流命令 (`/workflow:ui-design:*`)** *(v4.2.1)*
+
+设计工作流系统提供完整的 UI 设计精炼，具备**纯 Claude 执行**、**智能页面推断**和**零外部依赖**。
+
+#### 核心命令
+
+**`/workflow:ui-design:explore-auto`** - 矩阵探索模式
+```bash
+# 全面探索 - 多个风格×布局变体
+/workflow:ui-design:explore-auto --prompt "现代博客：首页，文章，作者" --style-variants 3 --layout-variants 2
+
+# 与图像和会话集成
+/workflow:ui-design:explore-auto --session WFS-auth --images "refs/*.png" --style-variants 2 --layout-variants 3
+
+# 纯文本模式，带页面推断
+/workflow:ui-design:explore-auto --prompt "电商：首页，产品，购物车" --style-variants 2 --layout-variants 2
+```
+- **🎯 矩阵模式**: 生成所有风格×布局组合
+- **📊 全面探索**: 比较多个设计方向
+- **🔍 交互式对比**: 带视口控制的并排比较
+- **✅ 跨页面验证**: 多页面设计的自动一致性检查
+- **⚡ 批量选择**: 按风格或布局快速选择
+
+**`/workflow:ui-design:imitate-auto`** - 快速模仿模式
+```bash
+# 快速单一设计复制
+/workflow:ui-design:imitate-auto --images "refs/design.png" --pages "dashboard,settings"
+
+# 与会话集成
+/workflow:ui-design:imitate-auto --session WFS-auth --images "refs/ui.png" --pages "home,product"
+
+# 从 URL 自动截图（需要 Playwright）
+/workflow:ui-design:imitate-auto --url "https://example.com" --pages "landing"
+```
+- **⚡ 速度优化**: 比 explore-auto 快 5-10 倍
+- **📸 自动截图**: 使用 Playwright/Chrome 自动捕获 URL 截图
+- **🎯 直接提取**: 跳过变体选择，直接进入实现
+- **🔧 单一设计聚焦**: 最适合快速复制现有设计
+
+**`/workflow:ui-design:style-consolidate`** - 验证和合并令牌
+```bash
+# 整合选定的风格变体
+/workflow:ui-design:style-consolidate --session WFS-auth --variants "variant-1,variant-3"
+```
+- **功能**: WCAG AA 验证、OKLCH 颜色、W3C 令牌格式
+- **输出**: `design-tokens.json`、`style-guide.md`、`tailwind.config.js`
+
+**`/workflow:ui-design:generate`** - 生成 HTML/CSS 原型
+```bash
+# 矩阵模式 - 风格×布局组合
+/workflow:ui-design:generate --pages "dashboard,auth" --style-variants 2 --layout-variants 3
+
+# 单页面多变体
+/workflow:ui-design:generate --pages "home" --style-variants 3 --layout-variants 2
+```
+- **🎯 矩阵生成**: 创建所有风格×布局组合
+- **📊 多页面支持**: 跨页面一致的设计系统
+- **✅ 一致性验证**: 自动跨页面一致性报告（v4.2.0+）
+- **🔍 交互式预览**: `compare.html` 并排比较
+- **📋 批量选择**: 按风格或布局过滤器快速选择
+
+**`/workflow:ui-design:update`** - 集成设计系统
+```bash
+# 使用设计系统更新头脑风暴产物
+/workflow:ui-design:update --session WFS-auth --selected-prototypes "dashboard-s1-l2"
+```
+- **更新**: `synthesis-specification.md`、`ui-designer/style-guide.md`
+- **使设计令牌可用于任务生成**
+
+#### 预览系统
+
+运行 `ui-generate` 后，您将获得交互式预览工具：
+
+**快速预览**（直接浏览器）:
+```bash
+# 导航到原型目录
+cd .workflow/WFS-auth/.design/prototypes
+# 在浏览器中打开 index.html（双击或执行）:
+open index.html  # macOS
+start index.html  # Windows
+xdg-open index.html  # Linux
+```
+
+**完整预览**（本地服务器 - 推荐）:
+```bash
+cd .workflow/WFS-auth/.design/prototypes
+# 选择一个:
+python -m http.server 8080      # Python
+npx http-server -p 8080         # Node.js
+php -S localhost:8080           # PHP
+# 访问: http://localhost:8080
+```
+
+**预览功能**:
+- `index.html`: 包含所有原型的主导航
+- `compare.html`: 带视口控制的并排对比（桌面/平板/移动）
+- 同步滚动用于布局对比
+- 动态页面切换
+- 实时响应式测试
+
+---
+
 ### **任务与内存命令**
 
 | 命令 | 描述 |

RELEASE_NOTES_v3.2.3.md

@@ -1,252 +0,0 @@
-# v3.2.3 - Version Management System
-
-## 🎉 Release Date
-2025-10-03
-
-## ✨ Overview
-
-This release introduces a comprehensive version management and upgrade notification system, making it easy to track your Claude Code Workflow installation and stay up-to-date with the latest releases.
-
-## 🆕 New Features
-
-### `/version` Command
-
-A powerful new command that provides complete version information and automatic update checking:
-
-**Features:**
-- 📊 **Version Display**: Shows both local and global installation versions
-- 🌐 **GitHub Integration**: Fetches latest stable release and development commits
-- 🔄 **Smart Comparison**: Automatically compares installed version with latest available
-- 💡 **Upgrade Recommendations**: Provides installation commands for easy upgrading
-- ⚡ **Fast Execution**: 30-second timeout for network calls, graceful offline handling
-
-**Usage:**
-```bash
-/version
-```
-
-**Example Output:**
-```
-Installation Status:
-- Local: No project-specific installation
-- Global: ✅ Installed at ~/.claude
-  - Version: v3.2.3
-  - Installed: 2025-10-03T05:01:34Z
-
-Latest Releases:
-- Stable: v3.2.3 (2025-10-03T04:10:08Z)
-  - v3.2.3: Version Management System
-- Latest Commit: c5c36a2 (2025-10-03T05:00:06Z)
-  - fix: Optimize version command API calls and data extraction
-
-Status: ✅ You are on the latest stable version (3.2.3)
-```
-
-### Version Tracking System
-
-**Version Files:**
-- `.claude/version.json` - Local project installation tracking
-- `~/.claude/version.json` - Global installation tracking
-
-**Tracked Information:**
-```json
-{
-  "version": "v3.2.3",
-  "installation_mode": "Global",
-  "installation_path": "C:\\Users\\username\\.claude",
-  "source_branch": "main",
-  "installation_date_utc": "2025-10-03T05:01:34Z"
-}
-```
-
-### GitHub API Integration
-
-**Endpoints Used:**
-- **Latest Release**: `https://api.github.com/repos/catlog22/Claude-Code-Workflow/releases/latest`
-  - Extracts: tag_name, release name, published date
-- **Latest Commit**: `https://api.github.com/repos/catlog22/Claude-Code-Workflow/commits/main`
-  - Extracts: commit SHA, message, author date
-
-**Network Handling:**
-- 30-second timeout for slow connections
-- Graceful error handling for offline scenarios
-- No external dependencies (uses curl and grep/sed)
-
-## 🔄 What's Changed
-
-### Documentation Updates
-
-**Updated Files:**
-- ✅ `CHANGELOG.md` - Added comprehensive v3.2.3 release notes
-- ✅ `README.md` - Updated version badge to v3.2.3, added `/version` command
-- ✅ `README_CN.md` - Updated version badge and command reference (Chinese)
-- ✅ `.claude/commands/version.md` - Complete implementation guide
-
-**Version References:**
-- All version badges updated from v3.2.2 to v3.2.3
-- "What's New" sections updated with v3.2.3 features
-- Command reference tables include `/version` command
-
-### Installation Scripts Enhancement
-
-**Future Enhancement** (for next release):
-- Installation scripts will automatically create `version.json` files
-- Track installation mode (local vs global)
-- Record installation timestamp
-- Support version tracking for both stable and development installations
-
-## 📋 Version Comparison Scenarios
-
-### Scenario 1: Up to Date
-```
-✅ You are on the latest stable version (3.2.3)
-```
-
-### Scenario 2: Upgrade Available
-```
-⬆️ A newer stable version is available: v3.2.4
-Your version: 3.2.3
-
-To upgrade:
-PowerShell: iex (iwr -useb https://raw.githubusercontent.com/catlog22/Claude-Code-Workflow/main/install-remote.ps1)
-Bash: bash <(curl -fsSL https://raw.githubusercontent.com/catlog22/Claude-Code-Workflow/main/install-remote.sh)
-```
-
-### Scenario 3: Development Version
-```
-✨ You are running a development version (3.3.0-dev)
-This is newer than the latest stable release (v3.2.3)
-```
-
-## 🛠️ Technical Details
-
-### Implementation Highlights
-
-**Simple Bash Commands:**
-- No jq dependency required (uses grep/sed for JSON parsing)
-- Cross-platform compatible (Windows Git Bash, Linux, macOS)
-- Version comparison using `sort -V` for semantic versioning
-- Direct API access using curl with error suppression
-
-**Command Structure:**
-```bash
-# Check local version
-test -f ./.claude/version.json && cat ./.claude/version.json
-
-# Check global version
-test -f ~/.claude/version.json && cat ~/.claude/version.json
-
-# Fetch latest release (with timeout)
-curl -fsSL "https://api.github.com/repos/catlog22/Claude-Code-Workflow/releases/latest" 2>/dev/null
-
-# Extract version
-grep -o '"tag_name": *"[^"]*"' | cut -d'"' -f4
-
-# Compare versions
-printf "%s\n%s" "3.2.2" "3.2.3" | sort -V | tail -n 1
-```
-
-## 📊 Benefits
-
-### User Experience
-- 🔍 **Quick version check** with single command
-- 📊 **Comprehensive information** display (local, global, stable, dev)
-- 🔄 **Automatic upgrade notifications** when new versions available
-- 📈 **Development version tracking** for cutting-edge features
-- 🌐 **GitHub integration** for latest updates
-
-### DevOps
-- 📁 **Version tracking** in both local and global installations
-- 🕐 **Installation timestamp** for audit trails
-- 🔀 **Support for both stable and development** branches
-- ⚡ **Fast execution** with 30-second network timeout
-- 🛡️ **Graceful error handling** for offline scenarios
-
-## 🔗 Related Commands
-
-- `/cli:cli-init` - Initialize CLI tool configurations
-- `/workflow:session:list` - List workflow sessions
-- `/update-memory-full` - Update project documentation
-
-## 📦 Installation
-
-### Fresh Installation
-
-**Windows (PowerShell):**
-```powershell
-iex (iwr -useb https://raw.githubusercontent.com/catlog22/Claude-Code-Workflow/main/install-remote.ps1)
-```
-
-**Linux/macOS (Bash):**
-```bash
-bash <(curl -fsSL https://raw.githubusercontent.com/catlog22/Claude-Code-Workflow/main/install-remote.sh)
-```
-
-### Upgrade from v3.2.2
-
-Use the same installation commands above. The installer will automatically:
-1. Detect your existing installation
-2. Back up current files (if using `-BackupAll`)
-3. Update to v3.2.3
-4. Create/update `version.json` files
-
-## 🐛 Bug Fixes
-
-- Fixed commit message extraction to handle JSON escape sequences
-- Improved API endpoint from `/branches/main` to `/commits/main` for reliable commit info
-- Added 30-second timeout to all network calls for slow connections
-- Enhanced release name and published date extraction
-
-## 📚 Documentation
-
-### New Documentation
-- `.claude/commands/version.md` - Complete command implementation guide
-  - API endpoints and usage
-  - Timeout configuration
-  - Error handling scenarios
-  - Simple bash command examples
-
-### Updated Documentation
-- `CHANGELOG.md` - v3.2.3 release notes
-- `README.md` - Version badge and command reference
-- `README_CN.md` - Chinese version updates
-
-## 🙏 Credits
-
-This release includes contributions and improvements based on:
-- GitHub API integration for version detection
-- Cross-platform bash command compatibility
-- User feedback on installation and upgrade processes
-
-## 📝 Notes
-
-- **Backward Compatible**: All existing commands and workflows continue to work
-- **No Breaking Changes**: This is a minor release with new features only
-- **Optional Feature**: `/version` command is entirely optional, existing workflows unaffected
-
-## 🚀 What's Next
-
-**Planned for v3.2.4:**
-- Enhanced installation script to auto-create version.json
-- Version tracking in all installation modes
-- Automatic version detection during installation
-
-**Future Enhancements:**
-- Auto-update functionality (opt-in)
-- Version comparison in workflow sessions
-- Release notes display in CLI
-
----
-
-**Full Changelog**: [v3.2.2...v3.2.3](https://github.com/catlog22/Claude-Code-Workflow/compare/v3.2.2...v3.2.3)
-
-**Installation:**
-```bash
-# One-line install (recommended)
-bash <(curl -fsSL https://raw.githubusercontent.com/catlog22/Claude-Code-Workflow/main/install-remote.sh)
-
-# Or use specific version tag
-git clone -b v3.2.3 https://github.com/catlog22/Claude-Code-Workflow.git
-```
-
-🤖 Generated with [Claude Code](https://claude.com/claude-code)

install-remote.ps1

@@ -260,7 +260,8 @@ function Invoke-LocalInstaller {
     param(
         [string]$RepoDir,
         [string]$VersionInfo = "",
-        [string]$BranchInfo = ""
+        [string]$BranchInfo = "",
+        [string]$CommitSha = ""
     )
 
     $installerPath = Join-Path $RepoDir "Install-Claude.ps1"
@@ -285,9 +286,10 @@ function Invoke-LocalInstaller {
     if ($NonInteractive) { $params["NonInteractive"] = $NonInteractive }
     if ($BackupAll) { $params["BackupAll"] = $BackupAll }
 
-    # Pass version and branch information
+    # Pass version, branch, and commit information
     if ($VersionInfo) { $params["SourceVersion"] = $VersionInfo }
     if ($BranchInfo) { $params["SourceBranch"] = $BranchInfo }
+    if ($CommitSha) { $params["SourceCommit"] = $CommitSha }
 
     try {
         # Change to repo directory and run installer
@@ -562,14 +564,51 @@ function Main {
             throw "Extraction failed"
         }
 
+        # Get commit SHA from the downloaded repository first
+        $commitSha = ""
+        try {
+            Push-Location $repoDir
+            $commitSha = (git rev-parse --short HEAD 2>$null)
+            if (-not $commitSha) {
+                # Fallback: try to get from GitHub API
+                $commitUrl = "https://api.github.com/repos/catlog22/Claude-Code-Workflow/commits/$Branch"
+                $commitResponse = Invoke-RestMethod -Uri $commitUrl -UseBasicParsing -TimeoutSec 5 -ErrorAction SilentlyContinue
+                if ($commitResponse.sha) {
+                    $commitSha = $commitResponse.sha.Substring(0, 7)
+                }
+            }
+            Pop-Location
+        } catch {
+            Pop-Location
+            $commitSha = "unknown"
+        }
+
         # Determine version and branch information to pass
-        $versionToPass = if ($Tag) { $Tag } else { "latest" }
+        $versionToPass = ""
+
+        if ($Tag) {
+            # Specific tag version
+            $versionToPass = $Tag -replace '^v', ''  # Remove 'v' prefix
+        } elseif ($Version -eq "stable") {
+            # Auto-detected latest stable
+            $latestTag = Get-LatestRelease
+            if ($latestTag) {
+                $versionToPass = $latestTag -replace '^v', ''
+            } else {
+                # Fallback: use commit SHA as version
+                $versionToPass = "dev-$commitSha"
+            }
+        } else {
+            # Latest development or branch - use commit SHA as version
+            $versionToPass = "dev-$commitSha"
+        }
+
         $branchToPass = if ($Version -eq "branch") { $Branch } elseif ($Version -eq "latest") { "main" } elseif ($Tag) { $Tag } else { "main" }
 
-        Write-ColorOutput "Version info: $versionToPass (branch: $branchToPass)" $ColorInfo
+        Write-ColorOutput "Version info: $versionToPass (branch: $branchToPass, commit: $commitSha)" $ColorInfo
 
         # Run local installer with version information
-        $success = Invoke-LocalInstaller -RepoDir $repoDir -VersionInfo $versionToPass -BranchInfo $branchToPass
+        $success = Invoke-LocalInstaller -RepoDir $repoDir -VersionInfo $versionToPass -BranchInfo $branchToPass -CommitSha $commitSha
         if (-not $success) {
             throw "Installation script failed"
         }

install-remote.sh

@@ -209,6 +209,9 @@ function extract_repository() {
 
 function invoke_local_installer() {
     local repo_dir="$1"
+    local version_info="$2"
+    local branch_info="$3"
+    local commit_sha="$4"
     local installer_path="${repo_dir}/Install-Claude.sh"
 
     # Make installer executable
@@ -249,6 +252,19 @@ function invoke_local_installer() {
         params+=("-BackupAll")
     fi
 
+    # Pass version, branch, and commit information
+    if [ -n "$version_info" ]; then
+        params+=("-SourceVersion" "$version_info")
+    fi
+
+    if [ -n "$branch_info" ]; then
+        params+=("-SourceBranch" "$branch_info")
+    fi
+
+    if [ -n "$commit_sha" ]; then
+        params+=("-SourceCommit" "$commit_sha")
+    fi
+
     # Execute installer
     if (cd "$repo_dir" && "$installer_path" "${params[@]}"); then
         return 0
@@ -632,8 +648,54 @@ function main() {
         if [ $extract_status -eq 0 ] && [ -n "$repo_dir" ] && [ -d "$repo_dir" ]; then
             write_color "Extraction successful: $repo_dir" "$COLOR_SUCCESS"
 
-            # Run local installer
+            # Get commit SHA from the downloaded repository first
-            if invoke_local_installer "$repo_dir"; then
+            local commit_sha=""
+            if command -v git &> /dev/null && [ -d "$repo_dir/.git" ]; then
+                commit_sha=$(cd "$repo_dir" && git rev-parse --short HEAD 2>/dev/null || echo "unknown")
+            else
+                # Fallback: try to get from GitHub API
+                local temp_branch="main"
+                [ "$VERSION_TYPE" = "branch" ] && temp_branch="$BRANCH"
+                commit_sha=$(curl -fsSL "https://api.github.com/repos/catlog22/Claude-Code-Workflow/commits/$temp_branch" 2>/dev/null | grep -o '"sha": *"[^"]*"' | head -1 | cut -d'"' -f4 | cut -c1-7)
+                [ -z "$commit_sha" ] && commit_sha="unknown"
+            fi
+
+            # Determine version and branch information to pass
+            local version_to_pass=""
+            local branch_to_pass=""
+
+            if [ -n "$TAG_VERSION" ]; then
+                # Specific tag version - remove 'v' prefix
+                version_to_pass="${TAG_VERSION#v}"
+            elif [ "$VERSION_TYPE" = "stable" ]; then
+                # Auto-detected latest stable
+                local latest_tag
+                latest_tag=$(get_latest_release)
+                if [ -n "$latest_tag" ]; then
+                    version_to_pass="${latest_tag#v}"
+                else
+                    # Fallback: use commit SHA as version
+                    version_to_pass="dev-$commit_sha"
+                fi
+            else
+                # Latest development or branch - use commit SHA as version
+                version_to_pass="dev-$commit_sha"
+            fi
+
+            if [ "$VERSION_TYPE" = "branch" ]; then
+                branch_to_pass="$BRANCH"
+            elif [ "$VERSION_TYPE" = "latest" ]; then
+                branch_to_pass="main"
+            elif [ -n "$TAG_VERSION" ]; then
+                branch_to_pass="$TAG_VERSION"
+            else
+                branch_to_pass="main"
+            fi
+
+            write_color "Version info: $version_to_pass (branch: $branch_to_pass, commit: $commit_sha)" "$COLOR_INFO"
+
+            # Run local installer with version information
+            if invoke_local_installer "$repo_dir" "$version_to_pass" "$branch_to_pass" "$commit_sha"; then
                 success=true
                 echo ""
                 write_color "✓ Remote installation completed successfully!" "$COLOR_SUCCESS"

ui-instantiate-analysis.md

@@ -0,0 +1,231 @@
+# UI原型实例化脚本分析报告
+
+## 问题现象
+
+在执行 `ui-instantiate-prototypes.sh` 脚本时，生成了 `style-4` 的原型文件（如 `login-style-4-layout-1.html`），但实际上 `style-consolidation` 目录下只有3个样式目录（style-1, style-2, style-3）。
+
+## 调查结果
+
+### 1. 目录结构验证
+
+```bash
+# 实际存在的样式目录
+.workflow/.design/run-20251009-210559/style-consolidation/
+├── style-1/
+├── style-2/
+└── style-3/
+
+# 生成的原型文件包含
+prototypes/login-style-4-layout-1.html  ❌ 引用不存在的 ../style-consolidation/style-4/tokens.css
+prototypes/sidebar-style-4-layout-1.html  ❌ 引用不存在的 ../style-consolidation/style-4/tokens.css
+```
+
+### 2. consolidation-report.json 确认
+
+```json
+{
+  "variant_count": 3,  // 明确显示只有3个变体
+  "variants": [
+    {"id": "style-1"},
+    {"id": "style-2"},
+    {"id": "style-3"}
+  ]
+}
+```
+
+### 3. PREVIEW.md 显示异常
+
+```markdown
+- **Style Variants:** 4  ⚠️ 与实际不符
+- **Total Prototypes:** 24  (4 × 3 × 2 = 24)
+```
+
+### 4. 脚本auto_detect_style_variants()函数
+
+```bash
+# 位置：.claude/scripts/ui-instantiate-prototypes.sh 第52-71行
+auto_detect_style_variants() {
+    local base_path="$1"
+    local style_dir="$base_path/../style-consolidation"
+
+    # 统计style-*目录数量
+    local count=$(find "$style_dir" -maxdepth 1 -type d -name "style-*" | wc -l)
+    echo "$count"
+}
+```
+
+**验证测试**：
+```bash
+cd .workflow/.design/run-20251009-210559/style-consolidation
+find . -maxdepth 1 -type d -name "style-*" | wc -l
+# 输出：3 ✅ 函数逻辑正确
+```
+
+## 根本原因分析
+
+### ⚠️ 参数覆盖问题
+
+脚本虽然有自动检测功能，但**允许手动参数覆盖**：
+
+```bash
+# 自动检测模式（正确）
+ui-instantiate-prototypes.sh prototypes/  # 会自动检测到3个样式
+
+# 手动模式（错误来源）
+ui-instantiate-prototypes.sh prototypes/ "login,sidebar" 4 3  # 强制指定4个样式变体 ❌
+```
+
+### 🔍 实际调用场景
+
+根据工作流命令 `.claude/commands/workflow/ui-design/generate.md` 第79-82行：
+
+```bash
+# Phase 1: Path Resolution & Context Loading
+style_variants = --style-variants OR 3  # 默认为3
+```
+
+**推断的问题来源**：
+1. 工作流命令被手动调用时，传入了 `--style-variants 4`
+2. 这个参数被直接传递给 `ui-instantiate-prototypes.sh` 脚本
+3. 脚本没有验证参数值与实际目录数量是否匹配
+4. 导致生成了引用不存在的style-4目录的HTML文件
+
+## 问题影响
+
+### 生成的style-4文件问题
+
+所有 `*-style-4-*.html` 文件都会出现CSS加载失败：
+
+```html
+<!-- 文件中的CSS引用 -->
+<link rel="stylesheet" href="../style-consolidation/style-4/tokens.css">
+<!-- ❌ 该路径不存在，导致样式无法加载 -->
+```
+
+### 影响范围
+
+- `login-style-4-layout-{1,2,3}.html` - 3个文件 ❌
+- `sidebar-style-4-layout-{1,2,3}.html` - 3个文件 ❌
+- 对应的 `*-notes.md` 文件 - 6个说明文件（内容错误）
+
+## 解决方案
+
+### 方案1：重新生成（推荐）
+
+```bash
+cd .workflow/.design/run-20251009-210559/prototypes
+
+# 删除错误的style-4文件
+rm -f *-style-4-*
+
+# 重新运行脚本（使用自动检测）
+~/.claude/scripts/ui-instantiate-prototypes.sh . --session-id run-20251009-210559
+```
+
+### 方案2：脚本增强（预防）
+
+在 `ui-instantiate-prototypes.sh` 中添加参数验证：
+
+```bash
+# 在第239行之后添加
+# Validate STYLE_VARIANTS matches actual directories
+actual_styles=$(find "$BASE_PATH/../style-consolidation" -maxdepth 1 -type d -name "style-*" | wc -l)
+if [ "$STYLE_VARIANTS" -gt "$actual_styles" ]; then
+    log_warning "Requested $STYLE_VARIANTS style variants, but only found $actual_styles directories"
+    log_info "Auto-correcting to $actual_styles style variants"
+    STYLE_VARIANTS=$actual_styles
+fi
+```
+
+### 方案3：工作流命令修复
+
+在 `.claude/commands/workflow/ui-design/generate.md` 中添加验证：
+
+```bash
+# Phase 1: Path Resolution & Context Loading (第79-82行之后)
+style_variants = --style-variants OR 3  # Default to 3
+
+# 添加验证逻辑
+actual_styles = count_directories({base_path}/style-consolidation/style-*)
+IF style_variants > actual_styles:
+    WARN: "Requested {style_variants} styles, but only {actual_styles} exist"
+    REPORT: "Auto-correcting to {actual_styles} style variants"
+    style_variants = actual_styles
+
+VALIDATE: 1 <= style_variants <= 5
+```
+
+## 预防措施
+
+1. **优先使用自动检测**：
+   ```bash
+   # ✅ 推荐：让脚本自动检测
+   ui-instantiate-prototypes.sh prototypes/
+
+   # ⚠️ 谨慎：手动指定参数（需确保正确）
+   ui-instantiate-prototypes.sh prototypes/ "login,sidebar" 3 3
+   ```
+
+2. **验证consolidation输出**：
+   ```bash
+   # 生成原型前，先确认样式数量
+   jq '.variant_count' style-consolidation/consolidation-report.json
+   ```
+
+3. **使用工作流命令**：
+   ```bash
+   # 工作流命令会自动处理参数验证
+   /workflow:ui-design:generate --base-path ".workflow/.design/run-xxx"
+   ```
+
+## 技术细节
+
+### 自动检测逻辑流程
+
+```mermaid
+graph TD
+    A[调用脚本] --> B{检查参数数量}
+    B -->|1个参数| C[自动检测模式]
+    B -->|4个参数| D[手动模式]
+    C --> E[检测style目录]
+    D --> F[使用传入参数]
+    E --> G[验证目录存在]
+    F --> G
+    G -->|不匹配| H[⚠️ 生成错误文件]
+    G -->|匹配| I[✅ 正常生成]
+```
+
+### find命令行为
+
+```bash
+# 正确的检测命令
+find style-consolidation -maxdepth 1 -type d -name "style-*"
+# 输出：
+# style-consolidation/style-1
+# style-consolidation/style-2
+# style-consolidation/style-3
+
+# wc -l 统计行数 = 3 ✅
+
+# 注意：style-extraction 不会被匹配（它在父目录）
+# find . -maxdepth 1 -type d -name "style-*"
+# 只会在当前目录搜索，不会递归到子目录
+```
+
+## 总结
+
+### 问题根源
+✅ **确认**：脚本被手动调用时传入了错误的 `--style-variants 4` 参数，但实际只有3个样式目录存在。
+
+### 脚本行为
+✅ **确认**：`auto_detect_style_variants()` 函数逻辑正确，能够正确检测到3个样式目录。
+
+### 修复优先级
+1. 🔴 **立即**：删除错误的style-4文件，重新生成
+2. 🟡 **短期**：在脚本中添加参数验证逻辑
+3. 🟢 **长期**：在工作流命令中添加防护验证
+
+### 最佳实践
+- 优先使用脚本的自动检测模式
+- 在手动指定参数前，先验证 `consolidation-report.json`
+- 使用工作流命令而非直接调用脚本

ui-workflow-parameter-clarity-report.md

@@ -0,0 +1,425 @@
+# UI设计工作流参数清晰度分析报告
+
+## 📋 执行摘要
+
+**问题来源**：用户手动调用 `/workflow:ui-design:generate` 时传入了 `--style-variants 4`，但实际只有3个样式目录存在，导致生成了引用不存在CSS文件的 `style-4` 原型。
+
+**根本原因**：工作流命令链中参数命名不一致、验证缺失、文档说明不清晰。
+
+## 🔍 关键发现
+
+### 1. 参数命名不一致
+
+| 命令 | 参数名称 | 默认值 | 说明 |
+|------|---------|--------|------|
+| `extract` | `--variants` | 1 | ⚠️ 未在文档中明确说明默认值 |
+| `consolidate` | `--variants` | 所有变体 | ⚠️ 与extract同名但语义不同 |
+| `generate` | `--style-variants` | 3 | ⚠️ 名称不一致，默认值说明不清晰 |
+
+**问题**：
+- `extract` 和 `consolidate` 使用 `--variants`，但 `generate` 使用 `--style-variants`
+- `--variants` 在两个命令中含义不同：
+  - `extract`：生成多少个变体
+  - `consolidate`：处理多少个变体
+
+### 2. 命名转换混淆
+
+```
+extract 输出        → consolidate 处理      → generate 使用
+variant-1           → style-1/              → login-style-1-layout-1.html
+variant-2           → style-2/              → login-style-2-layout-1.html
+variant-3           → style-3/              → login-style-3-layout-1.html
+```
+
+**问题**：
+- `variant-N` 到 `style-N` 的转换没有文档说明
+- 增加了用户的认知负担
+- 容易造成混淆和错误
+
+### 3. 验证缺失
+
+#### ❌ 当前状态（generate.md 第79-82行）
+
+```bash
+# Phase 1: Path Resolution & Context Loading
+style_variants = --style-variants OR 3  # Default to 3
+VALIDATE: 1 <= style_variants <= 5
+```
+
+**问题**：
+- ✅ 验证范围（1-5）
+- ❌ 不验证是否匹配实际目录数量
+- ❌ 允许传入 `4` 但实际只有 `3` 个目录
+
+#### ✅ 应有的验证
+
+```bash
+style_variants = --style-variants OR 3
+actual_styles = count_directories({base_path}/style-consolidation/style-*)
+
+IF style_variants > actual_styles:
+    WARN: "Requested {style_variants} styles, but only {actual_styles} exist"
+    REPORT: "Auto-correcting to {actual_styles} style variants"
+    style_variants = actual_styles
+
+VALIDATE: 1 <= style_variants <= actual_styles
+```
+
+### 4. 文档清晰度问题
+
+#### extract.md
+
+**问题点**：
+- ⚠️ 默认值 `1` 未在 `usage` 或 `argument-hint` 中说明
+- ⚠️ 输出的 `variant-N` 命名未解释后续转换为 `style-N`
+
+**当前文档**（第580行附近）：
+```
+"id": "variant-2"  # 缺少说明这会成为 style-2 目录
+```
+
+#### consolidate.md
+
+**问题点**：
+- ⚠️ `--variants` 与 `extract` 同名但语义不同
+- ⚠️ 默认行为（处理所有变体）不够突出
+- ⚠️ `variant-N` → `style-N` 转换未文档化
+
+#### generate.md
+
+**问题点**：
+- ⚠️ `--style-variants` 名称与前置命令不一致
+- ⚠️ 默认值 `3` 的来源和意义不清晰
+- ⚠️ 自动检测机制未说明
+- ❌ 手动覆盖无验证
+
+**当前文档**（第79-82行）：
+```bash
+style_variants = --style-variants OR 3  # Default to 3
+VALIDATE: 1 <= style_variants <= 5
+```
+
+## 💡 改进方案
+
+### 方案1：代码层面改进（推荐）
+
+#### 1.1 统一参数命名
+
+```diff
+# extract.md
+- usage: /workflow:ui-design:extract [--variants <count>]
++ usage: /workflow:ui-design:extract [--style-variants <count>]
+
+# consolidate.md
+- usage: /workflow:ui-design:consolidate [--variants <count>]
++ usage: /workflow:ui-design:consolidate [--style-variants <count>]
+
+# generate.md (保持不变)
+  usage: /workflow:ui-design:generate [--style-variants <count>]
+```
+
+**优点**：
+- ✅ 全链路参数名称统一
+- ✅ 语义清晰（style-variants）
+- ✅ 降低混淆风险
+
+#### 1.2 添加验证逻辑（关键）
+
+##### generate.md 改进
+
+```bash
+# Phase 1: Path Resolution & Context Loading
+style_variants = --style-variants OR 3  # Default to 3
+
+# 🆕 添加验证逻辑
+actual_styles = count_directories({base_path}/style-consolidation/style-*)
+
+IF actual_styles == 0:
+    ERROR: "No style directories found in {base_path}/style-consolidation/"
+    SUGGEST: "Run /workflow:ui-design:consolidate first"
+    EXIT 1
+
+IF style_variants > actual_styles:
+    WARN: "⚠️ Requested {style_variants} style variants, but only {actual_styles} directories exist"
+    REPORT: "   Auto-correcting to {actual_styles} style variants"
+    REPORT: "   Available styles: {list_directories(style-consolidation/style-*)}"
+    style_variants = actual_styles
+
+VALIDATE: 1 <= style_variants <= actual_styles
+```
+
+##### ui-instantiate-prototypes.sh 改进
+
+在脚本第239行之后添加：
+
+```bash
+# Validate STYLE_VARIANTS matches actual directories
+if [ "$STYLE_VARIANTS" -gt 0 ]; then
+    actual_styles=$(find "$BASE_PATH/../style-consolidation" -maxdepth 1 -type d -name "style-*" 2>/dev/null | wc -l)
+
+    if [ "$actual_styles" -eq 0 ]; then
+        log_error "No style directories found in style-consolidation/"
+        log_info "Run /workflow:ui-design:consolidate first"
+        exit 1
+    fi
+
+    if [ "$STYLE_VARIANTS" -gt "$actual_styles" ]; then
+        log_warning "Requested $STYLE_VARIANTS style variants, but only found $actual_styles directories"
+        log_info "Auto-correcting to $actual_styles style variants"
+        STYLE_VARIANTS=$actual_styles
+    fi
+fi
+```
+
+#### 1.3 统一命名约定
+
+##### extract.md 改进
+
+修改输出格式（第580行附近）：
+
+```diff
+# style-cards.json 格式
+{
+  "style_cards": [
+    {
+-     "id": "variant-1",
++     "id": "style-1",
+      "name": "Modern Minimalist",
+      ...
+    }
+  ]
+}
+```
+
+### 方案2：文档层面改进
+
+#### 2.1 extract.md 文档改进
+
+```markdown
+## Parameters
+
+- `--style-variants <count>`: Number of style variants to extract. **Default: 1**
+  - Range: 1-5
+  - Each variant will become an independent design system (style-1, style-2, etc.)
+  - Output IDs use `style-N` format for consistency across the workflow
+
+## Output Format
+
+style-cards.json uses `style-N` IDs that directly correspond to directory names
+created by the consolidate command:
+
+- `style-1` → `style-consolidation/style-1/`
+- `style-2` → `style-consolidation/style-2/`
+```
+
+#### 2.2 consolidate.md 文档改进
+
+```markdown
+## Parameters
+
+- `--style-variants <count>`: Number of style variants to process from style-cards.json.
+  **Default: all available variants**
+  - Processes the first N variants from the style-cards array
+  - Creates separate `style-{n}` directories for each variant
+  - Range: 1 to count available in style-cards.json
+
+## Naming Convention
+
+Variants from extraction are materialized into style directories:
+- Input: `style-cards.json` with `style-1`, `style-2`, `style-3`
+- Output: `style-consolidation/style-1/`, `style-2/`, `style-3/` directories
+```
+
+#### 2.3 generate.md 文档改进
+
+```markdown
+## Parameters
+
+- `--style-variants <count>`: Number of style variants to generate prototypes for.
+  **Default: 3** (can be overridden)
+  - Range: 1-5
+  - ⚠️ **IMPORTANT**: This value MUST match the number of style-* directories in style-consolidation/
+  - If mismatched, the command will auto-correct to the actual directory count
+  - Use auto-detection (omit parameter) for safety
+
+## Auto-Detection vs Manual Override
+
+The command uses intelligent auto-detection:
+
+1. **Auto-Detection** (Recommended):
+   ```bash
+   /workflow:ui-design:generate --base-path ".workflow/.design/run-xxx"
+   # Automatically counts style-1/, style-2/, style-3/ → uses 3
+   ```
+
+2. **Manual Override** (Use with caution):
+   ```bash
+   /workflow:ui-design:generate --style-variants 4
+   # If only 3 styles exist, auto-corrects to 3 with warning
+   ```
+
+3. **Safety Check**:
+   - Command validates against actual `style-consolidation/style-*` directories
+   - Prevents generation of prototypes referencing non-existent styles
+   - Displays warning and auto-corrects if mismatch detected
+```
+
+### 方案3：用户指南改进
+
+创建 `.claude/commands/workflow/ui-design/README.md`：
+
+```markdown
+# UI Design Workflow Parameter Guide
+
+## Style Variant Count Flow
+
+### 1. Extract Phase
+```bash
+/workflow:ui-design:extract --style-variants 3
+# Generates: style-cards.json with 3 style variants (style-1, style-2, style-3)
+```
+
+### 2. Consolidate Phase
+```bash
+/workflow:ui-design:consolidate --style-variants 3
+# Creates: style-consolidation/style-1/, style-2/, style-3/
+```
+
+### 3. Generate Phase
+```bash
+# ✅ Recommended: Let it auto-detect
+/workflow:ui-design:generate --base-path ".workflow/.design/run-xxx"
+
+# ⚠️ Manual: Must match consolidation output
+/workflow:ui-design:generate --style-variants 3
+```
+
+## ⚠️ Common Mistakes
+
+### Mistake 1: Mismatched Counts
+```bash
+# ❌ Wrong: Request 4 styles when only 3 exist
+/workflow:ui-design:generate --style-variants 4
+# Only 3 directories in style-consolidation/ → ERROR
+
+# ✅ Correct: Omit parameter for auto-detection
+/workflow:ui-design:generate --base-path ".workflow/.design/run-xxx"
+```
+
+### Mistake 2: Naming Confusion
+```bash
+# ❌ Don't confuse variant-N with style-N
+# variant-N was old naming in style-cards.json
+# style-N is the current standard across all commands
+```
+
+## 🎯 Best Practices
+
+1. **Use auto-detection**: Omit `--style-variants` in generate command
+2. **Verify consolidation**: Check `consolidation-report.json` before generating
+3. **Use explore-auto**: Automated workflow prevents parameter mismatches
+4. **Check directories**: `ls .workflow/.design/run-xxx/style-consolidation/`
+```
+
+## 🎯 实施优先级
+
+### 🔴 高优先级（立即实施）
+
+1. **generate.md 添加验证逻辑**
+   - 防止参数不匹配问题再次发生
+   - 影响范围：所有手动调用 generate 命令的场景
+
+2. **ui-instantiate-prototypes.sh 添加验证**
+   - 脚本层面的最后防线
+   - 影响范围：所有原型生成操作
+
+3. **文档说明默认值和验证机制**
+   - 降低用户误用风险
+   - 影响范围：所有新用户和手动操作场景
+
+### 🟡 中优先级（短期改进）
+
+4. **统一参数命名为 --style-variants**
+   - 提高一致性，减少混淆
+   - 影响范围：需要更新多个命令文件
+
+5. **extract.md 统一使用 style-N 命名**
+   - 消除命名转换混淆
+   - 影响范围：需要更新 style-cards.json 格式
+
+### 🟢 低优先级（长期优化）
+
+6. **创建用户指南 README.md**
+   - 提供完整的参数使用指南
+   - 影响范围：文档层面，不影响功能
+
+## 📊 改进效果预测
+
+### 实施前
+
+```
+用户手动调用: /workflow:ui-design:generate --style-variants 4
+实际目录数: 3
+结果: ❌ 生成 login-style-4-layout-1.html 引用不存在的 CSS
+```
+
+### 实施后
+
+```
+用户手动调用: /workflow:ui-design:generate --style-variants 4
+实际目录数: 3
+
+验证检查:
+⚠️ Requested 4 style variants, but only 3 directories exist
+   Available: style-1, style-2, style-3
+   Auto-correcting to 3 style variants
+
+结果: ✅ 生成正确的 style-1, style-2, style-3 原型，避免错误
+```
+
+## 🔧 快速修复指南（针对当前问题）
+
+### 立即修复生成的错误文件
+
+```bash
+cd .workflow/.design/run-20251009-210559/prototypes
+
+# 删除错误的 style-4 文件
+rm -f *-style-4-*
+
+# 重新生成（使用自动检测）
+~/.claude/scripts/ui-instantiate-prototypes.sh . --session-id run-20251009-210559
+```
+
+### 预防未来错误
+
+```bash
+# ✅ 推荐：使用自动检测
+/workflow:ui-design:generate --base-path ".workflow/.design/run-xxx"
+
+# ⚠️ 如果必须手动指定，先验证
+jq '.variant_count' .workflow/.design/run-xxx/style-consolidation/consolidation-report.json
+# 输出: 3
+# 然后使用该数字
+/workflow:ui-design:generate --style-variants 3
+```
+
+## 📝 总结
+
+**核心问题**：
+- 参数命名不统一（`--variants` vs `--style-variants`）
+- 命名转换混淆（`variant-N` → `style-N`）
+- 验证缺失（不检查参数是否匹配实际目录）
+- 文档不清晰（默认值、自动检测机制说明不足）
+
+**关键改进**：
+1. ✅ 添加参数验证逻辑（防止不匹配）
+2. ✅ 统一参数命名（提高一致性）
+3. ✅ 完善文档说明（降低误用风险）
+4. ✅ 提供清晰的用户指南
+
+**预期效果**：
+- 🔒 杜绝参数不匹配问题
+- 📈 提高工作流鲁棒性
+- 🎓 降低用户学习成本
+- 🚀 提升整体用户体验