diff --git a/.claude/commands/workflow/brainstorm/auto-parallel.md b/.claude/commands/workflow/brainstorm/auto-parallel.md index 4fa5b5bc..8db88848 100644 --- a/.claude/commands/workflow/brainstorm/auto-parallel.md +++ b/.claude/commands/workflow/brainstorm/auto-parallel.md @@ -9,22 +9,32 @@ allowed-tools: SlashCommand(*), Task(*), TodoWrite(*), Read(*), Write(*), Bash(* ## Coordinator Role -**This command is a pure orchestrator**: Execute 3 phases in sequence (interactive framework → parallel role analysis → synthesis), delegate to specialized commands/agents, and ensure complete execution through **automatic continuation**. +**This command is a pure orchestrator**: Execute 3 phases in sequence (interactive framework → parallel role analysis → synthesis), coordinating specialized commands/agents through task attachment model. + +**Task Attachment Model**: +- SlashCommand invocation **expands workflow** by attaching sub-tasks to current TodoWrite +- Task agent execution **attaches analysis tasks** to orchestrator's TodoWrite +- Phase 1: artifacts command attaches its internal tasks (Phase 1-5) +- Phase 2: N conceptual-planning-agent tasks attached in parallel +- Phase 3: synthesis command attaches its internal tasks +- Orchestrator **executes these attached tasks** sequentially (Phase 1, 3) or in parallel (Phase 2) +- After completion, attached tasks are **collapsed** back to high-level phase summary +- This is **task expansion**, not external delegation **Execution Model - Auto-Continue Workflow**: This workflow runs **fully autonomously** once triggered. Phase 1 (artifacts) handles user interaction, Phase 2 (role agents) runs in parallel. 1. **User triggers**: `/workflow:brainstorm:auto-parallel "topic" [--count N]` -2. **Phase 1 executes** → artifacts command (interactive framework) → Auto-continues -3. **Phase 2 executes** → Parallel role agents (N agents run concurrently) → Auto-continues -4. **Phase 3 executes** → Synthesis command → Reports final summary +2. **Phase 1 executes** → artifacts command (tasks ATTACHED) → Auto-continues +3. **Phase 2 executes** → Parallel role agents (N tasks ATTACHED concurrently) → Auto-continues +4. **Phase 3 executes** → Synthesis command (tasks ATTACHED) → Reports final summary **Auto-Continue Mechanism**: -- TodoList tracks current phase status +- TodoList tracks current phase status and dynamically manages task attachment/collapse - When Phase 1 (artifacts) finishes executing, automatically load roles and launch Phase 2 agents - When Phase 2 (all agents) finishes executing, automatically execute Phase 3 synthesis -- Progress updates shown at each phase for visibility +- **⚠️ CONTINUOUS EXECUTION** - Do not stop until all phases complete ## Core Rules @@ -32,8 +42,10 @@ This workflow runs **fully autonomously** once triggered. Phase 1 (artifacts) ha 2. **No Preliminary Analysis**: Do not analyze topic before Phase 1 - artifacts handles all analysis 3. **Parse Every Output**: Extract selected_roles from workflow-session.json after Phase 1 4. **Auto-Continue via TodoList**: Check TodoList status to execute next pending phase automatically -5. **Track Progress**: Update TodoWrite when each phase finishes executing -6. **TodoWrite Extension**: artifacts command EXTENDS parent TodoList (NOT replaces) +5. **Track Progress**: Update TodoWrite dynamically with task attachment/collapse pattern +6. **Task Attachment Model**: SlashCommand and Task invocations **attach** sub-tasks to current workflow. Orchestrator **executes** these attached tasks itself, then **collapses** them after completion +7. **⚠️ CRITICAL: DO NOT STOP**: Continuous multi-phase workflow. After executing all attached tasks, immediately collapse them and execute next phase +8. **Parallel Execution**: Phase 2 attaches multiple agent tasks simultaneously for concurrent execution ## Usage @@ -74,15 +86,37 @@ This workflow runs **fully autonomously** once triggered. Phase 1 (artifacts) ha - workflow-session.json contains selected_roles[] (metadata only, no content duplication) - Session directory `.workflow/WFS-{topic}/.brainstorming/` exists -**TodoWrite**: Mark phase 1 completed, phase 2 in_progress +**TodoWrite Update (Phase 1 SlashCommand invoked - tasks attached)**: +```json +[ + {"content": "Parse --count parameter from user input", "status": "completed", "activeForm": "Parsing count parameter"}, + {"content": "Phase 1.1: Topic analysis and question generation (artifacts)", "status": "in_progress", "activeForm": "Analyzing topic"}, + {"content": "Phase 1.2: Role selection and user confirmation (artifacts)", "status": "pending", "activeForm": "Selecting roles"}, + {"content": "Phase 1.3: Role questions and user decisions (artifacts)", "status": "pending", "activeForm": "Collecting role questions"}, + {"content": "Phase 1.4: Conflict detection and resolution (artifacts)", "status": "pending", "activeForm": "Resolving conflicts"}, + {"content": "Phase 1.5: Guidance specification generation (artifacts)", "status": "pending", "activeForm": "Generating guidance"}, + {"content": "Execute parallel role analysis", "status": "pending", "activeForm": "Executing parallel role analysis"}, + {"content": "Execute synthesis integration", "status": "pending", "activeForm": "Executing synthesis integration"} +] +``` -**After Phase 1**: Auto-continue to Phase 2 (role agent assignment) +**Note**: SlashCommand invocation **attaches** artifacts' 5 internal tasks. Orchestrator **executes** these tasks sequentially. -**⚠️ TodoWrite Coordination**: artifacts EXTENDS parent TodoList by: -- Marking parent task "Execute artifacts..." as in_progress -- APPENDING artifacts sub-tasks (Phase 1-5) after parent task -- PRESERVING all other auto-parallel tasks (role agents, synthesis) -- When artifacts Phase 5 completes, marking parent task as completed +**Next Action**: Tasks attached → **Execute Phase 1.1-1.5** sequentially + +**TodoWrite Update (Phase 1 completed - tasks collapsed)**: +```json +[ + {"content": "Parse --count parameter from user input", "status": "completed", "activeForm": "Parsing count parameter"}, + {"content": "Execute artifacts interactive framework generation", "status": "completed", "activeForm": "Executing artifacts interactive framework"}, + {"content": "Execute parallel role analysis", "status": "pending", "activeForm": "Executing parallel role analysis"}, + {"content": "Execute synthesis integration", "status": "pending", "activeForm": "Executing synthesis integration"} +] +``` + +**Note**: Phase 1 tasks completed and collapsed to summary. + +**After Phase 1**: Auto-continue to Phase 2 (parallel role agent execution) --- @@ -143,8 +177,9 @@ TOPIC: {user-provided-topic} **Parallel Execution**: - Launch N agents simultaneously (one message with multiple Task calls) +- Each agent task **attached** to orchestrator's TodoWrite +- All agents execute concurrently, each attaching their own analysis sub-tasks - Each agent operates independently reading same guidance-specification.md -- All agents update progress concurrently **Input**: - `selected_roles[]` from Phase 1 @@ -158,7 +193,33 @@ TOPIC: {user-provided-topic} - **FORBIDDEN naming**: No `recommendations.md`, `recommendations-*.md`, or any non-`analysis` prefixed files - All N role analyses completed -**TodoWrite**: Mark all N role agent tasks completed, phase 3 in_progress +**TodoWrite Update (Phase 2 agents invoked - tasks attached in parallel)**: +```json +[ + {"content": "Parse --count parameter from user input", "status": "completed", "activeForm": "Parsing count parameter"}, + {"content": "Execute artifacts interactive framework generation", "status": "completed", "activeForm": "Executing artifacts interactive framework"}, + {"content": "Phase 2.1: Execute system-architect analysis [conceptual-planning-agent]", "status": "in_progress", "activeForm": "Executing system-architect analysis"}, + {"content": "Phase 2.2: Execute ui-designer analysis [conceptual-planning-agent]", "status": "in_progress", "activeForm": "Executing ui-designer analysis"}, + {"content": "Phase 2.3: Execute product-manager analysis [conceptual-planning-agent]", "status": "in_progress", "activeForm": "Executing product-manager analysis"}, + {"content": "Execute synthesis integration", "status": "pending", "activeForm": "Executing synthesis integration"} +] +``` + +**Note**: Multiple Task invocations **attach** N role analysis tasks simultaneously. Orchestrator **executes** these tasks in parallel. + +**Next Action**: Tasks attached → **Execute Phase 2.1-2.N** concurrently + +**TodoWrite Update (Phase 2 completed - tasks collapsed)**: +```json +[ + {"content": "Parse --count parameter from user input", "status": "completed", "activeForm": "Parsing count parameter"}, + {"content": "Execute artifacts interactive framework generation", "status": "completed", "activeForm": "Executing artifacts interactive framework"}, + {"content": "Execute parallel role analysis", "status": "completed", "activeForm": "Executing parallel role analysis"}, + {"content": "Execute synthesis integration", "status": "pending", "activeForm": "Executing synthesis integration"} +] +``` + +**Note**: Phase 2 parallel tasks completed and collapsed to summary. **After Phase 2**: Auto-continue to Phase 3 (synthesis) @@ -180,7 +241,33 @@ TOPIC: {user-provided-topic} - `.workflow/WFS-{topic}/.brainstorming/synthesis-specification.md` exists - Synthesis references all role analyses -**TodoWrite**: Mark phase 3 completed +**TodoWrite Update (Phase 3 SlashCommand invoked - tasks attached)**: +```json +[ + {"content": "Parse --count parameter from user input", "status": "completed", "activeForm": "Parsing count parameter"}, + {"content": "Execute artifacts interactive framework generation", "status": "completed", "activeForm": "Executing artifacts interactive framework"}, + {"content": "Execute parallel role analysis", "status": "completed", "activeForm": "Executing parallel role analysis"}, + {"content": "Phase 3.1: Load role analysis files (synthesis)", "status": "in_progress", "activeForm": "Loading role analyses"}, + {"content": "Phase 3.2: Integrate insights across roles (synthesis)", "status": "pending", "activeForm": "Integrating insights"}, + {"content": "Phase 3.3: Generate synthesis specification (synthesis)", "status": "pending", "activeForm": "Generating synthesis"} +] +``` + +**Note**: SlashCommand invocation **attaches** synthesis' internal tasks. Orchestrator **executes** these tasks sequentially. + +**Next Action**: Tasks attached → **Execute Phase 3.1-3.3** sequentially + +**TodoWrite Update (Phase 3 completed - tasks collapsed)**: +```json +[ + {"content": "Parse --count parameter from user input", "status": "completed", "activeForm": "Parsing count parameter"}, + {"content": "Execute artifacts interactive framework generation", "status": "completed", "activeForm": "Executing artifacts interactive framework"}, + {"content": "Execute parallel role analysis", "status": "completed", "activeForm": "Executing parallel role analysis"}, + {"content": "Execute synthesis integration", "status": "completed", "activeForm": "Executing synthesis integration"} +] +``` + +**Note**: Phase 3 tasks completed and collapsed to summary. **Return to User**: ``` @@ -195,49 +282,49 @@ Synthesis: .workflow/WFS-{topic}/.brainstorming/synthesis-specification.md ## TodoWrite Pattern -```javascript -// Initialize (before Phase 1) -TodoWrite({todos: [ - {"content": "Parse --count parameter from user input", "status": "in_progress", "activeForm": "Parsing count parameter"}, - {"content": "Execute artifacts command for interactive framework generation", "status": "pending", "activeForm": "Executing artifacts interactive framework"}, - {"content": "Load selected_roles from workflow-session.json", "status": "pending", "activeForm": "Loading selected roles"}, - // Role agent tasks added dynamically after Phase 1 based on selected_roles count - {"content": "Execute synthesis command for final integration", "status": "pending", "activeForm": "Executing synthesis integration"} -]}) +**Core Concept**: Dynamic task attachment and collapse for parallel brainstorming workflow with interactive framework generation and concurrent role analysis. -// After Phase 1 (artifacts completes, roles loaded) -// Note: artifacts EXTENDS this list by appending its Phase 1-5 sub-tasks -TodoWrite({todos: [ - {"content": "Parse --count parameter from user input", "status": "completed", "activeForm": "Parsing count parameter"}, - {"content": "Execute artifacts command for interactive framework generation", "status": "completed", "activeForm": "Executing artifacts interactive framework"}, - {"content": "Load selected_roles from workflow-session.json", "status": "in_progress", "activeForm": "Loading selected roles"}, - {"content": "Execute system-architect analysis [conceptual-planning-agent]", "status": "pending", "activeForm": "Executing system-architect analysis"}, - {"content": "Execute ui-designer analysis [conceptual-planning-agent]", "status": "pending", "activeForm": "Executing ui-designer analysis"}, - {"content": "Execute product-manager analysis [conceptual-planning-agent]", "status": "pending", "activeForm": "Executing product-manager analysis"}, - // ... (N role tasks based on --count parameter) - {"content": "Execute synthesis command for final integration", "status": "pending", "activeForm": "Executing synthesis integration"} -]}) +### Key Principles -// After Phase 2 (all agents launched in parallel) -TodoWrite({todos: [ - // ... previous completed tasks - {"content": "Load selected_roles from workflow-session.json", "status": "completed", "activeForm": "Loading selected roles"}, - {"content": "Execute system-architect analysis [conceptual-planning-agent]", "status": "in_progress", "activeForm": "Executing system-architect analysis"}, - {"content": "Execute ui-designer analysis [conceptual-planning-agent]", "status": "in_progress", "activeForm": "Executing ui-designer analysis"}, - {"content": "Execute product-manager analysis [conceptual-planning-agent]", "status": "in_progress", "activeForm": "Executing product-manager analysis"}, - // ... (all N agents in_progress simultaneously) - {"content": "Execute synthesis command for final integration", "status": "pending", "activeForm": "Executing synthesis integration"} -]}) +1. **Task Attachment** (when SlashCommand/Task invoked): + - Sub-command's or agent's internal tasks are **attached** to orchestrator's TodoWrite + - Phase 1: `/workflow:brainstorm:artifacts` attaches 5 internal tasks (Phase 1.1-1.5) + - Phase 2: Multiple `Task(conceptual-planning-agent)` calls attach N role analysis tasks simultaneously + - Phase 3: `/workflow:brainstorm:synthesis` attaches 3 internal tasks (Phase 3.1-3.3) + - First attached task marked as `in_progress`, others as `pending` + - Orchestrator **executes** these attached tasks (sequentially for Phase 1, 3; in parallel for Phase 2) -// After Phase 2 (all agents complete) -TodoWrite({todos: [ - // ... previous completed tasks - {"content": "Execute system-architect analysis [conceptual-planning-agent]", "status": "completed", "activeForm": "Executing system-architect analysis"}, - {"content": "Execute ui-designer analysis [conceptual-planning-agent]", "status": "completed", "activeForm": "Executing ui-designer analysis"}, - {"content": "Execute product-manager analysis [conceptual-planning-agent]", "status": "completed", "activeForm": "Executing product-manager analysis"}, - {"content": "Execute synthesis command for final integration", "status": "in_progress", "activeForm": "Executing synthesis integration"} -]}) -``` +2. **Task Collapse** (after sub-tasks complete): + - Remove detailed sub-tasks from TodoWrite + - **Collapse** to high-level phase summary + - Example: Phase 1.1-1.5 collapse to "Execute artifacts interactive framework generation: completed" + - Phase 2: Multiple role tasks collapse to "Execute parallel role analysis: completed" + - Phase 3: Synthesis tasks collapse to "Execute synthesis integration: completed" + - Maintains clean orchestrator-level view + +3. **Continuous Execution**: + - After collapse, automatically proceed to next pending phase + - No user intervention required between phases + - TodoWrite dynamically reflects current execution state + +**Lifecycle Summary**: Initial pending tasks → Phase 1 invoked (artifacts tasks ATTACHED) → Artifacts sub-tasks executed → Phase 1 completed (tasks COLLAPSED) → Phase 2 invoked (N role tasks ATTACHED in parallel) → Role analyses executed concurrently → Phase 2 completed (tasks COLLAPSED) → Phase 3 invoked (synthesis tasks ATTACHED) → Synthesis sub-tasks executed → Phase 3 completed (tasks COLLAPSED) → Workflow complete. + +### Brainstorming Workflow Specific Features + +- **Phase 1**: Interactive framework generation with user Q&A (SlashCommand attachment) +- **Phase 2**: Parallel role analysis execution with N concurrent agents (Task agent attachments) +- **Phase 3**: Cross-role synthesis integration (SlashCommand attachment) +- **Dynamic Role Count**: `--count N` parameter determines number of Phase 2 parallel tasks (default: 3, max: 9) +- **Mixed Execution**: Sequential (Phase 1, 3) and Parallel (Phase 2) task execution + +**Benefits**: +- Real-time visibility into attached tasks during execution +- Clean orchestrator-level summary after tasks complete +- Clear mental model: SlashCommand/Task = attach tasks, not delegate work +- Parallel execution support for concurrent role analysis +- Dynamic attachment/collapse maintains clarity + +**Note**: See individual Phase descriptions (Phase 1, 2, 3) for detailed TodoWrite Update examples with full JSON structures. ## Input Processing diff --git a/.claude/commands/workflow/plan.md b/.claude/commands/workflow/plan.md index 271af2f6..d562b3c5 100644 --- a/.claude/commands/workflow/plan.md +++ b/.claude/commands/workflow/plan.md @@ -303,17 +303,7 @@ Quality Gate: Consider running /workflow:action-plan-verify to catch issues earl - No user intervention required between phases - TodoWrite dynamically reflects current execution state -### Lifecycle Pattern - -``` -Initial: [Phase 1: pending] [Phase 2: pending] [Phase 3: pending] - ↓ -Phase 2 Invoked (ATTACHED): - [Phase 1: completed] [Phase 2.1: in_progress] [Phase 2.2: pending] [Phase 2.3: pending] [Phase 3: pending] - ↓ -Phase 2 Completed (COLLAPSED): - [Phase 1: completed] [Phase 2: completed] [Phase 3: pending] -``` +**Lifecycle Summary**: Initial pending tasks → Phase invoked (tasks ATTACHED) → Sub-tasks executed sequentially → Phase completed (tasks COLLAPSED to summary) → Next phase begins → Repeat until all phases complete. ### Benefits diff --git a/.claude/commands/workflow/tdd-plan.md b/.claude/commands/workflow/tdd-plan.md index 22d76e5b..3cb1d4b7 100644 --- a/.claude/commands/workflow/tdd-plan.md +++ b/.claude/commands/workflow/tdd-plan.md @@ -337,23 +337,7 @@ Quality Gate: Consider running /workflow:action-plan-verify to validate TDD task - No user intervention required between phases - TodoWrite dynamically reflects current execution state -### Lifecycle Pattern - -``` -Initial: [Phase 1: pending] [Phase 2: pending] [Phase 3: pending] [Phase 5: pending] - ↓ -Phase 3 Invoked (ATTACHED): - [Phase 1-2: completed] [Phase 3.1: in_progress] [Phase 3.2: pending] [Phase 3.3: pending] [Phase 5: pending] - ↓ -Phase 3 Completed (COLLAPSED): - [Phase 1-2: completed] [Phase 3: completed] [Phase 5: pending] - ↓ -Phase 5 Invoked (ATTACHED, generates TDD tasks): - [Phase 1-3: completed] [Phase 5.1: in_progress] [Phase 5.2: pending] [Phase 5.3: pending] - ↓ -Phase 5 Completed (COLLAPSED, each IMPL task contains Red-Green-Refactor cycle): - [Phase 1-3: completed] [Phase 5: completed] [Phase 6: in_progress] -``` +**Lifecycle Summary**: Initial pending tasks → Phase invoked (tasks ATTACHED) → Sub-tasks executed sequentially → Phase completed (tasks COLLAPSED to summary) → Next phase begins (conditional Phase 4 if conflict_risk ≥ medium) → Repeat until all phases complete. ### TDD-Specific Features diff --git a/.claude/commands/workflow/test-fix-gen.md b/.claude/commands/workflow/test-fix-gen.md index 389fa4af..0e4119be 100644 --- a/.claude/commands/workflow/test-fix-gen.md +++ b/.claude/commands/workflow/test-fix-gen.md @@ -362,25 +362,7 @@ CRITICAL - Next Steps: - No user intervention required between phases - TodoWrite dynamically reflects current execution state -#### Lifecycle Pattern - -``` -Initial: [Phase 1: pending] [Phase 2: pending] [Phase 3: pending] [Phase 4: pending] [Phase 5: pending] - ↓ -Phase 2 Invoked (ATTACHED - mode-specific context gathering): - [Phase 1: completed] [Phase 2.1: in_progress] [Phase 2.2: pending] [Phase 2.3: pending] [Phase 3: pending] [Phase 4: pending] [Phase 5: pending] - ↓ -Phase 2 Completed (COLLAPSED): - [Phase 1: completed] [Phase 2: completed] [Phase 3: pending] [Phase 4: pending] [Phase 5: pending] - ↓ -Phase 3 Invoked (ATTACHED): - [Phase 1: completed] [Phase 2: completed] [Phase 3.1: in_progress] [Phase 3.2: pending] [Phase 3.3: pending] [Phase 4: pending] [Phase 5: pending] - ↓ -Phase 3 Completed (COLLAPSED): - [Phase 1: completed] [Phase 2: completed] [Phase 3: completed] [Phase 4: pending] [Phase 5: pending] - ↓ -[Continue pattern through Phase 4 and Phase 5...] -``` +**Lifecycle Summary**: Initial pending tasks → Phase invoked (tasks ATTACHED with mode-specific context gathering) → Sub-tasks executed sequentially → Phase completed (tasks COLLAPSED to summary) → Next phase begins → Repeat until all phases complete. #### Test-Fix-Gen Specific Features diff --git a/.claude/commands/workflow/test-gen.md b/.claude/commands/workflow/test-gen.md index 3e8786df..6ae03370 100644 --- a/.claude/commands/workflow/test-gen.md +++ b/.claude/commands/workflow/test-gen.md @@ -346,25 +346,7 @@ Ready for execution. Use appropriate workflow commands to proceed. - No user intervention required between phases - TodoWrite dynamically reflects current execution state -### Lifecycle Pattern - -``` -Initial: [Phase 1: pending] [Phase 2: pending] [Phase 3: pending] [Phase 4: pending] [Phase 5: pending] - ↓ -Phase 2 Invoked (ATTACHED): - [Phase 1: completed] [Phase 2.1: in_progress] [Phase 2.2: pending] [Phase 2.3: pending] [Phase 3: pending] [Phase 4: pending] [Phase 5: pending] - ↓ -Phase 2 Completed (COLLAPSED): - [Phase 1: completed] [Phase 2: completed] [Phase 3: pending] [Phase 4: pending] [Phase 5: pending] - ↓ -Phase 3 Invoked (ATTACHED): - [Phase 1: completed] [Phase 2: completed] [Phase 3.1: in_progress] [Phase 3.2: pending] [Phase 3.3: pending] [Phase 4: pending] [Phase 5: pending] - ↓ -Phase 3 Completed (COLLAPSED): - [Phase 1: completed] [Phase 2: completed] [Phase 3: completed] [Phase 4: pending] [Phase 5: pending] - ↓ -[Continue pattern through Phase 4 and Phase 5...] -``` +**Lifecycle Summary**: Initial pending tasks → Phase invoked (tasks ATTACHED) → Sub-tasks executed sequentially → Phase completed (tasks COLLAPSED to summary) → Next phase begins → Repeat until all phases complete. ### Test-Gen Specific Features diff --git a/.claude/commands/workflow/ui-design/reference-page-generator.md b/.claude/commands/workflow/ui-design/reference-page-generator.md index 0af3a59f..42b1223a 100644 --- a/.claude/commands/workflow/ui-design/reference-page-generator.md +++ b/.claude/commands/workflow/ui-design/reference-page-generator.md @@ -10,12 +10,11 @@ auto-continue: true ## Overview -Converts design run extraction results into shareable, versioned reference package with: +Converts design run extraction results into shareable reference package with: - Interactive multi-component preview (preview.html + preview.css) -- Component pattern extraction (component-patterns.json) -- Package metadata and documentation (metadata.json + README.md) +- Component layout templates (layout-templates.json) -**Role**: Takes existing design run (from `import-from-code` or other extraction commands) and enhances it with component analysis, preview generation, and packaging. +**Role**: Takes existing design run (from `import-from-code` or other extraction commands) and generates preview pages for easy reference. ## Usage @@ -75,12 +74,13 @@ fi # 4. Check required extraction files exist required_files=( "$design_run/style-extraction/style-1/design-tokens.json" + "$design_run/layout-extraction/layout-templates.json" ) for file in "${required_files[@]}"; do if [ ! -f "$file" ]; then echo "ERROR: Required file not found: $file" - echo "HINT: Ensure design run has style extraction results" + echo "HINT: Ensure design run has style and layout extraction results" exit 1 fi done @@ -118,180 +118,36 @@ echo " Output: $package_dir" ```json [ {"content": "Phase 0: 验证和准备", "status": "completed", "activeForm": "验证参数"}, - {"content": "Phase 1: 组件模式提取", "status": "in_progress", "activeForm": "提取组件模式"}, - {"content": "Phase 2: 生成预览页面", "status": "pending", "activeForm": "生成预览"}, - {"content": "Phase 3: 生成元数据和文档", "status": "pending", "activeForm": "生成文档"} + {"content": "Phase 1: 准备组件数据", "status": "in_progress", "activeForm": "复制布局模板"}, + {"content": "Phase 2: 生成预览页面", "status": "pending", "activeForm": "生成预览"} ] ``` --- -### Phase 1: Component Pattern Extraction +### Phase 1: Prepare Component Data -**Purpose**: Run Component Agent to extract UI component patterns from design run +**Purpose**: Copy layout templates to package directory (used as component reference) -**Agent Task**: +**Operations**: -```javascript -Task(ui-design-agent): ` - [COMPONENT_PATTERNS_EXTRACTION] - Extract reusable UI component patterns from design run extraction results +```bash +echo "[Phase 1] Preparing component data from design run" - MODE: component-analysis | DESIGN_RUN: ${design_run} | OUTPUT: ${package_dir} +# Copy layout templates as component patterns +cp "${design_run}/layout-extraction/layout-templates.json" "${package_dir}/layout-templates.json" - ## Input Files +# Verify copy +if [ ! -f "${package_dir}/layout-templates.json" ]; then + echo "ERROR: Failed to copy layout templates" + exit 1 +fi - **Design Run Path**: ${design_run} +# Count components from layout templates +component_count=$(jq -r '.layout_templates | length // 0' "${package_dir}/layout-templates.json" 2>/dev/null || echo 0) - You can read ALL files in the design run directory: - - style-extraction/style-1/design-tokens.json - - animation-extraction/animation-tokens.json (if exists) - - layout-extraction/layout-templates.json (if exists) - - Source code files referenced in extraction metadata - - ## Extraction Strategy - - **Component Identification**: - 1. Scan design tokens for component-level styles (component_styles in design-tokens.json) - 2. Review layout templates for component structures - 3. Identify common UI component patterns (button, input, card, modal, badge, alert, etc.) - 4. Extract DOM structure for each component - 5. Identify CSS class patterns and variants - 6. Map component states (default, hover, active, disabled, focus, error, success) - - ## Output Requirements - - Generate 1 file: ${package_dir}/component-patterns.json - - ### component-patterns.json Structure: - { - "extraction_metadata": { - "package_name": "${package_name}", - "source_design_run": "${design_run}", - "extraction_time": "ISO8601 timestamp", - "files_analyzed": { - "design_tokens": "path/to/design-tokens.json", - "animation_tokens": "path/to/animation-tokens.json (if exists)", - "layout_templates": "path/to/layout-templates.json (if exists)" - }, - "component_count": 8 - }, - "components": { - "button": { - "base_structure": { - "tag": "button", - "base_classes": ["btn"], - "attributes": { - "type": "button", - "role": "button" - } - }, - "variants": { - "primary": { - "classes": ["btn-primary"], - "description": "Main call-to-action button", - "style_tokens": { - "background": "var(--color-brand-primary)", - "color": "var(--color-text-inverse)", - "padding": "var(--spacing-3) var(--spacing-6)", - "border_radius": "var(--border-radius-md)" - } - }, - "secondary": { - "classes": ["btn-secondary"], - "description": "Secondary action button", - "style_tokens": { - "background": "var(--color-surface-elevated)", - "color": "var(--color-text-primary)", - "border": "1px solid var(--color-border-default)" - } - } - }, - "sizes": { - "sm": {"classes": ["btn-sm"]}, - "base": {"classes": []}, - "lg": {"classes": ["btn-lg"]} - }, - "states": { - "default": {"classes": []}, - "hover": {"pseudo": ":hover"}, - "active": {"pseudo": ":active"}, - "disabled": {"attribute": "disabled", "classes": ["btn-disabled"]} - }, - "usage_examples": [ - "", - "" - ] - }, - "input": { - "base_structure": { - "tag": "input", - "base_classes": ["input"], - "attributes": {"type": "text"} - }, - "variants": { - "default": { - "classes": ["input-default"], - "description": "Standard text input", - "style_tokens": { - "border": "1px solid var(--color-border-default)", - "padding": "var(--spacing-3)", - "border_radius": "var(--border-radius-md)" - } - } - }, - "states": { - "default": {"classes": []}, - "focus": {"pseudo": ":focus"}, - "error": {"classes": ["input-error"]}, - "disabled": {"attribute": "disabled"} - }, - "usage_examples": [ - "" - ] - }, - "card": { - "base_structure": { - "tag": "div", - "base_classes": ["card"], - "children": [ - {"tag": "div", "classes": ["card-header"], "optional": true}, - {"tag": "div", "classes": ["card-body"]}, - {"tag": "div", "classes": ["card-footer"], "optional": true} - ] - }, - "variants": { - "default": { - "classes": ["card-default"], - "description": "Standard elevated card", - "style_tokens": { - "background": "var(--color-surface-elevated)", - "padding": "var(--spacing-6)", - "border_radius": "var(--border-radius-lg)", - "box_shadow": "var(--shadow-md)" - } - } - }, - "usage_examples": [ - "
Content
" - ] - } - } - } - - ## Completeness Criteria - - Extract at least 5 core component types (button, input, card, badge, alert, etc.) - - Include all variants and states for each component - - Provide usage examples for each component - - Map style tokens to component styles - - ## Critical Requirements - - ✅ Read design run extraction files using Read() tool - - ✅ Cross-reference design tokens with component styles - - ✅ Generate comprehensive component patterns catalog - - ✅ Use Write() to save: ${package_dir}/component-patterns.json - - ❌ NO external research or MCP calls -` +echo " ✓ Layout templates copied (${component_count} components)" +echo "[Phase 1] Component data preparation complete" ``` @@ -299,14 +155,14 @@ Task(ui-design-agent): ` **TodoWrite**: ```json [ - {"content": "Phase 1: 组件模式提取", "status": "completed", "activeForm": "提取组件模式"}, + {"content": "Phase 1: 准备组件数据", "status": "completed", "activeForm": "复制布局模板"}, {"content": "Phase 2: 生成预览页面", "status": "in_progress", "activeForm": "生成预览"} ] ``` --- -### Phase 2: Preview Generation +### Phase 2: Preview Generation (Final Phase) **Purpose**: Generate interactive multi-component preview (preview.html + preview.css) @@ -321,7 +177,7 @@ Task(ui-design-agent): ` ## Input Files (MUST READ ALL) - 1. ${package_dir}/component-patterns.json (component patterns - REQUIRED) + 1. ${package_dir}/layout-templates.json (component layout patterns - REQUIRED) 2. ${design_run}/style-extraction/style-1/design-tokens.json (design tokens - REQUIRED) 3. ${design_run}/animation-extraction/animation-tokens.json (optional, if exists) @@ -340,9 +196,9 @@ Task(ui-design-agent): ` - Include font family examples ### Section 3: Components - - Render all components from component-patterns.json + - Render all components from layout-templates.json (use layout_templates field) - Display all variants side-by-side - - Show all states (default, hover, active, disabled, focus, error) + - Show DOM structure with proper styling - Include usage code snippets in
tags ### Section 4: Spacing & Layout @@ -364,23 +220,23 @@ Task(ui-design-agent): ` - Complete standalone HTML file - Responsive design with mobile-first approach - Sticky navigation for sections - - Interactive state demonstrations + - Interactive component demonstrations - Code snippets in collapsible
elements - Footer with package metadata ### preview.css Structure: - CSS Custom Properties from design-tokens.json - Typography combination classes - - Component classes from component-patterns.json + - Component classes from layout-templates.json - Preview page layout styles - Interactive demo styles ## Critical Requirements - - ✅ Read ALL input files (component-patterns.json, design-tokens.json, animation-tokens.json if exists) + - ✅ Read ALL input files (layout-templates.json, design-tokens.json, animation-tokens.json if exists) - ✅ Generate complete, interactive showcase HTML - ✅ All CSS uses var() references to design tokens - - ✅ Display ALL components from component-patterns.json - - ✅ Display ALL variants and states for each component + - ✅ Display ALL components from layout-templates.json + - ✅ Display component DOM structures with proper styling - ✅ Include usage code snippets - ✅ Use Write() to save both files: - ${package_dir}/preview.html @@ -389,175 +245,14 @@ Task(ui-design-agent): ` ` ``` - - -**TodoWrite**: -```json -[ - {"content": "Phase 2: 生成预览页面", "status": "completed", "activeForm": "生成预览"}, - {"content": "Phase 3: 生成元数据和文档", "status": "in_progress", "activeForm": "生成文档"} -] -``` - ---- - -### Phase 3: Metadata & Documentation Generation - -**Purpose**: Create package metadata and documentation - -**Operations**: - -```bash -echo "[Phase 3] Generating package metadata and documentation" - -# 1. Copy design tokens to package directory -cp "${design_run}/style-extraction/style-1/design-tokens.json" "${package_dir}/design-tokens.json" -cp "${design_run}/style-extraction/style-1/style-guide.md" "${package_dir}/style-guide.md" 2>/dev/null || true - -# 2. Copy animation tokens if exists -if [ -f "${design_run}/animation-extraction/animation-tokens.json" ]; then - cp "${design_run}/animation-extraction/animation-tokens.json" "${package_dir}/animation-tokens.json" -fi - -# 3. Get Git information (if in git repo) -git_commit="" -git_repo="" -if git rev-parse --is-inside-work-tree > /dev/null 2>&1; then - git_commit=$(git rev-parse HEAD 2>/dev/null || echo "") - git_repo=$(git config --get remote.origin.url 2>/dev/null || echo "") -fi - -# 4. Get source path from design run metadata -source_path=$(grep -Po '"extraction_source":\s*"\K[^"]+' "${design_run}/style-extraction/style-1/design-tokens.json" 2>/dev/null || echo "code_import") - -# 5. Generate metadata.json -cat > "${package_dir}/metadata.json" </dev/null || date)", - "source": { - "type": "git", - "repository": "${git_repo}", - "commit": "${git_commit}", - "design_run": "${design_run}" - }, - "description": "Style reference package extracted from design run", - "files": { - "design_tokens": "design-tokens.json", - "style_guide": "style-guide.md", - "component_patterns": "component-patterns.json", - "animation_tokens": "animation-tokens.json", - "preview_html": "preview.html", - "preview_css": "preview.css" - }, - "usage": { - "command": "/workflow:ui-design:codify-style --package-name ${package_name}", - "skill_memory": "/memory:style-skill-memory ${package_name}", - "description": "Reference this package for consistent design system usage" - } -} -EOF - -echo " ✓ metadata.json created" - -# 6. Generate README.md -cat > "${package_dir}/README.md" <<'EOFREADME' -# ${package_name} - -Style reference package with interactive component preview. - -## Contents - -- **design-tokens.json**: Complete design token system -- **style-guide.md**: Detailed style guide documentation -- **component-patterns.json**: Reusable component patterns -- **preview.html**: Interactive component showcase -- **preview.css**: Showcase styling -- **animation-tokens.json**: Animation tokens (if available) -- **metadata.json**: Package metadata - -## Usage - -### Preview Package - -Open `preview.html` in a browser to view the interactive component showcase. - -```bash -# Using local server -cd ${package_dir} -python -m http.server 8080 -# Then open http://localhost:8080/preview.html -``` - -### Use in Workflow - -Reference this package in UI design workflows or generate SKILL memory: - -```bash -# Generate SKILL memory for easy loading -/memory:style-skill-memory ${package_name} -``` - -## Package Information - -- **Generated**: $(date) -- **Source**: Design run extraction -- **Version**: 1.0.0 - -## Component Catalog - -See `component-patterns.json` for complete component catalog with variants, states, and usage examples. - -## Design Tokens - -All design tokens are available as CSS custom properties. See `design-tokens.json` for complete token reference. - -EOFREADME - -echo " ✓ README.md created" - -# 7. Verify all files exist -echo "[Phase 3] Verifying package files" - -required_files=( - "design-tokens.json" - "component-patterns.json" - "preview.html" - "preview.css" - "metadata.json" - "README.md" -) - -missing_files=() -for file in "${required_files[@]}"; do - if [ ! -f "${package_dir}/${file}" ]; then - missing_files+=("$file") - fi -done - -if [ ${#missing_files[@]} -gt 0 ]; then - echo " ❌ ERROR: Missing required files: ${missing_files[*]}" - exit 1 -fi - -echo " ✓ All required files present" - -# 8. Count component patterns (use jq for reliable parsing) -component_count=$(jq -r '.extraction_metadata.component_count // 0' "${package_dir}/component-patterns.json" 2>/dev/null || grep -c '"button"\|"input"\|"card"\|"badge"\|"alert"' "${package_dir}/component-patterns.json" 2>/dev/null || echo 0) - -echo " ✓ Package complete with ${component_count} components" -``` - **TodoWrite**: ```json [ {"content": "Phase 0: 验证和准备", "status": "completed", "activeForm": "验证参数"}, - {"content": "Phase 1: 组件模式提取", "status": "completed", "activeForm": "提取组件模式"}, - {"content": "Phase 2: 生成预览页面", "status": "completed", "activeForm": "生成预览"}, - {"content": "Phase 3: 生成元数据和文档", "status": "completed", "activeForm": "生成文档"} + {"content": "Phase 1: 准备组件数据", "status": "completed", "activeForm": "复制布局模板"}, + {"content": "Phase 2: 生成预览页面", "status": "completed", "activeForm": "生成预览"} ] ``` @@ -568,47 +263,26 @@ echo " ✓ Package complete with ${component_count} components" ``` ${output_dir}/ └── ${package_name}/ - ├── design-tokens.json # Design token system (copied from design run) - ├── style-guide.md # Style guide (copied from design run) - ├── component-patterns.json # Component patterns (NEW) - ├── animation-tokens.json # Animation tokens (optional, copied from design run) - ├── preview.html # Interactive showcase (NEW) - ├── preview.css # Showcase styling (NEW) - ├── metadata.json # Package metadata (NEW) - └── README.md # Package documentation (NEW) + ├── layout-templates.json # Layout templates (copied from design run) + ├── preview.html # Interactive showcase (NEW) + └── preview.css # Showcase styling (NEW) ``` ## Completion Message ``` -✅ Reference package generated successfully! +✅ Preview package generated! Package: {package_name} Location: {package_dir} -Generated Files: -✓ design-tokens.json Design token system -✓ style-guide.md Style guide documentation -✓ component-patterns.json Component catalog ({component_count} components) -✓ preview.html Interactive multi-component showcase +Files: +✓ layout-templates.json {component_count} components +✓ preview.html Interactive showcase ✓ preview.css Showcase styling -✓ animation-tokens.json Animation tokens {if exists: "✓" else: "○ (not found)"} -✓ metadata.json Package metadata -✓ README.md Package documentation -Preview Package: -Open the interactive showcase: +Open preview: file://{absolute_path_to_package_dir}/preview.html - -Or use a local server: - cd {package_dir} - python -m http.server 8080 - # Then open http://localhost:8080/preview.html - -Next Steps: -1. Review preview.html to verify components -2. Generate SKILL memory: /memory:style-skill-memory {package_name} -3. Use package as design reference in future workflows ``` ## Error Handling @@ -620,8 +294,8 @@ Next Steps: | Missing --design-run or --package-name | Required parameters not provided | Provide both flags | | Invalid package name | Contains uppercase, special chars | Use lowercase, alphanumeric, hyphens only | | Design run not found | Incorrect path or design run doesn't exist | Verify design run path, run import-from-code first | -| Missing extraction files | Design run incomplete | Ensure design run has style-extraction results | -| Component extraction failed | No components found | Review design tokens for component_styles | +| Missing extraction files | Design run incomplete | Ensure design run has style-extraction and layout-extraction results | +| Layout templates copy failed | layout-templates.json not found | Run import-from-code with Layout Agent first | | Preview generation failed | Invalid design tokens | Check design-tokens.json format | ---