mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-13 02:41:50 +08:00
docs: Update documentation for v5.9.6 with new commands and features
- Update README_CN.md version badge to v5.9.6 - Update COMMAND_REFERENCE.md with new commands: - workflow:lite-fix (bug diagnosis workflow) - workflow:lite-execute (in-memory execution) - workflow:review-module-cycle (module code review) - workflow:review-session-cycle (session code review) - workflow:review-fix (automated fixing) - memory:docs-* CLI commands - memory:skill-memory, tech-research, workflow-skill-memory - Update analyze_commands.py: - Add lite workflows relationships - Add review cycle workflows relationships - Update essential commands list - Rebuild command-guide index with updated relationships 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
@@ -23,6 +23,44 @@ Extract animation and transition patterns from prompt inference and image refere
|
||||
- **Production-Ready**: CSS var() format, WCAG-compliant, semantic naming
|
||||
- **Default Behavior**: Non-interactive mode uses inferred patterns + best practices
|
||||
|
||||
## Execution Process
|
||||
|
||||
```
|
||||
Input Parsing:
|
||||
├─ Parse flags: --design-id, --session, --images, --focus, --interactive, --refine
|
||||
└─ Decision (mode detection):
|
||||
├─ --refine flag → Refinement Mode
|
||||
└─ No --refine → Exploration Mode
|
||||
|
||||
Phase 0: Setup & Input Validation
|
||||
├─ Step 1: Detect input mode & base path
|
||||
├─ Step 2: Prepare image references (if available)
|
||||
├─ Step 3: Load design tokens context
|
||||
└─ Step 4: Memory check (skip if exists)
|
||||
|
||||
Phase 1: Animation Specification Generation
|
||||
├─ Step 1: Load project context
|
||||
├─ Step 2: Generate animation specification options (Agent Task 1)
|
||||
│ └─ Decision:
|
||||
│ ├─ Exploration Mode → Generate specification questions
|
||||
│ └─ Refinement Mode → Generate refinement options
|
||||
└─ Step 3: Verify options file created
|
||||
|
||||
Phase 1.5: User Confirmation (Optional)
|
||||
└─ Decision (--interactive flag):
|
||||
├─ --interactive present → Present options, capture selection
|
||||
└─ No --interactive → Skip to Phase 2
|
||||
|
||||
Phase 2: Animation System Generation
|
||||
├─ Step 1: Load user selection or use defaults
|
||||
├─ Step 2: Create output directory
|
||||
└─ Step 3: Launch animation generation task (Agent Task 2)
|
||||
|
||||
Phase 3: Verify Output
|
||||
├─ Step 1: Check files created
|
||||
└─ Step 2: Verify file sizes
|
||||
```
|
||||
|
||||
## Phase 0: Setup & Input Validation
|
||||
|
||||
### Step 1: Detect Input Mode & Base Path
|
||||
|
||||
@@ -19,6 +19,48 @@ Synchronize finalized design system references to brainstorming artifacts, prepa
|
||||
- **Plan-Ready Output**: Ensure design artifacts discoverable by task-generate
|
||||
- **Minimal Reading**: Verify file existence, don't read design content
|
||||
|
||||
## Execution Process
|
||||
|
||||
```
|
||||
Input Parsing:
|
||||
├─ Parse flags: --session, --selected-prototypes
|
||||
└─ Validation: session_id REQUIRED
|
||||
|
||||
Phase 1: Session & Artifact Validation
|
||||
├─ Step 1: Validate session exists
|
||||
├─ Step 2: Find latest design run
|
||||
├─ Step 3: Detect design system structure
|
||||
└─ Step 4: Select prototypes (--selected-prototypes OR all)
|
||||
|
||||
Phase 1.1: Memory Check (Conditional)
|
||||
└─ Decision (current design run in synthesis):
|
||||
├─ Already updated → Skip Phase 2-5, EXIT
|
||||
└─ Not found → Continue to Phase 2
|
||||
|
||||
Phase 2: Load Target Artifacts
|
||||
├─ Read role analysis documents (files to update)
|
||||
├─ Read ui-designer/analysis.md (if exists)
|
||||
└─ Read prototype notes (minimal context)
|
||||
|
||||
Phase 3: Update Synthesis Specification
|
||||
└─ Edit role analysis documents with UI/UX Guidelines section
|
||||
|
||||
Phase 4A: Update Relevant Role Analysis Documents
|
||||
├─ ui-designer/analysis.md (always)
|
||||
├─ ux-expert/analysis.md (if animations exist)
|
||||
├─ system-architect/analysis.md (if layouts exist)
|
||||
└─ product-manager/analysis.md (if prototypes)
|
||||
|
||||
Phase 4B: Create UI Designer Design System Reference
|
||||
└─ Write ui-designer/design-system-reference.md
|
||||
|
||||
Phase 5: Update Context Package
|
||||
└─ Update context-package.json with design system references
|
||||
|
||||
Phase 6: Completion
|
||||
└─ Report updated artifacts
|
||||
```
|
||||
|
||||
## Execution Protocol
|
||||
|
||||
### Phase 1: Session & Artifact Validation
|
||||
|
||||
@@ -27,8 +27,8 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
6. **Phase 10 (ui-assembly)** → **Attach tasks → Execute → Collapse** → Workflow complete
|
||||
|
||||
**Phase Transition Mechanism**:
|
||||
- **Phase 5 (User Interaction)**: User confirms targets → IMMEDIATELY triggers Phase 7
|
||||
- **Phase 7-10 (Autonomous)**: `SlashCommand` invocation **ATTACHES** tasks to current workflow
|
||||
- **Phase 5 (User Interaction)**: User confirms targets → IMMEDIATELY dispatches Phase 7
|
||||
- **Phase 7-10 (Autonomous)**: SlashCommand dispatch **ATTACHES** tasks to current workflow
|
||||
- **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
|
||||
@@ -36,10 +36,55 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
|
||||
**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 Phase 10 (UI assembly) finishes.
|
||||
|
||||
**Task Attachment Model**: SlashCommand invocation is NOT delegation - it's task expansion. The orchestrator executes these attached tasks itself, not waiting for external completion.
|
||||
**Task Attachment Model**: SlashCommand dispatch 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`.
|
||||
|
||||
## Execution Process
|
||||
|
||||
```
|
||||
Input Parsing:
|
||||
├─ Parse flags: --input, --targets, --target-type, --device-type, --session, --style-variants, --layout-variants
|
||||
└─ Decision (input detection):
|
||||
├─ Contains * or glob matches → images_input (visual)
|
||||
├─ File/directory exists → code import source
|
||||
└─ Pure text → design prompt
|
||||
|
||||
Phase 1-4: Parameter Parsing & Initialization
|
||||
├─ Phase 1: Normalize parameters (legacy deprecation warning)
|
||||
├─ Phase 2: Intelligent prompt parsing (extract variant counts)
|
||||
├─ Phase 3: Device type inference (explicit > keywords > target_type > default)
|
||||
└─ Phase 4: Run initialization and directory setup
|
||||
|
||||
Phase 5: Unified Target Inference
|
||||
├─ Priority: --pages/--components (legacy) → --targets → prompt analysis → synthesis → default
|
||||
├─ Display confirmation with modification options
|
||||
└─ User confirms → IMMEDIATELY triggers Phase 7
|
||||
|
||||
Phase 6: Code Import (Conditional)
|
||||
└─ Decision (design_source):
|
||||
├─ code_only | hybrid → Dispatch /workflow:ui-design:import-from-code
|
||||
└─ visual_only → Skip to Phase 7
|
||||
|
||||
Phase 7: Style Extraction
|
||||
└─ Decision (needs_visual_supplement):
|
||||
├─ visual_only OR supplement needed → Dispatch /workflow:ui-design:style-extract
|
||||
└─ code_only AND style_complete → Use code import
|
||||
|
||||
Phase 8: Animation Extraction
|
||||
└─ Decision (should_extract_animation):
|
||||
├─ visual_only OR incomplete OR regenerate → Dispatch /workflow:ui-design:animation-extract
|
||||
└─ code_only AND animation_complete → Use code import
|
||||
|
||||
Phase 9: Layout Extraction
|
||||
└─ Decision (needs_visual_supplement OR NOT layout_complete):
|
||||
├─ True → Dispatch /workflow:ui-design:layout-extract
|
||||
└─ False → Use code import
|
||||
|
||||
Phase 10: UI Assembly
|
||||
└─ Dispatch /workflow:ui-design:generate → Workflow complete
|
||||
```
|
||||
|
||||
## Core Rules
|
||||
|
||||
1. **Start Immediately**: TodoWrite initialization → Phase 7 execution
|
||||
@@ -47,7 +92,7 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
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 dynamically with task attachment/collapse pattern
|
||||
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.
|
||||
6. **⚠️ CRITICAL: Task Attachment Model** - SlashCommand dispatch **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 10 (UI assembly) finishes.
|
||||
|
||||
## Parameter Requirements
|
||||
@@ -310,13 +355,16 @@ detect_target_type(target_list):
|
||||
```
|
||||
|
||||
### Phase 6: Code Import & Completeness Assessment (Conditional)
|
||||
```bash
|
||||
|
||||
**Step 6.1: Dispatch** - Import design system from code files
|
||||
|
||||
```javascript
|
||||
IF design_source IN ["code_only", "hybrid"]:
|
||||
REPORT: "🔍 Phase 6: Code Import ({design_source})"
|
||||
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
|
||||
# SlashCommand dispatch 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
|
||||
@@ -420,7 +468,10 @@ IF design_source IN ["code_only", "hybrid"]:
|
||||
```
|
||||
|
||||
### Phase 7: Style Extraction
|
||||
```bash
|
||||
|
||||
**Step 7.1: Dispatch** - Extract style design systems
|
||||
|
||||
```javascript
|
||||
IF design_source == "visual_only" OR needs_visual_supplement:
|
||||
REPORT: "🎨 Phase 7: Style Extraction (variants: {style_variants})"
|
||||
command = "/workflow:ui-design:style-extract --design-id \"{design_id}\" " +
|
||||
@@ -428,7 +479,7 @@ IF design_source == "visual_only" OR needs_visual_supplement:
|
||||
(prompt_text ? "--prompt \"{prompt_text}\" " : "") +
|
||||
"--variants {style_variants} --interactive"
|
||||
|
||||
# SlashCommand invocation ATTACHES style-extract's tasks to current workflow
|
||||
# SlashCommand dispatch ATTACHES style-extract's tasks to current workflow
|
||||
# Orchestrator will EXECUTE these attached tasks itself
|
||||
SlashCommand(command)
|
||||
|
||||
@@ -438,7 +489,10 @@ ELSE:
|
||||
```
|
||||
|
||||
### Phase 8: Animation Extraction
|
||||
```bash
|
||||
|
||||
**Step 8.1: Dispatch** - Extract animation patterns
|
||||
|
||||
```javascript
|
||||
# Determine if animation extraction is needed
|
||||
should_extract_animation = false
|
||||
|
||||
@@ -468,7 +522,7 @@ IF should_extract_animation:
|
||||
|
||||
command = " ".join(command_parts)
|
||||
|
||||
# SlashCommand invocation ATTACHES animation-extract's tasks to current workflow
|
||||
# SlashCommand dispatch ATTACHES animation-extract's tasks to current workflow
|
||||
# Orchestrator will EXECUTE these attached tasks itself
|
||||
SlashCommand(command)
|
||||
|
||||
@@ -481,7 +535,10 @@ ELSE:
|
||||
```
|
||||
|
||||
### Phase 9: Layout Extraction
|
||||
```bash
|
||||
|
||||
**Step 9.1: Dispatch** - Extract layout templates
|
||||
|
||||
```javascript
|
||||
targets_string = ",".join(inferred_target_list)
|
||||
|
||||
IF (design_source == "visual_only" OR needs_visual_supplement) OR (NOT layout_complete):
|
||||
@@ -491,7 +548,7 @@ IF (design_source == "visual_only" OR needs_visual_supplement) OR (NOT layout_co
|
||||
(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
|
||||
# SlashCommand dispatch ATTACHES layout-extract's tasks to current workflow
|
||||
# Orchestrator will EXECUTE these attached tasks itself
|
||||
SlashCommand(command)
|
||||
|
||||
@@ -501,7 +558,10 @@ ELSE:
|
||||
```
|
||||
|
||||
### Phase 10: UI Assembly
|
||||
```bash
|
||||
|
||||
**Step 10.1: Dispatch** - Assemble UI prototypes from design tokens and layout templates
|
||||
|
||||
```javascript
|
||||
command = "/workflow:ui-design:generate --design-id \"{design_id}\"" + (--session ? " --session {session_id}" : "")
|
||||
|
||||
total = style_variants × layout_variants × len(inferred_target_list)
|
||||
@@ -511,7 +571,7 @@ 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
|
||||
# SlashCommand dispatch ATTACHES generate's tasks to current workflow
|
||||
# Orchestrator will EXECUTE these attached tasks itself
|
||||
SlashCommand(command)
|
||||
|
||||
@@ -528,25 +588,34 @@ SlashCommand(command)
|
||||
```javascript
|
||||
// Initialize IMMEDIATELY after Phase 5 user confirmation to track multi-phase execution (4 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"},
|
||||
{"content": "Execute layout extraction", "status": "pending", "activeForm": "Executing layout extraction"},
|
||||
{"content": "Execute UI assembly", "status": "pending", "activeForm": "Executing UI assembly"}
|
||||
{"content": "Phase 7: Style Extraction", "status": "in_progress", "activeForm": "Executing style extraction"},
|
||||
{"content": "Phase 8: Animation Extraction", "status": "pending", "activeForm": "Executing animation extraction"},
|
||||
{"content": "Phase 9: Layout Extraction", "status": "pending", "activeForm": "Executing layout extraction"},
|
||||
{"content": "Phase 10: UI Assembly", "status": "pending", "activeForm": "Executing UI assembly"}
|
||||
]})
|
||||
|
||||
// ⚠️ CRITICAL: Dynamic TodoWrite task attachment strategy:
|
||||
//
|
||||
// **Key Concept**: SlashCommand invocation ATTACHES tasks to current workflow.
|
||||
// **Key Concept**: SlashCommand dispatch ATTACHES tasks to current workflow.
|
||||
// Orchestrator EXECUTES these attached tasks itself, not waiting for external completion.
|
||||
//
|
||||
// Phase 7-10 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 (auto-continue)
|
||||
// 7. After Phase 10 completes, workflow finishes (generate command handles preview files)
|
||||
// Phase 7-10 SlashCommand Dispatch Pattern (when tasks are attached):
|
||||
// Example - Phase 7 with sub-tasks:
|
||||
// [
|
||||
// {"content": "Phase 7: Style Extraction", "status": "in_progress", "activeForm": "Executing style extraction"},
|
||||
// {"content": " → Analyze style references", "status": "in_progress", "activeForm": "Analyzing style references"},
|
||||
// {"content": " → Generate style variants", "status": "pending", "activeForm": "Generating style variants"},
|
||||
// {"content": " → Create design tokens", "status": "pending", "activeForm": "Creating design tokens"},
|
||||
// {"content": "Phase 8: Animation Extraction", "status": "pending", "activeForm": "Executing animation extraction"},
|
||||
// ...
|
||||
// ]
|
||||
//
|
||||
// After sub-tasks complete, COLLAPSE back to:
|
||||
// [
|
||||
// {"content": "Phase 7: Style Extraction", "status": "completed", "activeForm": "Executing style extraction"},
|
||||
// {"content": "Phase 8: Animation Extraction", "status": "in_progress", "activeForm": "Executing animation extraction"},
|
||||
// ...
|
||||
// ]
|
||||
//
|
||||
```
|
||||
|
||||
|
||||
@@ -21,6 +21,36 @@ Pure assembler that combines pre-extracted layout templates with design tokens t
|
||||
- `/workflow:ui-design:style-extract` → Complete design systems (design-tokens.json + style-guide.md)
|
||||
- `/workflow:ui-design:layout-extract` → Layout structure
|
||||
|
||||
## Execution Process
|
||||
|
||||
```
|
||||
Input Parsing:
|
||||
├─ Parse flags: --design-id, --session
|
||||
└─ Decision (base path resolution):
|
||||
├─ --design-id provided → Exact match by design ID
|
||||
├─ --session provided → Latest in session
|
||||
└─ No flags → Latest globally
|
||||
|
||||
Phase 1: Setup & Validation
|
||||
├─ Step 1: Resolve base path & parse configuration
|
||||
├─ Step 2: Load layout templates
|
||||
├─ Step 3: Validate design tokens
|
||||
└─ Step 4: Load animation tokens (optional)
|
||||
|
||||
Phase 2: Assembly (Agent)
|
||||
├─ Step 1: Calculate agent grouping plan
|
||||
│ └─ Grouping rules:
|
||||
│ ├─ Style isolation: Each agent processes ONE style
|
||||
│ ├─ Balanced distribution: Layouts evenly split
|
||||
│ └─ Max 10 layouts per agent, max 6 concurrent agents
|
||||
├─ Step 2: Launch batched assembly tasks (parallel)
|
||||
└─ Step 3: Verify generated files
|
||||
|
||||
Phase 3: Generate Preview Files
|
||||
├─ Step 1: Run preview generation script
|
||||
└─ Step 2: Verify preview files
|
||||
```
|
||||
|
||||
## Phase 1: Setup & Validation
|
||||
|
||||
### Step 1: Resolve Base Path & Parse Configuration
|
||||
|
||||
@@ -26,7 +26,7 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
|
||||
7. Phase 4: Design system integration → **Execute orchestrator task** → Reports completion
|
||||
|
||||
**Phase Transition Mechanism**:
|
||||
- **Task Attachment**: `SlashCommand` invocation **ATTACHES** tasks to current workflow
|
||||
- **Task Attachment**: SlashCommand dispatch **ATTACHES** tasks to current workflow
|
||||
- **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
|
||||
@@ -34,7 +34,51 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
|
||||
|
||||
**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.
|
||||
**Task Attachment Model**: SlashCommand dispatch is NOT delegation - it's task expansion. The orchestrator executes these attached tasks itself, not waiting for external completion.
|
||||
|
||||
## Execution Process
|
||||
|
||||
```
|
||||
Input Parsing:
|
||||
├─ Parse flags: --input, --session (legacy: --images, --prompt)
|
||||
└─ Decision (input detection):
|
||||
├─ Contains * or glob matches → images_input (visual)
|
||||
├─ File/directory exists → code import source
|
||||
└─ Pure text → design prompt
|
||||
|
||||
Phase 0: Parameter Parsing & Input Detection
|
||||
├─ Step 1: Normalize parameters (legacy deprecation warning)
|
||||
├─ Step 2: Detect design source (hybrid | code_only | visual_only)
|
||||
└─ Step 3: Initialize directories and metadata
|
||||
|
||||
Phase 0.5: Code Import (Conditional)
|
||||
└─ Decision (design_source):
|
||||
├─ hybrid → Dispatch /workflow:ui-design:import-from-code
|
||||
└─ Other → Skip to Phase 2
|
||||
|
||||
Phase 2: Style Extraction
|
||||
└─ Decision (skip_style):
|
||||
├─ code_only AND style_complete → Use code import
|
||||
└─ Otherwise → Dispatch /workflow:ui-design:style-extract
|
||||
|
||||
Phase 2.3: Animation Extraction
|
||||
└─ Decision (skip_animation):
|
||||
├─ code_only AND animation_complete → Use code import
|
||||
└─ Otherwise → Dispatch /workflow:ui-design:animation-extract
|
||||
|
||||
Phase 2.5: Layout Extraction
|
||||
└─ Decision (skip_layout):
|
||||
├─ code_only AND layout_complete → Use code import
|
||||
└─ Otherwise → Dispatch /workflow:ui-design:layout-extract
|
||||
|
||||
Phase 3: UI Assembly
|
||||
└─ Dispatch /workflow:ui-design:generate
|
||||
|
||||
Phase 4: Design System Integration
|
||||
└─ Decision (session_id):
|
||||
├─ Provided → Dispatch /workflow:ui-design:update
|
||||
└─ Not provided → Standalone completion
|
||||
```
|
||||
|
||||
## Core Rules
|
||||
|
||||
@@ -42,7 +86,7 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
|
||||
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 dynamically with task attachment/collapse pattern
|
||||
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.
|
||||
5. **⚠️ CRITICAL: Task Attachment Model** - SlashCommand dispatch **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
|
||||
@@ -232,7 +276,9 @@ TodoWrite({todos: [
|
||||
|
||||
### Phase 0.5: Code Import & Completeness Assessment (Conditional)
|
||||
|
||||
```bash
|
||||
**Step 0.5.1: Dispatch** - Import design system from code files
|
||||
|
||||
```javascript
|
||||
# Only execute if code files detected
|
||||
IF design_source == "hybrid":
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
@@ -245,7 +291,7 @@ IF design_source == "hybrid":
|
||||
"--source \"{code_base_path}\""
|
||||
|
||||
TRY:
|
||||
# SlashCommand invocation ATTACHES import-from-code's tasks to current workflow
|
||||
# SlashCommand dispatch 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
|
||||
@@ -336,7 +382,9 @@ TodoWrite(mark_completed: "Initialize and detect design source",
|
||||
|
||||
### Phase 2: Style Extraction
|
||||
|
||||
```bash
|
||||
**Step 2.1: Dispatch** - Extract style design system
|
||||
|
||||
```javascript
|
||||
# Determine if style extraction needed
|
||||
skip_style = (design_source == "code_only" AND style_complete)
|
||||
|
||||
@@ -361,7 +409,7 @@ ELSE:
|
||||
|
||||
extract_command = " ".join(command_parts)
|
||||
|
||||
# SlashCommand invocation ATTACHES style-extract's tasks to current workflow
|
||||
# SlashCommand dispatch ATTACHES style-extract's tasks to current workflow
|
||||
# Orchestrator will EXECUTE these attached tasks itself
|
||||
SlashCommand(extract_command)
|
||||
|
||||
@@ -371,7 +419,9 @@ ELSE:
|
||||
|
||||
### Phase 2.3: Animation Extraction
|
||||
|
||||
```bash
|
||||
**Step 2.3.1: Dispatch** - Extract animation patterns
|
||||
|
||||
```javascript
|
||||
skip_animation = (design_source == "code_only" AND animation_complete)
|
||||
|
||||
IF skip_animation:
|
||||
@@ -392,7 +442,7 @@ ELSE:
|
||||
|
||||
animation_extract_command = " ".join(command_parts)
|
||||
|
||||
# SlashCommand invocation ATTACHES animation-extract's tasks to current workflow
|
||||
# SlashCommand dispatch ATTACHES animation-extract's tasks to current workflow
|
||||
# Orchestrator will EXECUTE these attached tasks itself
|
||||
SlashCommand(animation_extract_command)
|
||||
|
||||
@@ -402,7 +452,9 @@ ELSE:
|
||||
|
||||
### Phase 2.5: Layout Extraction
|
||||
|
||||
```bash
|
||||
**Step 2.5.1: Dispatch** - Extract layout templates
|
||||
|
||||
```javascript
|
||||
skip_layout = (design_source == "code_only" AND layout_complete)
|
||||
|
||||
IF skip_layout:
|
||||
@@ -425,7 +477,7 @@ ELSE:
|
||||
|
||||
layout_extract_command = " ".join(command_parts)
|
||||
|
||||
# SlashCommand invocation ATTACHES layout-extract's tasks to current workflow
|
||||
# SlashCommand dispatch ATTACHES layout-extract's tasks to current workflow
|
||||
# Orchestrator will EXECUTE these attached tasks itself
|
||||
SlashCommand(layout_extract_command)
|
||||
|
||||
@@ -435,11 +487,13 @@ ELSE:
|
||||
|
||||
### Phase 3: UI Assembly
|
||||
|
||||
```bash
|
||||
**Step 3.1: Dispatch** - Assemble UI prototypes from design tokens and layout templates
|
||||
|
||||
```javascript
|
||||
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
|
||||
# SlashCommand dispatch ATTACHES generate's tasks to current workflow
|
||||
# Orchestrator will EXECUTE these attached tasks itself
|
||||
SlashCommand(generate_command)
|
||||
|
||||
@@ -449,12 +503,14 @@ TodoWrite(mark_completed: "Assemble UI", mark_in_progress: session_id ? "Integra
|
||||
|
||||
### Phase 4: Design System Integration
|
||||
|
||||
```bash
|
||||
**Step 4.1: Dispatch** - Integrate design system into workflow session
|
||||
|
||||
```javascript
|
||||
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
|
||||
# SlashCommand dispatch ATTACHES update's tasks to current workflow
|
||||
# Orchestrator will EXECUTE these attached tasks itself
|
||||
SlashCommand(update_command)
|
||||
|
||||
@@ -570,26 +626,38 @@ ELSE:
|
||||
```javascript
|
||||
// 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"},
|
||||
{content: "Extract animation (CSS auto mode)", status: "pending", activeForm: "Extracting animation"},
|
||||
{content: "Extract layout (structure templates)", status: "pending", activeForm: "Extracting layout"},
|
||||
{content: "Assemble UI prototypes", status: "pending", activeForm: "Assembling UI"},
|
||||
{content: "Integrate design system", status: "pending", activeForm: "Integrating"}
|
||||
{content: "Phase 0: Initialize and Detect Design Source", status: "in_progress", activeForm: "Initializing"},
|
||||
{content: "Phase 2: Style Extraction", status: "pending", activeForm: "Extracting style"},
|
||||
{content: "Phase 2.3: Animation Extraction", status: "pending", activeForm: "Extracting animation"},
|
||||
{content: "Phase 2.5: Layout Extraction", status: "pending", activeForm: "Extracting layout"},
|
||||
{content: "Phase 3: UI Assembly", status: "pending", activeForm: "Assembling UI"},
|
||||
{content: "Phase 4: Design System Integration", status: "pending", activeForm: "Integrating"}
|
||||
]})
|
||||
|
||||
// ⚠️ CRITICAL: Dynamic TodoWrite task attachment strategy:
|
||||
//
|
||||
// **Key Concept**: SlashCommand invocation ATTACHES tasks to current workflow.
|
||||
// **Key Concept**: SlashCommand dispatch ATTACHES tasks to current workflow.
|
||||
// Orchestrator EXECUTES these attached tasks itself, not waiting for external completion.
|
||||
//
|
||||
// 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)
|
||||
// Phase 2-4 SlashCommand Dispatch Pattern (when tasks are attached):
|
||||
// Example - Phase 2 with sub-tasks:
|
||||
// [
|
||||
// {"content": "Phase 0: Initialize and Detect Design Source", "status": "completed", "activeForm": "Initializing"},
|
||||
// {"content": "Phase 2: Style Extraction", "status": "in_progress", "activeForm": "Extracting style"},
|
||||
// {"content": " → Analyze design references", "status": "in_progress", "activeForm": "Analyzing references"},
|
||||
// {"content": " → Generate design tokens", "status": "pending", "activeForm": "Generating tokens"},
|
||||
// {"content": " → Create style guide", "status": "pending", "activeForm": "Creating guide"},
|
||||
// {"content": "Phase 2.3: Animation Extraction", "status": "pending", "activeForm": "Extracting animation"},
|
||||
// ...
|
||||
// ]
|
||||
//
|
||||
// After sub-tasks complete, COLLAPSE back to:
|
||||
// [
|
||||
// {"content": "Phase 0: Initialize and Detect Design Source", "status": "completed", "activeForm": "Initializing"},
|
||||
// {"content": "Phase 2: Style Extraction", "status": "completed", "activeForm": "Extracting style"},
|
||||
// {"content": "Phase 2.3: Animation Extraction", "status": "in_progress", "activeForm": "Extracting animation"},
|
||||
// ...
|
||||
// ]
|
||||
//
|
||||
```
|
||||
|
||||
@@ -634,7 +702,7 @@ TodoWrite({todos: [
|
||||
|
||||
- **Input**: `--images` (glob pattern) and/or `--prompt` (text/file paths) + optional `--session`
|
||||
- **Output**: Complete design system in `{base_path}/` (style-extraction, layout-extraction, prototypes)
|
||||
- **Sub-commands Called**:
|
||||
- **Sub-commands Dispatched**:
|
||||
1. `/workflow:ui-design:import-from-code` (Phase 0.5, conditional - if code files detected)
|
||||
2. `/workflow:ui-design:style-extract` (Phase 2 - complete design systems)
|
||||
3. `/workflow:ui-design:animation-extract` (Phase 2.3 - animation tokens)
|
||||
|
||||
@@ -43,6 +43,25 @@ Extract design system tokens from source code files (CSS/SCSS/JS/TS/HTML) using
|
||||
|
||||
## Execution Process
|
||||
|
||||
```
|
||||
Input Parsing:
|
||||
├─ Parse flags: --design-id, --session, --source
|
||||
└─ Decision (base path resolution):
|
||||
├─ --design-id provided → Exact match by design ID
|
||||
├─ --session provided → Latest design run in session
|
||||
└─ Neither → ERROR: Must provide --design-id or --session
|
||||
|
||||
Phase 0: Setup & File Discovery
|
||||
├─ Step 1: Resolve base path
|
||||
├─ Step 2: Initialize directories
|
||||
└─ Step 3: Discover files using script
|
||||
|
||||
Phase 1: Parallel Agent Analysis (3 agents)
|
||||
├─ Style Agent → design-tokens.json + code_snippets
|
||||
├─ Animation Agent → animation-tokens.json + code_snippets
|
||||
└─ Layout Agent → layout-templates.json + code_snippets
|
||||
```
|
||||
|
||||
### Step 1: Setup & File Discovery
|
||||
|
||||
**Purpose**: Initialize session, discover and categorize code files
|
||||
|
||||
@@ -23,6 +23,39 @@ This command separates the "scaffolding" (HTML structure and CSS layout) from th
|
||||
- **Device-Aware**: Optimized for specific device types (desktop, mobile, tablet, responsive)
|
||||
- **Token-Based**: CSS uses `var()` placeholders for spacing and breakpoints
|
||||
|
||||
## Execution Process
|
||||
|
||||
```
|
||||
Input Parsing:
|
||||
├─ Parse flags: --design-id, --session, --images, --prompt, --targets, --variants, --device-type, --interactive, --refine
|
||||
└─ Decision (mode detection):
|
||||
├─ --refine flag → Refinement Mode (variants_count = 1)
|
||||
└─ No --refine → Exploration Mode (variants_count = --variants OR 3)
|
||||
|
||||
Phase 0: Setup & Input Validation
|
||||
├─ Step 1: Detect input, mode & targets
|
||||
├─ Step 2: Load inputs & create directories
|
||||
└─ Step 3: Memory check (skip if cached)
|
||||
|
||||
Phase 1: Layout Concept/Refinement Options Generation
|
||||
├─ Step 0.5: Load existing layout (Refinement Mode only)
|
||||
├─ Step 1: Generate options (Agent Task 1)
|
||||
│ └─ Decision:
|
||||
│ ├─ Exploration Mode → Generate contrasting layout concepts
|
||||
│ └─ Refinement Mode → Generate refinement options
|
||||
└─ Step 2: Verify options file created
|
||||
|
||||
Phase 1.5: User Confirmation (Optional)
|
||||
└─ Decision (--interactive flag):
|
||||
├─ --interactive present → Present options, capture selection
|
||||
└─ No --interactive → Skip to Phase 2
|
||||
|
||||
Phase 2: Layout Template Generation
|
||||
├─ Step 1: Load user selections or default to all
|
||||
├─ Step 2: Launch parallel agent tasks
|
||||
└─ Step 3: Verify output files
|
||||
```
|
||||
|
||||
## Phase 0: Setup & Input Validation
|
||||
|
||||
### Step 1: Detect Input, Mode & Targets
|
||||
|
||||
@@ -33,6 +33,29 @@ Converts design run extraction results into shareable reference package with:
|
||||
|
||||
## Execution Process
|
||||
|
||||
```
|
||||
Input Parsing:
|
||||
├─ Parse flags: --design-run, --package-name, --output-dir
|
||||
└─ Validation:
|
||||
├─ --design-run and --package-name REQUIRED
|
||||
└─ Package name format: lowercase, alphanumeric, hyphens only
|
||||
|
||||
Phase 0: Setup & Validation
|
||||
├─ Step 1: Validate required parameters
|
||||
├─ Step 2: Validate package name format
|
||||
├─ Step 3: Validate design run exists
|
||||
├─ Step 4: Check required extraction files (design-tokens.json, layout-templates.json)
|
||||
└─ Step 5: Setup output directory
|
||||
|
||||
Phase 1: Prepare Component Data
|
||||
├─ Step 1: Copy layout templates
|
||||
├─ Step 2: Copy design tokens
|
||||
└─ Step 3: Copy animation tokens (optional)
|
||||
|
||||
Phase 2: Preview Generation (Agent)
|
||||
└─ Generate preview.html + preview.css via ui-design-agent
|
||||
```
|
||||
|
||||
### Phase 0: Setup & Validation
|
||||
|
||||
**Purpose**: Validate inputs, prepare output directory
|
||||
|
||||
@@ -19,6 +19,43 @@ Extract design style from reference images or text prompts using Claude's built-
|
||||
- **Dual Mode**: Exploration (multiple contrasting variants) or Refinement (single design fine-tuning)
|
||||
- **Production-Ready**: WCAG AA compliant, OKLCH colors, semantic naming
|
||||
|
||||
## Execution Process
|
||||
|
||||
```
|
||||
Input Parsing:
|
||||
├─ Parse flags: --design-id, --session, --images, --prompt, --variants, --interactive, --refine
|
||||
└─ Decision (mode detection):
|
||||
├─ --refine flag → Refinement Mode (variants_count = 1)
|
||||
└─ No --refine → Exploration Mode (variants_count = --variants OR 3)
|
||||
|
||||
Phase 0: Setup & Input Validation
|
||||
├─ Step 1: Detect input mode, extraction mode & base path
|
||||
├─ Step 2: Load inputs
|
||||
└─ Step 3: Memory check (skip if exists)
|
||||
|
||||
Phase 1: Design Direction/Refinement Options Generation
|
||||
├─ Step 1: Load project context
|
||||
├─ Step 2: Generate options (Agent Task 1)
|
||||
│ └─ Decision:
|
||||
│ ├─ Exploration Mode → Generate contrasting design directions
|
||||
│ └─ Refinement Mode → Generate refinement options
|
||||
└─ Step 3: Verify options file created
|
||||
|
||||
Phase 1.5: User Confirmation (Optional)
|
||||
└─ Decision (--interactive flag):
|
||||
├─ --interactive present → Present options, capture selection
|
||||
└─ No --interactive → Skip to Phase 2
|
||||
|
||||
Phase 2: Design System Generation
|
||||
├─ Step 1: Load user selection or default to all
|
||||
├─ Step 2: Create output directories
|
||||
└─ Step 3: Launch agent tasks (parallel)
|
||||
|
||||
Phase 3: Verify Output
|
||||
├─ Step 1: Check files created
|
||||
└─ Step 2: Verify file sizes
|
||||
```
|
||||
|
||||
## Phase 0: Setup & Input Validation
|
||||
|
||||
### Step 1: Detect Input Mode, Extraction Mode & Base Path
|
||||
|
||||
Reference in New Issue
Block a user