Enhance UI Design Workflow with intelligent design trend research capabilities: - Add design trend analysis in extract phase using Exa MCP API - Integrate layout strategy planning with current UI/UX patterns (2024-2025) - Update consolidation command to include dynamic layout generation - Add ui-instantiate-prototypes.sh script for prototype management - Simplify path structure by removing nested .design directories - Update workflow architecture documentation This integration enables context-aware design decisions based on modern design trends and improves the quality of generated UI prototypes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
20 KiB
Workflow Architecture
Overview
This document defines the complete workflow system architecture using a JSON-only data model, marker-based session management, and unified file structure with dynamic task decomposition.
Core Architecture
JSON-Only Data Model
JSON files (.task/IMPL-*.json) are the only authoritative source of task state. All markdown documents are read-only generated views.
- Task State: Stored exclusively in JSON files
- Documents: Generated on-demand from JSON data
- No Synchronization: Eliminates bidirectional sync complexity
- Performance: Direct JSON access without parsing overhead
Key Design Decisions
- JSON files are the single source of truth - All markdown documents are read-only generated views
- Marker files for session tracking - Ultra-simple active session management
- Unified file structure definition - Same structure template for all workflows, created on-demand
- Dynamic task decomposition - Subtasks created as needed during execution
- On-demand file creation - Directories and files created only when required
- Agent-agnostic task definitions - Complete context preserved for autonomous execution
Session Management
Active Session Marker System
Ultra-Simple Active Tracking: .workflow/.active-[session-name]
.workflow/
├── WFS-oauth-integration/ # Session directory (paused)
├── WFS-user-profile/ # Session directory (paused)
├── WFS-bug-fix-123/ # Session directory (completed)
└── .active-WFS-user-profile # Marker file (indicates active session)
Marker File Benefits:
- Zero Parsing: File existence check is atomic and instant
- Atomic Operations: File creation/deletion is naturally atomic
- Visual Discovery:
ls .workflow/.active-*shows active session immediately - Simple Switching: Delete old marker + create new marker = session switch
Session Operations
Detect Active Session(s)
active_sessions=$(find .workflow -name ".active-*" 2>/dev/null)
count=$(echo "$active_sessions" | wc -l)
if [ -z "$active_sessions" ]; then
echo "No active session"
elif [ "$count" -eq 1 ]; then
session_name=$(basename "$active_sessions" | sed 's/^\.active-//')
echo "Active session: $session_name"
else
echo "Multiple active sessions found:"
echo "$active_sessions" | while read marker; do
session=$(basename "$marker" | sed 's/^\.active-//')
echo " - $session"
done
echo "Please specify which session to work with"
fi
Switch Session
find .workflow -name ".active-*" -delete && touch .workflow/.active-WFS-new-feature
Session State Tracking
Each session directory contains workflow-session.json:
{
"session_id": "WFS-[topic-slug]",
"project": "feature description",
"type": "simple|medium|complex",
"current_phase": "PLAN|IMPLEMENT|REVIEW",
"status": "active|paused|completed",
"progress": {
"completed_phases": ["PLAN"],
"current_tasks": ["IMPL-1", "IMPL-2"]
}
}
Task System
Hierarchical Task Structure
Maximum Depth: 2 levels (IMPL-N.M format)
IMPL-1 # Main task
IMPL-1.1 # Subtask of IMPL-1 (dynamically created)
IMPL-1.2 # Another subtask of IMPL-1
IMPL-2 # Another main task
IMPL-2.1 # Subtask of IMPL-2 (dynamically created)
Task Status Rules:
- Container tasks: Parent tasks with subtasks (cannot be directly executed)
- Leaf tasks: Only these can be executed directly
- Status inheritance: Parent status derived from subtask completion
Enhanced Task JSON Schema
All task files use this unified 5-field schema with optional artifacts enhancement:
{
"id": "IMPL-1.2",
"title": "Implement JWT authentication",
"status": "pending|active|completed|blocked|container",
"meta": {
"type": "feature|bugfix|refactor|test-gen|test-fix|docs",
"agent": "@code-developer|@action-planning-agent|@test-fix-agent|@general-purpose"
},
"context": {
"requirements": ["JWT authentication", "OAuth2 support"],
"focus_paths": ["src/auth", "tests/auth", "config/auth.json"],
"acceptance": ["JWT validation works", "OAuth flow complete"],
"parent": "IMPL-1",
"depends_on": ["IMPL-1.1"],
"inherited": {
"from": "IMPL-1",
"context": ["Authentication system design completed"]
},
"shared_context": {
"auth_strategy": "JWT with refresh tokens"
},
"artifacts": [
{
"type": "synthesis_specification",
"source": "brainstorm_synthesis",
"path": ".workflow/WFS-session/.brainstorming/synthesis-specification.md",
"priority": "highest",
"contains": "complete_integrated_specification"
}
]
},
"flow_control": {
"pre_analysis": [
{
"step": "check_patterns",
"action": "Analyze existing patterns",
"command": "bash(rg 'auth' [focus_paths] | head -10)",
"output_to": "patterns"
},
{
"step": "analyze_architecture",
"action": "Review system architecture",
"command": "~/.claude/scripts/gemini-wrapper -p \"analyze patterns: [patterns]\"",
"output_to": "design"
},
{
"step": "check_deps",
"action": "Check dependencies",
"command": "bash(echo [depends_on] | xargs cat)",
"output_to": "context"
}
],
"implementation_approach": {
"task_description": "Implement JWT authentication following [design]",
"modification_points": [
"Add JWT generation using [parent] patterns",
"Implement validation middleware from [context]"
],
"logic_flow": [
"User login → validate with [inherited] → generate JWT",
"Protected route → extract JWT → validate using [shared] rules"
]
},
"target_files": [
"src/auth/login.ts:handleLogin:75-120",
"src/middleware/auth.ts:validateToken",
"src/auth/PasswordReset.ts"
]
}
}
Focus Paths & Context Management
Focus Paths Format
The focus_paths field specifies concrete project paths for task implementation:
- Array of strings:
["folder1", "folder2", "specific_file.ts"] - Concrete paths: Use actual directory/file names without wildcards
- Mixed types: Can include both directories and specific files
- Relative paths: From project root (e.g.,
src/auth, not./src/auth)
Artifacts Field ⚠️ NEW FIELD
Optional field referencing brainstorming outputs for task execution:
"artifacts": [
{
"type": "synthesis_specification|topic_framework|individual_role_analysis",
"source": "brainstorm_synthesis|brainstorm_framework|brainstorm_roles",
"path": ".workflow/WFS-session/.brainstorming/document.md",
"priority": "highest|high|medium|low"
}
]
Types & Priority: synthesis_specification (highest) → topic_framework (medium) → individual_role_analysis (low)
Flow Control Configuration
The flow_control field manages task execution with two main components:
pre_analysis - Context gathering phase:
- Flexible commands: Supports multiple tool types (see Tool Reference below)
- Step structure: Each step has
step,action,commandfields - Variable accumulation: Steps can reference previous outputs via
[variable_name] - Error handling:
skip_optional,fail,retry_once,manual_intervention
implementation_approach - Implementation definition:
- task_description: Comprehensive implementation description
- modification_points: Specific code modification targets
- logic_flow: Business logic execution sequence
- target_files: Target file list - existing files in
file:function:linesformat, new files asfileonly
Tool Reference
Command Types Available:
- Gemini CLI:
~/.claude/scripts/gemini-wrapper -p "prompt" - Codex CLI:
codex --full-auto exec "task" -s danger-full-access - Built-in Tools:
grep(pattern),glob(pattern),search(query) - Bash Commands:
bash(rg 'pattern' src/),bash(find . -name "*.ts")
Variable System & Context Flow
Flow Control Variables: Use [variable_name] format for dynamic content:
- Step outputs:
[step_output_name]- Reference any pre_analysis step output - Task properties:
[task_property]- Reference any task context field - Previous results:
[analysis_result]- Reference accumulated context - Commands: All commands wrapped with appropriate error handling
Context Accumulation Process:
- Structure Analysis:
get_modules_by_depth.sh→ project hierarchy - Pattern Analysis: Tool-specific commands → existing patterns
- Dependency Mapping: Previous task summaries → inheritance context
- Task Context Generation: Combined analysis → task.context fields
Context Inheritance Rules:
- Parent → Child: Container tasks pass context via
context.inherited - Dependency → Dependent: Previous task summaries via
context.depends_on - Session → Task: Global session context included in all tasks
- Module → Feature: Module patterns inform feature implementation
Task Validation Rules
- ID Uniqueness: All task IDs must be unique
- Hierarchical Format: Must follow IMPL-N[.M] pattern (maximum 2 levels)
- Parent References: All parent IDs must exist as JSON files
- Status Consistency: Status values from defined enumeration
- Required Fields: All 5 core fields must be present
- Focus Paths Structure: context.focus_paths must contain concrete paths (no wildcards)
- Flow Control Format: pre_analysis must be array with required fields
- Dependency Integrity: All depends_on task IDs must exist as JSON files
- Artifacts Structure: context.artifacts (optional) must use valid type, priority, and path format
Workflow Structure
Unified File Structure
All workflows use the same file structure definition regardless of complexity. Directories and files are created on-demand as needed, not all at once during initialization.
Complete Structure Reference
.workflow/
├── [.scratchpad/] # Non-session-specific outputs (created when needed)
│ ├── analyze-*-[timestamp].md # One-off analysis results
│ ├── chat-*-[timestamp].md # Standalone chat sessions
│ ├── plan-*-[timestamp].md # Ad-hoc planning notes
│ ├── bug-index-*-[timestamp].md # Quick bug analyses
│ ├── code-analysis-*-[timestamp].md # Standalone code analysis
│ ├── execute-*-[timestamp].md # Ad-hoc implementation logs
│ └── codex-execute-*-[timestamp].md # Multi-stage execution logs
│
├── [.design/] # Standalone UI design outputs (created when needed)
│ └── run-[timestamp]/ # Timestamped design runs without session
│ ├── style-extraction/ # Style analysis results
│ ├── style-consolidation/ # Design system tokens
│ ├── prototypes/ # Generated HTML/CSS prototypes
│ └── .run-metadata.json # Run configuration
│
└── WFS-[topic-slug]/
├── workflow-session.json # Session metadata and state (REQUIRED)
├── [.brainstorming/] # Optional brainstorming phase (created when needed)
├── [.chat/] # CLI interaction sessions (created when analysis is run)
│ ├── chat-*.md # Saved chat sessions
│ └── analysis-*.md # Analysis results
├── [.process/] # Planning analysis results (created by /workflow:plan)
│ └── ANALYSIS_RESULTS.md # Analysis results and planning artifacts
├── IMPL_PLAN.md # Planning document (REQUIRED)
├── TODO_LIST.md # Progress tracking (REQUIRED)
├── [.summaries/] # Task completion summaries (created when tasks complete)
│ ├── IMPL-*-summary.md # Main task summaries
│ └── IMPL-*.*-summary.md # Subtask summaries
├── [design-*/] # UI design outputs (created by ui-design workflows)
│ ├── style-extraction/ # Style analysis results
│ ├── style-consolidation/ # Design system tokens
│ ├── prototypes/ # Generated HTML/CSS prototypes
│ └── .run-metadata.json # Run configuration
└── .task/ # Task definitions (REQUIRED)
├── IMPL-*.json # Main task definitions
└── IMPL-*.*.json # Subtask definitions (created dynamically)
Creation Strategy
- Initial Setup: Create only
workflow-session.json,IMPL_PLAN.md,TODO_LIST.md, and.task/directory - On-Demand Creation: Other directories created when first needed
- Dynamic Files: Subtask JSON files created during task decomposition
- Scratchpad Usage:
.scratchpad/created when CLI commands run without active session - Design Usage:
design-{timestamp}/created by UI design workflows,.design/for standalone design runs
Scratchpad Directory (.scratchpad/)
Purpose: Centralized location for non-session-specific CLI outputs
When to Use:
- No Active Session: CLI analysis/chat commands run without an active workflow session
- Unrelated Analysis: Quick analysis not related to current active session
- Exploratory Work: Ad-hoc investigation before creating formal workflow
- One-Off Queries: Standalone questions or debugging without workflow context
Output Routing Logic:
- IF active session exists AND command is session-relevant:
- Save to
.workflow/WFS-[id]/.chat/[command]-[timestamp].md
- Save to
- ELSE (no session OR one-off analysis):
- Save to
.workflow/.scratchpad/[command]-[description]-[timestamp].md
- Save to
File Naming Pattern: [command-type]-[brief-description]-[timestamp].md
Examples:
Analysis Commands (read-only):
/cli:analyze "security"(no session) →.scratchpad/analyze-security-20250105-143022.md/cli:chat "build process"(unrelated to active session) →.scratchpad/chat-build-process-20250105-143045.md/cli:mode:plan "feature idea"(exploratory) →.scratchpad/plan-feature-idea-20250105-143110.md/cli:mode:code-analysis "trace auth flow"(no session) →.scratchpad/code-analysis-auth-flow-20250105-143130.md
Implementation Commands (⚠️ modifies code):
/cli:execute "implement JWT auth"(no session) →.scratchpad/execute-jwt-auth-20250105-143200.md/cli:codex-execute "refactor API layer"(no session) →.scratchpad/codex-execute-api-refactor-20250105-143230.md
Maintenance:
- Periodically review and clean up old scratchpad files
- Promote useful analyses to formal workflow sessions if needed
- No automatic cleanup - manual management recommended
File Naming Conventions
Session Identifiers
Format: WFS-[topic-slug]
WFS Prefix Meaning:
WFS= WorkFlow Session- Identifies directories as workflow session containers
- Distinguishes workflow sessions from other project directories
Naming Rules:
- Convert topic to lowercase with hyphens (e.g., "User Auth System" →
WFS-user-auth-system) - Add
-NNNsuffix only if conflicts exist (e.g.,WFS-payment-integration-002) - Maximum length: 50 characters including WFS- prefix
Document Naming
workflow-session.json- Session state (required)IMPL_PLAN.md- Planning document (required)TODO_LIST.md- Progress tracking (auto-generated when needed)- Chat sessions:
chat-analysis-*.md - Task summaries:
IMPL-[task-id]-summary.md
Document Templates
TODO_LIST.md Template
# Tasks: [Session Topic]
## Task Progress
▸ **IMPL-001**: [Main Task Group] → [📋](./.task/IMPL-001.json)
- [ ] **IMPL-001.1**: [Subtask] → [📋](./.task/IMPL-001.1.json)
- [x] **IMPL-001.2**: [Subtask] → [📋](./.task/IMPL-001.2.json) | [✅](./.summaries/IMPL-001.2-summary.md)
- [x] **IMPL-002**: [Simple Task] → [📋](./.task/IMPL-002.json) | [✅](./.summaries/IMPL-002-summary.md)
## Status Legend
- `▸` = Container task (has subtasks)
- `- [ ]` = Pending leaf task
- `- [x]` = Completed leaf task
- Maximum 2 levels: Main tasks and subtasks only
Operations Guide
Session Management
# Create minimal required structure
mkdir -p .workflow/WFS-topic-slug/.task
echo '{"session_id":"WFS-topic-slug",...}' > .workflow/WFS-topic-slug/workflow-session.json
echo '# Implementation Plan' > .workflow/WFS-topic-slug/IMPL_PLAN.md
echo '# Tasks' > .workflow/WFS-topic-slug/TODO_LIST.md
Task Operations
# Create task
echo '{"id":"IMPL-1","title":"New task",...}' > .task/IMPL-1.json
# Update task status
jq '.status = "active"' .task/IMPL-1.json > temp && mv temp .task/IMPL-1.json
# Generate TODO list from JSON state
generate_todo_list_from_json .task/
Directory Creation (On-Demand)
mkdir -p .brainstorming # When brainstorming is initiated
mkdir -p .chat # When analysis commands are run
mkdir -p .summaries # When first task completes
Session Consistency Checks & Recovery
# Validate active session integrity
active_marker=$(find .workflow -name ".active-*" | head -1)
if [ -n "$active_marker" ]; then
session_name=$(basename "$active_marker" | sed 's/^\.active-//')
session_dir=".workflow/$session_name"
if [ ! -d "$session_dir" ]; then
echo "⚠️ Orphaned active marker, removing..."
rm "$active_marker"
fi
fi
Recovery Strategies:
- Missing Session Directory: Remove orphaned active marker
- Multiple Active Markers: Keep newest, remove others
- Corrupted Session File: Recreate from template
- Broken Task Hierarchy: Reconstruct parent-child relationships
Complexity Classification
Task Complexity Rules
Complexity is determined by task count and decomposition needs:
| Complexity | Task Count | Hierarchy Depth | Decomposition Behavior |
|---|---|---|---|
| Simple | <5 tasks | 1 level (IMPL-N) | Direct execution, minimal decomposition |
| Medium | 5-15 tasks | 2 levels (IMPL-N.M) | Moderate decomposition, context coordination |
| Complex | >15 tasks | 2 levels (IMPL-N.M) | Frequent decomposition, multi-agent orchestration |
Workflow Characteristics & Tool Guidance
Simple Workflows
- Examples: Bug fixes, small feature additions, configuration changes
- Task Decomposition: Usually single-level tasks, minimal breakdown needed
- Agent Coordination: Direct execution without complex orchestration
- Tool Strategy:
bash()commands,grep()for pattern matching
Medium Workflows
- Examples: New features, API endpoints with integration, database schema changes
- Task Decomposition: Two-level hierarchy when decomposition is needed
- Agent Coordination: Context coordination between related tasks
- Tool Strategy:
gemini-wrapperfor pattern analysis,codex --full-autofor implementation
Complex Workflows
- Examples: Major features, architecture refactoring, security implementations, multi-service deployments
- Task Decomposition: Frequent use of two-level hierarchy with dynamic subtask creation
- Agent Coordination: Multi-agent orchestration with deep context analysis
- Tool Strategy:
gemini-wrapperfor architecture analysis,codex --full-autofor complex problem solving,bash()commands for flexible analysis
Assessment & Upgrades
- During Creation: System evaluates requirements and assigns complexity
- During Execution: Can upgrade (Simple→Medium→Complex) but never downgrade
- Override Allowed: Users can specify higher complexity manually
Agent Integration
Agent Assignment
Based on task type and title keywords:
- Planning tasks → @action-planning-agent
- Implementation → @code-developer (code + tests)
- Test execution/fixing → @test-fix-agent
- Review → @general-purpose (optional, only when explicitly requested)
Execution Context
Agents receive complete task JSON plus workflow context:
{
"task": { /* complete task JSON */ },
"workflow": {
"session": "WFS-user-auth",
"phase": "IMPLEMENT"
}
}