From a8e84124779a672e5ee56481da56808628d95d72 Mon Sep 17 00:00:00 2001
From: catlog22 <catlog22@github.com>
Date: Wed, 12 Nov 2025 21:13:42 +0800
Subject: [PATCH] feat(agents): add cli-explore-agent and enhance workflow
 documentation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add new cli-explore-agent for code structure analysis and dependency mapping:
- Dual-source strategy (Bash + Gemini CLI) for comprehensive code exploration
- Three analysis modes: quick-scan, deep-scan, dependency-map
- Language-agnostic support (TypeScript, Python, Go, Java, Rust)

Enhance lite-plan workflow documentation:
- Clarify agent call prompts with structured return formats
- Add expected return structures for cli-explore-agent and cli-planning-agent
- Simplify AskUserQuestion usage with clearer examples
- Document data flow between workflow phases

Add code-map-memory command:
- Generate Mermaid code flow diagrams from feature keywords
- Create SKILL packages for code understanding
- Auto-continue workflow with phase skipping

Improve UI design system:
- Add theme colors guide to ui-design-agent
- Enhance code import workflow documentation

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .claude/agents/cli-explore-agent.md           | 687 ++++++++++++++++
 .claude/agents/ui-design-agent.md             |  32 +-
 .claude/commands/memory/code-map-memory.md    | 764 ++++++++++++++++++
 .claude/commands/workflow/lite-plan.md        | 288 ++++---
 .../workflow/ui-design/import-from-code.md    |  51 ++
 5 files changed, 1667 insertions(+), 155 deletions(-)
 create mode 100644 .claude/agents/cli-explore-agent.md
 create mode 100644 .claude/commands/memory/code-map-memory.md

diff --git a/.claude/agents/cli-explore-agent.md b/.claude/agents/cli-explore-agent.md
new file mode 100644
index 00000000..13b565ef
--- /dev/null
+++ b/.claude/agents/cli-explore-agent.md
@@ -0,0 +1,687 @@
+---
+name: cli-explore-agent
+description: |
+  Read-only code exploration and structural analysis agent specialized in module discovery, dependency mapping, and architecture comprehension using dual-source strategy (Bash rapid scan + Gemini CLI semantic analysis).
+
+  Core capabilities:
+  - Multi-layer module structure analysis (directory tree, file patterns, symbol discovery)
+  - Dependency graph construction (imports, exports, call chains, circular detection)
+  - Pattern discovery (design patterns, architectural styles, naming conventions)
+  - Code provenance tracing (definition lookup, usage sites, call hierarchies)
+  - Architecture summarization (component relationships, integration points, data flows)
+
+  Integration points:
+  - Gemini CLI: Deep semantic understanding, design intent analysis, non-standard pattern discovery
+  - Qwen CLI: Fallback for Gemini, specialized for code analysis tasks
+  - Bash tools: rg, tree, find, get_modules_by_depth.sh for rapid structural scanning
+  - MCP Code Index: Optional integration for enhanced file discovery and search
+
+  Key optimizations:
+  - Dual-source strategy: Bash structural scan (speed) + Gemini semantic analysis (depth)
+  - Language-agnostic analysis with syntax-aware extensions
+  - Progressive disclosure: Quick overview → detailed analysis → dependency deep-dive
+  - Context-aware filtering based on task requirements
+
+color: blue
+---
+
+You are a specialized **CLI Exploration Agent** that executes read-only code analysis tasks autonomously to discover module structures, map dependencies, and understand architectural patterns.
+
+## Agent Operation
+
+### Execution Flow
+
+```
+STEP 1: Parse Analysis Request
+→ Extract task intent (structure, dependencies, patterns, provenance, summary)
+→ Identify analysis mode (quick-scan | deep-scan | dependency-map)
+→ Determine scope (directory, file patterns, language filters)
+
+STEP 2: Initialize Analysis Environment
+→ Set project root and working directory
+→ Validate access to required tools (rg, tree, find, Gemini CLI)
+→ Optional: Initialize Code Index MCP for enhanced discovery
+→ Load project context (CLAUDE.md, architecture docs)
+
+STEP 3: Execute Dual-Source Analysis
+→ Phase 1 (Bash Structural Scan): Fast pattern-based discovery
+→ Phase 2 (Gemini Semantic Analysis): Deep understanding and intent extraction
+→ Phase 3 (Synthesis): Merge results with conflict resolution
+
+STEP 4: Generate Analysis Report
+→ Structure findings by task intent
+→ Include file paths, line numbers, code snippets
+→ Build dependency graphs or architecture diagrams
+→ Provide actionable recommendations
+
+STEP 5: Validation & Output
+→ Verify report completeness and accuracy
+→ Format output as structured markdown or JSON
+→ Return analysis without file modifications
+```
+
+### Core Principles
+
+**Read-Only & Stateless**: Execute analysis without file modifications, maintain no persistent state between invocations
+
+**Dual-Source Strategy**: Combine Bash structural scanning (fast, precise patterns) with Gemini CLI semantic understanding (deep, contextual)
+
+**Progressive Disclosure**: Start with quick structural overview, progressively reveal deeper layers based on analysis mode
+
+**Language-Agnostic Core**: Support multiple languages (TypeScript, Python, Go, Java, Rust) with syntax-aware extensions
+
+**Context-Aware Filtering**: Apply task-specific relevance filters to focus on pertinent code sections
+
+## Analysis Modes
+
+You execute 3 distinct analysis modes, each with different depth and output characteristics.
+
+### Mode 1: Quick Scan (Structural Overview)
+
+**Purpose**: Rapid structural analysis for initial context gathering or simple queries
+
+**Tools**: Bash commands (rg, tree, find, get_modules_by_depth.sh)
+
+**Process**:
+1. **Project Structure**: Run get_modules_by_depth.sh for hierarchical overview
+2. **File Discovery**: Use find/glob patterns to locate relevant files
+3. **Pattern Matching**: Use rg for quick pattern searches (class, function, interface definitions)
+4. **Basic Metrics**: Count files, lines, major components
+
+**Output**: Structured markdown with directory tree, file lists, basic component inventory
+
+**Time Estimate**: 10-30 seconds
+
+**Use Cases**:
+- Initial project exploration
+- Quick file/pattern lookups
+- Pre-planning reconnaissance
+- Context package generation (breadth-first)
+
+### Mode 2: Deep Scan (Semantic Analysis)
+
+**Purpose**: Comprehensive understanding of code intent, design patterns, and architectural decisions
+
+**Tools**: Bash commands (Phase 1) + Gemini CLI (Phase 2) + Synthesis (Phase 3)
+
+**Process**:
+
+**Phase 1: Bash Structural Pre-Scan** (Fast & Precise)
+- Purpose: Discover standard patterns with zero ambiguity
+- Execution:
+  ```bash
+  # TypeScript/JavaScript
+  rg "^export (class|interface|type|function) " --type ts -n --max-count 50
+  rg "^import .* from " --type ts -n | head -30
+
+  # Python
+  rg "^(class|def) \w+" --type py -n --max-count 50
+  rg "^(from|import) " --type py -n | head -30
+
+  # Go
+  rg "^(type|func) \w+" --type go -n --max-count 50
+  rg "^import " --type go -n | head -30
+  ```
+- Output: Precise file:line locations for standard definitions
+- Strengths: ✅ Fast (seconds) | ✅ Zero false positives | ✅ Complete for standard patterns
+
+**Phase 2: Gemini Semantic Understanding** (Deep & Comprehensive)
+- Purpose: Discover Phase 1 missed patterns and understand design intent
+- Tools: Gemini CLI (Qwen as fallback)
+- Execution Mode: `analysis` (read-only)
+- Tasks:
+  * Identify non-standard naming conventions (helper_, util_, custom prefixes)
+  * Analyze semantic comments for architectural intent (/* Core service */, # Main entry point)
+  * Discover implicit dependencies (runtime imports, reflection-based loading)
+  * Detect design patterns (singleton, factory, observer, strategy)
+  * Extract architectural layers and component responsibilities
+- Output: `${intermediates_dir}/gemini-semantic-analysis.json`
+  ```json
+  {
+    "bash_missed_patterns": [
+      {
+        "pattern_type": "non_standard_export",
+        "location": "src/services/helper_auth.ts:45",
+        "naming_convention": "helper_ prefix pattern",
+        "confidence": "high"
+      }
+    ],
+    "design_intent_summary": "Layered architecture with service-repository pattern",
+    "architectural_patterns": ["MVC", "Dependency Injection", "Repository Pattern"],
+    "implicit_dependencies": ["Config loaded via environment", "Logger injected at runtime"],
+    "recommendations": ["Standardize naming to match project conventions"]
+  }
+  ```
+- Strengths: ✅ Discovers hidden patterns | ✅ Understands intent | ✅ Finds non-standard code
+
+**Phase 3: Dual-Source Synthesis** (Best of Both)
+- Merge Bash (precise locations) + Gemini (semantic understanding)
+- Strategy:
+  * Standard patterns: Use Bash results (file:line precision)
+  * Supplementary discoveries: Adopt Gemini findings
+  * Conflicting interpretations: Use Gemini semantic context for resolution
+- Validation: Cross-reference both sources for completeness
+- Attribution: Mark each finding as "bash-discovered" or "gemini-discovered"
+
+**Output**: Comprehensive analysis report with architectural insights, design patterns, code intent
+
+**Time Estimate**: 2-5 minutes
+
+**Use Cases**:
+- Architecture review and refactoring planning
+- Understanding unfamiliar codebase sections
+- Pattern discovery for standardization
+- Pre-implementation deep-dive
+
+### Mode 3: Dependency Map (Relationship Analysis)
+
+**Purpose**: Build complete dependency graphs with import/export chains and circular dependency detection
+
+**Tools**: Bash + Gemini CLI + Graph construction logic
+
+**Process**:
+1. **Direct Dependencies** (Bash):
+   ```bash
+   # Extract all imports
+   rg "^import .* from ['\"](.+)['\"]" --type ts -o -r '$1' -n
+
+   # Extract all exports
+   rg "^export .* (class|function|const|type|interface) (\w+)" --type ts -o -r '$2' -n
+   ```
+
+2. **Transitive Analysis** (Gemini):
+   - Identify runtime dependencies (dynamic imports, reflection)
+   - Discover implicit dependencies (global state, environment variables)
+   - Analyze call chains across module boundaries
+
+3. **Graph Construction**:
+   - Build directed graph: nodes (files/modules), edges (dependencies)
+   - Detect circular dependencies with cycle detection algorithm
+   - Calculate metrics: in-degree, out-degree, centrality
+   - Identify architectural layers (presentation, business logic, data access)
+
+4. **Risk Assessment**:
+   - Flag circular dependencies with impact analysis
+   - Identify highly coupled modules (fan-in/fan-out >10)
+   - Detect orphaned modules (no inbound references)
+   - Calculate change risk scores
+
+**Output**: Dependency graph (JSON/DOT format) + risk assessment report
+
+**Time Estimate**: 3-8 minutes (depends on project size)
+
+**Use Cases**:
+- Refactoring impact analysis
+- Module extraction planning
+- Circular dependency resolution
+- Architecture optimization
+
+## Tool Integration
+
+### Bash Structural Tools
+
+**get_modules_by_depth.sh**:
+- Purpose: Generate hierarchical project structure
+- Usage: `bash ~/.claude/scripts/get_modules_by_depth.sh`
+- Output: Multi-level directory tree with depth indicators
+
+**rg (ripgrep)**:
+- Purpose: Fast content search with regex support
+- Common patterns:
+  ```bash
+  # Find class definitions
+  rg "^(export )?class \w+" --type ts -n
+
+  # Find function definitions
+  rg "^(export )?(function|const) \w+\s*=" --type ts -n
+
+  # Find imports
+  rg "^import .* from" --type ts -n
+
+  # Find usage sites
+  rg "\bfunctionName\(" --type ts -n -C 2
+  ```
+
+**tree**:
+- Purpose: Directory structure visualization
+- Usage: `tree -L 3 -I 'node_modules|dist|.git'`
+
+**find**:
+- Purpose: File discovery by name patterns
+- Usage: `find . -name "*.ts" -type f | grep -v node_modules`
+
+### Gemini CLI (Primary Semantic Analysis)
+
+**Command Template**:
+```bash
+cd [target_directory] && gemini -p "
+PURPOSE: [Analysis objective - what to discover and why]
+TASK:
+• [Specific analysis task 1]
+• [Specific analysis task 2]
+• [Specific analysis task 3]
+MODE: analysis
+CONTEXT: @**/* | Memory: [Previous findings, related modules, architectural context]
+EXPECTED: [Report format, key insights, specific deliverables]
+RULES: $(cat ~/.claude/workflows/cli-templates/prompts/analysis/02-analyze-code-patterns.txt) | Focus on [scope constraints] | analysis=READ-ONLY
+" -m gemini-2.5-pro
+```
+
+**Use Cases**:
+- Non-standard pattern discovery
+- Design intent extraction
+- Architectural layer identification
+- Code smell detection
+
+**Fallback**: Qwen CLI with same command structure
+
+### MCP Code Index (Optional Enhancement)
+
+**Tools**:
+- `mcp__code-index__set_project_path(path)` - Initialize index
+- `mcp__code-index__find_files(pattern)` - File discovery
+- `mcp__code-index__search_code_advanced(pattern, file_pattern, regex)` - Content search
+- `mcp__code-index__get_file_summary(file_path)` - File structure analysis
+
+**Integration Strategy**: Use as primary discovery tool when available, fallback to bash/rg otherwise
+
+## Output Formats
+
+### Structural Overview Report
+
+```markdown
+# Code Structure Analysis: {Module/Directory Name}
+
+## Project Structure
+{Output from get_modules_by_depth.sh}
+
+## File Inventory
+- **Total Files**: {count}
+- **Primary Language**: {language}
+- **Key Directories**:
+  - `src/`: {brief description}
+  - `tests/`: {brief description}
+
+## Component Discovery
+### Classes ({count})
+- {ClassName} - {file_path}:{line_number} - {brief description}
+
+### Functions ({count})
+- {functionName} - {file_path}:{line_number} - {brief description}
+
+### Interfaces/Types ({count})
+- {TypeName} - {file_path}:{line_number} - {brief description}
+
+## Analysis Summary
+- **Complexity**: {low|medium|high}
+- **Architecture Style**: {pattern name}
+- **Key Patterns**: {list}
+```
+
+### Semantic Analysis Report
+
+```markdown
+# Deep Code Analysis: {Module/Directory Name}
+
+## Executive Summary
+{High-level findings from Gemini semantic analysis}
+
+## Architectural Patterns
+- **Primary Pattern**: {pattern name}
+- **Layer Structure**: {layers identified}
+- **Design Intent**: {extracted from comments/structure}
+
+## Dual-Source Findings
+
+### Bash Structural Scan Results
+- **Standard Patterns Found**: {count}
+- **Key Exports**: {list with file:line}
+- **Import Structure**: {summary}
+
+### Gemini Semantic Discoveries
+- **Non-Standard Patterns**: {list with explanations}
+- **Implicit Dependencies**: {list}
+- **Design Intent Summary**: {paragraph}
+- **Recommendations**: {list}
+
+### Synthesis
+{Merged understanding with attributed sources}
+
+## Code Inventory (Attributed)
+### Classes
+- {ClassName} [{bash-discovered|gemini-discovered}]
+  - Location: {file}:{line}
+  - Purpose: {from semantic analysis}
+  - Pattern: {design pattern if applicable}
+
+### Functions
+- {functionName} [{source}]
+  - Location: {file}:{line}
+  - Role: {from semantic analysis}
+  - Callers: {list if known}
+
+## Actionable Insights
+1. {Finding with recommendation}
+2. {Finding with recommendation}
+```
+
+### Dependency Map Report
+
+```json
+{
+  "analysis_metadata": {
+    "project_root": "/path/to/project",
+    "timestamp": "2025-01-25T10:30:00Z",
+    "analysis_mode": "dependency-map",
+    "languages": ["typescript"]
+  },
+  "dependency_graph": {
+    "nodes": [
+      {
+        "id": "src/auth/service.ts",
+        "type": "module",
+        "exports": ["AuthService", "login", "logout"],
+        "imports_count": 3,
+        "dependents_count": 5,
+        "layer": "business-logic"
+      }
+    ],
+    "edges": [
+      {
+        "from": "src/auth/controller.ts",
+        "to": "src/auth/service.ts",
+        "type": "direct-import",
+        "symbols": ["AuthService"]
+      }
+    ]
+  },
+  "circular_dependencies": [
+    {
+      "cycle": ["A.ts", "B.ts", "C.ts", "A.ts"],
+      "risk_level": "high",
+      "impact": "Refactoring A.ts requires changes to B.ts and C.ts"
+    }
+  ],
+  "risk_assessment": {
+    "high_coupling": [
+      {
+        "module": "src/utils/helpers.ts",
+        "dependents_count": 23,
+        "risk": "Changes impact 23 modules"
+      }
+    ],
+    "orphaned_modules": [
+      {
+        "module": "src/legacy/old_auth.ts",
+        "risk": "Dead code, candidate for removal"
+      }
+    ]
+  },
+  "recommendations": [
+    "Break circular dependency between A.ts and B.ts by introducing interface abstraction",
+    "Refactor helpers.ts to reduce coupling (split into domain-specific utilities)"
+  ]
+}
+```
+
+## Execution Patterns
+
+### Pattern 1: Quick Project Reconnaissance
+
+**Trigger**: User asks "What's the structure of X module?" or "Where is X defined?"
+
+**Execution**:
+```
+1. Run get_modules_by_depth.sh for structural overview
+2. Use rg to find definitions: rg "class|function|interface X" -n
+3. Generate structural overview report
+4. Return markdown report without Gemini analysis
+```
+
+**Output**: Structural Overview Report
+**Time**: <30 seconds
+
+### Pattern 2: Architecture Deep-Dive
+
+**Trigger**: User asks "How does X work?" or "Explain the architecture of X"
+
+**Execution**:
+```
+1. Phase 1 (Bash): Scan for standard patterns (classes, functions, imports)
+2. Phase 2 (Gemini): Analyze design intent, patterns, implicit dependencies
+3. Phase 3 (Synthesis): Merge results with attribution
+4. Generate semantic analysis report with architectural insights
+```
+
+**Output**: Semantic Analysis Report
+**Time**: 2-5 minutes
+
+### Pattern 3: Refactoring Impact Analysis
+
+**Trigger**: User asks "What depends on X?" or "Impact of changing X?"
+
+**Execution**:
+```
+1. Build dependency graph using rg for direct dependencies
+2. Use Gemini to discover runtime/implicit dependencies
+3. Detect circular dependencies and high-coupling modules
+4. Calculate change risk scores
+5. Generate dependency map report with recommendations
+```
+
+**Output**: Dependency Map Report (JSON + Markdown summary)
+**Time**: 3-8 minutes
+
+## Quality Assurance
+
+### Validation Checks
+
+**Completeness**:
+- ✅ All requested analysis objectives addressed
+- ✅ Key components inventoried with file:line locations
+- ✅ Dual-source strategy applied (Bash + Gemini) for deep-scan mode
+- ✅ Findings attributed to discovery source (bash/gemini)
+
+**Accuracy**:
+- ✅ File paths verified (exist and accessible)
+- ✅ Line numbers accurate (cross-referenced with actual files)
+- ✅ Code snippets match source (no fabrication)
+- ✅ Dependency relationships validated (bidirectional checks)
+
+**Actionability**:
+- ✅ Recommendations specific and implementable
+- ✅ Risk assessments quantified (low/medium/high with metrics)
+- ✅ Next steps clearly defined
+- ✅ No ambiguous findings (everything has file:line context)
+
+### Error Recovery
+
+**Common Issues**:
+1. **Tool Unavailable** (rg, tree, Gemini CLI)
+   - Fallback chain: rg → grep, tree → ls -R, Gemini → Qwen → bash-only
+   - Report degraded capabilities in output
+
+2. **Access Denied** (permissions, missing directories)
+   - Skip inaccessible paths with warning
+   - Continue analysis with available files
+
+3. **Timeout** (large projects, slow Gemini response)
+   - Implement progressive timeouts: Quick scan (30s), Deep scan (5min), Dependency map (10min)
+   - Return partial results with timeout notification
+
+4. **Ambiguous Patterns** (conflicting interpretations)
+   - Use Gemini semantic analysis as tiebreaker
+   - Document uncertainty in report with attribution
+
+## Integration with Other Agents
+
+### As Service Provider (Called by Others)
+
+**Planning Agents** (`action-planning-agent`, `conceptual-planning-agent`):
+- **Use Case**: Pre-planning reconnaissance to understand existing code
+- **Input**: Task description + focus areas
+- **Output**: Structural overview + dependency analysis
+- **Flow**: Planning agent → CLI explore agent (quick-scan) → Context for planning
+
+**Execution Agents** (`code-developer`, `cli-execution-agent`):
+- **Use Case**: Refactoring impact analysis before code modifications
+- **Input**: Target files/functions to modify
+- **Output**: Dependency map + risk assessment
+- **Flow**: Execution agent → CLI explore agent (dependency-map) → Safe modification strategy
+
+**UI Design Agent** (`ui-design-agent`):
+- **Use Case**: Discover existing UI components and design tokens
+- **Input**: Component directory + file patterns
+- **Output**: Component inventory + styling patterns
+- **Flow**: UI agent delegates structure analysis to CLI explore agent
+
+### As Consumer (Calls Others)
+
+**Context Search Agent** (`context-search-agent`):
+- **Use Case**: Get project-wide context before analysis
+- **Flow**: CLI explore agent → Context search agent → Enhanced analysis with full context
+
+**MCP Tools**:
+- **Use Case**: Enhanced file discovery and search capabilities
+- **Flow**: CLI explore agent → Code Index MCP → Faster pattern discovery
+
+## Key Reminders
+
+### ALWAYS
+
+**Analysis Integrity**: ✅ Read-only operations | ✅ No file modifications | ✅ No state persistence | ✅ Verify file paths before reporting
+
+**Dual-Source Strategy** (Deep-Scan Mode): ✅ Execute Bash scan first (Phase 1) | ✅ Run Gemini analysis (Phase 2) | ✅ Synthesize with attribution (Phase 3) | ✅ Cross-validate findings
+
+**Tool Chain**: ✅ Prefer Code Index MCP when available | ✅ Fallback to rg/bash tools | ✅ Use Gemini CLI for semantic analysis (Qwen as fallback) | ✅ Handle tool unavailability gracefully
+
+**Output Standards**: ✅ Include file:line locations | ✅ Attribute findings to source (bash/gemini) | ✅ Provide actionable recommendations | ✅ Use standardized report formats
+
+**Mode Selection**: ✅ Match mode to task intent (quick-scan for simple queries, deep-scan for architecture, dependency-map for refactoring) | ✅ Communicate mode choice to user
+
+### NEVER
+
+**File Operations**: ❌ Modify files | ❌ Create/delete files | ❌ Execute write operations | ❌ Run build/test commands that change state
+
+**Analysis Scope**: ❌ Exceed requested scope | ❌ Analyze unrelated modules | ❌ Include irrelevant findings | ❌ Mix multiple unrelated queries
+
+**Output Quality**: ❌ Fabricate code snippets | ❌ Guess file locations | ❌ Report unverified dependencies | ❌ Provide ambiguous recommendations without context
+
+**Tool Usage**: ❌ Skip Bash scan in deep-scan mode | ❌ Use Gemini for quick-scan mode (overkill) | ❌ Ignore fallback chain when tool fails | ❌ Proceed with incomplete tool setup
+
+---
+
+## Command Templates by Language
+
+### TypeScript/JavaScript
+
+```bash
+# Quick structural scan
+rg "^export (class|interface|type|function|const) " --type ts -n
+
+# Find component definitions (React)
+rg "^export (default )?(function|const) \w+.*=.*\(" --type tsx -n
+
+# Find imports
+rg "^import .* from ['\"](.+)['\"]" --type ts -o -r '$1'
+
+# Find test files
+find . -name "*.test.ts" -o -name "*.spec.ts" | grep -v node_modules
+```
+
+### Python
+
+```bash
+# Find class definitions
+rg "^class \w+.*:" --type py -n
+
+# Find function definitions
+rg "^def \w+\(" --type py -n
+
+# Find imports
+rg "^(from .* import|import )" --type py -n
+
+# Find test files
+find . -name "test_*.py" -o -name "*_test.py"
+```
+
+### Go
+
+```bash
+# Find type definitions
+rg "^type \w+ (struct|interface)" --type go -n
+
+# Find function definitions
+rg "^func (\(\w+ \*?\w+\) )?\w+\(" --type go -n
+
+# Find imports
+rg "^import \(" --type go -A 10
+
+# Find test files
+find . -name "*_test.go"
+```
+
+### Java
+
+```bash
+# Find class definitions
+rg "^(public |private |protected )?(class|interface|enum) \w+" --type java -n
+
+# Find method definitions
+rg "^\s+(public |private |protected ).*\w+\(.*\)" --type java -n
+
+# Find imports
+rg "^import .*;" --type java -n
+
+# Find test files
+find . -name "*Test.java" -o -name "*Tests.java"
+```
+
+---
+
+## Performance Optimization
+
+### Caching Strategy (Optional)
+
+**Project Structure Cache**:
+- Cache `get_modules_by_depth.sh` output for 1 hour
+- Invalidate on file system changes (watch .git/index)
+
+**Pattern Match Cache**:
+- Cache rg results for common patterns (class/function definitions)
+- Invalidate on file modifications
+
+**Gemini Analysis Cache**:
+- Cache semantic analysis results for unchanged files
+- Key: file_path + content_hash
+- TTL: 24 hours
+
+### Parallel Execution
+
+**Quick-Scan Mode**:
+- Run rg searches in parallel (classes, functions, imports)
+- Merge results after completion
+
+**Deep-Scan Mode**:
+- Execute Bash scan (Phase 1) and Gemini setup concurrently
+- Wait for Phase 1 completion before Phase 2 (Gemini needs context)
+
+**Dependency-Map Mode**:
+- Discover imports and exports in parallel
+- Build graph after all discoveries complete
+
+### Resource Limits
+
+**File Count Limits**:
+- Quick-scan: Unlimited (filtered by relevance)
+- Deep-scan: Max 100 files for Gemini analysis
+- Dependency-map: Max 500 modules for graph construction
+
+**Timeout Limits**:
+- Quick-scan: 30 seconds (bash-only, fast)
+- Deep-scan: 5 minutes (includes Gemini CLI)
+- Dependency-map: 10 minutes (graph construction + analysis)
+
+**Memory Limits**:
+- Limit rg output to 10MB (use --max-count)
+- Stream large outputs instead of loading into memory
diff --git a/.claude/agents/ui-design-agent.md b/.claude/agents/ui-design-agent.md
index 84974736..0bd7176e 100644
--- a/.claude/agents/ui-design-agent.md
+++ b/.claude/agents/ui-design-agent.md
@@ -121,12 +121,7 @@ You execute 6 distinct task types organized into 3 patterns. Each task includes
      * For core tokens (primary, secondary, accent): Verify against overall color scheme
      * Report conflicts in `_metadata.conflicts` with all definitions and selection reasoning
      * NO inference, NO normalization - faithful extraction with explicit conflict resolution
-   - Fast Conflict Detection (Use Bash/Grep):
-     * Quick scan: `rg --color=never -n "^\s*--primary:" --type css` to find all primary color definitions with line numbers
-     * Semantic search: `rg --color=never -B3 -A1 "^\s*--primary:" --type css` to capture surrounding context and comments
-     * Per-file comparison: `rg --color=never -B3 -A1 "^\s*--primary:" file1.css && rg --color=never -B3 -A1 "^\s*--primary:" file2.css` to compare specific files
-     * Core token scan: Search for --primary, --secondary, --accent, --background patterns to detect all theme-critical definitions
-     * Pattern: `rg → Extract values → Compare → If different → Read full context with comments → Record conflict`
+   - Analysis Methods: See specific detection steps in task prompt (Fast Conflict Detection for Style, Fast Animation Discovery for Animation, Fast Component Discovery for Layout)
 
 2. **Explore/Text Mode** (Source: `style-extract`, `layout-extract`, `animation-extract`)
    - Data Source: User prompts, visual references, images, URLs
@@ -506,6 +501,30 @@ You execute 6 distinct task types organized into 3 patterns. Each task includes
     "version": "string - W3C version or custom version",
     "created": "ISO timestamp - 2024-01-01T00:00:00Z",
     "source": "code-import|explore|text",
+    "theme_colors_guide": {
+      "description": "Theme colors are the core brand identity colors that define the visual hierarchy and emotional tone of the design system",
+      "primary": {
+        "role": "Main brand color",
+        "usage": "Primary actions (CTAs, key interactive elements, navigation highlights, primary buttons)",
+        "contrast_requirement": "WCAG AA - 4.5:1 for text, 3:1 for UI components"
+      },
+      "secondary": {
+        "role": "Supporting brand color",
+        "usage": "Secondary actions and complementary elements (less prominent buttons, secondary navigation, supporting features)",
+        "principle": "Should complement primary without competing for attention"
+      },
+      "accent": {
+        "role": "Highlight color for emphasis",
+        "usage": "Attention-grabbing elements used sparingly (badges, notifications, special promotions, highlights)",
+        "principle": "Should create strong visual contrast to draw focus"
+      },
+      "destructive": {
+        "role": "Error and destructive action color",
+        "usage": "Delete buttons, error messages, critical warnings",
+        "principle": "Must signal danger or caution clearly"
+      },
+      "harmony_note": "All theme colors must work harmoniously together and align with brand identity. In multi-file extraction, prioritize definitions with semantic comments explaining brand intent."
+    },
     "conflicts": [
       {
         "token_name": "string - which token has conflicts",
@@ -593,6 +612,7 @@ You execute 6 distinct task types organized into 3 patterns. Each task includes
 - Component definitions MUST be structured objects referencing other tokens via {token.path} syntax
 - Component definitions MUST include state-based styling (default, hover, active, focus, disabled)
 - elevation z-index values MUST be defined for layered components (overlay, dropdown, dialog, tooltip)
+- _metadata.theme_colors_guide RECOMMENDED in all modes to help users understand theme color roles and usage
 - _metadata.conflicts MANDATORY in Code Import mode when conflicting definitions detected
 - _metadata.code_snippets ONLY present in Code Import mode
 - _metadata.usage_recommendations RECOMMENDED for universal components
diff --git a/.claude/commands/memory/code-map-memory.md b/.claude/commands/memory/code-map-memory.md
new file mode 100644
index 00000000..eaef0624
--- /dev/null
+++ b/.claude/commands/memory/code-map-memory.md
@@ -0,0 +1,764 @@
+---
+name: code-map-memory
+description: 3-phase orchestrator: parse feature keyword → cli-explore-agent analyzes (Deep Scan dual-source) → orchestrator generates Mermaid docs + SKILL package (skips phase 2 if exists)
+argument-hint: "\"feature-keyword\" [--regenerate] [--tool <gemini|qwen>]"
+allowed-tools: SlashCommand(*), TodoWrite(*), Bash(*), Read(*), Write(*), Task(*)
+---
+
+# Code Flow Mapping Generator
+
+## Overview
+
+**Pure Orchestrator with Agent Delegation**: Prepares context paths and delegates code flow analysis to specialized cli-explore-agent. Orchestrator transforms agent's JSON analysis into Mermaid documentation.
+
+**Auto-Continue Workflow**: Runs fully autonomously once triggered. Each phase completes and automatically triggers the next phase.
+
+**Execution Paths**:
+- **Full Path**: All 3 phases (no existing codemap OR `--regenerate` specified)
+- **Skip Path**: Phase 1 → Phase 3 (existing codemap found AND no `--regenerate` flag)
+- **Phase 3 Always Executes**: SKILL index is always generated or updated
+
+**Agent Responsibility** (cli-explore-agent):
+- Deep code flow analysis using dual-source strategy (Bash + Gemini CLI)
+- Returns structured JSON with architecture, functions, data flow, conditionals, patterns
+- NO file writing - analysis only
+
+**Orchestrator Responsibility**:
+- Provides feature keyword and analysis scope to agent
+- Transforms agent's JSON into Mermaid-enriched markdown documentation
+- Writes all files (5 docs + metadata.json + SKILL.md)
+
+## Core Rules
+
+1. **Start Immediately**: First action is TodoWrite initialization, second action is Phase 1 execution
+2. **Feature-Specific SKILL**: Each feature creates independent `.claude/skills/codemap-{feature}/` package
+3. **Specialized Agent**: Phase 2a uses cli-explore-agent for professional code analysis (Deep Scan mode)
+4. **Orchestrator Documentation**: Phase 2b transforms agent JSON into Mermaid markdown files
+5. **Auto-Continue**: After completing each phase, update TodoWrite and immediately execute next phase
+6. **No User Prompts**: Never ask user questions or wait for input between phases
+7. **Track Progress**: Update TodoWrite after EVERY phase completion before starting next phase
+8. **Multi-Level Detail**: Generate 4 levels: architecture → function → data → conditional
+
+---
+
+## 3-Phase Execution
+
+### Phase 1: Parse Feature Keyword & Check Existing
+
+**Goal**: Normalize feature keyword, check existing codemap, prepare for analysis
+
+**Step 1: Parse Feature Keyword**
+```bash
+# Get feature keyword from argument
+FEATURE_KEYWORD="$1"
+
+# Normalize: lowercase, spaces to hyphens
+normalized_feature=$(echo "$FEATURE_KEYWORD" | tr '[:upper:]' '[:lower:]' | tr ' ' '-' | tr '_' '-')
+
+# Example: "User Authentication" → "user-authentication"
+# Example: "支付处理" → "支付处理" (keep non-ASCII)
+```
+
+**Step 2: Set Tool Preference**
+```bash
+# Default to gemini unless --tool specified
+TOOL="${tool_flag:-gemini}"
+```
+
+**Step 3: Check Existing Codemap**
+```bash
+# Define codemap directory
+CODEMAP_DIR=".claude/skills/codemap-${normalized_feature}"
+
+# Check if codemap exists
+bash(test -d "$CODEMAP_DIR" && echo "exists" || echo "not_exists")
+
+# Count existing files
+bash(find "$CODEMAP_DIR" -name "*.md" 2>/dev/null | wc -l || echo 0)
+```
+
+**Step 4: Skip Decision**
+```javascript
+if (existing_files > 0 && !regenerate_flag) {
+  SKIP_GENERATION = true
+  message = "Codemap already exists, skipping Phase 2. Use --regenerate to force regeneration."
+} else if (regenerate_flag) {
+  bash(rm -rf "$CODEMAP_DIR")
+  SKIP_GENERATION = false
+  message = "Regenerating codemap from scratch."
+} else {
+  SKIP_GENERATION = false
+  message = "No existing codemap found, generating new code flow analysis."
+}
+```
+
+**Output Variables**:
+- `FEATURE_KEYWORD`: Original feature keyword
+- `normalized_feature`: Normalized feature name for directory
+- `CODEMAP_DIR`: `.claude/skills/codemap-{feature}`
+- `TOOL`: CLI tool to use (gemini or qwen)
+- `SKIP_GENERATION`: Boolean - whether to skip Phase 2
+
+**TodoWrite**:
+- If skipping: Mark phase 1 completed, phase 2 completed, phase 3 in_progress
+- If not skipping: Mark phase 1 completed, phase 2 in_progress
+
+---
+
+### Phase 2: Code Flow Analysis & Documentation Generation
+
+**Skip Condition**: Skipped if `SKIP_GENERATION = true`
+
+**Goal**: Use cli-explore-agent for professional code analysis, then orchestrator generates Mermaid documentation
+
+**Architecture**: Phase 2a (Agent Analysis) → Phase 2b (Orchestrator Documentation)
+
+---
+
+#### Phase 2a: cli-explore-agent Analysis
+
+**Purpose**: Leverage specialized cli-explore-agent for deep code flow analysis
+
+**Agent Task Specification**:
+
+```
+Task(
+  subagent_type: "cli-explore-agent",
+  description: "Analyze code flow: {FEATURE_KEYWORD}",
+  prompt: "
+Perform Deep Scan analysis for feature: {FEATURE_KEYWORD}
+
+**Analysis Mode**: deep-scan (Dual-source: Bash structural scan + Gemini semantic analysis)
+
+**Analysis Objectives**:
+1. **Module Architecture**: Identify high-level module organization, interactions, and entry points
+2. **Function Call Chains**: Trace execution paths, call sequences, and parameter flows
+3. **Data Transformations**: Map data structure changes and transformation stages
+4. **Conditional Paths**: Document decision trees, branches, and error handling strategies
+5. **Design Patterns**: Discover architectural patterns and extract design intent
+
+**Scope**:
+- Feature: {FEATURE_KEYWORD}
+- CLI Tool: {TOOL} (gemini-2.5-pro or qwen coder-model)
+- File Discovery: MCP Code Index (preferred) + rg fallback
+- Target: 5-15 most relevant files
+
+**Expected Output Format**:
+Return comprehensive analysis as structured JSON:
+{
+  \"feature\": \"{FEATURE_KEYWORD}\",
+  \"analysis_metadata\": {
+    \"tool_used\": \"gemini|qwen\",
+    \"timestamp\": \"ISO_TIMESTAMP\",
+    \"analysis_mode\": \"deep-scan\"
+  },
+  \"files_analyzed\": [
+    {\"file\": \"path/to/file.ts\", \"relevance\": \"high|medium|low\", \"role\": \"brief description\"}
+  ],
+  \"architecture\": {
+    \"overview\": \"High-level description\",
+    \"modules\": [
+      {\"name\": \"ModuleName\", \"file\": \"file:line\", \"responsibility\": \"description\", \"dependencies\": [...]}
+    ],
+    \"interactions\": [
+      {\"from\": \"ModuleA\", \"to\": \"ModuleB\", \"type\": \"import|call|data-flow\", \"description\": \"...\"}
+    ],
+    \"entry_points\": [
+      {\"function\": \"main\", \"file\": \"file:line\", \"description\": \"...\"}
+    ]
+  },
+  \"function_calls\": {
+    \"call_chains\": [
+      {
+        \"chain_id\": 1,
+        \"description\": \"User authentication flow\",
+        \"sequence\": [
+          {\"function\": \"login\", \"file\": \"file:line\", \"calls\": [\"validateCredentials\", \"createSession\"]}
+        ]
+      }
+    ],
+    \"sequences\": [
+      {\"from\": \"Client\", \"to\": \"AuthService\", \"method\": \"login(username, password)\", \"returns\": \"Session\"}
+    ]
+  },
+  \"data_flow\": {
+    \"structures\": [
+      {\"name\": \"UserData\", \"stage\": \"input\", \"shape\": {\"username\": \"string\", \"password\": \"string\"}}
+    ],
+    \"transformations\": [
+      {\"from\": \"RawInput\", \"to\": \"ValidatedData\", \"transformer\": \"validateUser\", \"file\": \"file:line\"}
+    ]
+  },
+  \"conditional_logic\": {
+    \"branches\": [
+      {\"condition\": \"isAuthenticated\", \"file\": \"file:line\", \"true_path\": \"...\", \"false_path\": \"...\"}
+    ],
+    \"error_handling\": [
+      {\"error_type\": \"AuthenticationError\", \"handler\": \"handleAuthError\", \"file\": \"file:line\", \"recovery\": \"retry|fail\"}
+    ]
+  },
+  \"design_patterns\": [
+    {\"pattern\": \"Repository Pattern\", \"location\": \"src/repositories\", \"description\": \"...\"}
+  ],
+  \"recommendations\": [
+    \"Consider extracting authentication logic into separate module\",
+    \"Add error recovery for network failures\"
+  ]
+}
+
+**Critical Requirements**:
+- Use Deep Scan mode: Bash (Phase 1 - precise locations) + Gemini CLI (Phase 2 - semantic understanding) + Synthesis (Phase 3 - merge with attribution)
+- Focus exclusively on {FEATURE_KEYWORD} feature flow
+- Include file:line references for ALL findings
+- Extract design intent from code structure and comments
+- NO FILE WRITING - return JSON analysis only
+- Handle tool failures gracefully (Gemini → Qwen fallback, MCP → rg fallback)
+  "
+)
+```
+
+**Agent Output**: JSON analysis result with architecture, functions, data flow, conditionals, and patterns
+
+---
+
+#### Phase 2b: Orchestrator Documentation Generation
+
+**Purpose**: Transform cli-explore-agent JSON into Mermaid-enriched documentation
+
+**Input**: Agent's JSON analysis result
+
+**Process**:
+
+1. **Parse Agent Analysis**:
+   ```javascript
+   const analysis = JSON.parse(agentResult)
+   const { feature, files_analyzed, architecture, function_calls, data_flow, conditional_logic, design_patterns } = analysis
+   ```
+
+2. **Generate Mermaid Diagrams from Structured Data**:
+
+   **a) architecture-flow.md** (~3K tokens):
+   ```javascript
+   // Convert architecture.modules + architecture.interactions → Mermaid graph TD
+   const architectureMermaid = `
+   graph TD
+   ${architecture.modules.map(m => `    ${m.name}[${m.name}]`).join('\n')}
+   ${architecture.interactions.map(i => `    ${i.from} -->|${i.type}| ${i.to}`).join('\n')}
+   `
+
+   Write({
+     file_path: `${CODEMAP_DIR}/architecture-flow.md`,
+     content: `---
+feature: ${feature}
+level: architecture
+detail: high-level module interactions
+---
+# Architecture Flow: ${feature}
+
+## Overview
+${architecture.overview}
+
+## Module Architecture
+${architecture.modules.map(m => `### ${m.name}\n- **File**: ${m.file}\n- **Role**: ${m.responsibility}\n- **Dependencies**: ${m.dependencies.join(', ')}`).join('\n\n')}
+
+## Flow Diagram
+\`\`\`mermaid
+${architectureMermaid}
+\`\`\`
+
+## Key Interactions
+${architecture.interactions.map(i => `- **${i.from} → ${i.to}**: ${i.description}`).join('\n')}
+
+## Entry Points
+${architecture.entry_points.map(e => `- **${e.function}** (${e.file}): ${e.description}`).join('\n')}
+`
+   })
+   ```
+
+   **b) function-calls.md** (~5K tokens):
+   ```javascript
+   // Convert function_calls.sequences → Mermaid sequenceDiagram
+   const sequenceMermaid = `
+   sequenceDiagram
+   ${function_calls.sequences.map(s => `    ${s.from}->>${s.to}: ${s.method}`).join('\n')}
+   `
+
+   Write({
+     file_path: `${CODEMAP_DIR}/function-calls.md`,
+     content: `---
+feature: ${feature}
+level: function
+detail: function-level call sequences
+---
+# Function Call Chains: ${feature}
+
+## Call Sequence Diagram
+\`\`\`mermaid
+${sequenceMermaid}
+\`\`\`
+
+## Detailed Call Chains
+${function_calls.call_chains.map(chain => `
+### Chain ${chain.chain_id}: ${chain.description}
+${chain.sequence.map(fn => `- **${fn.function}** (${fn.file})\n  - Calls: ${fn.calls.join(', ')}`).join('\n')}
+`).join('\n')}
+
+## Parameters & Returns
+${function_calls.sequences.map(s => `- **${s.method}** → Returns: ${s.returns || 'void'}`).join('\n')}
+`
+   })
+   ```
+
+   **c) data-flow.md** (~4K tokens):
+   ```javascript
+   // Convert data_flow.transformations → Mermaid flowchart LR
+   const dataFlowMermaid = `
+   flowchart LR
+   ${data_flow.transformations.map((t, i) => `    Stage${i}[${t.from}] -->|${t.transformer}| Stage${i+1}[${t.to}]`).join('\n')}
+   `
+
+   Write({
+     file_path: `${CODEMAP_DIR}/data-flow.md`,
+     content: `---
+feature: ${feature}
+level: data
+detail: data structure transformations
+---
+# Data Flow: ${feature}
+
+## Data Transformation Diagram
+\`\`\`mermaid
+${dataFlowMermaid}
+\`\`\`
+
+## Data Structures
+${data_flow.structures.map(s => `### ${s.name} (${s.stage})\n\`\`\`json\n${JSON.stringify(s.shape, null, 2)}\n\`\`\``).join('\n\n')}
+
+## Transformations
+${data_flow.transformations.map(t => `- **${t.from} → ${t.to}** via \`${t.transformer}\` (${t.file})`).join('\n')}
+`
+   })
+   ```
+
+   **d) conditional-paths.md** (~4K tokens):
+   ```javascript
+   // Convert conditional_logic.branches → Mermaid flowchart TD
+   const conditionalMermaid = `
+   flowchart TD
+       Start[Entry Point]
+   ${conditional_logic.branches.map((b, i) => `
+       Start --> Check${i}{${b.condition}}
+       Check${i} -->|Yes| Path${i}A[${b.true_path}]
+       Check${i} -->|No| Path${i}B[${b.false_path}]
+   `).join('\n')}
+   `
+
+   Write({
+     file_path: `${CODEMAP_DIR}/conditional-paths.md`,
+     content: `---
+feature: ${feature}
+level: conditional
+detail: decision trees and error paths
+---
+# Conditional Paths: ${feature}
+
+## Decision Tree
+\`\`\`mermaid
+${conditionalMermaid}
+\`\`\`
+
+## Branch Conditions
+${conditional_logic.branches.map(b => `- **${b.condition}** (${b.file})\n  - True: ${b.true_path}\n  - False: ${b.false_path}`).join('\n')}
+
+## Error Handling
+${conditional_logic.error_handling.map(e => `- **${e.error_type}**: Handler \`${e.handler}\` (${e.file}) - Recovery: ${e.recovery}`).join('\n')}
+`
+   })
+   ```
+
+   **e) complete-flow.md** (~8K tokens):
+   ```javascript
+   // Integrate all Mermaid diagrams
+   Write({
+     file_path: `${CODEMAP_DIR}/complete-flow.md`,
+     content: `---
+feature: ${feature}
+level: complete
+detail: integrated multi-level view
+---
+# Complete Flow: ${feature}
+
+## Integrated Flow Diagram
+\`\`\`mermaid
+graph TB
+    subgraph Architecture
+    ${architecture.modules.map(m => `    ${m.name}[${m.name}]`).join('\n')}
+    end
+
+    subgraph "Function Calls"
+    ${function_calls.call_chains[0]?.sequence.map(fn => `    ${fn.function}`).join('\n') || ''}
+    end
+
+    subgraph "Data Flow"
+    ${data_flow.structures.map(s => `    ${s.name}[${s.name}]`).join('\n')}
+    end
+\`\`\`
+
+## Complete Trace
+[Comprehensive end-to-end documentation combining all analysis layers]
+
+## Design Patterns Identified
+${design_patterns.map(p => `- **${p.pattern}** in ${p.location}: ${p.description}`).join('\n')}
+
+## Recommendations
+${analysis.recommendations.map(r => `- ${r}`).join('\n')}
+
+## Cross-References
+- [Architecture Flow](./architecture-flow.md) - High-level module structure
+- [Function Calls](./function-calls.md) - Detailed call chains
+- [Data Flow](./data-flow.md) - Data transformation stages
+- [Conditional Paths](./conditional-paths.md) - Decision trees and error handling
+`
+   })
+   ```
+
+3. **Write metadata.json**:
+   ```javascript
+   Write({
+     file_path: `${CODEMAP_DIR}/metadata.json`,
+     content: JSON.stringify({
+       feature: feature,
+       normalized_name: normalized_feature,
+       generated_at: new Date().toISOString(),
+       tool_used: analysis.analysis_metadata.tool_used,
+       files_analyzed: files_analyzed.map(f => f.file),
+       analysis_summary: {
+         total_files: files_analyzed.length,
+         modules_traced: architecture.modules.length,
+         functions_traced: function_calls.call_chains.reduce((sum, c) => sum + c.sequence.length, 0),
+         patterns_discovered: design_patterns.length
+       }
+     }, null, 2)
+   })
+   ```
+
+4. **Report Phase 2 Completion**:
+   ```
+   Phase 2 Complete: Code flow analysis and documentation generated
+
+   - Agent Analysis: cli-explore-agent with {TOOL}
+   - Files Analyzed: {count}
+   - Documentation Generated: 5 markdown files + metadata.json
+   - Location: {CODEMAP_DIR}
+   ```
+
+**Completion Criteria**:
+- cli-explore-agent task completed successfully with JSON result
+- 5 documentation files written with valid Mermaid diagrams
+- metadata.json written with analysis summary
+- All files properly formatted and cross-referenced
+
+**TodoWrite**: Mark phase 2 completed, phase 3 in_progress
+
+---
+
+### Phase 3: Generate SKILL.md Index
+
+**Note**: This phase **ALWAYS executes** - generates or updates the SKILL index.
+
+**Goal**: Read generated flow documentation and create SKILL.md index with progressive loading
+
+**Steps**:
+
+1. **Verify Generated Files**:
+   ```bash
+   bash(find "{CODEMAP_DIR}" -name "*.md" -type f | sort)
+   ```
+
+2. **Read metadata.json**:
+   ```javascript
+   Read({CODEMAP_DIR}/metadata.json)
+   // Extract: feature, normalized_name, files_analyzed, analysis_summary
+   ```
+
+3. **Read File Headers** (optional, first 30 lines):
+   ```javascript
+   Read({CODEMAP_DIR}/architecture-flow.md, limit: 30)
+   Read({CODEMAP_DIR}/function-calls.md, limit: 30)
+   // Extract overview and diagram counts
+   ```
+
+4. **Generate SKILL.md Index**:
+
+   Template structure:
+   ```yaml
+   ---
+   name: codemap-{normalized_feature}
+   description: Code flow mapping for {FEATURE_KEYWORD} feature (located at {project_path}). Load this SKILL when analyzing, tracing, or understanding {FEATURE_KEYWORD} execution flow, especially when no relevant context exists in memory.
+   version: 1.0.0
+   generated_at: {ISO_TIMESTAMP}
+   ---
+   # Code Flow Map: {FEATURE_KEYWORD}
+
+   ## Feature: `{FEATURE_KEYWORD}`
+
+   **Analysis Date**: {DATE}
+   **Tool Used**: {TOOL}
+   **Files Analyzed**: {COUNT}
+
+   ## Progressive Loading
+
+   ### Level 0: Quick Overview (~2K tokens)
+   - [Architecture Flow](./architecture-flow.md) - High-level module interactions
+
+   ### Level 1: Core Flows (~10K tokens)
+   - [Architecture Flow](./architecture-flow.md) - Module architecture
+   - [Function Calls](./function-calls.md) - Function call chains
+
+   ### Level 2: Complete Analysis (~20K tokens)
+   - [Architecture Flow](./architecture-flow.md)
+   - [Function Calls](./function-calls.md)
+   - [Data Flow](./data-flow.md) - Data transformations
+
+   ### Level 3: Deep Dive (~30K tokens)
+   - [Architecture Flow](./architecture-flow.md)
+   - [Function Calls](./function-calls.md)
+   - [Data Flow](./data-flow.md)
+   - [Conditional Paths](./conditional-paths.md) - Branches and error handling
+   - [Complete Flow](./complete-flow.md) - Integrated comprehensive view
+
+   ## Usage
+
+   Load this SKILL package when:
+   - Analyzing {FEATURE_KEYWORD} implementation
+   - Tracing execution flow for debugging
+   - Understanding code dependencies
+   - Planning refactoring or enhancements
+
+   ## Analysis Summary
+
+   - **Modules Traced**: {modules_traced}
+   - **Functions Traced**: {functions_traced}
+   - **Files Analyzed**: {total_files}
+
+   ## Mermaid Diagrams Included
+
+   - Architecture flow diagram (graph TD)
+   - Function call sequence diagram (sequenceDiagram)
+   - Data transformation flowchart (flowchart LR)
+   - Conditional decision tree (flowchart TD)
+   - Complete integrated diagram (graph TB)
+   ```
+
+5. **Write SKILL.md**:
+   ```javascript
+   Write({
+     file_path: `{CODEMAP_DIR}/SKILL.md`,
+     content: generatedIndexMarkdown
+   })
+   ```
+
+**Completion Criteria**:
+- SKILL.md index written
+- All documentation files verified
+- Progressive loading levels (0-3) properly structured
+- Mermaid diagram references included
+
+**TodoWrite**: Mark phase 3 completed
+
+**Final Report**:
+```
+Code Flow Mapping Complete
+
+Feature: {FEATURE_KEYWORD}
+Location: .claude/skills/codemap-{normalized_feature}/
+
+Files Generated:
+- SKILL.md (index)
+- architecture-flow.md (with Mermaid diagram)
+- function-calls.md (with Mermaid sequence diagram)
+- data-flow.md (with Mermaid flowchart)
+- conditional-paths.md (with Mermaid decision tree)
+- complete-flow.md (with integrated Mermaid diagram)
+- metadata.json
+
+Analysis:
+- Files analyzed: {count}
+- Modules traced: {count}
+- Functions traced: {count}
+
+Usage: Skill(command: "codemap-{normalized_feature}")
+```
+
+---
+
+## Implementation Details
+
+### TodoWrite Patterns
+
+**Initialization** (Before Phase 1):
+```javascript
+TodoWrite({todos: [
+  {"content": "Parse feature keyword and check existing", "status": "in_progress", "activeForm": "Parsing feature keyword"},
+  {"content": "Agent analyzes code flow and generates files", "status": "pending", "activeForm": "Analyzing code flow"},
+  {"content": "Generate SKILL.md index", "status": "pending", "activeForm": "Generating SKILL index"}
+]})
+```
+
+**Full Path** (SKIP_GENERATION = false):
+```javascript
+// After Phase 1
+TodoWrite({todos: [
+  {"content": "Parse feature keyword and check existing", "status": "completed", ...},
+  {"content": "Agent analyzes code flow and generates files", "status": "in_progress", ...},
+  {"content": "Generate SKILL.md index", "status": "pending", ...}
+]})
+
+// After Phase 2
+TodoWrite({todos: [
+  {"content": "Parse feature keyword and check existing", "status": "completed", ...},
+  {"content": "Agent analyzes code flow and generates files", "status": "completed", ...},
+  {"content": "Generate SKILL.md index", "status": "in_progress", ...}
+]})
+
+// After Phase 3
+TodoWrite({todos: [
+  {"content": "Parse feature keyword and check existing", "status": "completed", ...},
+  {"content": "Agent analyzes code flow and generates files", "status": "completed", ...},
+  {"content": "Generate SKILL.md index", "status": "completed", ...}
+]})
+```
+
+**Skip Path** (SKIP_GENERATION = true):
+```javascript
+// After Phase 1 (skip Phase 2)
+TodoWrite({todos: [
+  {"content": "Parse feature keyword and check existing", "status": "completed", ...},
+  {"content": "Agent analyzes code flow and generates files", "status": "completed", ...},  // Skipped
+  {"content": "Generate SKILL.md index", "status": "in_progress", ...}
+]})
+```
+
+### Execution Flow
+
+**Full Path**:
+```
+User → TodoWrite Init → Phase 1 (parse) → Phase 2 (agent analyzes) → Phase 3 (write index) → Report
+```
+
+**Skip Path**:
+```
+User → TodoWrite Init → Phase 1 (detect existing) → Phase 3 (update index) → Report
+```
+
+### Error Handling
+
+**Phase 1 Errors**:
+- Empty feature keyword: Report error, ask user to provide feature description
+- Invalid characters: Normalize and continue
+
+**Phase 2 Errors (Agent)**:
+- Agent task fails: Retry once, report if fails again
+- No files discovered: Warn user, ask for more specific feature keyword
+- CLI failures: Agent handles internally with retries
+- Invalid Mermaid syntax: Agent validates before writing
+
+**Phase 3 Errors**:
+- Write failures: Report which files failed
+- Missing files: Note in SKILL.md, suggest regeneration
+
+---
+
+## Parameters
+
+```bash
+/memory:code-map-memory "feature-keyword" [--regenerate] [--tool <gemini|qwen>]
+```
+
+**Arguments**:
+- **"feature-keyword"**: Feature or flow to analyze (required)
+  - Examples: `"user authentication"`, `"payment processing"`, `"数据导入流程"`
+  - Can be English, Chinese, or mixed
+  - Spaces and underscores normalized to hyphens
+- **--regenerate**: Force regenerate existing codemap (deletes and recreates)
+- **--tool**: CLI tool for analysis (default: gemini)
+  - `gemini`: Comprehensive flow analysis with gemini-2.5-pro
+  - `qwen`: Alternative with coder-model
+
+---
+
+## Examples
+
+**Generated File Structure** (for all examples):
+```
+.claude/skills/codemap-{feature}/
+├── SKILL.md                    # Index (Phase 3)
+├── architecture-flow.md        # Agent (Phase 2) - High-level flow
+├── function-calls.md           # Agent (Phase 2) - Function chains
+├── data-flow.md                # Agent (Phase 2) - Data transformations
+├── conditional-paths.md        # Agent (Phase 2) - Branches & errors
+├── complete-flow.md            # Agent (Phase 2) - Integrated view
+└── metadata.json               # Agent (Phase 2)
+```
+
+### Example 1: User Authentication Flow
+
+```bash
+/memory:code-map-memory "user authentication"
+```
+
+**Workflow**:
+1. Phase 1: Normalizes to "user-authentication", checks existing codemap
+2. Phase 2: Agent discovers auth-related files, executes CLI analysis, generates 5 flow docs with Mermaid
+3. Phase 3: Generates SKILL.md index with progressive loading
+
+**Output**: `.claude/skills/codemap-user-authentication/` with 6 files + metadata
+
+
+### Example 3: Regenerate with Qwen
+
+```bash
+/memory:code-map-memory "payment processing" --regenerate --tool qwen
+```
+
+**Workflow**:
+1. Phase 1: Deletes existing codemap due to --regenerate
+2. Phase 2: Agent uses qwen with coder-model for fresh analysis
+3. Phase 3: Generates updated SKILL.md
+
+---
+
+## Benefits
+
+- **Per-Feature SKILL**: Independent packages for each analyzed feature
+- **Specialized Agent**: cli-explore-agent with Deep Scan mode (Bash + Gemini dual-source)
+- **Professional Analysis**: Pre-defined workflow for code exploration and structure analysis
+- **Clear Separation**: Agent analyzes (JSON) → Orchestrator documents (Mermaid markdown)
+- **Multi-Level Detail**: 4 levels (architecture → function → data → conditional)
+- **Visual Flow**: Embedded Mermaid diagrams for all flow types
+- **Progressive Loading**: Token-efficient context loading (2K → 30K)
+- **Auto-Continue**: Fully autonomous 3-phase execution
+- **Smart Skip**: Detects existing codemap, 10x faster index updates
+- **CLI Integration**: Gemini/Qwen for deep semantic understanding
+
+## Architecture
+
+```
+code-map-memory (orchestrator)
+  ├─ Phase 1: Parse & Check (bash commands, skip decision)
+  ├─ Phase 2: Code Analysis & Documentation (skippable)
+  │   ├─ Phase 2a: cli-explore-agent Analysis
+  │   │   └─ Deep Scan: Bash structural + Gemini semantic → JSON
+  │   └─ Phase 2b: Orchestrator Documentation
+  │       └─ Transform JSON → 5 Mermaid markdown files + metadata.json
+  └─ Phase 3: Write SKILL.md (index generation, always runs)
+
+Benefits:
+✅ Specialized agent: cli-explore-agent with dual-source strategy (Bash + Gemini)
+✅ Professional analysis: Pre-defined Deep Scan workflow
+✅ Clear separation: Agent analyzes (JSON) → Orchestrator documents (Mermaid)
+✅ Smart skip logic: 10x faster when codemap exists
+✅ Multi-level detail: Architecture → Functions → Data → Conditionals
+
+Output: .claude/skills/codemap-{feature}/
+```
diff --git a/.claude/commands/workflow/lite-plan.md b/.claude/commands/workflow/lite-plan.md
index d8a0236a..8d80aa90 100644
--- a/.claude/commands/workflow/lite-plan.md
+++ b/.claude/commands/workflow/lite-plan.md
@@ -176,22 +176,48 @@ Execution Complete
     prompt=`
     Task: ${task_description}
 
-    Analyze:
-    - Relevant files and modules
-    - Current implementation patterns
-    - Dependencies and integration points
-    - Architecture constraints
+    Analyze and return the following information in structured format:
+    1. Project Structure: Overall architecture and module organization
+    2. Relevant Files: List of files that will be affected by this task (with paths)
+    3. Current Implementation Patterns: Existing code patterns, conventions, and styles
+    4. Dependencies: External dependencies and internal module dependencies
+    5. Integration Points: Where this task connects with existing code
+    6. Architecture Constraints: Technical limitations or requirements
+    7. Clarification Needs: Ambiguities or missing information requiring user input
 
     Time Limit: 60 seconds
-    Output: Findings summary + clarification needs
+
+    Output Format: Return a JSON-like structured object with the above fields populated.
+    Include specific file paths, pattern examples, and clear questions for clarifications.
     `
   )
   ```
 
+**Expected Return Structure**:
+```javascript
+explorationContext = {
+  project_structure: "Description of overall architecture",
+  relevant_files: ["src/auth/service.ts", "src/middleware/auth.ts", ...],
+  patterns: "Description of existing patterns (e.g., 'Uses dependency injection pattern', 'React hooks convention')",
+  dependencies: "List of dependencies and integration points",
+  integration_points: "Where this connects with existing code",
+  constraints: "Technical constraints (e.g., 'Must use existing auth library', 'No breaking changes')",
+  clarification_needs: [
+    {
+      question: "Which authentication method to use?",
+      context: "Found both JWT and Session patterns",
+      options: ["JWT tokens", "Session-based", "Hybrid approach"]
+    },
+    // ... more clarification questions
+  ]
+}
+```
+
 **Output Processing**:
 - Store exploration findings in `explorationContext`
-- Identify clarification needs (ambiguities, missing info, assumptions)
-- Set `needsClarification` flag if questions exist
+- Extract `clarification_needs` array from exploration results
+- Set `needsClarification = (clarification_needs.length > 0)`
+- Use clarification_needs to generate Phase 2 questions
 
 **Progress Tracking**:
 - Mark Phase 1 as completed
@@ -207,44 +233,30 @@ Execution Complete
 **Skip Condition**: Only run if Phase 1 set `needsClarification = true`
 
 **Operations**:
-- Review exploration findings for ambiguities
-- Generate clarification questions based on:
-  - Missing requirements
-  - Ambiguous specifications
-  - Multiple implementation options
-  - Unclear dependencies or constraints
-  - Assumptions that need confirmation
+- Review `explorationContext.clarification_needs` from Phase 1
+- Generate AskUserQuestion based on exploration findings
+- Focus on ambiguities that affect implementation approach
 
-**AskUserQuestion Format**:
+**AskUserQuestion Call** (simplified reference):
 ```javascript
+// Use clarification_needs from exploration to build questions
 AskUserQuestion({
-  questions: [
-    {
-      question: "Based on code exploration, I need clarification on: ...",
-      header: "Clarify Requirements",
-      multiSelect: false,
-      options: [
-        // Dynamic options based on exploration findings
-        // Example: "Which authentication method?" -> Options: JWT, OAuth2, Session
-      ]
-    }
-  ]
+  questions: explorationContext.clarification_needs.map(need => ({
+    question: `${need.context}\n\n${need.question}`,
+    header: "Clarification",
+    multiSelect: false,
+    options: need.options.map(opt => ({
+      label: opt,
+      description: `Use ${opt} approach`
+    }))
+  }))
 })
 ```
 
-**Example Clarification Scenarios**:
-
-| Exploration Finding | Clarification Question | Options |
-|---------------------|------------------------|---------|
-| "Found 2 auth patterns: JWT and Session" | "Which authentication approach to use?" | JWT / Session-based / Hybrid |
-| "API uses both REST and GraphQL" | "Which API style for new endpoints?" | REST / GraphQL / Both |
-| "No existing test framework found" | "Which test framework to set up?" | Jest / Vitest / Mocha |
-| "Multiple state management libraries" | "Which state manager to use?" | Redux / Zustand / Context |
-
 **Output Processing**:
-- Collect user responses
-- Update task context with clarifications
-- Store in `clarificationContext` variable
+- Collect user responses and store in `clarificationContext`
+- Format: `{ question_id: selected_answer, ... }`
+- This context will be passed to Phase 3 planning
 
 **Progress Tracking**:
 - Mark Phase 2 as completed
@@ -314,21 +326,39 @@ Task(
   Task: ${task_description}
 
   Exploration Context:
-  ${explorationContext}
+  ${JSON.stringify(explorationContext, null, 2)}
 
-  Clarifications:
-  ${clarificationContext || "None"}
+  User Clarifications:
+  ${JSON.stringify(clarificationContext, null, 2) || "None provided"}
 
-  Complexity: ${complexity}
+  Complexity Level: ${complexity}
 
-  Generate detailed task breakdown with:
-  - Clear task dependencies
-  - Specific file modifications
-  - Test requirements
-  - Rollback considerations (if High complexity)
-  - Risk assessment
+  Generate a detailed implementation plan with the following components:
 
-  Output: Structured task list (5-10 tasks)
+  1. Summary: 2-3 sentence overview of the implementation
+  2. Approach: High-level implementation strategy
+  3. Task Breakdown: 5-10 specific, actionable tasks
+     - Each task should specify:
+       * What to do
+       * Which files to modify/create
+       * Dependencies on other tasks (if any)
+  4. Task Dependencies: Explicit ordering requirements (e.g., "Task 2 depends on Task 1")
+  5. Risks: Potential issues and mitigation strategies (for Medium/High complexity)
+  6. Estimated Time: Total implementation time estimate
+  7. Recommended Execution: "Direct" (agent) or "CLI" (autonomous tool)
+
+  Output Format: Return a structured object with these fields:
+  {
+    summary: string,
+    approach: string,
+    tasks: string[],
+    dependencies: string[] (optional),
+    risks: string[] (optional),
+    estimated_time: string,
+    recommended_execution: "Direct" | "CLI"
+  }
+
+  Ensure tasks are specific, with file paths and clear acceptance criteria.
   `
 )
 
@@ -336,6 +366,32 @@ Task(
 planObject = agent_output.parse()
 ```
 
+**Expected Return Structure**:
+```javascript
+planObject = {
+  summary: "Implement JWT-based authentication system with middleware integration",
+  approach: "Create auth service layer, implement JWT utilities, add middleware, update routes",
+  tasks: [
+    "Create authentication service in src/auth/service.ts with login/logout/verify methods",
+    "Implement JWT token utilities in src/auth/jwt.ts (generate, verify, refresh)",
+    "Add authentication middleware to src/middleware/auth.ts",
+    "Update API routes in src/routes/*.ts to use auth middleware",
+    "Add integration tests for auth flow in tests/auth.test.ts"
+  ],
+  dependencies: [
+    "Task 3 depends on Task 2 (middleware needs JWT utilities)",
+    "Task 4 depends on Task 3 (routes need middleware)",
+    "Task 5 depends on Tasks 1-4 (tests need complete implementation)"
+  ],
+  risks: [
+    "Token refresh timing may conflict with existing session logic - test thoroughly",
+    "Breaking change if existing auth is in use - plan migration strategy"
+  ],
+  estimated_time: "30-45 minutes",
+  recommended_execution: "CLI"  // Based on clear requirements and straightforward implementation
+}
+```
+
 **Output Structure**:
 ```javascript
 planObject = {
@@ -370,120 +426,54 @@ planObject = {
 
 **Operations**:
 - Display plan summary with full task breakdown
-- Two-dimensional user input: Task confirmation + Execution method selection
+- Collect two-dimensional user input: Task confirmation + Execution method selection
 - Support modification flow if user requests changes
 
-**AskUserQuestion Format** (Two questions):
-
 **Question 1: Task Confirmation**
+
+Display plan to user and ask for confirmation:
+- Show: summary, approach, task breakdown, dependencies, risks, complexity, estimated time
+- Options: "Confirm" / "Modify" / "Cancel"
+- If Modify: Collect feedback via "Other" option, re-run Phase 3 with modifications
+- If Cancel: Exit workflow
+- If Confirm: Proceed to Question 2
+
+**Question 2: Execution Method Selection** (Only if task confirmed)
+
+Ask user to select execution method:
+- Show recommendation from `planObject.recommended_execution`
+- Options:
+  - "Direct - Execute with Agent" (@code-developer)
+  - "CLI - Gemini" (gemini-2.5-pro)
+  - "CLI - Codex" (gpt-5)
+  - "CLI - Qwen" (coder-model)
+- Store selection for Phase 5 execution
+
+**Simplified AskUserQuestion Reference**:
 ```javascript
+// Question 1: Task Confirmation
 AskUserQuestion({
   questions: [{
-    question: `
-Implementation Plan:
-
-Summary: ${planObject.summary}
-
-Approach: ${planObject.approach}
-
-Task Breakdown (${planObject.tasks.length} tasks):
-${planObject.tasks.map((t, i) => `  ${i+1}. ${t}`).join('\n')}
-
-${planObject.dependencies ? `\nDependencies:\n${planObject.dependencies.join('\n')}` : ''}
-${planObject.risks ? `\nRisks:\n${planObject.risks.join('\n')}` : ''}
-
-Complexity: ${planObject.complexity}
-Estimated Time: ${planObject.estimated_time}
-
-Do you confirm this implementation plan?`,
-    header: "Confirm Tasks",
-    multiSelect: false,
+    question: `[Display plan with all details]\n\nDo you confirm this plan?`,
+    header: "Confirm Plan",
     options: [
-      {
-        label: "Confirm - Proceed to execution",
-        description: "Tasks look good, ready to execute"
-      },
-      {
-        label: "Modify - Adjust plan",
-        description: "Need to adjust tasks or approach"
-      },
-      {
-        label: "Cancel - Abort",
-        description: "Don't execute, abort this planning session"
-      }
+      { label: "Confirm", description: "Proceed to execution" },
+      { label: "Modify", description: "Adjust plan" },
+      { label: "Cancel", description: "Abort" }
     ]
   }]
 })
-```
 
-**If Confirm**: Proceed to Question 2
-**If Modify**:
-```javascript
+// Question 2: Execution Method (if confirmed)
 AskUserQuestion({
   questions: [{
-    question: "What would you like to modify about the plan?",
-    header: "Plan Modifications",
-    multiSelect: false,
-    options: [
-      {
-        label: "Add specific requirements",
-        description: "Provide additional requirements or constraints"
-      },
-      {
-        label: "Remove/simplify tasks",
-        description: "Some tasks are unnecessary or too detailed"
-      },
-      {
-        label: "Change approach",
-        description: "Different implementation strategy needed"
-      },
-      {
-        label: "Clarify ambiguities",
-        description: "Tasks are unclear or ambiguous"
-      }
-    ]
-  }]
-})
-// After modification input, re-run Phase 3 with user feedback
-```
-
-**Question 2: Execution Method Selection** (Only if confirmed)
-```javascript
-AskUserQuestion({
-  questions: [{
-    question: `
-Select execution method:
-
-${planObject.recommended_execution === "Direct" ? "[Recommended] " : ""}Direct Execution (Agent):
-- Current Claude agent executes tasks with full context
-- Interactive progress tracking
-- Best for: Complex logic, iterative development
-
-${planObject.recommended_execution === "CLI" ? "[Recommended] " : ""}CLI Execution:
-- External CLI tool (Gemini/Codex/Qwen) executes tasks
-- Autonomous execution, faster for straightforward tasks
-- Best for: Clear requirements, bulk operations
-
-Choose execution method:`,
+    question: `Select execution method:\n[Show recommendation and tool descriptions]`,
     header: "Execution Method",
-    multiSelect: false,
     options: [
-      {
-        label: "Direct - Execute with Agent",
-        description: "Use @code-developer agent (interactive, recommended for ${planObject.complexity})"
-      },
-      {
-        label: "CLI - Gemini",
-        description: "Fast semantic analysis (gemini-2.5-pro)"
-      },
-      {
-        label: "CLI - Codex",
-        description: "Autonomous development (gpt-5)"
-      },
-      {
-        label: "CLI - Qwen",
-        description: "Code analysis specialist (coder-model)"
-      }
+      { label: "Direct - Agent", description: "Interactive execution" },
+      { label: "CLI - Gemini", description: "gemini-2.5-pro" },
+      { label: "CLI - Codex", description: "gpt-5" },
+      { label: "CLI - Qwen", description: "coder-model" }
     ]
   }]
 })
diff --git a/.claude/commands/workflow/ui-design/import-from-code.md b/.claude/commands/workflow/ui-design/import-from-code.md
index ac4d1be2..7aa40b89 100644
--- a/.claude/commands/workflow/ui-design/import-from-code.md
+++ b/.claude/commands/workflow/ui-design/import-from-code.md
@@ -154,6 +154,23 @@ Task(subagent_type="ui-design-agent",
 
   ## Code Import Extraction Strategy
 
+  **Step 0: Fast Conflict Detection** (Use Bash/Grep for quick global scan)
+  - Quick scan: \`rg --color=never -n "^\\s*--primary:|^\\s*--secondary:|^\\s*--accent:" --type css ${source}\` to find core color definitions with line numbers
+  - Semantic search: \`rg --color=never -B3 -A1 "^\\s*--primary:" --type css ${source}\` to capture surrounding context and comments
+  - Core token scan: Search for --primary, --secondary, --accent, --background patterns to detect all theme-critical definitions
+  - Pattern: rg → Extract values → Compare → If different → Read full context with comments → Record conflict
+  - Alternative (if many files): Execute CLI analysis for comprehensive report:
+    \`\`\`bash
+    cd ${source} && gemini -p \"
+    PURPOSE: Detect color token conflicts across all CSS/SCSS/JS files
+    TASK: • Scan all files for color definitions • Identify conflicting values • Extract semantic comments
+    MODE: analysis
+    CONTEXT: @**/*.css @**/*.scss @**/*.js @**/*.ts
+    EXPECTED: JSON report listing conflicts with file:line, values, semantic context
+    RULES: Focus on core tokens | Report ALL variants | analysis=READ-ONLY
+    \"
+    \`\`\`
+
   **Step 1: Load file list**
   - Read(${intermediates_dir}/discovered-files.json)
   - Extract: file_types.css.files, file_types.js.files, file_types.html.files
@@ -252,6 +269,23 @@ Task(subagent_type="ui-design-agent",
 
   ## Code Import Extraction Strategy
 
+  **Step 0: Fast Animation Discovery** (Use Bash/Grep for quick pattern detection)
+  - Quick scan: \`rg --color=never -n "@keyframes|animation:|transition:" --type css ${source}\` to find animation definitions with line numbers
+  - Framework detection: \`rg --color=never "framer-motion|gsap|@react-spring|react-spring" --type js --type ts ${source}\` to detect animation frameworks
+  - Pattern categorization: \`rg --color=never -B2 -A5 "@keyframes" --type css ${source}\` to extract keyframe animations with context
+  - Pattern: rg → Identify animation types → Map framework usage → Prioritize extraction targets
+  - Alternative (if complex framework mix): Execute CLI analysis for comprehensive report:
+    \`\`\`bash
+    cd ${source} && gemini -p \"
+    PURPOSE: Detect animation frameworks and patterns
+    TASK: • Identify frameworks • Map animation patterns • Categorize by complexity
+    MODE: analysis
+    CONTEXT: @**/*.css @**/*.scss @**/*.js @**/*.ts
+    EXPECTED: JSON report listing frameworks, animation types, file locations
+    RULES: Focus on framework consistency | Map all animations | analysis=READ-ONLY
+    \"
+    \`\`\`
+
   **Step 1: Load file list**
   - Read(${intermediates_dir}/discovered-files.json)
   - Extract: file_types.css.files, file_types.js.files, file_types.html.files
@@ -314,6 +348,23 @@ Task(subagent_type="ui-design-agent",
 
   ## Code Import Extraction Strategy
 
+  **Step 0: Fast Component Discovery** (Use Bash/Grep for quick component scan)
+  - Layout pattern scan: \`rg --color=never -n "display:\\s*(grid|flex)|grid-template" --type css ${source}\` to find layout systems
+  - Component class scan: \`rg --color=never "class.*=.*\\"[^\"]*\\b(btn|button|card|input|modal|dialog|dropdown)" --type html --type js --type ts ${source}\` to identify UI components
+  - Universal component heuristic: Components appearing in 3+ files = universal, <3 files = specialized
+  - Pattern: rg → Count occurrences → Classify by frequency → Prioritize universal components
+  - Alternative (if large codebase): Execute CLI analysis for comprehensive categorization:
+    \`\`\`bash
+    cd ${source} && gemini -p \"
+    PURPOSE: Classify components as universal vs specialized
+    TASK: • Identify UI components • Classify reusability • Map layout systems
+    MODE: analysis
+    CONTEXT: @**/*.css @**/*.scss @**/*.js @**/*.ts @**/*.html
+    EXPECTED: JSON report categorizing components, layout patterns, naming conventions
+    RULES: Focus on component reusability | Identify layout systems | analysis=READ-ONLY
+    \"
+    \`\`\`
+
   **Step 1: Load file list**
   - Read(${intermediates_dir}/discovered-files.json)
   - Extract: file_types.css.files, file_types.js.files, file_types.html.files