mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-13 02:41:50 +08:00
refactor: Add tree-style execution flow diagrams to all workflow commands
Added tree-style execution process diagrams using ASCII art (├─, └─, │) to 34 workflow command files across three directories for improved readability and execution flow clarity. ## Changes by Directory ### workflow/ root (17 files) - lite-plan.md, lite-execute.md, lite-fix.md - plan.md, execute.md, replan.md - status.md, review.md, review-fix.md - review-session-cycle.md, review-module-cycle.md - session commands (start, complete, resume, list) - tdd-plan.md, tdd-verify.md, test-cycle-execute.md, test-gen.md, test-fix-gen.md ### workflow/ui-design/ (10 files) - layout-extract.md, animation-extract.md, style-extract.md - generate.md, import-from-code.md, codify-style.md - imitate-auto.md, explore-auto.md - reference-page-generator.md, design-sync.md ### workflow/tools/ (8 files) - conflict-resolution.md, task-generate-agent.md, context-gather.md - tdd-coverage-analysis.md, task-generate-tdd.md - test-task-generate.md, test-concept-enhanced.md, test-context-gather.md ## Diagram Features - Input parsing with flag enumeration - Decision branching with conditional paths - Phase/step hierarchy with clear nesting - Mode detection and validation flows 🤖 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
|
||||
|
||||
@@ -40,6 +40,51 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
|
||||
**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 → Execute /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 → Execute /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 → Execute /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 → Execute /workflow:ui-design:layout-extract
|
||||
└─ False → Use code import
|
||||
|
||||
Phase 10: UI Assembly
|
||||
└─ Execute /workflow:ui-design:generate → Workflow complete
|
||||
```
|
||||
|
||||
## Core Rules
|
||||
|
||||
1. **Start Immediately**: TodoWrite initialization → Phase 7 execution
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -36,6 +36,50 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
|
||||
|
||||
**Task Attachment Model**: SlashCommand invocation 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 → Execute /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 → Execute /workflow:ui-design:style-extract
|
||||
|
||||
Phase 2.3: Animation Extraction
|
||||
└─ Decision (skip_animation):
|
||||
├─ code_only AND animation_complete → Use code import
|
||||
└─ Otherwise → Execute /workflow:ui-design:animation-extract
|
||||
|
||||
Phase 2.5: Layout Extraction
|
||||
└─ Decision (skip_layout):
|
||||
├─ code_only AND layout_complete → Use code import
|
||||
└─ Otherwise → Execute /workflow:ui-design:layout-extract
|
||||
|
||||
Phase 3: UI Assembly
|
||||
└─ Execute /workflow:ui-design:generate
|
||||
|
||||
Phase 4: Design System Integration
|
||||
└─ Decision (session_id):
|
||||
├─ Provided → Execute /workflow:ui-design:update
|
||||
└─ Not provided → Standalone completion
|
||||
```
|
||||
|
||||
## Core Rules
|
||||
|
||||
1. **Start Immediately**: TodoWrite initialization → Phase 2 execution
|
||||
|
||||
@@ -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