refactor(ui-design): enhance task attachment model and phase execution flow for improved clarity and automation

.claude/commands/workflow/ui-design/codify-style.md

@@ -21,17 +21,21 @@ auto-continue: true
 **Autonomous Flow** (⚠️ CONTINUOUS EXECUTION - DO NOT STOP):
 1. User triggers: `/workflow:ui-design:codify-style <path> --package-name <name>`
 2. Phase 0: Parameter validation & preparation → **IMMEDIATELY triggers Phase 1**
-3. Phase 1 (import-from-code) → **Execute phase (blocks until finished)** → Auto-continues to Phase 2
+3. Phase 1 (import-from-code) → **Attach 4 tasks → Execute tasks → Collapse** → Auto-continues to Phase 2
-4. Phase 2 (reference-page-generator) → **Execute phase (blocks until finished)** → Auto-continues to Phase 3
+4. Phase 2 (reference-page-generator) → **Attach 4 tasks → Execute tasks → Collapse** → Auto-continues to Phase 3
-5. Phase 3 (cleanup & verification) → Reports completion
+5. Phase 3 (cleanup & verification) → **Execute orchestrator task** → Reports completion
 
 **Phase Transition Mechanism**:
 - **Phase 0 (Validation)**: Validate parameters, prepare workspace → IMMEDIATELY triggers Phase 1
-- **Phase 1-3 (Autonomous)**: `SlashCommand` is BLOCKING - execution pauses until the command finishes
+- **Phase 1-2 (Task Attachment)**: `SlashCommand` invocation **ATTACHES** tasks to current workflow. Orchestrator **EXECUTES** these tasks itself.
-- When each phase finishes executing: Automatically process output and execute next phase
+- **Task Execution**: Orchestrator runs attached tasks sequentially, updating TodoWrite as each completes
+- **Task Collapse**: After all attached tasks complete, collapse them into phase summary
+- **Phase Transition**: Automatically execute next phase after collapsing completed tasks
 - No user interaction required after initial command
 
-**Auto-Continue Mechanism**: TodoWrite tracks phase status. When each phase finishes executing, you MUST immediately construct and execute the next phase command. No user intervention required. The workflow is NOT complete until reaching Phase 3.
+**Auto-Continue Mechanism**: TodoWrite tracks phase status with dynamic task attachment/collapse. After executing all attached tasks, you MUST immediately collapse them, restore phase summary, and execute the next phase. No user intervention required. The workflow is NOT complete until reaching Phase 3.
+
+**Task Attachment Model**: SlashCommand invocation is NOT delegation - it's task expansion. The orchestrator executes these attached tasks itself, not waiting for external completion.
 
 ## Core Rules
 
@@ -40,8 +44,9 @@ auto-continue: true
 3. **Parse & Pass**: Extract required data from each command output (design run path, metadata)
 4. **Intelligent Validation**: Smart parameter validation with user-friendly error messages
 5. **Safety First**: Package overwrite protection, existence checks, fallback error handling
-6. **Track Progress**: Update TodoWrite after EVERY phase completion before starting next phase
+6. **Track Progress**: Update TodoWrite dynamically with task attachment/collapse pattern
-7. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. Each SlashCommand execution blocks until finished, then you MUST immediately execute the next phase. Workflow is NOT complete until Phase 3.
+7. **⚠️ CRITICAL: Task Attachment Model** - SlashCommand invocation **ATTACHES** tasks to current workflow. Orchestrator **EXECUTES** these attached tasks itself, not waiting for external completion. This is NOT delegation - it's task expansion.
+8. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. After executing all attached tasks, you MUST immediately collapse them and execute the next phase. Workflow is NOT complete until Phase 3.
 
 ---
 
@@ -96,13 +101,15 @@ auto-continue: true
 **TodoWrite** (First Action):
 ```json
 [
-  {"content": "Validate parameters and prepare session", "status": "in_progress", "activeForm": "Validating parameters"},
+  {"content": "Phase 0: Validate parameters and prepare session", "status": "in_progress", "activeForm": "Validating parameters"},
-  {"content": "Extract styles from source code", "status": "pending", "activeForm": "Extracting styles"},
+  {"content": "Phase 1: Style extraction from source code (import-from-code)", "status": "pending", "activeForm": "Extracting styles"},
-  {"content": "Generate reference package with preview", "status": "pending", "activeForm": "Generating reference"},
+  {"content": "Phase 2: Reference package generation (reference-page-generator)", "status": "pending", "activeForm": "Generating package"},
-  {"content": "Cleanup and verify package", "status": "pending", "activeForm": "Cleanup and verification"}
+  {"content": "Phase 3: Cleanup and verify package", "status": "pending", "activeForm": "Cleanup and verification"}
 ]
 ```
 
+**Note**: Orchestrator tracks only high-level phases. Sub-command details shown when executed.
+
 **Step 0a: Parse and Validate Required Parameters**
 
 ```bash
@@ -209,9 +216,24 @@ STORE: temp_session_id, temp_design_run_id, design_run_path
 - `TEMP_DESIGN_RUN_ID`: `design-run-{timestamp}`
 - `DESIGN_RUN_PATH`: Absolute path to temporary workspace
 
-**TodoWrite Update**: Mark Phase 0 completed, Phase 1 in_progress
+<!-- TodoWrite: Update Phase 0 → completed, Phase 1 → in_progress, INSERT import-from-code tasks -->
 
-**Next Action**: Validation complete → **IMMEDIATELY execute Phase 1** (auto-continue)
+**TodoWrite Update (Phase 1 SlashCommand invoked - tasks attached)**:
+```json
+[
+  {"content": "Phase 0: Validate parameters and prepare session", "status": "completed", "activeForm": "Validating parameters"},
+  {"content": "Phase 1.0: Discover and categorize code files (import-from-code)", "status": "in_progress", "activeForm": "Discovering code files"},
+  {"content": "Phase 1.1: Style Agent extraction (import-from-code)", "status": "pending", "activeForm": "Extracting style tokens"},
+  {"content": "Phase 1.2: Animation Agent extraction (import-from-code)", "status": "pending", "activeForm": "Extracting animation tokens"},
+  {"content": "Phase 1.3: Layout Agent extraction (import-from-code)", "status": "pending", "activeForm": "Extracting layout patterns"},
+  {"content": "Phase 2: Reference package generation (reference-page-generator)", "status": "pending", "activeForm": "Generating package"},
+  {"content": "Phase 3: Cleanup and verify package", "status": "pending", "activeForm": "Cleanup and verification"}
+]
+```
+
+**Note**: SlashCommand invocation **attaches** import-from-code's 4 tasks to current workflow. Orchestrator **executes** these tasks itself.
+
+**Next Action**: Tasks attached → **Execute Phase 1.0-1.3** sequentially
 
 ---
 
@@ -228,13 +250,19 @@ command = "/workflow:ui-design:import-from-code" +
           " --source \"${source}\""
 ```
 
-**Execute Command**:
+**Execute Command (Task Attachment Pattern)**:
 
 ```bash
 TRY:
+    # SlashCommand invocation ATTACHES import-from-code's 4 tasks to current workflow
+    # Orchestrator will EXECUTE these attached tasks itself:
+    #   1. Phase 1.0: Discover and categorize code files
+    #   2. Phase 1.1: Style Agent extraction
+    #   3. Phase 1.2: Animation Agent extraction
+    #   4. Phase 1.3: Layout Agent extraction
     SlashCommand(command)
 
-    # Verify extraction outputs
+    # After executing all attached tasks, verify extraction outputs
     tokens_path = "${design_run_path}/style-extraction/style-1/design-tokens.json"
     guide_path = "${design_run_path}/style-extraction/style-1/style-guide.md"
 
@@ -269,9 +297,24 @@ CATCH error:
   - `animation-tokens.json` - Animation specifications
   - `component-patterns.json` - Component catalog
 
-**TodoWrite Update**: Mark Phase 1 completed, Phase 2 in_progress
+<!-- TodoWrite: REMOVE Phase 1.0-1.3 tasks, INSERT reference-page-generator tasks -->
 
-**Next Action**: Extraction verified → **IMMEDIATELY execute Phase 2** (auto-continue)
+**TodoWrite Update (Phase 2 SlashCommand invoked - tasks attached)**:
+```json
+[
+  {"content": "Phase 0: Validate parameters and prepare session", "status": "completed", "activeForm": "Validating parameters"},
+  {"content": "Phase 1: Style extraction from source code (import-from-code)", "status": "completed", "activeForm": "Extracting styles"},
+  {"content": "Phase 2.1: Validation and preparation (reference-page-generator)", "status": "in_progress", "activeForm": "Validating parameters"},
+  {"content": "Phase 2.2: Component pattern extraction (reference-page-generator)", "status": "pending", "activeForm": "Extracting component patterns"},
+  {"content": "Phase 2.3: Generate preview pages (reference-page-generator)", "status": "pending", "activeForm": "Generating preview"},
+  {"content": "Phase 2.4: Generate metadata and documentation (reference-page-generator)", "status": "pending", "activeForm": "Generating documentation"},
+  {"content": "Phase 3: Cleanup and verify package", "status": "pending", "activeForm": "Cleanup and verification"}
+]
+```
+
+**Note**: Phase 1 tasks completed and collapsed. SlashCommand invocation **attaches** reference-page-generator's 4 tasks. Orchestrator **executes** these tasks itself.
+
+**Next Action**: Tasks attached → **Execute Phase 2.1-2.4** sequentially
 
 ---
 
@@ -288,13 +331,19 @@ command = "/workflow:ui-design:reference-page-generator " +
           "--output-dir \"${output_dir}\""
 ```
 
-**Execute Command**:
+**Execute Command (Task Attachment Pattern)**:
 
 ```bash
 TRY:
+    # SlashCommand invocation ATTACHES reference-page-generator's 4 tasks to current workflow
+    # Orchestrator will EXECUTE these attached tasks itself:
+    #   1. Phase 2.1: Validation and preparation
+    #   2. Phase 2.2: Component pattern extraction
+    #   3. Phase 2.3: Generate preview pages
+    #   4. Phase 2.4: Generate metadata and documentation
     SlashCommand(command)
 
-    # Verify package outputs
+    # After executing all attached tasks, verify package outputs
     required_files = [
         "design-tokens.json",
         "component-patterns.json",
@@ -343,9 +392,21 @@ CATCH error:
 - ⭕ Optional files:
   - `animation-tokens.json` - Animation specifications (if available from extraction)
 
-**TodoWrite Update**: Mark Phase 2 completed, Phase 3 in_progress
+<!-- TodoWrite: REMOVE Phase 2.1-2.4 tasks, restore to orchestrator view -->
 
-**Next Action**: Package verified → **IMMEDIATELY execute Phase 3** (auto-continue)
+**TodoWrite Update (Phase 2 completed - tasks collapsed)**:
+```json
+[
+  {"content": "Phase 0: Validate parameters and prepare session", "status": "completed", "activeForm": "Validating parameters"},
+  {"content": "Phase 1: Style extraction from source code (import-from-code)", "status": "completed", "activeForm": "Extracting styles"},
+  {"content": "Phase 2: Reference package generation (reference-page-generator)", "status": "completed", "activeForm": "Generating package"},
+  {"content": "Phase 3: Cleanup and verify package", "status": "in_progress", "activeForm": "Cleanup and verification"}
+]
+```
+
+**Note**: Phase 2 tasks completed and collapsed to summary.
+
+**Next Action**: TodoWrite restored → **Execute Phase 3** (orchestrator's own task)
 
 ---
 
@@ -375,7 +436,7 @@ component_count = Bash(jq -r '.extraction_metadata.component_count // "unknown"'
 anim_exists = Bash(test -f "${package_path}/animation-tokens.json" && echo "✓" || echo "○")
 ```
 
-**TodoWrite Update**: Mark Phase 3 completed
+<!-- TodoWrite: Update Phase 3 → completed -->
 
 **Final Action**: Display completion summary to user
 
@@ -403,20 +464,52 @@ Next: /memory:style-skill-memory {package_name}
 ## TodoWrite Pattern
 
 ```javascript
-// Initialize IMMEDIATELY after user confirms in Phase 0 to track multi-phase execution
+// Initialize IMMEDIATELY at the start to track orchestrator workflow (4 high-level tasks)
 TodoWrite({todos: [
-  {"content": "Validate parameters and prepare session", "status": "in_progress", "activeForm": "Validating parameters"},
+  {"content": "Phase 0: Validate parameters and prepare session", "status": "in_progress", "activeForm": "Validating parameters"},
-  {"content": "Extract styles from source code", "status": "pending", "activeForm": "Extracting styles"},
+  {"content": "Phase 1: Style extraction from source code (import-from-code)", "status": "pending", "activeForm": "Extracting styles"},
-  {"content": "Generate reference package with preview", "status": "pending", "activeForm": "Generating reference"},
+  {"content": "Phase 2: Reference package generation (reference-page-generator)", "status": "pending", "activeForm": "Generating package"},
-  {"content": "Cleanup and verify package", "status": "pending", "activeForm": "Cleanup and verification"}
+  {"content": "Phase 3: Cleanup and verify package", "status": "pending", "activeForm": "Cleanup and verification"}
 ]})
 
-// ⚠️ CRITICAL: When each phase finishes, you MUST:
+// ⚠️ CRITICAL: Dynamic TodoWrite task attachment strategy:
-// 1. SlashCommand blocks and returns when phase finishes executing
+//
-// 2. Update current phase: status → "completed"
+// **Key Concept**: SlashCommand invocation ATTACHES tasks to current workflow.
-// 3. Update next phase: status → "in_progress"
+// Orchestrator EXECUTES these attached tasks itself, not waiting for external completion.
-// 4. IMMEDIATELY execute next phase command (auto-continue)
+//
-// This ensures continuous workflow tracking and prevents premature stopping
+// 1. INITIAL STATE: 4 orchestrator-level tasks only
+//
+// 2. PHASE 1 SlashCommand INVOCATION:
+//    - SlashCommand(/workflow:ui-design:import-from-code) ATTACHES 4 tasks
+//    - TodoWrite expands to: Phase 0 (completed) + 4 import-from-code tasks + Phase 2 + Phase 3
+//    - Orchestrator EXECUTES these 4 tasks sequentially (Phase 1.0 → 1.1 → 1.2 → 1.3)
+//    - First attached task marked as in_progress
+//
+// 3. PHASE 1 TASKS COMPLETED:
+//    - All 4 import-from-code tasks executed and completed
+//    - COLLAPSE completed tasks into Phase 1 summary
+//    - TodoWrite becomes: Phase 0-1 (completed) + Phase 2 + Phase 3
+//
+// 4. PHASE 2 SlashCommand INVOCATION:
+//    - SlashCommand(/workflow:ui-design:reference-page-generator) ATTACHES 4 tasks
+//    - TodoWrite expands to: Phase 0-1 (completed) + 4 reference-page-generator tasks + Phase 3
+//    - Orchestrator EXECUTES these 4 tasks sequentially (Phase 2.1 → 2.2 → 2.3 → 2.4)
+//
+// 5. PHASE 2 TASKS COMPLETED:
+//    - All 4 reference-page-generator tasks executed and completed
+//    - COLLAPSE completed tasks into Phase 2 summary
+//    - TodoWrite returns to: Phase 0-2 (completed) + Phase 3 (in_progress)
+//
+// 6. PHASE 3 EXECUTION:
+//    - Orchestrator's own task (no SlashCommand attachment)
+//    - Mark Phase 3 as completed
+//    - Final state: All 4 orchestrator tasks completed
+//
+// Benefits:
+// ✓ Real-time visibility into attached tasks during execution
+// ✓ Clean orchestrator-level summary after tasks complete
+// ✓ Clear mental model: SlashCommand = attach tasks, not delegate work
+// ✓ Dynamic attachment/collapse maintains clarity
 ```
 
 ---
@@ -426,44 +519,73 @@ TodoWrite({todos: [
 ```
 User triggers: /workflow:ui-design:codify-style ./src --package-name my-style-v1
   ↓
-[Phase 0] TodoWrite initialization (4 phases)
+[TodoWrite Init] 4 orchestrator-level tasks
+  ├─ Phase 0: Validate parameters and prepare session (in_progress)
+  ├─ Phase 1: Style extraction from source code (pending)
+  ├─ Phase 2: Reference package generation (pending)
+  └─ Phase 3: Cleanup and verify package (pending)
   ↓
 [Phase 0] Parameter validation & preparation
   ├─ Parse positional path parameter
   ├─ Validate source directory exists
   ├─ Auto-generate or validate package name
-  │  • If --package-name provided: validate format
+  ├─ Check package overwrite protection
-  │  • If not provided: auto-generate from directory name
-  ├─ Check package overwrite protection (fail if exists without --overwrite)
   ├─ Create temporary workspace
   └─ Display configuration summary
   ↓
-[Phase 0 Complete] → TodoWrite(Phase 0 = completed, Phase 1 = in_progress)
+[Phase 0 Complete] → TodoWrite: Phase 0 → completed
-  ↓ (IMMEDIATELY auto-continue)
+  ↓
-[Phase 1] SlashCommand(/workflow:ui-design:import-from-code ...)
+[Phase 1 Invoke] → SlashCommand(/workflow:ui-design:import-from-code) ATTACHES 4 tasks
-  ├─ Extract design tokens from source code
+  ├─ Phase 0 (completed)
-  ├─ Generate style guide
+  ├─ Phase 1.0: Discover and categorize code files (in_progress)  ← ATTACHED
-  ├─ Extract component patterns
+  ├─ Phase 1.1: Style Agent extraction (pending)                   ← ATTACHED
-  └─ Verify extraction outputs
+  ├─ Phase 1.2: Animation Agent extraction (pending)               ← ATTACHED
-  ↓ (blocks until finished)
+  ├─ Phase 1.3: Layout Agent extraction (pending)                  ← ATTACHED
-[Phase 1 Complete] → TodoWrite(Phase 1 = completed, Phase 2 = in_progress)
+  ├─ Phase 2: Reference package generation (pending)
-  ↓ (IMMEDIATELY auto-continue)
+  └─ Phase 3: Cleanup and verify package (pending)
-[Phase 2] SlashCommand(/workflow:ui-design:reference-page-generator ...)
+  ↓
-  ├─ Generate design-tokens.json
+[Execute Phase 1.0] → Discover files (orchestrator executes this)
-  ├─ Generate component-patterns.json
+  ↓
-  ├─ Create preview.html + preview.css
+[Execute Phase 1.1-1.3] → Run 3 agents in parallel (orchestrator executes these)
-  ├─ Generate metadata.json
+  └─ Outputs: design-tokens.json, style-guide.md, animation-tokens.json, layout-templates.json
-  └─ Create README.md
+  ↓
-  ↓ (blocks until finished)
+[Phase 1 Complete] → TodoWrite: COLLAPSE Phase 1.0-1.3 into Phase 1 summary
-[Phase 2 Complete] → TodoWrite(Phase 2 = completed, Phase 3 = in_progress)
+  ↓
-  ↓ (IMMEDIATELY auto-continue)
+[Phase 2 Invoke] → SlashCommand(/workflow:ui-design:reference-page-generator) ATTACHES 4 tasks
-[Phase 3] Cleanup & Verification
+  ├─ Phase 0 (completed)
+  ├─ Phase 1: Style extraction from source code (completed)        ← COLLAPSED
+  ├─ Phase 2.1: Validation and preparation (in_progress)           ← ATTACHED
+  ├─ Phase 2.2: Component pattern extraction (pending)             ← ATTACHED
+  ├─ Phase 2.3: Generate preview pages (pending)                   ← ATTACHED
+  ├─ Phase 2.4: Generate metadata and documentation (pending)      ← ATTACHED
+  └─ Phase 3: Cleanup and verify package (pending)
+  ↓
+[Execute Phase 2.1] → Validate parameters (orchestrator executes this)
+  ↓
+[Execute Phase 2.2] → Extract component patterns (orchestrator executes this)
+  ↓
+[Execute Phase 2.3] → Generate preview pages (orchestrator executes this)
+  ↓
+[Execute Phase 2.4] → Generate metadata and docs (orchestrator executes this)
+  └─ Outputs: component-patterns.json, preview.html, preview.css, metadata.json, README.md
+  ↓
+[Phase 2 Complete] → TodoWrite: COLLAPSE Phase 2.1-2.4 into Phase 2 summary
+  ├─ Phase 0 (completed)
+  ├─ Phase 1: Style extraction from source code (completed)
+  ├─ Phase 2: Reference package generation (completed)             ← COLLAPSED
+  └─ Phase 3: Cleanup and verify package (in_progress)
+  ↓
+[Execute Phase 3] → Orchestrator's own task (no attachment needed)
   ├─ Remove temporary workspace
   ├─ Verify package directory
   ├─ Extract component count
   └─ Display completion summary
   ↓
-[Phase 3 Complete] → TodoWrite(Phase 3 = completed)
+[Phase 3 Complete] → TodoWrite: Phase 3 → completed
+  ├─ Phase 0 (completed)
+  ├─ Phase 1 (completed)
+  ├─ Phase 2 (completed)
+  └─ Phase 3 (completed)
 ```
 
 ---

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

@@ -19,22 +19,26 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
 **Autonomous Flow** (⚠️ CONTINUOUS EXECUTION - DO NOT STOP):
 1. User triggers: `/workflow:ui-design:explore-auto [params]`
 2. Phase 0c: Target confirmation → User confirms → **IMMEDIATELY triggers Phase 1**
-3. Phase 1 (style-extract) → **Execute phase (blocks until finished)** → Auto-continues to Phase 2.3
+3. Phase 1 (style-extract) → **Attach tasks → Execute → Collapse** → Auto-continues to Phase 2.3
 4. Phase 2.3 (animation-extract, conditional):
-   - **IF should_extract_animation**: Execute animation extraction → Auto-continues to Phase 2.5
+   - **IF should_extract_animation**: **Attach tasks → Execute → Collapse** → Auto-continues to Phase 2.5
    - **ELSE**: Skip (use code import) → Auto-continues to Phase 2.5
-5. Phase 2.5 (layout-extract) → **Execute phase (blocks until finished)** → Auto-continues to Phase 3
+5. Phase 2.5 (layout-extract) → **Attach tasks → Execute → Collapse** → Auto-continues to Phase 3
-6. **Phase 3 (ui-assembly)** → **Execute phase (blocks until finished)** → Auto-continues to Phase 4
+6. **Phase 3 (ui-assembly)** → **Attach tasks → Execute → Collapse** → Auto-continues to Phase 4
-7. Phase 4 (design-update) → **Execute phase (blocks until finished)** → Auto-continues to Phase 5 (if --batch-plan)
+7. Phase 4 (design-update) → **Attach tasks → Execute → Collapse** → Auto-continues to Phase 5 (if --batch-plan)
 8. Phase 5 (batch-plan, optional) → Reports completion
 
 **Phase Transition Mechanism**:
 - **Phase 0c (User Interaction)**: User confirms targets → IMMEDIATELY triggers Phase 1
-- **Phase 1-5 (Autonomous)**: `SlashCommand` is BLOCKING - execution pauses until the command finishes
+- **Phase 1-5 (Autonomous)**: `SlashCommand` invocation **ATTACHES** tasks to current workflow
-- When each phase finishes executing: Automatically process output and execute next phase
+- **Task Execution**: Orchestrator **EXECUTES** these attached tasks itself
+- **Task Collapse**: After tasks complete, collapse them into phase summary
+- **Phase Transition**: Automatically execute next phase after collapsing
 - No additional user interaction after Phase 0c confirmation
 
-**Auto-Continue Mechanism**: TodoWrite tracks phase status. When each phase finishes executing, you MUST immediately construct and execute the next phase command. No user intervention required. The workflow is NOT complete until reaching Phase 4 (or Phase 5 if --batch-plan).
+**Auto-Continue Mechanism**: TodoWrite tracks phase status with dynamic task attachment/collapse. After executing all attached tasks, you MUST immediately collapse them, restore phase summary, and execute the next phase. No user intervention required. The workflow is NOT complete until reaching Phase 4 (or Phase 5 if --batch-plan).
+
+**Task Attachment Model**: SlashCommand invocation is NOT delegation - it's task expansion. The orchestrator executes these attached tasks itself, not waiting for external completion.
 
 **Target Type Detection**: Automatically inferred from prompt/targets, or explicitly set via `--target-type`.
 
@@ -44,8 +48,9 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
 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
+5. **Track Progress**: Update TodoWrite dynamically with task attachment/collapse pattern
-6. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. Each SlashCommand execution blocks until finished, then you MUST immediately execute the next phase. Workflow is NOT complete until Phase 4 (or Phase 5 if --batch-plan).
+6. **⚠️ CRITICAL: Task Attachment Model** - SlashCommand invocation **ATTACHES** tasks to current workflow. Orchestrator **EXECUTES** these attached tasks itself, not waiting for external completion. This is NOT delegation - it's task expansion.
+7. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. After executing all attached tasks, you MUST immediately collapse them and execute the next phase. Workflow is NOT complete until Phase 4 (or Phase 5 if --batch-plan).
 
 ## Parameter Requirements
 
@@ -376,6 +381,10 @@ IF design_source IN ["code_only", "hybrid"]:
     command = "/workflow:ui-design:import-from-code --design-id \"{design_id}\" --source \"{code_base_path}\""
 
     TRY:
+        # SlashCommand invocation ATTACHES import-from-code's tasks to current workflow
+        # Orchestrator will EXECUTE these attached tasks itself:
+        #   - Phase 0: Discover and categorize code files
+        #   - Phase 1.1-1.3: Style/Animation/Layout Agent extraction
         SlashCommand(command)
     CATCH error:
         WARN: "⚠️ Code import failed: {error}"
@@ -483,7 +492,12 @@ IF design_source == "visual_only" OR needs_visual_supplement:
               (images_input ? "--images \"{images_input}\" " : "") +
               (prompt_text ? "--prompt \"{prompt_text}\" " : "") +
               "--variants {style_variants} --interactive"
+
+    # SlashCommand invocation ATTACHES style-extract's tasks to current workflow
+    # Orchestrator will EXECUTE these attached tasks itself
     SlashCommand(command)
+
+    # After executing all attached tasks, collapse them into phase summary
 ELSE:
     REPORT: "✅ Phase 1: Style (Using Code Import)"
 ```
@@ -518,12 +532,16 @@ IF should_extract_animation:
     command_parts.append("--interactive")
 
     command = " ".join(command_parts)
+
+    # SlashCommand invocation ATTACHES animation-extract's tasks to current workflow
+    # Orchestrator will EXECUTE these attached tasks itself
     SlashCommand(command)
+
+    # After executing all attached tasks, collapse them into phase summary
 ELSE:
     REPORT: "✅ Phase 2.3: Animation (Using Code Import)"
 
 # Output: animation-tokens.json + animation-guide.md
-# SlashCommand blocks until phase finishes executing
 # When phase finishes, IMMEDIATELY execute Phase 2.5 (auto-continue)
 ```
 
@@ -537,7 +555,12 @@ IF (design_source == "visual_only" OR needs_visual_supplement) OR (NOT layout_co
               (images_input ? "--images \"{images_input}\" " : "") +
               (prompt_text ? "--prompt \"{prompt_text}\" " : "") +
               "--targets \"{targets_string}\" --variants {layout_variants} --device-type \"{device_type}\" --interactive"
+
+    # SlashCommand invocation ATTACHES layout-extract's tasks to current workflow
+    # Orchestrator will EXECUTE these attached tasks itself
     SlashCommand(command)
+
+    # After executing all attached tasks, collapse them into phase summary
 ELSE:
     REPORT: "✅ Phase 2.5: Layout (Using Code Import)"
 ```
@@ -553,9 +576,11 @@ REPORT: "   → Pure assembly: Combining layout templates + design tokens"
 REPORT: "   → Device: {device_type} (from layout templates)"
 REPORT: "   → Assembly tasks: {total} combinations"
 
+# SlashCommand invocation ATTACHES generate's tasks to current workflow
+# Orchestrator will EXECUTE these attached tasks itself
 SlashCommand(command)
 
-# SlashCommand blocks until phase finishes executing
+# After executing all attached tasks, collapse them into phase summary
 # When phase finishes, IMMEDIATELY execute Phase 4 (auto-continue)
 # Output:
 # - {target}-style-{s}-layout-{l}.html (assembled prototypes)
@@ -567,9 +592,12 @@ SlashCommand(command)
 ### Phase 4: Design System Integration
 ```bash
 command = "/workflow:ui-design:update" + (--session ? " --session {session_id}" : "")
+
+# SlashCommand invocation ATTACHES update's tasks to current workflow
+# Orchestrator will EXECUTE these attached tasks itself
 SlashCommand(command)
 
-# SlashCommand blocks until phase finishes executing
+# After executing all attached tasks, collapse them into phase summary
 # When phase finishes:
 #   - If --batch-plan flag present: IMMEDIATELY execute Phase 5 (auto-continue)
 #   - If no --batch-plan: Workflow complete, display final report
@@ -580,12 +608,15 @@ SlashCommand(command)
 IF --batch-plan:
     FOR target IN inferred_target_list:
         task_desc = "Implement {target} {target_type} based on design system"
+
+        # SlashCommand invocation ATTACHES plan's tasks to current workflow
+        # Orchestrator will EXECUTE these attached tasks itself
         SlashCommand("/workflow:plan --agent \"{task_desc}\"")
 ```
 
 ## TodoWrite Pattern
 ```javascript
-// Initialize IMMEDIATELY after Phase 0c user confirmation to track multi-phase execution
+// Initialize IMMEDIATELY after Phase 0c user confirmation to track multi-phase execution (5 orchestrator-level tasks)
 TodoWrite({todos: [
   {"content": "Execute style extraction", "status": "in_progress", "activeForm": "Executing style extraction"},
   {"content": "Execute animation extraction", "status": "pending", "activeForm": "Executing animation extraction"},
@@ -594,12 +625,24 @@ TodoWrite({todos: [
   {"content": "Execute design integration", "status": "pending", "activeForm": "Executing design integration"}
 ]})
 
-// ⚠️ CRITICAL: When each SlashCommand execution finishes (Phase 1-5), you MUST:
+// ⚠️ CRITICAL: Dynamic TodoWrite task attachment strategy:
-// 1. SlashCommand blocks and returns when phase finishes executing
+//
-// 2. Update current phase: status → "completed"
+// **Key Concept**: SlashCommand invocation ATTACHES tasks to current workflow.
-// 3. Update next phase: status → "in_progress"
+// Orchestrator EXECUTES these attached tasks itself, not waiting for external completion.
-// 4. IMMEDIATELY execute next phase SlashCommand (auto-continue)
+//
-// This ensures continuous workflow tracking and prevents premature stopping
+// Phase 1-5 SlashCommand Invocation Pattern:
+// 1. SlashCommand invocation ATTACHES sub-command tasks to TodoWrite
+// 2. TodoWrite expands to include attached tasks
+// 3. Orchestrator EXECUTES attached tasks sequentially
+// 4. After all attached tasks complete, COLLAPSE them into phase summary
+// 5. Update next phase to in_progress
+// 6. IMMEDIATELY execute next phase SlashCommand (auto-continue)
+//
+// Benefits:
+// ✓ Real-time visibility into sub-command task progress
+// ✓ Clean orchestrator-level summary after each phase
+// ✓ Clear mental model: SlashCommand = attach tasks, not delegate work
+// ✓ Dynamic attachment/collapse maintains clarity
 ```
 
 ## Completion Output

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

@@ -17,28 +17,33 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
 - **Hybrid**: Combine both code and visual inputs
 
 **Autonomous Flow** (⚠️ CONTINUOUS EXECUTION - DO NOT STOP):
-1. User triggers: `/workflow:ui-design:imitate-auto [--images "..."] [--prompt "..."]`
+1. User triggers: `/workflow:ui-design:imitate-auto [--input "..."]`
 2. Phase 0: Initialize and detect input sources
-3. Phase 2: Style extraction (complete design systems) → **Execute phase (blocks until finished)** → Auto-continues
+3. Phase 2: Style extraction → **Attach tasks → Execute → Collapse** → Auto-continues
-4. Phase 2.3: Animation extraction (CSS auto mode) → **Execute phase (blocks until finished)** → Auto-continues
+4. Phase 2.3: Animation extraction → **Attach tasks → Execute → Collapse** → Auto-continues
-5. Phase 2.5: Layout extraction (structure templates) → **Execute phase (blocks until finished)** → Auto-continues
+5. Phase 2.5: Layout extraction → **Attach tasks → Execute → Collapse** → Auto-continues
-6. Phase 3: Batch UI assembly → **Execute phase (blocks until finished)** → Auto-continues
+6. Phase 3: Batch UI assembly → **Attach tasks → Execute → Collapse** → Auto-continues
-7. Phase 4: Design system integration → Reports completion
+7. Phase 4: Design system integration → **Execute orchestrator task** → Reports completion
 
 **Phase Transition Mechanism**:
-- `SlashCommand` is BLOCKING - execution pauses until the command finishes
+- **Task Attachment**: `SlashCommand` invocation **ATTACHES** tasks to current workflow
-- When each phase finishes executing: Automatically process output and execute next phase
+- **Task Execution**: Orchestrator **EXECUTES** these attached tasks itself
+- **Task Collapse**: After tasks complete, collapse them into phase summary
+- **Phase Transition**: Automatically execute next phase after collapsing
 - No user interaction required after initial parameter parsing
 
-**Auto-Continue Mechanism**: TodoWrite tracks phase status. When each phase finishes executing, you MUST immediately construct and execute the next phase command. No user intervention required. The workflow is NOT complete until reaching Phase 4.
+**Auto-Continue Mechanism**: TodoWrite tracks phase status with dynamic task attachment/collapse. After executing all attached tasks, you MUST immediately collapse them, restore phase summary, and execute the next phase. No user intervention required. The workflow is NOT complete until reaching Phase 4.
+
+**Task Attachment Model**: SlashCommand invocation is NOT delegation - it's task expansion. The orchestrator executes these attached tasks itself, not waiting for external completion.
 
 ## Core Rules
 
 1. **Start Immediately**: TodoWrite initialization → Phase 2 execution
 2. **No Preliminary Validation**: Sub-commands handle their own validation
 3. **Parse & Pass**: Extract data from each output for next phase
-4. **Track Progress**: Update TodoWrite after each phase
+4. **Track Progress**: Update TodoWrite dynamically with task attachment/collapse pattern
-5. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. Each SlashCommand execution blocks until finished, then you MUST immediately execute the next phase. Workflow is NOT complete until Phase 4.
+5. **⚠️ CRITICAL: Task Attachment Model** - SlashCommand invocation **ATTACHES** tasks to current workflow. Orchestrator **EXECUTES** these attached tasks itself, not waiting for external completion. This is NOT delegation - it's task expansion.
+6. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. After executing all attached tasks, you MUST immediately collapse them and execute the next phase. Workflow is NOT complete until Phase 4.
 
 ## Parameter Requirements
 
@@ -240,6 +245,10 @@ IF design_source == "hybrid":
               "--source \"{code_base_path}\""
 
     TRY:
+        # SlashCommand invocation ATTACHES import-from-code's tasks to current workflow
+        # Orchestrator will EXECUTE these attached tasks itself:
+        #   - Phase 0: Discover and categorize code files
+        #   - Phase 1.1-1.3: Style/Animation/Layout Agent extraction
         SlashCommand(command)
     CATCH error:
         WARN: "Code import failed: {error}"
@@ -351,9 +360,13 @@ ELSE:
     command_parts.extend(["--variants 1", "--refine", "--interactive"])
 
     extract_command = " ".join(command_parts)
+
+    # SlashCommand invocation ATTACHES style-extract's tasks to current workflow
+    # Orchestrator will EXECUTE these attached tasks itself
     SlashCommand(extract_command)
 
-TodoWrite(mark_completed: "Extract style", mark_in_progress: "Extract animation")
+    # After executing all attached tasks, collapse them into phase summary
+    TodoWrite(mark_completed: "Extract style", mark_in_progress: "Extract animation")
 ```
 
 ### Phase 2.3: Animation Extraction
@@ -378,9 +391,13 @@ ELSE:
     command_parts.extend(["--refine", "--interactive"])
 
     animation_extract_command = " ".join(command_parts)
+
+    # SlashCommand invocation ATTACHES animation-extract's tasks to current workflow
+    # Orchestrator will EXECUTE these attached tasks itself
     SlashCommand(animation_extract_command)
 
-TodoWrite(mark_completed: "Extract animation", mark_in_progress: "Extract layout")
+    # After executing all attached tasks, collapse them into phase summary
+    TodoWrite(mark_completed: "Extract animation", mark_in_progress: "Extract layout")
 ```
 
 ### Phase 2.5: Layout Extraction
@@ -407,9 +424,13 @@ ELSE:
     command_parts.extend(["--variants 1", "--refine", "--interactive"])
 
     layout_extract_command = " ".join(command_parts)
+
+    # SlashCommand invocation ATTACHES layout-extract's tasks to current workflow
+    # Orchestrator will EXECUTE these attached tasks itself
     SlashCommand(layout_extract_command)
 
-TodoWrite(mark_completed: "Extract layout", mark_in_progress: "Assemble UI")
+    # After executing all attached tasks, collapse them into phase summary
+    TodoWrite(mark_completed: "Extract layout", mark_in_progress: "Assemble UI")
 ```
 
 ### Phase 3: UI Assembly
@@ -417,8 +438,12 @@ TodoWrite(mark_completed: "Extract layout", mark_in_progress: "Assemble UI")
 ```bash
 REPORT: "🚀 Phase 3: UI Assembly"
 generate_command = f"/workflow:ui-design:generate --design-id \"{design_id}\""
+
+# SlashCommand invocation ATTACHES generate's tasks to current workflow
+# Orchestrator will EXECUTE these attached tasks itself
 SlashCommand(generate_command)
 
+# After executing all attached tasks, collapse them into phase summary
 TodoWrite(mark_completed: "Assemble UI", mark_in_progress: session_id ? "Integrate design system" : "Completion")
 ```
 
@@ -428,6 +453,9 @@ TodoWrite(mark_completed: "Assemble UI", mark_in_progress: session_id ? "Integra
 IF session_id:
     REPORT: "🚀 Phase 4: Design System Integration"
     update_command = f"/workflow:ui-design:update --session {session_id}"
+
+    # SlashCommand invocation ATTACHES update's tasks to current workflow
+    # Orchestrator will EXECUTE these attached tasks itself
     SlashCommand(update_command)
 
 # Update metadata
@@ -540,7 +568,7 @@ ELSE:
 ## TodoWrite Pattern
 
 ```javascript
-// Initialize IMMEDIATELY at start of Phase 0 to track multi-phase execution
+// Initialize IMMEDIATELY at start of Phase 0 to track multi-phase execution (6 orchestrator-level tasks)
 TodoWrite({todos: [
   {content: "Initialize and detect design source", status: "in_progress", activeForm: "Initializing"},
   {content: "Extract style (complete design systems)", status: "pending", activeForm: "Extracting style"},
@@ -550,12 +578,24 @@ TodoWrite({todos: [
   {content: "Integrate design system", status: "pending", activeForm: "Integrating"}
 ]})
 
-// ⚠️ CRITICAL: When each SlashCommand execution finishes (Phase 2-4), you MUST:
+// ⚠️ CRITICAL: Dynamic TodoWrite task attachment strategy:
-// 1. SlashCommand blocks and returns when phase finishes executing
+//
-// 2. Update current phase: status → "completed"
+// **Key Concept**: SlashCommand invocation ATTACHES tasks to current workflow.
-// 3. Update next phase: status → "in_progress"
+// Orchestrator EXECUTES these attached tasks itself, not waiting for external completion.
-// 4. IMMEDIATELY execute next phase SlashCommand (auto-continue)
+//
-// This ensures continuous workflow tracking and prevents premature stopping
+// Phase 2-4 SlashCommand Invocation Pattern:
+// 1. SlashCommand invocation ATTACHES sub-command tasks to TodoWrite
+// 2. TodoWrite expands to include attached tasks
+// 3. Orchestrator EXECUTES attached tasks sequentially
+// 4. After all attached tasks complete, COLLAPSE them into phase summary
+// 5. Update next phase to in_progress
+// 6. IMMEDIATELY execute next phase SlashCommand (auto-continue)
+//
+// Benefits:
+// ✓ Real-time visibility into sub-command task progress
+// ✓ Clean orchestrator-level summary after each phase
+// ✓ Clear mental model: SlashCommand = attach tasks, not delegate work
+// ✓ Dynamic attachment/collapse maintains clarity
 ```
 
 ## Error Handling

.claude/commands/workflow/ui-design/import-from-code.md

@@ -113,7 +113,9 @@ echo "  Output: $discovery_file"
 ```json
 [
   {"content": "Phase 0: 发现和分类代码文件", "status": "in_progress", "activeForm": "发现代码文件"},
-  {"content": "Phase 1: 并行Agent分析并生成completeness-report.json", "status": "pending", "activeForm": "生成design system"}
+  {"content": "Phase 1.1: Style Agent - 提取视觉token (design-tokens.json, style-guide.md)", "status": "pending", "activeForm": "提取视觉token"},
+  {"content": "Phase 1.2: Animation Agent - 提取动画token (animation-tokens.json, animation-guide.md)", "status": "pending", "activeForm": "提取动画token"},
+  {"content": "Phase 1.3: Layout Agent - 提取布局模式 (layout-templates.json, layout-guide.md)", "status": "pending", "activeForm": "提取布局模式"}
 ]
 ```
 
@@ -127,15 +129,7 @@ echo "  Output: $discovery_file"
   - Structure: `{ "css": [...], "js": [...], "html": [...], "counts": {...}, "discovery_time": "..." }`
   - Generated via bash commands using `find` + JSON formatting
 
-<!-- TodoWrite: Mark Phase 0 complete, start Phase 1 -->
+<!-- TodoWrite: Update Phase 0 → completed, Phase 1.1-1.3 → in_progress (all 3 agents in parallel) -->
-
-**TodoWrite**:
-```json
-[
-  {"content": "Phase 0: 发现和分类代码文件", "status": "completed", "activeForm": "发现代码文件"},
-  {"content": "Phase 1: 并行Agent分析并生成completeness-report.json", "status": "in_progress", "activeForm": "生成design system"}
-]
-```
 
 ---
 
@@ -401,15 +395,7 @@ Task(ui-design-agent): `
 echo "[Phase 1] Parallel agent analysis complete"
 ```
 
-<!-- TodoWrite: Mark all complete -->
+<!-- TodoWrite: Update Phase 1.1-1.3 → completed (all 3 agents complete together) -->
-
-**TodoWrite**:
-```json
-[
-  {"content": "Phase 0: 发现和分类代码文件", "status": "completed", "activeForm": "发现代码文件"},
-  {"content": "Phase 1: 并行Agent分析并生成completeness-report.json", "status": "completed", "activeForm": "生成design system"}
-]
-```
 
 ---