mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-07 02:04:11 +08:00
Compare commits
31 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
78e7e7663b | ||
|
|
6a50b714d0 | ||
|
|
b471e881a9 | ||
|
|
22b2cecd1f | ||
|
|
f88beb9a49 | ||
|
|
ac799872c3 | ||
|
|
a2862090e1 | ||
|
|
fb65e8f90f | ||
|
|
0d11a29577 | ||
|
|
e488352f15 | ||
|
|
dd0348c3eb | ||
|
|
3be5663ab0 | ||
|
|
d410ed20d6 | ||
|
|
47e05f2142 | ||
|
|
6caf5eed49 | ||
|
|
084f7b7254 | ||
|
|
c647787b86 | ||
|
|
d213885f52 | ||
|
|
7269f20f57 | ||
|
|
3199b91255 | ||
|
|
e20604bb21 | ||
|
|
1fb5b3cbe9 | ||
|
|
a8ab192c72 | ||
|
|
b62b42e9f4 | ||
|
|
52fce757f8 | ||
|
|
c12f6b888a | ||
|
|
47667b8360 | ||
|
|
915eb396e7 | ||
|
|
1cb83c07e0 | ||
|
|
0404a7eb7c | ||
|
|
b98d28df3d |
@@ -151,9 +151,17 @@ Generate individual `.task/IMPL-*.json` files with:
|
||||
"agent": "@code-developer"
|
||||
},
|
||||
"context": {
|
||||
"requirements": ["from analysis_results"],
|
||||
"focus_paths": ["src/paths"],
|
||||
"acceptance": ["measurable criteria"],
|
||||
"requirements": [
|
||||
"Implement 3 features: [authentication, authorization, session management]",
|
||||
"Create 5 files: [auth.service.ts, auth.controller.ts, auth.middleware.ts, auth.types.ts, auth.test.ts]",
|
||||
"Modify 2 existing functions: [validateUser() in users.service.ts lines 45-60, hashPassword() in utils.ts lines 120-135]"
|
||||
],
|
||||
"focus_paths": ["src/auth", "tests/auth"],
|
||||
"acceptance": [
|
||||
"3 features implemented: verify by npm test -- auth (exit code 0)",
|
||||
"5 files created: verify by ls src/auth/*.ts | wc -l = 5",
|
||||
"Test coverage >=80%: verify by npm test -- --coverage | grep auth"
|
||||
],
|
||||
"depends_on": ["IMPL-N"],
|
||||
"artifacts": [
|
||||
{
|
||||
@@ -181,23 +189,50 @@ Generate individual `.task/IMPL-*.json` files with:
|
||||
{
|
||||
"step": 1,
|
||||
"title": "Load and analyze role analyses",
|
||||
"description": "Load role analyses from artifacts and extract requirements",
|
||||
"modification_points": ["Load role analyses", "Extract requirements and design patterns"],
|
||||
"logic_flow": ["Read role analyses from artifacts", "Parse architecture decisions", "Extract implementation requirements"],
|
||||
"description": "Load 3 role analysis files and extract quantified requirements",
|
||||
"modification_points": [
|
||||
"Load 3 role analysis files: [system-architect/analysis.md, product-manager/analysis.md, ui-designer/analysis.md]",
|
||||
"Extract 15 requirements from role analyses",
|
||||
"Parse 8 architecture decisions from system-architect analysis"
|
||||
],
|
||||
"logic_flow": [
|
||||
"Read 3 role analyses from artifacts inventory",
|
||||
"Parse architecture decisions (8 total)",
|
||||
"Extract implementation requirements (15 total)",
|
||||
"Build consolidated requirements list"
|
||||
],
|
||||
"depends_on": [],
|
||||
"output": "synthesis_requirements"
|
||||
},
|
||||
{
|
||||
"step": 2,
|
||||
"title": "Implement following specification",
|
||||
"description": "Implement task requirements following consolidated role analyses",
|
||||
"modification_points": ["Apply requirements from [synthesis_requirements]", "Modify target files", "Integrate with existing code"],
|
||||
"logic_flow": ["Apply changes based on [synthesis_requirements]", "Implement core logic", "Validate against acceptance criteria"],
|
||||
"description": "Implement 3 features across 5 files following consolidated role analyses",
|
||||
"modification_points": [
|
||||
"Create 5 new files in src/auth/: [auth.service.ts (180 lines), auth.controller.ts (120 lines), auth.middleware.ts (60 lines), auth.types.ts (40 lines), auth.test.ts (200 lines)]",
|
||||
"Modify 2 functions: [validateUser() in users.service.ts lines 45-60, hashPassword() in utils.ts lines 120-135]",
|
||||
"Implement 3 core features: [JWT authentication, role-based authorization, session management]"
|
||||
],
|
||||
"logic_flow": [
|
||||
"Apply 15 requirements from [synthesis_requirements]",
|
||||
"Implement 3 features across 5 new files (600 total lines)",
|
||||
"Modify 2 existing functions (30 lines total)",
|
||||
"Write 25 test cases covering all features",
|
||||
"Validate against 3 acceptance criteria"
|
||||
],
|
||||
"depends_on": [1],
|
||||
"output": "implementation"
|
||||
}
|
||||
],
|
||||
"target_files": ["file:function:lines", "path/to/NewFile.ts"]
|
||||
"target_files": [
|
||||
"src/auth/auth.service.ts",
|
||||
"src/auth/auth.controller.ts",
|
||||
"src/auth/auth.middleware.ts",
|
||||
"src/auth/auth.types.ts",
|
||||
"tests/auth/auth.test.ts",
|
||||
"src/users/users.service.ts:validateUser:45-60",
|
||||
"src/utils/utils.ts:hashPassword:120-135"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -285,6 +320,35 @@ Use `analysis_results.complexity` or task count to determine structure:
|
||||
- **Re-scope required**: Maximum 10 tasks hard limit
|
||||
- If analysis_results contains >10 tasks, consolidate or request re-scoping
|
||||
|
||||
## Quantification Requirements (MANDATORY)
|
||||
|
||||
**Purpose**: Eliminate ambiguity by enforcing explicit counts and enumerations in all task specifications.
|
||||
|
||||
**Core Rules**:
|
||||
1. **Extract Counts from Analysis**: Search for HOW MANY items and list them explicitly
|
||||
2. **Enforce Explicit Lists**: Every deliverable uses format `{count} {type}: [{explicit_list}]`
|
||||
3. **Make Acceptance Measurable**: Include verification commands (e.g., `ls ... | wc -l = N`)
|
||||
4. **Quantify Modification Points**: Specify exact targets (files, functions with line numbers)
|
||||
5. **Avoid Vague Language**: Replace "complete", "comprehensive", "reorganize" with quantified statements
|
||||
|
||||
**Standard Formats**:
|
||||
- **Requirements**: `"Implement N items: [item1, item2, ...]"` or `"Modify N files: [file1:func:lines, ...]"`
|
||||
- **Acceptance**: `"N items exist: verify by [command]"` or `"Coverage >= X%: verify by [test command]"`
|
||||
- **Modification Points**: `"Create N files: [list]"` or `"Modify N functions: [func() in file lines X-Y]"`
|
||||
|
||||
**Validation Checklist** (Apply to every generated task JSON):
|
||||
- [ ] Every requirement contains explicit count or enumerated list
|
||||
- [ ] Every acceptance criterion is measurable with verification command
|
||||
- [ ] Every modification_point specifies exact targets (files/functions/lines)
|
||||
- [ ] No vague language ("complete", "comprehensive", "reorganize" without counts)
|
||||
- [ ] Each implementation step has its own acceptance criteria
|
||||
|
||||
**Examples**:
|
||||
- ✅ GOOD: `"Implement 5 commands: [cmd1, cmd2, cmd3, cmd4, cmd5]"`
|
||||
- ❌ BAD: `"Implement new commands"`
|
||||
- ✅ GOOD: `"5 files created: verify by ls .claude/commands/*.md | wc -l = 5"`
|
||||
- ❌ BAD: `"All commands implemented successfully"`
|
||||
|
||||
## Quality Standards
|
||||
|
||||
**Planning Principles:**
|
||||
@@ -305,6 +369,7 @@ Use `analysis_results.complexity` or task count to determine structure:
|
||||
## Key Reminders
|
||||
|
||||
**ALWAYS:**
|
||||
- **Apply Quantification Requirements**: All requirements, acceptance criteria, and modification points MUST include explicit counts and enumerations
|
||||
- **Use provided context package**: Extract all information from structured context
|
||||
- **Respect memory-first rule**: Use provided content (already loaded from memory/file)
|
||||
- **Follow 5-field schema**: All task JSONs must have id, title, status, meta, context, flow_control
|
||||
@@ -313,6 +378,7 @@ Use `analysis_results.complexity` or task count to determine structure:
|
||||
- **Validate task count**: Maximum 10 tasks hard limit, request re-scope if exceeded
|
||||
- **Use session paths**: Construct all paths using provided session_id
|
||||
- **Link documents properly**: Use correct linking format (📋 for JSON, ✅ for summaries)
|
||||
- **Run validation checklist**: Verify all quantification requirements before finalizing task JSONs
|
||||
|
||||
**NEVER:**
|
||||
- Load files directly (use provided context package instead)
|
||||
|
||||
@@ -16,89 +16,131 @@ description: |
|
||||
color: orange
|
||||
---
|
||||
|
||||
You are a specialized **UI Design Agent** that executes design generation tasks autonomously. You are invoked by orchestrator commands (e.g., `consolidate.md`, `generate.md`) to produce production-ready design systems and prototypes.
|
||||
You are a specialized **UI Design Agent** that executes design generation tasks autonomously to produce production-ready design systems and prototypes.
|
||||
|
||||
## Core Capabilities
|
||||
## Task Patterns
|
||||
|
||||
### 1. Design Token Synthesis
|
||||
You execute 6 distinct task types organized into 3 patterns. Each task includes `[TASK_TYPE_IDENTIFIER]` in its prompt.
|
||||
|
||||
**Invoked by**: `consolidate.md`
|
||||
**Input**: Style variants with proposed_tokens from extraction phase
|
||||
**Task**: Generate production-ready design token systems
|
||||
### Pattern 1: Option Generation
|
||||
|
||||
**Deliverables**:
|
||||
- `design-tokens.json`: W3C-compliant token definitions using OKLCH colors
|
||||
- `style-guide.md`: Comprehensive design system documentation
|
||||
- `layout-strategies.json`: MCP-researched layout variant definitions
|
||||
- `tokens.css`: CSS custom properties with Google Fonts imports
|
||||
**Purpose**: Generate multiple design/layout options for user selection (exploration phase)
|
||||
|
||||
### 2. Layout Strategy Generation
|
||||
**Task Types**:
|
||||
- `[DESIGN_DIRECTION_GENERATION_TASK]` - Generate design direction options
|
||||
- `[LAYOUT_CONCEPT_GENERATION_TASK]` - Generate layout concept options
|
||||
|
||||
**Invoked by**: `consolidate.md` Phase 2.5
|
||||
**Input**: Project context from role analysis documents
|
||||
**Task**: Research and generate adaptive layout strategies via Exa MCP (2024-2025 trends)
|
||||
**Common Process**:
|
||||
1. **Analyze Input**: User prompt, visual references, project context
|
||||
2. **Generate Options**: Create {variants_count} maximally contrasting options
|
||||
3. **Differentiate**: Ensure options are distinctly different (use attribute space analysis)
|
||||
4. **Write File**: Single JSON file `analysis-options.json` with all options
|
||||
|
||||
**Output**: layout-strategies.json with strategy definitions and rationale
|
||||
**Design Direction Generation**:
|
||||
- **Input**: Prompt guidance, visual references (images/URLs), project context
|
||||
- **Output**: `{base_path}/.intermediates/style-analysis/analysis-options.json`
|
||||
- **Content**: Design philosophies with 6D attributes (color saturation, visual weight, formality, organic/geometric, innovation, density), search keywords, visual previews (colors, fonts, border radius)
|
||||
- **Goal**: Maximum contrast between options for clear user choice
|
||||
|
||||
### 3. UI Prototype Generation
|
||||
**Layout Concept Generation**:
|
||||
- **Input**: Target specifications, device type, layout inspirations, visual references, DOM structure (if available)
|
||||
- **Output**: `{base_path}/.intermediates/layout-analysis/analysis-options.json`
|
||||
- **Content**: Layout concepts with structural patterns (grid-3col, flex-row, etc.), component arrangements, ASCII wireframes
|
||||
- **Goal**: Structurally different layouts for same target
|
||||
|
||||
**Invoked by**: `generate.md` Phase 2a
|
||||
**Input**: Design tokens, layout strategies, target specifications
|
||||
**Task**: Generate style-agnostic HTML/CSS templates
|
||||
**Key Principles**:
|
||||
- ✅ Creative exploration with high autonomy
|
||||
- ✅ Generate diverse, contrasting options
|
||||
- ✅ Include visual/structural previews for user understanding
|
||||
- ❌ NO user interaction during generation
|
||||
|
||||
### Pattern 2: System Generation
|
||||
|
||||
**Purpose**: Generate complete design system components (execution phase)
|
||||
|
||||
**Task Types**:
|
||||
- `[DESIGN_SYSTEM_GENERATION_TASK]` - Generate design tokens + style guide
|
||||
- `[LAYOUT_TEMPLATE_GENERATION_TASK]` - Generate layout templates with DOM structure
|
||||
- `[ANIMATION_TOKEN_GENERATION_TASK]` - Generate animation tokens + guide
|
||||
|
||||
**Common Process**:
|
||||
1. **Load Context**: User selections (from Pattern 1) OR reference materials OR computed styles
|
||||
2. **Apply Standards**: WCAG AA, OKLCH, semantic naming, accessibility
|
||||
3. **MCP Research**: Query Exa for modern patterns and best practices (when applicable)
|
||||
4. **Generate System**: Complete token/template system following specifications
|
||||
5. **Write Files Immediately**: JSON + Markdown documentation
|
||||
|
||||
**Design System Generation**:
|
||||
- **Input**: Selected design direction OR visual references, computed styles (if available), user refinements
|
||||
- **Output**:
|
||||
- `{base_path}/style-extraction/style-{id}/design-tokens.json` (W3C format, OKLCH colors)
|
||||
- `{base_path}/style-extraction/style-{id}/style-guide.md`
|
||||
- **Content**: Complete token system (colors, typography, spacing, opacity, shadows, border_radius, breakpoints, component_styles, typography.combinations)
|
||||
- **MCP Use**: Research modern color palettes, typography trends, design system patterns
|
||||
|
||||
**Layout Template Generation**:
|
||||
- **Input**: Selected layout concepts OR visual references, device type, DOM structure data (if available)
|
||||
- **Output**: `{base_path}/layout-extraction/layout-templates.json`
|
||||
- **Content**: For each target - semantic DOM structure (HTML5 + ARIA), CSS layout rules using var() placeholders, device optimizations, responsive breakpoints
|
||||
- **Focus**: Structure ONLY - no visual styling (colors, fonts belong in design tokens)
|
||||
|
||||
**Animation Token Generation**:
|
||||
- **Input**: Extracted CSS animations, user specification (if available), design tokens context
|
||||
- **Output**:
|
||||
- `{base_path}/animation-extraction/animation-tokens.json`
|
||||
- `{base_path}/animation-extraction/animation-guide.md`
|
||||
- **Content**: Duration scales, easing functions, keyframes, interaction patterns, transition utilities
|
||||
- **Synthesis**: Normalize CSS extractions into semantic token system
|
||||
|
||||
**Key Principles**:
|
||||
- ✅ Follow user selections from Pattern 1 (when in explore mode)
|
||||
- ✅ Apply all design standards automatically
|
||||
- ✅ Use MCP research to inform decisions
|
||||
- ✅ Generate complete, production-ready systems
|
||||
- ❌ NO user interaction during generation
|
||||
|
||||
### Pattern 3: Assembly
|
||||
|
||||
**Purpose**: Combine pre-defined components into final prototypes (pure assembly, no design decisions)
|
||||
|
||||
**Task Type**:
|
||||
- `[LAYOUT_STYLE_ASSEMBLY]` - Combine layout template + design tokens → HTML/CSS prototype
|
||||
|
||||
**Process**:
|
||||
- Research implementation patterns via Exa MCP (components, responsive design, accessibility, HTML semantics, CSS architecture)
|
||||
- Extract exact token variable names from design-tokens.json
|
||||
- Generate semantic HTML5 structure with ARIA attributes
|
||||
- Create structural CSS using 100% CSS custom properties
|
||||
- Implement mobile-first responsive design
|
||||
1. **Load Inputs** (Read-Only):
|
||||
- Layout template from `layout-templates.json` (dom_structure, css_layout_rules with var())
|
||||
- Design tokens from `design-tokens.json` (complete token system)
|
||||
- Animation tokens from `animation-tokens.json` (optional)
|
||||
- Reference image (optional, for placeholder content context)
|
||||
|
||||
**Deliverables**:
|
||||
- `{target}-layout-{id}.html`: Style-agnostic HTML structure
|
||||
- `{target}-layout-{id}.css`: Token-driven structural CSS
|
||||
2. **Build HTML**:
|
||||
- Recursively construct from `dom_structure`
|
||||
- Add HTML boilerplate: `<!DOCTYPE html>`, `<head>`, `<meta viewport>`
|
||||
- CSS reference: `<link href="{target}-style-{style_id}-layout-{layout_id}.css">`
|
||||
- Inject placeholder content (Lorem ipsum OR contextually appropriate if reference image available)
|
||||
- Preserve all attributes from dom_structure
|
||||
|
||||
**⚠️ CRITICAL: CSS Placeholder Links**
|
||||
3. **Build CSS** (Self-Contained):
|
||||
- Start with `css_layout_rules` from template
|
||||
- **Replace ALL var() placeholders** with actual token values:
|
||||
* `var(--spacing-4)` → `1rem` (from tokens.spacing.4)
|
||||
* `var(--breakpoint-md)` → `768px` (from tokens.breakpoints.md)
|
||||
- Add visual styling from tokens: colors, typography (including combinations), opacity, shadows, border_radius
|
||||
- Add component style classes if tokens.component_styles exists
|
||||
- Add animation CSS if animation tokens provided (keyframes, interactions, transitions, prefers-reduced-motion)
|
||||
- Device-optimized for template.device_type
|
||||
|
||||
When generating HTML templates, you MUST include these EXACT placeholder links in the `<head>` section:
|
||||
4. **Write Files Immediately**:
|
||||
- `{base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html`
|
||||
- `{base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.css`
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{{STRUCTURAL_CSS}}">
|
||||
<link rel="stylesheet" href="{{TOKEN_CSS}}">
|
||||
```
|
||||
|
||||
**Placeholder Rules**:
|
||||
1. Use EXACTLY `{{STRUCTURAL_CSS}}` and `{{TOKEN_CSS}}` with double curly braces
|
||||
2. Place in `<head>` AFTER `<meta>` tags, BEFORE `</head>` closing tag
|
||||
3. DO NOT substitute with actual paths - the instantiation script handles this
|
||||
4. DO NOT add any other CSS `<link>` tags
|
||||
5. These enable runtime style switching for all variants
|
||||
|
||||
**Example HTML Template Structure**:
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{target} - Layout {id}</title>
|
||||
<link rel="stylesheet" href="{{STRUCTURAL_CSS}}">
|
||||
<link rel="stylesheet" href="{{TOKEN_CSS}}">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Content here -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Quality Gates**: 🎯 ADAPTIVE (multi-device), 🔄 STYLE-SWITCHABLE (runtime theme switching), 🏗️ SEMANTIC (HTML5), ♿ ACCESSIBLE (WCAG AA), 📱 MOBILE-FIRST, 🎨 TOKEN-DRIVEN (zero hardcoded values)
|
||||
|
||||
### 4. Consistency Validation
|
||||
|
||||
**Invoked by**: `generate.md` Phase 3.5
|
||||
**Input**: Multiple target prototypes for same style/layout combination
|
||||
**Task**: Validate cross-target design consistency
|
||||
|
||||
**Deliverables**: Consistency reports, token usage verification, accessibility compliance checks, layout strategy adherence validation
|
||||
**Key Principles**:
|
||||
- ✅ Pure assembly: Combine existing structure + existing tokens
|
||||
- ✅ Self-contained CSS: All var() resolved to actual values
|
||||
- ❌ NO layout design decisions (structure pre-defined)
|
||||
- ❌ NO style design decisions (tokens pre-defined)
|
||||
- ❌ NO CSS placeholders - use direct CSS file reference
|
||||
- ✅ Low autonomy: follow specifications exactly
|
||||
|
||||
## Design Standards
|
||||
|
||||
@@ -165,6 +207,49 @@ When generating HTML templates, you MUST include these EXACT placeholder links i
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
```
|
||||
|
||||
### Remote Assets Reference
|
||||
|
||||
**Image Assets** (CDN or External URLs):
|
||||
- Use absolute URLs for external images (e.g., `https://picsum.photos/...`, `https://images.unsplash.com/...`)
|
||||
- Use CDN URLs for reliability and performance
|
||||
- Always include `alt` attributes for accessibility
|
||||
- Specify dimensions when known for layout stability
|
||||
|
||||
**Supported Image Services**:
|
||||
- **Unsplash**: `https://images.unsplash.com/photo-{id}?w={width}&q={quality}`
|
||||
- **Picsum**: `https://picsum.photos/{width}/{height}` (placeholder images)
|
||||
- **Placeholder.com**: `https://via.placeholder.com/{width}x{height}/{bg-color}/{text-color}`
|
||||
|
||||
**Icon Libraries** (CDN):
|
||||
- **Lucide Icons**: `https://unpkg.com/lucide@latest/dist/umd/lucide.js`
|
||||
- **Font Awesome**: `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/{version}/css/all.min.css`
|
||||
- **Material Icons**: `https://fonts.googleapis.com/icon?family=Material+Icons`
|
||||
|
||||
**Usage Pattern**:
|
||||
```html
|
||||
<!-- External images -->
|
||||
<img src="https://images.unsplash.com/photo-1234567890?w=800&q=80"
|
||||
alt="Descriptive text"
|
||||
width="800"
|
||||
height="600">
|
||||
|
||||
<!-- Placeholder images -->
|
||||
<img src="https://picsum.photos/400/300"
|
||||
alt="Placeholder content">
|
||||
|
||||
<!-- Icon library (Lucide) -->
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
|
||||
<i data-lucide="menu"></i>
|
||||
```
|
||||
|
||||
**Best Practices**:
|
||||
- ✅ Use HTTPS URLs for all external assets
|
||||
- ✅ Include width/height attributes to prevent layout shift
|
||||
- ✅ Add loading="lazy" for images below the fold
|
||||
- ✅ Provide fallback content for failed loads
|
||||
- ❌ Never use local file paths (e.g., `file:///` or relative paths without context)
|
||||
- ❌ Avoid embedding base64 images (use external URLs instead)
|
||||
|
||||
### Visual Effects System
|
||||
|
||||
**Shadow Tokens** (7-tier system):
|
||||
@@ -276,135 +361,84 @@ h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
## Agent Operation
|
||||
|
||||
### Execution Process
|
||||
### Execution Flow
|
||||
|
||||
When invoked by orchestrator command (e.g., `[DESIGN_TOKEN_GENERATION_TASK]`):
|
||||
All tasks follow this standard flow with pattern-specific variations:
|
||||
|
||||
```
|
||||
STEP 1: Parse Task Identifier
|
||||
→ Identify task type from [TASK_TYPE_IDENTIFIER]
|
||||
→ Load task-specific execution template
|
||||
→ Validate required parameters present
|
||||
STEP 1: Identify Task Pattern
|
||||
→ Parse [TASK_TYPE_IDENTIFIER] from prompt
|
||||
→ Determine pattern: Option Generation | System Generation | Assembly
|
||||
→ Load pattern-specific execution rules
|
||||
|
||||
STEP 2: Load Input Context
|
||||
→ Read variant data from orchestrator prompt
|
||||
→ Parse proposed_tokens, design_space_analysis
|
||||
→ Extract MCP research keywords if provided
|
||||
→ Verify BASE_PATH and output directory structure
|
||||
STEP 2: Load Context
|
||||
→ Read input data specified in task prompt
|
||||
→ Validate BASE_PATH and output directory structure
|
||||
→ Extract parameters: targets, variants_count, device_type, etc.
|
||||
|
||||
STEP 3: Execute MCP Research (if applicable)
|
||||
FOR each variant:
|
||||
→ Build variant-specific queries
|
||||
→ Execute mcp__exa__web_search_exa() calls
|
||||
→ Accumulate research results in memory
|
||||
→ (DO NOT write research results to files)
|
||||
STEP 3: Execute Pattern-Specific Generation
|
||||
→ Pattern 1 (Option Generation):
|
||||
• Generate {variants_count} contrasting options
|
||||
• Apply differentiation algorithms
|
||||
• Create visual/structural previews
|
||||
• Output: Single analysis-options.json
|
||||
|
||||
STEP 4: Generate Content
|
||||
FOR each variant:
|
||||
→ Refine tokens using proposed_tokens + MCP research
|
||||
→ Generate design-tokens.json content
|
||||
→ Generate style-guide.md content
|
||||
→ Keep content in memory (DO NOT accumulate in text)
|
||||
→ Pattern 2 (System Generation):
|
||||
• Execute MCP research if design_space_analysis provided
|
||||
• Apply design standards (WCAG AA, OKLCH, semantic naming)
|
||||
• Generate complete system (tokens/templates/animations)
|
||||
• Output: JSON + Markdown documentation
|
||||
|
||||
STEP 5: WRITE FILES (CRITICAL)
|
||||
FOR each variant:
|
||||
→ EXECUTE: Write("{path}/design-tokens.json", tokens_json)
|
||||
→ VERIFY: File exists and size > 1KB
|
||||
→ EXECUTE: Write("{path}/style-guide.md", guide_content)
|
||||
→ VERIFY: File exists and size > 1KB
|
||||
→ Report completion for this variant
|
||||
→ (DO NOT wait to write all variants at once)
|
||||
→ Pattern 3 (Assembly):
|
||||
• Load pre-defined inputs (templates + tokens)
|
||||
• Combine components without design decisions
|
||||
• Resolve all var() placeholders to actual values
|
||||
• Output: Self-contained HTML + CSS
|
||||
|
||||
STEP 6: Final Verification
|
||||
→ Verify all {variants_count} × 2 files written
|
||||
→ Report total files written with sizes
|
||||
STEP 4: WRITE FILES IMMEDIATELY
|
||||
→ Use Write() tool for each output file
|
||||
→ Verify file creation (size > 1KB for substantial files)
|
||||
→ Report file path and size
|
||||
→ DO NOT accumulate content - write incrementally
|
||||
|
||||
STEP 5: Final Verification
|
||||
→ Verify all expected files written
|
||||
→ Report completion with file count and sizes
|
||||
→ Report MCP query count if research performed
|
||||
```
|
||||
|
||||
**Key Execution Principle**: **WRITE FILES IMMEDIATELY** after generating content for each variant. DO NOT accumulate all content and try to output at the end.
|
||||
**Critical Execution Principles**:
|
||||
- ✅ **Pattern Recognition**: Identify pattern from task identifier first
|
||||
- ✅ **Immediate File Writing**: Write files as soon as content is generated
|
||||
- ✅ **No Content Accumulation**: Never batch all content before writing
|
||||
- ✅ **Incremental Progress**: Process variants/targets one at a time
|
||||
- ❌ **No User Interaction**: Execute autonomously without questions
|
||||
|
||||
### Invocation Model
|
||||
### Core Execution Principles
|
||||
|
||||
You are invoked by orchestrator commands to execute specific generation tasks:
|
||||
|
||||
**Token Generation** (by `consolidate.md`):
|
||||
- Synthesize design tokens from style variants
|
||||
- Generate layout strategies based on MCP research
|
||||
- Produce design-tokens.json, style-guide.md, layout-strategies.json
|
||||
|
||||
**Prototype Generation** (by `generate.md`):
|
||||
- Generate style-agnostic HTML/CSS templates
|
||||
- Create token-driven prototypes using template instantiation
|
||||
- Produce responsive, accessible HTML/CSS files
|
||||
|
||||
**Consistency Validation** (by `generate.md` Phase 3.5):
|
||||
- Validate cross-target design consistency
|
||||
- Generate consistency reports for multi-page workflows
|
||||
|
||||
### Execution Principles
|
||||
|
||||
**Autonomous Operation**:
|
||||
- Receive all parameters from orchestrator command
|
||||
- Execute task without user interaction
|
||||
**Autonomous & Complete**:
|
||||
- Execute task fully without user interaction
|
||||
- Receive all parameters from task prompt
|
||||
- Return results through file system outputs
|
||||
- Generate all required files and documentation
|
||||
|
||||
**Target Independence** (CRITICAL):
|
||||
- Each invocation processes EXACTLY ONE target (page or component)
|
||||
- Do NOT combine multiple targets into a single template
|
||||
- Even if targets will coexist in final application, generate them independently
|
||||
- **Example Scenario**:
|
||||
- Task: Generate template for "login" (workflow has: ["login", "sidebar"])
|
||||
- ❌ WRONG: Generate login page WITH sidebar included
|
||||
- ✅ CORRECT: Generate login page WITHOUT sidebar (sidebar is separate target)
|
||||
- **Verification Before Output**:
|
||||
- Confirm template includes ONLY the specified target
|
||||
- Check no cross-contamination from other targets in workflow
|
||||
- Each target must be standalone and reusable
|
||||
- Each task processes EXACTLY ONE target (page or component) at a time
|
||||
- Do NOT combine multiple targets into a single output
|
||||
- Even if targets coexist in final application, generate them independently
|
||||
- **Example**: Task for "login" page should NOT include "sidebar" (separate target)
|
||||
- **Verification**: Confirm output includes ONLY the specified target
|
||||
|
||||
**Quality-First**:
|
||||
- Apply all design standards automatically
|
||||
- Apply all design standards automatically (WCAG AA, OKLCH, semantic naming)
|
||||
- Validate outputs against quality gates before completion
|
||||
- Use MCP research for modern patterns and best practices (Pattern 1 & 2)
|
||||
- Document any deviations or warnings in output files
|
||||
|
||||
**Research-Informed**:
|
||||
- Use MCP tools for trend research and pattern discovery
|
||||
- Integrate modern best practices into generation decisions
|
||||
- Cache research results for session reuse
|
||||
|
||||
**Complete Outputs**:
|
||||
- Generate all required files and documentation
|
||||
- Include metadata and implementation notes
|
||||
- Validate file format and completeness
|
||||
|
||||
### Performance Optimization
|
||||
|
||||
**Two-Layer Generation Architecture**:
|
||||
- **Layer 1 (Your Responsibility)**: Generate style-agnostic layout templates (creative work)
|
||||
- HTML structure with semantic markup
|
||||
- Structural CSS with CSS custom property references
|
||||
- One template per layout variant per target
|
||||
- **Layer 2 (Orchestrator Responsibility)**: Instantiate style-specific prototypes
|
||||
- Token conversion (JSON → CSS)
|
||||
- Template instantiation (L×T templates → S×L×T prototypes)
|
||||
- Performance: S× faster than generating all combinations individually
|
||||
|
||||
**Your Focus**: Generate high-quality, reusable templates. Orchestrator handles file operations and instantiation.
|
||||
|
||||
### Scope & Boundaries
|
||||
|
||||
**Your Responsibilities**:
|
||||
- Execute assigned generation task completely
|
||||
- Apply all quality standards automatically
|
||||
- Research when parameters require trend-informed decisions
|
||||
- Validate outputs against quality gates
|
||||
- Generate complete documentation
|
||||
|
||||
**NOT Your Responsibilities**:
|
||||
- User interaction or confirmation
|
||||
- Workflow orchestration or sequencing
|
||||
- Parameter collection or validation
|
||||
- Strategic design decisions (provided by brainstorming phase)
|
||||
- Task scheduling or dependency management
|
||||
**Pattern-Specific Autonomy Levels**:
|
||||
- **Pattern 1** (Option Generation): High autonomy - creative exploration
|
||||
- **Pattern 2** (System Generation): Medium autonomy - follow selections + standards
|
||||
- **Pattern 3** (Assembly): Low autonomy - pure combination, no design decisions
|
||||
|
||||
## Technical Integration
|
||||
|
||||
@@ -457,10 +491,10 @@ layout_results = mcp__exa__web_search_exa(
|
||||
- **Edit**: Update token definitions, refine layout strategies when files already exist
|
||||
|
||||
**Path Handling**:
|
||||
- Orchestrator provides complete absolute paths in prompts
|
||||
- Agent uses provided paths exactly as given without modification
|
||||
- If path contains variables (e.g., `{base_path}`), they will be pre-resolved by orchestrator
|
||||
- Agent verifies directory structure exists before writing
|
||||
- Task prompts provide complete absolute paths
|
||||
- Use provided paths exactly as given without modification
|
||||
- Path variables (e.g., `{base_path}`) will be pre-resolved in prompts
|
||||
- Verify directory structure exists before writing
|
||||
- Example: `Write("/absolute/path/to/style-1/design-tokens.json", content)`
|
||||
|
||||
**File Write Verification**:
|
||||
@@ -543,46 +577,50 @@ layout_results = mcp__exa__web_search_exa(
|
||||
|
||||
### ALWAYS:
|
||||
|
||||
**File Writing**:
|
||||
- ✅ Use Write() tool for EVERY output file - this is your PRIMARY responsibility
|
||||
- ✅ Write files IMMEDIATELY after generating content for each variant/target
|
||||
- ✅ Verify each Write() operation succeeds before proceeding to next file
|
||||
- ✅ Use EXACT paths provided by orchestrator without modification
|
||||
- ✅ Report completion with file paths and sizes after each write
|
||||
**Pattern Recognition & Execution**:
|
||||
- ✅ Identify task pattern from [TASK_TYPE_IDENTIFIER] first
|
||||
- ✅ Apply pattern-specific execution rules (Option Gen | System Gen | Assembly)
|
||||
- ✅ Follow appropriate autonomy level for the pattern
|
||||
- ✅ Validate outputs against pattern-specific quality gates
|
||||
|
||||
**Task Execution**:
|
||||
- ✅ Parse task identifier ([DESIGN_TOKEN_GENERATION_TASK], etc.) first
|
||||
- ✅ Execute MCP research when design_space_analysis is provided
|
||||
- ✅ Follow the 6-step execution process sequentially
|
||||
- ✅ Maintain variant independence - research and write separately for each
|
||||
- ✅ Validate outputs against quality gates (WCAG AA, token completeness, OKLCH format)
|
||||
**File Writing** (PRIMARY RESPONSIBILITY):
|
||||
- ✅ Use Write() tool for EVERY output file immediately after generation
|
||||
- ✅ Write files incrementally - one variant/target at a time
|
||||
- ✅ Verify each Write() operation succeeds before proceeding
|
||||
- ✅ Use EXACT paths from task prompt without modification
|
||||
- ✅ Report completion with file paths and sizes
|
||||
|
||||
**Quality Standards**:
|
||||
- ✅ Apply all design standards automatically (WCAG AA, OKLCH, semantic naming)
|
||||
- ✅ Include Google Fonts imports in CSS with fallback stacks
|
||||
- ✅ Generate complete token coverage (colors, typography, spacing, radius, shadows, breakpoints)
|
||||
**Quality Standards** (All Patterns):
|
||||
- ✅ Apply design standards automatically (WCAG AA, OKLCH colors, semantic naming)
|
||||
- ✅ Include Google Fonts imports with fallback stacks (Pattern 2 & 3)
|
||||
- ✅ Use mobile-first responsive design with token-based breakpoints
|
||||
- ✅ Implement semantic HTML5 with ARIA attributes
|
||||
- ✅ Implement semantic HTML5 with ARIA attributes (Pattern 2 & 3)
|
||||
- ✅ Execute MCP research for modern patterns (Pattern 1 & 2 when applicable)
|
||||
|
||||
**Target Independence**:
|
||||
- ✅ Process EXACTLY ONE target per task
|
||||
- ✅ Keep targets standalone and reusable
|
||||
- ✅ Verify no cross-contamination between targets
|
||||
|
||||
### NEVER:
|
||||
|
||||
**File Writing**:
|
||||
- ❌ Return file contents as text with labeled sections (e.g., "## File 1: design-tokens.json\n{content}")
|
||||
- ❌ Accumulate all variant content and try to output at once
|
||||
- ❌ Skip Write() operations and expect orchestrator to write files
|
||||
- ❌ Return file contents as text (e.g., "## File: design-tokens.json\n{content}")
|
||||
- ❌ Accumulate all content before writing (write incrementally)
|
||||
- ❌ Skip Write() operations expecting external writes
|
||||
- ❌ Modify provided paths or use relative paths
|
||||
- ❌ Continue to next variant before completing current variant's file writes
|
||||
- ❌ Continue to next item before completing current item's writes
|
||||
|
||||
**Task Execution**:
|
||||
- ❌ Mix multiple targets into a single template (respect target independence)
|
||||
- ❌ Skip MCP research when design_space_analysis is provided
|
||||
- ❌ Generate variant N+1 before variant N's files are written
|
||||
- ❌ Return research results as files (keep in memory for token refinement)
|
||||
- ❌ Assume default values without checking orchestrator prompt
|
||||
- ❌ Mix multiple targets into single output (violates target independence)
|
||||
- ❌ Make design decisions in Pattern 3 (Assembly is pure combination)
|
||||
- ❌ Skip pattern identification step
|
||||
- ❌ Interact with user during execution
|
||||
- ❌ Return MCP research as files (keep in memory for generation)
|
||||
|
||||
**Quality Violations**:
|
||||
- ❌ Use hardcoded colors/fonts/spacing instead of tokens
|
||||
- ❌ Generate tokens without OKLCH format for colors
|
||||
- ❌ Skip WCAG AA contrast validation
|
||||
- ❌ Omit Google Fonts imports or fallback stacks
|
||||
- ❌ Create incomplete token categories
|
||||
- ❌ Use hardcoded values instead of tokens (Pattern 2 & 3)
|
||||
- ❌ Generate colors without OKLCH format (Pattern 2)
|
||||
- ❌ Skip WCAG AA contrast validation (Pattern 2)
|
||||
- ❌ Omit Google Fonts imports or fallback stacks (Pattern 2 & 3)
|
||||
- ❌ Create incomplete token/template systems (Pattern 2)
|
||||
|
||||
@@ -22,8 +22,8 @@ This workflow runs **fully autonomously** once triggered. Phase 1 (artifacts) ha
|
||||
|
||||
**Auto-Continue Mechanism**:
|
||||
- TodoList tracks current phase status
|
||||
- After Phase 1 (artifacts) completion, automatically load roles and launch Phase 2 agents
|
||||
- After Phase 2 (all agents) completion, automatically execute Phase 3 synthesis
|
||||
- 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
|
||||
|
||||
## Core Rules
|
||||
@@ -32,7 +32,7 @@ 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 after every phase completion
|
||||
5. **Track Progress**: Update TodoWrite when each phase finishes executing
|
||||
6. **TodoWrite Extension**: artifacts command EXTENDS parent TodoList (NOT replaces)
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: plan
|
||||
description: 5-phase planning workflow with Gemini analysis and action-planning-agent task generation, outputs IMPL_PLAN.md and task JSONs with optional CLI auto-execution
|
||||
argument-hint: "[--agent] [--cli-execute] \"text description\"|file.md"
|
||||
description: 5-phase planning workflow with action-planning-agent task generation, outputs IMPL_PLAN.md and task JSONs with optional CLI auto-execution
|
||||
argument-hint: "[--cli-execute] \"text description\"|file.md"
|
||||
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*)
|
||||
---
|
||||
|
||||
@@ -20,26 +20,21 @@ This workflow runs **fully autonomously** once triggered. Phase 3 (conflict reso
|
||||
2. **Phase 1 executes** → Session discovery → Auto-continues
|
||||
3. **Phase 2 executes** → Context gathering → Auto-continues
|
||||
4. **Phase 3 executes** (optional, if conflict_risk ≥ medium) → Conflict resolution → Auto-continues
|
||||
5. **Phase 4 executes** (task-generate-agent if --agent) → Task generation → Reports final summary
|
||||
5. **Phase 4 executes** → Task generation (task-generate-agent) → Reports final summary
|
||||
|
||||
**Auto-Continue Mechanism**:
|
||||
- TodoList tracks current phase status
|
||||
- After each phase completion, automatically executes next pending phase
|
||||
- When each phase finishes executing, automatically execute next pending phase
|
||||
- All phases run autonomously without user interaction (clarification handled in brainstorm phase)
|
||||
- Progress updates shown at each phase for visibility
|
||||
|
||||
**Execution Modes**:
|
||||
- **Manual Mode** (default): Use `/workflow:tools:task-generate`
|
||||
- **Agent Mode** (`--agent`): Use `/workflow:tools:task-generate-agent`
|
||||
- **CLI Execute Mode** (`--cli-execute`): Generate tasks with Codex execution commands
|
||||
|
||||
## Core Rules
|
||||
|
||||
1. **Start Immediately**: First action is TodoWrite initialization, second action is Phase 1 command execution
|
||||
2. **No Preliminary Analysis**: Do not read files, analyze structure, or gather context before Phase 1
|
||||
3. **Parse Every Output**: Extract required data from each command/agent output for next phase
|
||||
4. **Auto-Continue via TodoList**: Check TodoList status to execute next pending phase automatically
|
||||
5. **Track Progress**: Update TodoWrite after every phase completion
|
||||
5. **Track Progress**: Update TodoWrite when each phase finishes executing
|
||||
6. **Agent Delegation**: Phase 3 uses cli-execution-agent for autonomous intelligent analysis
|
||||
|
||||
## 5-Phase Execution
|
||||
@@ -159,24 +154,18 @@ CONTEXT: Existing user database schema, REST API endpoints
|
||||
- Task generation translates high-level role analyses into concrete, actionable work items
|
||||
- **Intent priority**: Current user prompt > role analysis.md files > guidance-specification.md
|
||||
|
||||
**Command Selection**:
|
||||
- Manual: `SlashCommand(command="/workflow:tools:task-generate --session [sessionId]")`
|
||||
- Agent: `SlashCommand(command="/workflow:tools:task-generate-agent --session [sessionId]")`
|
||||
- CLI Execute: Add `--cli-execute` flag to either command
|
||||
|
||||
**Flag Combination**:
|
||||
- `--cli-execute` alone: Manual task generation with CLI execution
|
||||
- `--agent --cli-execute`: Agent task generation with CLI execution
|
||||
|
||||
**Command Examples**:
|
||||
**Command**:
|
||||
```bash
|
||||
# Manual with CLI execution
|
||||
/workflow:tools:task-generate --session WFS-auth --cli-execute
|
||||
# Default (agent mode)
|
||||
SlashCommand(command="/workflow:tools:task-generate-agent --session [sessionId]")
|
||||
|
||||
# Agent with CLI execution
|
||||
/workflow:tools:task-generate-agent --session WFS-auth --cli-execute
|
||||
# With CLI execution
|
||||
SlashCommand(command="/workflow:tools:task-generate-agent --session [sessionId] --cli-execute")
|
||||
```
|
||||
|
||||
**Flag**:
|
||||
- `--cli-execute`: Generate tasks with Codex execution commands
|
||||
|
||||
**Input**: `sessionId` from Phase 1
|
||||
|
||||
**Validation**:
|
||||
@@ -296,7 +285,7 @@ Phase 3: conflict-resolution [AUTO-TRIGGERED if conflict_risk ≥ medium]
|
||||
↓ Output: Modified brainstorm artifacts (NO report file)
|
||||
↓ Skip if conflict_risk is none/low → proceed directly to Phase 4
|
||||
↓
|
||||
Phase 4: task-generate[--agent] --session sessionId
|
||||
Phase 4: task-generate-agent --session sessionId [--cli-execute]
|
||||
↓ Input: sessionId + resolved brainstorm artifacts + session memory
|
||||
↓ Output: IMPL_PLAN.md, task JSONs, TODO_LIST.md
|
||||
↓
|
||||
@@ -331,11 +320,10 @@ Return summary to user
|
||||
- Parse context path from Phase 2 output, store in memory
|
||||
- **Extract conflict_risk from context-package.json**: Determine Phase 3 execution
|
||||
- **If conflict_risk ≥ medium**: Launch Phase 3 conflict-resolution with sessionId and contextPath
|
||||
- Wait for Phase 3 completion (if executed), verify CONFLICT_RESOLUTION.md created
|
||||
- Wait for Phase 3 to finish executing (if executed), verify CONFLICT_RESOLUTION.md created
|
||||
- **If conflict_risk is none/low**: Skip Phase 3, proceed directly to Phase 4
|
||||
- **Build Phase 4 command** based on flags:
|
||||
- Base command: `/workflow:tools:task-generate` (or `-agent` if `--agent` flag)
|
||||
- Add `--session [sessionId]`
|
||||
- **Build Phase 4 command**:
|
||||
- Base command: `/workflow:tools:task-generate-agent --session [sessionId]`
|
||||
- Add `--cli-execute` if flag present
|
||||
- Pass session ID to Phase 4 command
|
||||
- Verify all Phase 4 outputs
|
||||
@@ -380,8 +368,7 @@ CONSTRAINTS: [Limitations or boundaries]
|
||||
- `/workflow:tools:context-gather` - Phase 2: Gather project context and analyze codebase
|
||||
- `/workflow:tools:conflict-resolution` - Phase 3: Detect and resolve conflicts (auto-triggered if conflict_risk ≥ medium)
|
||||
- `/compact` - Phase 3: Memory optimization (if context approaching limits)
|
||||
- `/workflow:tools:task-generate` - Phase 4: Generate task JSON files with manual approach
|
||||
- `/workflow:tools:task-generate-agent` - Phase 4: Generate task JSON files with agent-driven approach (when `--agent` flag used)
|
||||
- `/workflow:tools:task-generate-agent` - Phase 4: Generate task JSON files with agent-driven approach
|
||||
|
||||
**Follow-up Commands**:
|
||||
- `/workflow:action-plan-verify` - Recommended: Verify plan quality and catch issues before execution
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: tdd-plan
|
||||
description: TDD workflow planning with Red-Green-Refactor task chain generation, test-first development structure, and cycle tracking
|
||||
argument-hint: "[--agent] \"feature description\"|file.md"
|
||||
argument-hint: "[--cli-execute] \"feature description\"|file.md"
|
||||
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*)
|
||||
---
|
||||
|
||||
@@ -12,8 +12,8 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*)
|
||||
**This command is a pure orchestrator**: Execute 5 slash commands in sequence, parse outputs, pass context, and ensure complete TDD workflow creation.
|
||||
|
||||
**Execution Modes**:
|
||||
- **Manual Mode** (default): Use `/workflow:tools:task-generate-tdd`
|
||||
- **Agent Mode** (`--agent`): Use `/workflow:tools:task-generate-tdd --agent`
|
||||
- **Agent Mode** (default): Use `/workflow:tools:task-generate-tdd` (autonomous agent-driven)
|
||||
- **CLI Mode** (`--cli-execute`): Use `/workflow:tools:task-generate-tdd --cli-execute` (Gemini/Qwen)
|
||||
|
||||
## Core Rules
|
||||
|
||||
@@ -21,7 +21,7 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*)
|
||||
2. **No Preliminary Analysis**: Do not read files before Phase 1
|
||||
3. **Parse Every Output**: Extract required data for next phase
|
||||
4. **Auto-Continue via TodoList**: Check TodoList status to execute next pending phase automatically
|
||||
5. **Track Progress**: Update TodoWrite after every phase completion
|
||||
5. **Track Progress**: Update TodoWrite when each phase finishes executing
|
||||
6. **TDD Context**: All descriptions include "TDD:" prefix
|
||||
7. **Quality Gate**: Phase 4 conflict resolution (optional, auto-triggered) validates compatibility before task generation
|
||||
|
||||
@@ -129,8 +129,8 @@ TEST_FOCUS: [Test scenarios]
|
||||
|
||||
### Phase 5: TDD Task Generation
|
||||
**Command**:
|
||||
- Manual: `/workflow:tools:task-generate-tdd --session [sessionId]`
|
||||
- Agent: `/workflow:tools:task-generate-tdd --session [sessionId] --agent`
|
||||
- Agent Mode (default): `/workflow:tools:task-generate-tdd --session [sessionId]`
|
||||
- CLI Mode (`--cli-execute`): `/workflow:tools:task-generate-tdd --session [sessionId] --cli-execute`
|
||||
|
||||
**Parse**: Extract feature count, task count (not chain count - tasks now contain internal TDD cycles)
|
||||
|
||||
@@ -373,8 +373,8 @@ Supports action-planning-agent for more autonomous TDD planning with:
|
||||
- `/workflow:tools:test-context-gather` - Phase 3: Analyze existing test patterns and coverage
|
||||
- `/workflow:tools:conflict-resolution` - Phase 4: Detect and resolve conflicts (auto-triggered if conflict_risk ≥ medium)
|
||||
- `/compact` - Phase 4: Memory optimization (if context approaching limits)
|
||||
- `/workflow:tools:task-generate-tdd` - Phase 5: Generate TDD task chains with Red-Green-Refactor cycles
|
||||
- `/workflow:tools:task-generate-tdd --agent` - Phase 5: Generate TDD tasks with agent-driven approach (when `--agent` flag used)
|
||||
- `/workflow:tools:task-generate-tdd` - Phase 5: Generate TDD tasks with agent-driven approach (default, autonomous)
|
||||
- `/workflow:tools:task-generate-tdd --cli-execute` - Phase 5: Generate TDD tasks with CLI tools (Gemini/Qwen, when `--cli-execute` flag used)
|
||||
|
||||
**Follow-up Commands**:
|
||||
- `/workflow:action-plan-verify` - Recommended: Verify TDD plan quality and structure before execution
|
||||
|
||||
@@ -473,9 +473,9 @@ WFS-test-[session]/
|
||||
- `/workflow:tools:test-context-gather` - Phase 2 (Session Mode): Gather source session context
|
||||
- `/workflow:tools:context-gather` - Phase 2 (Prompt Mode): Analyze codebase directly
|
||||
- `/workflow:tools:test-concept-enhanced` - Phase 3: Generate test requirements using Gemini
|
||||
- `/workflow:tools:test-task-generate` - Phase 4: Generate test task JSONs with fix cycle specification
|
||||
- `/workflow:tools:test-task-generate --use-codex` - Phase 4: With automated Codex fixes (when `--use-codex` flag used)
|
||||
- `/workflow:tools:test-task-generate --cli-execute` - Phase 4: With CLI execution mode (when `--cli-execute` flag used)
|
||||
- `/workflow:tools:test-task-generate` - Phase 4: Generate test task JSONs using action-planning-agent (autonomous, default)
|
||||
- `/workflow:tools:test-task-generate --use-codex` - Phase 4: With automated Codex fixes for IMPL-002 (when `--use-codex` flag used)
|
||||
- `/workflow:tools:test-task-generate --cli-execute` - Phase 4: With CLI execution mode for IMPL-001 test generation (when `--cli-execute` flag used)
|
||||
|
||||
**Follow-up Commands**:
|
||||
- `/workflow:status` - Review generated test tasks
|
||||
|
||||
@@ -33,7 +33,7 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*)
|
||||
3. **Parse Every Output**: Extract required data from each phase for next phase
|
||||
4. **Sequential Execution**: Each phase depends on previous phase's output
|
||||
5. **Complete All Phases**: Do not return to user until Phase 5 completes (summary returned)
|
||||
6. **Track Progress**: Update TodoWrite after every phase completion
|
||||
6. **Track Progress**: Update TodoWrite when each phase finishes executing
|
||||
7. **Automatic Detection**: context-gather auto-detects test session and gathers source session context
|
||||
8. **Parse --use-codex Flag**: Extract flag from arguments and pass to Phase 4 (test-task-generate)
|
||||
9. **Command Boundary**: This command ends at Phase 5 summary. Test execution is NOT part of this command.
|
||||
@@ -337,9 +337,9 @@ See `/workflow:tools:test-task-generate` for complete JSON schemas.
|
||||
- `/workflow:session:start` - Phase 1: Create independent test workflow session
|
||||
- `/workflow:tools:test-context-gather` - Phase 2: Analyze test coverage and gather source session context
|
||||
- `/workflow:tools:test-concept-enhanced` - Phase 3: Generate test requirements and strategy using Gemini
|
||||
- `/workflow:tools:test-task-generate` - Phase 4: Generate test generation and execution task JSONs
|
||||
- `/workflow:tools:test-task-generate --use-codex` - Phase 4: With automated Codex fixes (when `--use-codex` flag used)
|
||||
- `/workflow:tools:test-task-generate --cli-execute` - Phase 4: With CLI execution mode (when `--cli-execute` flag used)
|
||||
- `/workflow:tools:test-task-generate` - Phase 4: Generate test task JSONs using action-planning-agent (autonomous, default)
|
||||
- `/workflow:tools:test-task-generate --use-codex` - Phase 4: With automated Codex fixes for IMPL-002 (when `--use-codex` flag used)
|
||||
- `/workflow:tools:test-task-generate --cli-execute` - Phase 4: With CLI execution mode for IMPL-001 test generation (when `--cli-execute` flag used)
|
||||
|
||||
**Follow-up Commands**:
|
||||
- `/workflow:status` - Review generated test tasks
|
||||
|
||||
@@ -24,6 +24,7 @@ Analyzes conflicts between implementation plans and existing codebase, generatin
|
||||
| **Generate Strategies** | Provide 2-4 resolution options per conflict |
|
||||
| **CLI Analysis** | Use Gemini/Qwen (Claude fallback) |
|
||||
| **User Decision** | Present options, never auto-apply |
|
||||
| **Direct Text Output** | Output questions via text directly, NEVER use bash echo/printf |
|
||||
| **Single Output** | `CONFLICT_RESOLUTION.md` with findings |
|
||||
|
||||
## Conflict Categories
|
||||
@@ -462,10 +463,3 @@ If Edit tool fails mid-application:
|
||||
✓ Error handling robust (validate/retry/degrade)
|
||||
```
|
||||
|
||||
## Related Commands
|
||||
| Command | Relationship |
|
||||
|---------|--------------|
|
||||
| `/workflow:tools:context-gather` | Generates input conflict_detection data |
|
||||
| `/workflow:plan` | Auto-triggers this when risk ≥ medium |
|
||||
| `/workflow:tools:task-generate` | Uses resolved conflicts from updated brainstorm files |
|
||||
| `/workflow:brainstorm:artifacts` | Generates guidance-specification.md (modified by this command) |
|
||||
|
||||
@@ -163,155 +163,50 @@ If conflict_risk was medium/high, modifications have been applied to:
|
||||
|
||||
## Phase 2: Document Generation Task
|
||||
|
||||
### Task Decomposition Standards
|
||||
**Core Principle**: Task Merging Over Decomposition
|
||||
- **Merge Rule**: Execute together when possible
|
||||
- **Decompose Only When**:
|
||||
- Excessive workload (>2500 lines or >6 files)
|
||||
- Different tech stacks or domains
|
||||
- Sequential dependency blocking
|
||||
- Parallel execution needed
|
||||
**Agent Configuration Reference**: All task generation rules, quantification requirements, quality standards, and execution details are defined in action-planning-agent.
|
||||
|
||||
**Task Limits**:
|
||||
- **Maximum 10 tasks** (hard limit)
|
||||
- **Function-based**: Complete units (logic + UI + tests + config)
|
||||
- **Hierarchy**: Flat (≤5) | Two-level (6-10) | Re-scope (>10)
|
||||
Refer to: @.claude/agents/action-planning-agent.md for:
|
||||
- Task Decomposition Standards
|
||||
- Quantification Requirements (MANDATORY)
|
||||
- 5-Field Task JSON Schema
|
||||
- IMPL_PLAN.md Structure
|
||||
- TODO_LIST.md Format
|
||||
- Execution Flow & Quality Validation
|
||||
|
||||
### Required Outputs
|
||||
### Required Outputs Summary
|
||||
|
||||
#### 1. Task JSON Files (.task/IMPL-*.json)
|
||||
**Location**: .workflow/{session-id}/.task/
|
||||
**Template**: Read from the template path provided above
|
||||
|
||||
**Task JSON Template Loading**:
|
||||
\`\`\`
|
||||
Read({template_path})
|
||||
\`\`\`
|
||||
|
||||
**Important**:
|
||||
- Read the template from the path provided in context
|
||||
- Use the template structure exactly as written
|
||||
- Replace placeholder variables ({synthesis_spec_path}, {role_analysis_path}, etc.) with actual session-specific paths
|
||||
- Include MCP tool integration in pre_analysis steps
|
||||
- Map artifacts based on task domain (UI → ui-designer, Backend → system-architect)
|
||||
- **Location**: `.workflow/{session-id}/.task/`
|
||||
- **Template**: Read from `{template_path}` (pre-selected by command based on `--cli-execute` flag)
|
||||
- **Schema**: 5-field structure (id, title, status, meta, context, flow_control) with artifacts integration
|
||||
- **Details**: See action-planning-agent.md § Task JSON Generation
|
||||
|
||||
#### 2. IMPL_PLAN.md
|
||||
**Location**: .workflow/{session-id}/IMPL_PLAN.md
|
||||
|
||||
**IMPL_PLAN Template**:
|
||||
\`\`\`
|
||||
$(cat ~/.claude/workflows/cli-templates/prompts/workflow/impl-plan-template.txt)
|
||||
\`\`\`
|
||||
|
||||
**Important**:
|
||||
- Use the template above for IMPL_PLAN.md generation
|
||||
- Replace all {placeholder} variables with actual session-specific values
|
||||
- Populate CCW Workflow Context based on actual phase progression
|
||||
- Extract content from role analyses and context-package.json
|
||||
- List all detected brainstorming artifacts with correct paths (role analyses, guidance-specification.md)
|
||||
- Include conflict resolution status if CONFLICT_RESOLUTION.md exists
|
||||
- **Location**: `.workflow/{session-id}/IMPL_PLAN.md`
|
||||
- **Template**: `~/.claude/workflows/cli-templates/prompts/workflow/impl-plan-template.txt`
|
||||
- **Details**: See action-planning-agent.md § Implementation Plan Creation
|
||||
|
||||
#### 3. TODO_LIST.md
|
||||
**Location**: .workflow/{session-id}/TODO_LIST.md
|
||||
**Structure**:
|
||||
\`\`\`markdown
|
||||
# Tasks: {Session Topic}
|
||||
- **Location**: `.workflow/{session-id}/TODO_LIST.md`
|
||||
- **Format**: Hierarchical task list with status indicators (▸, [ ], [x]) and JSON links
|
||||
- **Details**: See action-planning-agent.md § TODO List Generation
|
||||
|
||||
## Task Progress
|
||||
▸ **IMPL-001**: [Main Task Group] → [📋](./.task/IMPL-001.json)
|
||||
- [ ] **IMPL-001.1**: [Subtask] → [📋](./.task/IMPL-001.1.json)
|
||||
- [ ] **IMPL-001.2**: [Subtask] → [📋](./.task/IMPL-001.2.json)
|
||||
### Agent Execution Summary
|
||||
|
||||
- [ ] **IMPL-002**: [Simple Task] → [📋](./.task/IMPL-002.json)
|
||||
**Key Steps** (Detailed instructions in action-planning-agent.md):
|
||||
1. Load task JSON template from provided path
|
||||
2. Extract and decompose tasks with quantification
|
||||
3. Generate task JSON files enforcing quantification requirements
|
||||
4. Create IMPL_PLAN.md using template
|
||||
5. Generate TODO_LIST.md matching task JSONs
|
||||
6. Update session state
|
||||
|
||||
## Status Legend
|
||||
- \`▸\` = Container task (has subtasks)
|
||||
- \`- [ ]\` = Pending leaf task
|
||||
- \`- [x]\` = Completed leaf task
|
||||
\`\`\`
|
||||
|
||||
### Execution Instructions for Agent
|
||||
|
||||
**Agent Task**: Generate task JSON files, IMPL_PLAN.md, and TODO_LIST.md based on analysis results
|
||||
|
||||
**Note**: The correct task JSON template path has been pre-selected by the command based on the `--cli-execute` flag and is provided in the context as `{template_path}`.
|
||||
|
||||
**Step 1: Load Task JSON Template**
|
||||
- Read template from the provided path: `Read({template_path})`
|
||||
- This template is already the correct one based on execution mode
|
||||
|
||||
**Step 2: Extract and Decompose Tasks**
|
||||
- Parse role analysis.md files for requirements, design specs, and task recommendations
|
||||
- Review synthesis enhancements and clarifications in role analyses
|
||||
- Apply conflict resolution strategies (if CONFLICT_RESOLUTION.md exists)
|
||||
- Apply task merging rules (merge when possible, decompose only when necessary)
|
||||
- Map artifacts to tasks based on domain (UI → ui-designer, Backend → system-architect, Data → data-architect)
|
||||
- Ensure task count ≤10
|
||||
|
||||
**Step 3: Generate Task JSON Files**
|
||||
- Use the template structure from Step 1
|
||||
- Create .task/IMPL-*.json files with proper structure
|
||||
- Replace all {placeholder} variables with actual session paths
|
||||
- Embed artifacts array with brainstorming outputs
|
||||
- Include MCP tool integration in pre_analysis steps
|
||||
|
||||
**Step 4: Create IMPL_PLAN.md**
|
||||
- Use IMPL_PLAN template
|
||||
- Populate all sections with session-specific content
|
||||
- List artifacts with priorities and usage guidelines
|
||||
- Document execution strategy and dependencies
|
||||
|
||||
**Step 5: Generate TODO_LIST.md**
|
||||
- Create task progress checklist matching generated JSONs
|
||||
- Use proper status indicators (▸, [ ], [x])
|
||||
- Link to task JSON files
|
||||
|
||||
**Step 6: Update Session State**
|
||||
- Update workflow-session.json with task count and artifact inventory
|
||||
- Mark session ready for execution
|
||||
|
||||
### MCP Enhancement Examples
|
||||
|
||||
**Code Index Usage**:
|
||||
\`\`\`javascript
|
||||
// Discover authentication-related files
|
||||
bash(find . -name "*auth*" -type f)
|
||||
|
||||
// Search for OAuth patterns
|
||||
bash(rg "oauth|jwt|authentication" -g "*.{ts,js}")
|
||||
|
||||
// Get file summary for key components
|
||||
bash(rg "^(class|function|export|interface)" src/auth/index.ts)
|
||||
\`\`\`
|
||||
|
||||
**Exa Research Usage**:
|
||||
\`\`\`javascript
|
||||
// Get best practices for task implementation
|
||||
mcp__exa__get_code_context_exa(
|
||||
query="TypeScript OAuth2 implementation patterns",
|
||||
tokensNum="dynamic"
|
||||
)
|
||||
|
||||
// Research specific API usage
|
||||
mcp__exa__get_code_context_exa(
|
||||
query="Express.js JWT middleware examples",
|
||||
tokensNum=5000
|
||||
)
|
||||
\`\`\`
|
||||
|
||||
### Quality Validation
|
||||
|
||||
Before completion, verify:
|
||||
- [ ] All task JSON files created in .task/ directory
|
||||
- [ ] Each task JSON has 5 required fields
|
||||
- [ ] Artifact references correctly mapped
|
||||
- [ ] Flow control includes artifact loading steps
|
||||
- [ ] MCP tool integration added where appropriate
|
||||
- [ ] IMPL_PLAN.md follows required structure
|
||||
- [ ] TODO_LIST.md matches task JSONs
|
||||
- [ ] Dependency graph is acyclic
|
||||
- [ ] Task count within limits (≤10)
|
||||
- [ ] Session state updated
|
||||
**Quality Gates** (Full checklist in action-planning-agent.md):
|
||||
- ✓ Quantification requirements enforced (explicit counts, measurable acceptance, exact targets)
|
||||
- ✓ Task count ≤10 (hard limit)
|
||||
- ✓ Artifact references mapped correctly
|
||||
- ✓ MCP tool integration added
|
||||
- ✓ Documents follow template structure
|
||||
|
||||
## Output
|
||||
|
||||
|
||||
@@ -1,14 +1,28 @@
|
||||
---
|
||||
name: task-generate-tdd
|
||||
description: Generate TDD task chains with Red-Green-Refactor dependencies, test-first structure, and cycle validation
|
||||
argument-hint: "--session WFS-session-id [--agent]"
|
||||
allowed-tools: Read(*), Write(*), Bash(gemini:*), TodoWrite(*)
|
||||
description: Autonomous TDD task generation using action-planning-agent with Red-Green-Refactor cycles, test-first structure, and cycle validation
|
||||
argument-hint: "--session WFS-session-id [--cli-execute]"
|
||||
examples:
|
||||
- /workflow:tools:task-generate-tdd --session WFS-auth
|
||||
- /workflow:tools:task-generate-tdd --session WFS-auth --cli-execute
|
||||
---
|
||||
|
||||
# TDD Task Generation Command
|
||||
# Autonomous TDD Task Generation Command
|
||||
|
||||
## Overview
|
||||
Generate TDD-specific tasks from analysis results with complete Red-Green-Refactor cycles contained within each task.
|
||||
Autonomous TDD task JSON and IMPL_PLAN.md generation using action-planning-agent with two-phase execution: discovery and document generation. Supports both agent-driven execution (default) and CLI tool execution modes. Generates complete Red-Green-Refactor cycles contained within each task.
|
||||
|
||||
## Core Philosophy
|
||||
- **Agent-Driven**: Delegate execution to action-planning-agent for autonomous operation
|
||||
- **Two-Phase Flow**: Discovery (context gathering) → Output (document generation)
|
||||
- **Memory-First**: Reuse loaded documents from conversation memory
|
||||
- **MCP-Enhanced**: Use MCP tools for advanced code analysis and research
|
||||
- **Pre-Selected Templates**: Command selects correct TDD template based on `--cli-execute` flag **before** invoking agent
|
||||
- **Agent Simplicity**: Agent receives pre-selected template and focuses only on content generation
|
||||
- **Path Clarity**: All `focus_paths` prefer absolute paths (e.g., `D:\\project\\src\\module`), or clear relative paths from project root (e.g., `./src/module`)
|
||||
- **TDD-First**: Every feature starts with a failing test (Red phase)
|
||||
- **Feature-Complete Tasks**: Each task contains complete Red-Green-Refactor cycle
|
||||
- **Quantification-Enforced**: All test cases, coverage requirements, and implementation scope MUST include explicit counts and enumerations
|
||||
|
||||
## Task Strategy & Philosophy
|
||||
|
||||
@@ -44,359 +58,329 @@ Generate TDD-specific tasks from analysis results with complete Red-Green-Refact
|
||||
- **Current approach**: 1 feature = 1 task (IMPL-N with internal Red-Green-Refactor phases)
|
||||
- **Complex features**: 1 container (IMPL-N) + subtasks (IMPL-N.M) when necessary
|
||||
|
||||
### Core Principles
|
||||
- **TDD-First**: Every feature starts with a failing test (Red phase)
|
||||
- **Feature-Complete Tasks**: Each task contains complete Red-Green-Refactor cycle
|
||||
- **Phase-Explicit**: Internal phases clearly marked in flow_control.implementation_approach
|
||||
- **Task Merging**: Prefer single task per feature over decomposition
|
||||
- **Path Clarity**: All `focus_paths` prefer absolute paths (e.g., `D:\\project\\src\\module`), or clear relative paths from project root (e.g., `./src/module`)
|
||||
- **Artifact-Aware**: Integrates brainstorming outputs
|
||||
- **Memory-First**: Reuse loaded documents from memory
|
||||
- **Context-Aware**: Analyzes existing codebase and test patterns
|
||||
- **Iterative Green Phase**: Auto-diagnose and fix test failures with Gemini + optional Codex
|
||||
- **Safety-First**: Auto-revert on max iterations to prevent broken state
|
||||
|
||||
## Core Responsibilities
|
||||
- Parse analysis results and identify testable features
|
||||
- Generate feature-complete tasks with internal TDD cycles (1 task per simple feature)
|
||||
- Apply task merging strategy by default, create subtasks only when complexity requires
|
||||
- Generate IMPL_PLAN.md with TDD Implementation Tasks section
|
||||
- Generate TODO_LIST.md with internal TDD phase indicators
|
||||
- Update session state for TDD execution with task count compliance
|
||||
|
||||
## Execution Lifecycle
|
||||
|
||||
### Phase 1: Input Validation & Discovery
|
||||
**Memory-First Rule**: Skip file loading if documents already in conversation memory
|
||||
### Phase 1: Discovery & Context Loading
|
||||
**⚡ Memory-First Rule**: Skip file loading if documents already in conversation memory
|
||||
|
||||
1. **Session Validation**
|
||||
- If session metadata in memory → Skip loading
|
||||
- Else: Load `.workflow/{session_id}/workflow-session.json`
|
||||
|
||||
2. **Conflict Resolution Check** (NEW - Priority Input)
|
||||
- If CONFLICT_RESOLUTION.md exists → Load selected strategies
|
||||
- Else: Skip to brainstorming artifacts
|
||||
- Path: `.workflow/{session_id}/.process/CONFLICT_RESOLUTION.md`
|
||||
|
||||
3. **Artifact Discovery**
|
||||
- If artifact inventory in memory → Skip scanning
|
||||
- Else: Scan `.workflow/{session_id}/.brainstorming/` directory
|
||||
- Detect: role analysis documents, guidance-specification.md, role analyses
|
||||
|
||||
4. **Context Package Loading**
|
||||
- Load `.workflow/{session_id}/.process/context-package.json`
|
||||
- Load `.workflow/{session_id}/.process/test-context-package.json` (if exists)
|
||||
|
||||
### Phase 2: TDD Task JSON Generation
|
||||
|
||||
**Input Sources** (priority order):
|
||||
1. **Conflict Resolution** (if exists): `.process/CONFLICT_RESOLUTION.md` - Selected resolution strategies
|
||||
2. **Brainstorming Artifacts**: Role analysis documents (system-architect, product-owner, etc.)
|
||||
3. **Context Package**: `.process/context-package.json` - Project structure and requirements
|
||||
4. **Test Context**: `.process/test-context-package.json` - Existing test patterns
|
||||
|
||||
**TDD Task Structure includes**:
|
||||
- Feature list with testable requirements
|
||||
- Test cases for Red phase
|
||||
- Implementation requirements for Green phase (with test-fix cycle)
|
||||
- Refactoring opportunities
|
||||
- Task dependencies and execution order
|
||||
- Conflict resolution decisions (if applicable)
|
||||
|
||||
### Phase 3: Task JSON & IMPL_PLAN.md Generation
|
||||
|
||||
#### Task Structure (Feature-Complete with Internal TDD)
|
||||
For each feature, generate task(s) with ID format:
|
||||
- **IMPL-N** - Single task containing complete TDD cycle (Red-Green-Refactor)
|
||||
- **IMPL-N.M** - Sub-tasks only when feature is complex (>2500 lines or technical blocking)
|
||||
|
||||
**Task Dependency Rules**:
|
||||
- **Sequential features**: IMPL-2 depends_on ["IMPL-1"] if Feature 2 needs Feature 1
|
||||
- **Independent features**: No dependencies, can execute in parallel
|
||||
- **Complex features**: IMPL-N.2 depends_on ["IMPL-N.1"] for subtask ordering
|
||||
|
||||
**Agent Assignment**:
|
||||
- **All IMPL tasks** → `@code-developer` (handles full TDD cycle)
|
||||
- Agent executes Red, Green, Refactor phases sequentially within task
|
||||
|
||||
**Meta Fields**:
|
||||
- `meta.type`: "feature" (TDD-driven feature implementation)
|
||||
- `meta.agent`: "@code-developer"
|
||||
- `meta.tdd_workflow`: true (enables TDD-specific flow)
|
||||
- `meta.tdd_phase`: Not used (phases are in flow_control.implementation_approach)
|
||||
- `meta.max_iterations`: 3 (for Green phase test-fix cycle)
|
||||
- `meta.use_codex`: false (manual fixes by default)
|
||||
|
||||
#### Task JSON Structure Reference
|
||||
|
||||
**Simple Feature Task (IMPL-N.json)** - Recommended for most features:
|
||||
```json
|
||||
**Agent Context Package**:
|
||||
```javascript
|
||||
{
|
||||
"id": "IMPL-N", // Task identifier
|
||||
"title": "Feature description with TDD", // Human-readable title
|
||||
"status": "pending", // pending | in_progress | completed | container
|
||||
"context_package_path": ".workflow/{session-id}/.process/context-package.json", // Path to smart context package
|
||||
"meta": {
|
||||
"type": "feature", // Task type
|
||||
"agent": "@code-developer", // Assigned agent
|
||||
"tdd_workflow": true, // REQUIRED: Enables TDD flow
|
||||
"max_iterations": 3, // Green phase test-fix cycle limit
|
||||
"use_codex": false // false=manual fixes, true=Codex automated fixes
|
||||
"session_id": "WFS-[session-id]",
|
||||
"execution_mode": "agent-mode" | "cli-execute-mode", // Determined by flag
|
||||
"task_json_template_path": "~/.claude/workflows/cli-templates/prompts/workflow/task-json-agent-mode.txt"
|
||||
| "~/.claude/workflows/cli-templates/prompts/workflow/task-json-cli-mode.txt",
|
||||
// Path selected by command based on --cli-execute flag, agent reads it
|
||||
"workflow_type": "tdd",
|
||||
"session_metadata": {
|
||||
// If in memory: use cached content
|
||||
// Else: Load from .workflow/{session-id}/workflow-session.json
|
||||
},
|
||||
"context": {
|
||||
"requirements": [ // Feature requirements with TDD phases
|
||||
"Feature description",
|
||||
"Red: Test scenarios to write",
|
||||
"Green: Implementation approach with test-fix cycle",
|
||||
"Refactor: Code quality improvements"
|
||||
],
|
||||
"tdd_cycles": [ // OPTIONAL: Detailed test cycles
|
||||
"brainstorm_artifacts": {
|
||||
// Loaded from context-package.json → brainstorm_artifacts section
|
||||
"role_analyses": [
|
||||
{
|
||||
"cycle": 1,
|
||||
"feature": "Specific functionality",
|
||||
"test_focus": "What to test",
|
||||
"expected_failure": "Why test should fail initially"
|
||||
"role": "system-architect",
|
||||
"files": [{"path": "...", "type": "primary|supplementary"}]
|
||||
}
|
||||
],
|
||||
"focus_paths": ["D:\\project\\src\\path", "./tests/path"], // Absolute or clear relative paths from project root
|
||||
"acceptance": [ // Success criteria
|
||||
"All tests pass (Red → Green)",
|
||||
"Code refactored (Refactor complete)",
|
||||
"Test coverage ≥80%"
|
||||
],
|
||||
"depends_on": [] // Task dependencies
|
||||
"guidance_specification": {"path": "...", "exists": true},
|
||||
"synthesis_output": {"path": "...", "exists": true},
|
||||
"conflict_resolution": {"path": "...", "exists": true} // if conflict_risk >= medium
|
||||
},
|
||||
"flow_control": {
|
||||
"pre_analysis": [ // OPTIONAL: Pre-execution checks
|
||||
{
|
||||
"step": "check_test_framework",
|
||||
"action": "Verify test framework",
|
||||
"command": "bash(npm list jest)",
|
||||
"output_to": "test_framework_info",
|
||||
"on_error": "warn"
|
||||
}
|
||||
],
|
||||
"implementation_approach": [ // REQUIRED: 3 TDD phases
|
||||
{
|
||||
"step": 1,
|
||||
"title": "RED Phase: Write failing tests",
|
||||
"tdd_phase": "red", // REQUIRED: Phase identifier
|
||||
"description": "Write comprehensive failing tests",
|
||||
"modification_points": ["Files/changes to make"],
|
||||
"logic_flow": ["Step-by-step process"],
|
||||
"acceptance": ["Phase success criteria"],
|
||||
"depends_on": [],
|
||||
"output": "failing_tests"
|
||||
},
|
||||
{
|
||||
"step": 2,
|
||||
"title": "GREEN Phase: Implement to pass tests",
|
||||
"tdd_phase": "green", // REQUIRED: Phase identifier
|
||||
"description": "Minimal implementation with test-fix cycle",
|
||||
"modification_points": ["Implementation files"],
|
||||
"logic_flow": [
|
||||
"Implement minimal code",
|
||||
"Run tests",
|
||||
"If fail → Enter iteration loop (max 3):",
|
||||
" 1. Extract failure messages",
|
||||
" 2. Gemini bug-fix diagnosis",
|
||||
" 3. Apply fixes",
|
||||
" 4. Rerun tests",
|
||||
"If max_iterations → Auto-revert"
|
||||
],
|
||||
"acceptance": ["All tests pass"],
|
||||
"command": "bash(npm test -- tests/path/)",
|
||||
"depends_on": [1],
|
||||
"output": "passing_implementation"
|
||||
},
|
||||
{
|
||||
"step": 3,
|
||||
"title": "REFACTOR Phase: Improve code quality",
|
||||
"tdd_phase": "refactor", // REQUIRED: Phase identifier
|
||||
"description": "Refactor while keeping tests green",
|
||||
"modification_points": ["Quality improvements"],
|
||||
"logic_flow": ["Incremental refactoring with test verification"],
|
||||
"acceptance": ["Tests still pass", "Code quality improved"],
|
||||
"command": "bash(npm run lint && npm test)",
|
||||
"depends_on": [2],
|
||||
"output": "refactored_implementation"
|
||||
}
|
||||
],
|
||||
"post_completion": [ // OPTIONAL: Final verification
|
||||
{
|
||||
"step": "verify_full_tdd_cycle",
|
||||
"action": "Confirm complete TDD cycle",
|
||||
"command": "bash(npm test && echo 'TDD complete')",
|
||||
"output_to": "final_validation",
|
||||
"on_error": "fail"
|
||||
}
|
||||
],
|
||||
"error_handling": { // OPTIONAL: Error recovery
|
||||
"green_phase_max_iterations": {
|
||||
"action": "revert_all_changes",
|
||||
"commands": ["bash(git reset --hard HEAD)"],
|
||||
"report": "Generate failure report"
|
||||
}
|
||||
}
|
||||
"context_package_path": ".workflow/{session-id}/.process/context-package.json",
|
||||
"context_package": {
|
||||
// If in memory: use cached content
|
||||
// Else: Load from .workflow/{session-id}/.process/context-package.json
|
||||
},
|
||||
"test_context_package_path": ".workflow/{session-id}/.process/test-context-package.json",
|
||||
"test_context_package": {
|
||||
// Existing test patterns and coverage analysis
|
||||
},
|
||||
"mcp_capabilities": {
|
||||
"code_index": true,
|
||||
"exa_code": true,
|
||||
"exa_web": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Key JSON Fields Summary**:
|
||||
- `meta.tdd_workflow`: Must be `true`
|
||||
- `meta.max_iterations`: Green phase fix cycle limit (default: 3)
|
||||
- `meta.use_codex`: Automated fixes (false=manual, true=Codex)
|
||||
- `flow_control.implementation_approach`: Exactly 3 steps with `tdd_phase`: "red", "green", "refactor"
|
||||
- `context.tdd_cycles`: Optional detailed test cycle specifications
|
||||
- `context.parent`: Required for subtasks (IMPL-N.M)
|
||||
**Discovery Actions**:
|
||||
1. **Load Session Context** (if not in memory)
|
||||
```javascript
|
||||
if (!memory.has("workflow-session.json")) {
|
||||
Read(.workflow/{session-id}/workflow-session.json)
|
||||
}
|
||||
```
|
||||
|
||||
#### IMPL_PLAN.md Structure
|
||||
2. **Load Context Package** (if not in memory)
|
||||
```javascript
|
||||
if (!memory.has("context-package.json")) {
|
||||
Read(.workflow/{session-id}/.process/context-package.json)
|
||||
}
|
||||
```
|
||||
|
||||
Generate IMPL_PLAN.md with 8-section structure:
|
||||
3. **Load Test Context Package** (if not in memory)
|
||||
```javascript
|
||||
if (!memory.has("test-context-package.json")) {
|
||||
Read(.workflow/{session-id}/.process/test-context-package.json)
|
||||
}
|
||||
```
|
||||
|
||||
**Frontmatter** (required fields):
|
||||
```yaml
|
||||
---
|
||||
identifier: WFS-{session-id}
|
||||
source: "User requirements" | "File: path"
|
||||
conflict_resolution: .workflow/{session-id}/.process/CONFLICT_RESOLUTION.md # if exists
|
||||
context_package: .workflow/{session-id}/.process/context-package.json
|
||||
context_package_path: .workflow/{session-id}/.process/context-package.json
|
||||
test_context: .workflow/{session-id}/.process/test-context-package.json # if exists
|
||||
workflow_type: "tdd"
|
||||
verification_history:
|
||||
conflict_resolution: "executed | skipped" # based on conflict_risk
|
||||
action_plan_verify: "pending"
|
||||
phase_progression: "brainstorm → context → test_context → conflict_resolution → tdd_planning"
|
||||
feature_count: N
|
||||
task_count: N # ≤10 total
|
||||
task_breakdown:
|
||||
simple_features: K
|
||||
complex_features: L
|
||||
total_subtasks: M
|
||||
tdd_workflow: true
|
||||
---
|
||||
4. **Extract & Load Role Analyses** (from context-package.json)
|
||||
```javascript
|
||||
// Extract role analysis paths from context package
|
||||
const roleAnalysisPaths = contextPackage.brainstorm_artifacts.role_analyses
|
||||
.flatMap(role => role.files.map(f => f.path));
|
||||
|
||||
// Load each role analysis file
|
||||
roleAnalysisPaths.forEach(path => Read(path));
|
||||
```
|
||||
|
||||
5. **Load Conflict Resolution** (from context-package.json, if exists)
|
||||
```javascript
|
||||
if (contextPackage.brainstorm_artifacts.conflict_resolution?.exists) {
|
||||
Read(contextPackage.brainstorm_artifacts.conflict_resolution.path)
|
||||
}
|
||||
```
|
||||
|
||||
6. **Code Analysis with Native Tools** (optional - enhance understanding)
|
||||
```bash
|
||||
# Find relevant test files and patterns
|
||||
find . -name "*test*" -type f
|
||||
rg "describe|it\(|test\(" -g "*.ts"
|
||||
```
|
||||
|
||||
7. **MCP External Research** (optional - gather TDD best practices)
|
||||
```javascript
|
||||
// Get external TDD examples and patterns
|
||||
mcp__exa__get_code_context_exa(
|
||||
query="TypeScript TDD best practices Red-Green-Refactor",
|
||||
tokensNum="dynamic"
|
||||
)
|
||||
```
|
||||
|
||||
### Phase 2: Agent Execution (Document Generation)
|
||||
|
||||
**Pre-Agent Template Selection** (Command decides path before invoking agent):
|
||||
```javascript
|
||||
// Command checks flag and selects template PATH (not content)
|
||||
const templatePath = hasCliExecuteFlag
|
||||
? "~/.claude/workflows/cli-templates/prompts/workflow/task-json-cli-mode.txt"
|
||||
: "~/.claude/workflows/cli-templates/prompts/workflow/task-json-agent-mode.txt";
|
||||
```
|
||||
|
||||
**8 Sections Structure**:
|
||||
**Agent Invocation**:
|
||||
```javascript
|
||||
Task(
|
||||
subagent_type="action-planning-agent",
|
||||
description="Generate TDD task JSON and implementation plan",
|
||||
prompt=`
|
||||
## Execution Context
|
||||
|
||||
```markdown
|
||||
# Implementation Plan: {Project Title}
|
||||
**Session ID**: WFS-{session-id}
|
||||
**Workflow Type**: TDD
|
||||
**Execution Mode**: {agent-mode | cli-execute-mode}
|
||||
**Task JSON Template Path**: {template_path}
|
||||
|
||||
## 1. Summary
|
||||
- Core requirements and objectives (2-3 paragraphs)
|
||||
- TDD-specific technical approach
|
||||
## Phase 1: Discovery Results (Provided Context)
|
||||
|
||||
## 2. Context Analysis
|
||||
- CCW Workflow Context (Phase progression, Quality gates)
|
||||
- Context Package Summary (Focus paths, Test context)
|
||||
- Project Profile (Type, Scale, Tech Stack, Timeline)
|
||||
- Module Structure (Directory tree)
|
||||
- Dependencies (Primary, Testing, Development)
|
||||
- Patterns & Conventions
|
||||
### Session Metadata
|
||||
{session_metadata_content}
|
||||
|
||||
## 3. Brainstorming Artifacts Reference
|
||||
- Artifact Usage Strategy
|
||||
- CONFLICT_RESOLUTION.md (if exists - selected resolution strategies)
|
||||
- role analysis documents (primary reference)
|
||||
- test-context-package.json (test patterns)
|
||||
- context-package.json (smart context)
|
||||
- Artifact Priority in Development
|
||||
### Role Analyses (Enhanced by Synthesis)
|
||||
{role_analyses_content}
|
||||
- Includes requirements, design specs, enhancements, and clarifications from synthesis phase
|
||||
|
||||
## 4. Implementation Strategy
|
||||
- Execution Strategy (TDD Cycles: Red-Green-Refactor)
|
||||
- Architectural Approach
|
||||
- Key Dependencies (Task dependency graph)
|
||||
- Testing Strategy (Coverage targets, Quality gates)
|
||||
### Artifacts Inventory
|
||||
- **Guidance Specification**: {guidance_spec_path}
|
||||
- **Role Analyses**: {role_analyses_list}
|
||||
|
||||
## 5. TDD Implementation Tasks
|
||||
- Feature-by-Feature TDD Tasks
|
||||
- Each task: IMPL-N with internal Red → Green → Refactor
|
||||
- Dependencies and complexity metrics
|
||||
- Complex Feature Examples (when subtasks needed)
|
||||
- TDD Task Breakdown Summary
|
||||
### Context Package
|
||||
{context_package_summary}
|
||||
- Includes conflict_risk assessment
|
||||
|
||||
## 6. Implementation Plan (Detailed Phased Breakdown)
|
||||
- Execution Strategy (feature-by-feature sequential)
|
||||
- Phase breakdown (Phase 1, Phase 2, etc.)
|
||||
- Resource Requirements (Team, Dependencies, Infrastructure)
|
||||
### Test Context Package
|
||||
{test_context_package_summary}
|
||||
- Existing test patterns, framework config, coverage analysis
|
||||
|
||||
## 7. Risk Assessment & Mitigation
|
||||
- Risk table (Risk, Impact, Probability, Mitigation, Owner)
|
||||
- Critical Risks (TDD-specific)
|
||||
- Monitoring Strategy
|
||||
### Conflict Resolution (Conditional)
|
||||
If conflict_risk was medium/high, modifications have been applied to:
|
||||
- **guidance-specification.md**: Design decisions updated to resolve conflicts
|
||||
- **Role analyses (*.md)**: Recommendations adjusted for compatibility
|
||||
- **context-package.json**: Marked as "resolved" with conflict IDs
|
||||
- NO separate CONFLICT_RESOLUTION.md file (conflicts resolved in-place)
|
||||
|
||||
## 8. Success Criteria
|
||||
- Functional Completeness
|
||||
- Technical Quality (Test coverage ≥80%)
|
||||
- Operational Readiness
|
||||
- TDD Compliance
|
||||
### MCP Analysis Results (Optional)
|
||||
**Code Structure**: {mcp_code_index_results}
|
||||
**External Research**: {mcp_exa_research_results}
|
||||
|
||||
## Phase 2: TDD Document Generation Task
|
||||
|
||||
**Agent Configuration Reference**: All TDD task generation rules, quantification requirements, Red-Green-Refactor cycle structure, quality standards, and execution details are defined in action-planning-agent.
|
||||
|
||||
Refer to: @.claude/agents/action-planning-agent.md for:
|
||||
- TDD Task Decomposition Standards
|
||||
- Red-Green-Refactor Cycle Requirements
|
||||
- Quantification Requirements (MANDATORY)
|
||||
- 5-Field Task JSON Schema
|
||||
- IMPL_PLAN.md Structure (TDD variant)
|
||||
- TODO_LIST.md Format
|
||||
- TDD Execution Flow & Quality Validation
|
||||
|
||||
### TDD-Specific Requirements Summary
|
||||
|
||||
#### Task Structure Philosophy
|
||||
- **1 feature = 1 task** containing complete TDD cycle internally
|
||||
- Each task executes Red-Green-Refactor phases sequentially
|
||||
- Task count = Feature count (typically 5 features = 5 tasks)
|
||||
- Subtasks only when complexity >2500 lines or >6 files per cycle
|
||||
- **Maximum 10 tasks** (hard limit for TDD workflows)
|
||||
|
||||
#### TDD Cycle Mapping
|
||||
- **Simple features**: IMPL-N with internal Red-Green-Refactor phases
|
||||
- **Complex features**: IMPL-N (container) + IMPL-N.M (subtasks)
|
||||
- Each cycle includes: test_count, test_cases array, implementation_scope, expected_coverage
|
||||
|
||||
#### Required Outputs Summary
|
||||
|
||||
##### 1. TDD Task JSON Files (.task/IMPL-*.json)
|
||||
- **Location**: `.workflow/{session-id}/.task/`
|
||||
- **Template**: Read from `{template_path}` (pre-selected by command based on `--cli-execute` flag)
|
||||
- **Schema**: 5-field structure with TDD-specific metadata
|
||||
- `meta.tdd_workflow`: true (REQUIRED)
|
||||
- `meta.max_iterations`: 3 (Green phase test-fix cycle limit)
|
||||
- `meta.use_codex`: false (manual fixes by default)
|
||||
- `context.tdd_cycles`: Array with quantified test cases and coverage
|
||||
- `flow_control.implementation_approach`: Exactly 3 steps with `tdd_phase` field
|
||||
1. Red Phase (`tdd_phase: "red"`): Write failing tests
|
||||
2. Green Phase (`tdd_phase: "green"`): Implement to pass tests
|
||||
3. Refactor Phase (`tdd_phase: "refactor"`): Improve code quality
|
||||
- **Details**: See action-planning-agent.md § TDD Task JSON Generation
|
||||
|
||||
##### 2. IMPL_PLAN.md (TDD Variant)
|
||||
- **Location**: `.workflow/{session-id}/IMPL_PLAN.md`
|
||||
- **Template**: `~/.claude/workflows/cli-templates/prompts/workflow/impl-plan-template.txt`
|
||||
- **TDD-Specific Frontmatter**: workflow_type="tdd", tdd_workflow=true, feature_count, task_breakdown
|
||||
- **TDD Implementation Tasks Section**: Feature-by-feature with internal Red-Green-Refactor cycles
|
||||
- **Details**: See action-planning-agent.md § TDD Implementation Plan Creation
|
||||
|
||||
##### 3. TODO_LIST.md
|
||||
- **Location**: `.workflow/{session-id}/TODO_LIST.md`
|
||||
- **Format**: Hierarchical task list with internal TDD phase indicators (Red → Green → Refactor)
|
||||
- **Status**: ▸ (container), [ ] (pending), [x] (completed)
|
||||
- **Details**: See action-planning-agent.md § TODO List Generation
|
||||
|
||||
### Quantification Requirements (MANDATORY)
|
||||
|
||||
**Core Rules**:
|
||||
1. **Explicit Test Case Counts**: Red phase specifies exact number with enumerated list
|
||||
2. **Quantified Coverage**: Acceptance includes measurable percentage (e.g., ">=85%")
|
||||
3. **Detailed Implementation Scope**: Green phase enumerates files, functions, line counts
|
||||
4. **Enumerated Refactoring Targets**: Refactor phase lists specific improvements with counts
|
||||
|
||||
**TDD Phase Formats**:
|
||||
- **Red Phase**: "Write N test cases: [test1, test2, ...]"
|
||||
- **Green Phase**: "Implement N functions in file lines X-Y: [func1() X1-Y1, func2() X2-Y2, ...]"
|
||||
- **Refactor Phase**: "Apply N refactorings: [improvement1 (details), improvement2 (details), ...]"
|
||||
- **Acceptance**: "All N tests pass with >=X% coverage: verify by [test command]"
|
||||
|
||||
**Validation Checklist**:
|
||||
- [ ] Every Red phase specifies exact test case count with enumerated list
|
||||
- [ ] Every Green phase enumerates files, functions, and estimated line counts
|
||||
- [ ] Every Refactor phase lists specific improvements with counts
|
||||
- [ ] Every acceptance criterion includes measurable coverage percentage
|
||||
- [ ] tdd_cycles array contains test_count and test_cases for each cycle
|
||||
- [ ] No vague language ("comprehensive", "complete", "thorough")
|
||||
|
||||
### Agent Execution Summary
|
||||
|
||||
**Key Steps** (Detailed instructions in action-planning-agent.md):
|
||||
1. Load task JSON template from provided path
|
||||
2. Extract and decompose features with TDD cycles
|
||||
3. Generate TDD task JSON files enforcing quantification requirements
|
||||
4. Create IMPL_PLAN.md using TDD template variant
|
||||
5. Generate TODO_LIST.md with TDD phase indicators
|
||||
6. Update session state with TDD metadata
|
||||
|
||||
**Quality Gates** (Full checklist in action-planning-agent.md):
|
||||
- ✓ Quantification requirements enforced (explicit counts, measurable acceptance, exact targets)
|
||||
- ✓ Task count ≤10 (hard limit)
|
||||
- ✓ Each task has meta.tdd_workflow: true
|
||||
- ✓ Each task has exactly 3 implementation steps with tdd_phase field
|
||||
- ✓ Green phase includes test-fix cycle logic
|
||||
- ✓ Artifact references mapped correctly
|
||||
- ✓ MCP tool integration added
|
||||
- ✓ Documents follow TDD template structure
|
||||
|
||||
## Output
|
||||
|
||||
Generate all three documents and report completion status:
|
||||
- TDD task JSON files created: N files (IMPL-*.json)
|
||||
- TDD cycles configured: N cycles with quantified test cases
|
||||
- Artifacts integrated: synthesis-spec, guidance-specification, N role analyses
|
||||
- Test context integrated: existing patterns and coverage
|
||||
- MCP enhancements: code-index, exa-research
|
||||
- Session ready for TDD execution: /workflow:execute
|
||||
`
|
||||
)
|
||||
```
|
||||
|
||||
### Phase 4: TODO_LIST.md Generation
|
||||
### Agent Context Passing
|
||||
|
||||
Generate task list with internal TDD phase indicators:
|
||||
**Memory-Aware Context Assembly**:
|
||||
```javascript
|
||||
// Assemble context package for agent
|
||||
const agentContext = {
|
||||
session_id: "WFS-[id]",
|
||||
workflow_type: "tdd",
|
||||
|
||||
**For Simple Features (1 task per feature)**:
|
||||
```markdown
|
||||
## TDD Implementation Tasks
|
||||
// Use memory if available, else load
|
||||
session_metadata: memory.has("workflow-session.json")
|
||||
? memory.get("workflow-session.json")
|
||||
: Read(.workflow/WFS-[id]/workflow-session.json),
|
||||
|
||||
### Feature 1: {Feature Name}
|
||||
- [ ] **IMPL-1**: Implement {feature} with TDD → [Task](./.task/IMPL-1.json)
|
||||
- Internal phases: Red → Green → Refactor
|
||||
- Dependencies: None
|
||||
context_package_path: ".workflow/WFS-[id]/.process/context-package.json",
|
||||
|
||||
### Feature 2: {Feature Name}
|
||||
- [ ] **IMPL-2**: Implement {feature} with TDD → [Task](./.task/IMPL-2.json)
|
||||
- Internal phases: Red → Green → Refactor
|
||||
- Dependencies: IMPL-1
|
||||
```
|
||||
context_package: memory.has("context-package.json")
|
||||
? memory.get("context-package.json")
|
||||
: Read(".workflow/WFS-[id]/.process/context-package.json"),
|
||||
|
||||
**For Complex Features (with subtasks)**:
|
||||
```markdown
|
||||
### Feature 3: {Complex Feature Name}
|
||||
▸ **IMPL-3**: Implement {complex feature} with TDD → [Task](./.task/IMPL-3.json)
|
||||
- [ ] **IMPL-3.1**: {Sub-feature A} with TDD → [Task](./.task/IMPL-3.1.json)
|
||||
- Internal phases: Red → Green → Refactor
|
||||
- [ ] **IMPL-3.2**: {Sub-feature B} with TDD → [Task](./.task/IMPL-3.2.json)
|
||||
- Internal phases: Red → Green → Refactor
|
||||
- Dependencies: IMPL-3.1
|
||||
```
|
||||
test_context_package_path: ".workflow/WFS-[id]/.process/test-context-package.json",
|
||||
|
||||
**Status Legend**:
|
||||
```markdown
|
||||
## Status Legend
|
||||
- ▸ = Container task (has subtasks)
|
||||
- [ ] = Pending task
|
||||
- [x] = Completed task
|
||||
- Red = Write failing tests
|
||||
- Green = Implement to pass tests (with test-fix cycle)
|
||||
- Refactor = Improve code quality
|
||||
```
|
||||
test_context_package: memory.has("test-context-package.json")
|
||||
? memory.get("test-context-package.json")
|
||||
: Read(".workflow/WFS-[id]/.process/test-context-package.json"),
|
||||
|
||||
### Phase 5: Session State Update
|
||||
// Extract brainstorm artifacts from context package
|
||||
brainstorm_artifacts: extractBrainstormArtifacts(context_package),
|
||||
|
||||
Update workflow-session.json with TDD metadata:
|
||||
```json
|
||||
{
|
||||
"workflow_type": "tdd",
|
||||
"feature_count": 5,
|
||||
"task_count": 5,
|
||||
"task_breakdown": {
|
||||
"simple_features": 4,
|
||||
"complex_features": 1,
|
||||
"total_subtasks": 2
|
||||
},
|
||||
"tdd_workflow": true,
|
||||
"task_limit_compliance": true
|
||||
// Load role analyses using paths from context package
|
||||
role_analyses: brainstorm_artifacts.role_analyses
|
||||
.flatMap(role => role.files)
|
||||
.map(file => Read(file.path)),
|
||||
|
||||
// Load conflict resolution if exists (from context package)
|
||||
conflict_resolution: brainstorm_artifacts.conflict_resolution?.exists
|
||||
? Read(brainstorm_artifacts.conflict_resolution.path)
|
||||
: null,
|
||||
|
||||
// Optional MCP enhancements
|
||||
mcp_analysis: executeMcpDiscovery()
|
||||
}
|
||||
```
|
||||
|
||||
**Task Count Calculation**:
|
||||
- **Simple features**: 1 task each (IMPL-N with internal TDD cycle)
|
||||
- **Complex features**: 1 container + M subtasks (IMPL-N + IMPL-N.M)
|
||||
- **Total**: Simple feature count + Complex feature subtask count
|
||||
- **Example**: 4 simple + 1 complex (with 2 subtasks) = 6 total tasks (not 15)
|
||||
## TDD Task Structure Reference
|
||||
|
||||
This section provides quick reference for TDD task JSON structure. For complete implementation details, see the agent invocation prompt in Phase 2 above.
|
||||
|
||||
**Quick Reference**:
|
||||
- Each TDD task contains complete Red-Green-Refactor cycle
|
||||
- Task ID format: `IMPL-N` (simple) or `IMPL-N.M` (complex subtasks)
|
||||
- Required metadata: `meta.tdd_workflow: true`, `meta.max_iterations: 3`
|
||||
- Flow control: Exactly 3 steps with `tdd_phase` field (red, green, refactor)
|
||||
- Context: `tdd_cycles` array with quantified test cases and coverage
|
||||
- See Phase 2 agent prompt for full schema and requirements
|
||||
|
||||
## Output Files Structure
|
||||
```
|
||||
@@ -465,52 +449,30 @@ Update workflow-session.json with TDD metadata:
|
||||
|
||||
## Integration & Usage
|
||||
|
||||
### Command Chain
|
||||
- **Called By**: `/workflow:tdd-plan` (Phase 4)
|
||||
- **Calls**: Gemini CLI for TDD breakdown
|
||||
- **Followed By**: `/workflow:execute`, `/workflow:tdd-verify`
|
||||
**Command Chain**:
|
||||
- Called by: `/workflow:tdd-plan` (Phase 4)
|
||||
- Invokes: `action-planning-agent` for autonomous task generation
|
||||
- Followed by: `/workflow:execute`, `/workflow:tdd-verify`
|
||||
|
||||
### Basic Usage
|
||||
**Basic Usage**:
|
||||
```bash
|
||||
# Manual mode (default)
|
||||
# Agent mode (default, autonomous execution)
|
||||
/workflow:tools:task-generate-tdd --session WFS-auth
|
||||
|
||||
# Agent mode (autonomous task generation)
|
||||
/workflow:tools:task-generate-tdd --session WFS-auth --agent
|
||||
# CLI tool mode (use Gemini/Qwen for generation)
|
||||
/workflow:tools:task-generate-tdd --session WFS-auth --cli-execute
|
||||
```
|
||||
|
||||
### Expected Output
|
||||
```
|
||||
TDD task generation complete for session: WFS-auth
|
||||
**Execution Modes**:
|
||||
- **Agent mode** (default): Uses `action-planning-agent` with agent-mode task template
|
||||
- **CLI mode** (`--cli-execute`): Uses Gemini/Qwen with cli-mode task template
|
||||
|
||||
Features analyzed: 5
|
||||
Total tasks: 5 (1 task per feature with internal TDD cycles)
|
||||
|
||||
Task breakdown:
|
||||
- Simple features: 4 tasks (IMPL-1 to IMPL-4)
|
||||
- Complex features: 1 task with 2 subtasks (IMPL-5, IMPL-5.1, IMPL-5.2)
|
||||
- Total task count: 6 (within 10-task limit)
|
||||
|
||||
Structure:
|
||||
- IMPL-1: User Authentication (Internal: Red → Green → Refactor)
|
||||
- IMPL-2: Password Reset (Internal: Red → Green → Refactor)
|
||||
- IMPL-3: Email Verification (Internal: Red → Green → Refactor)
|
||||
- IMPL-4: Role Management (Internal: Red → Green → Refactor)
|
||||
- IMPL-5: Payment System (Container)
|
||||
- IMPL-5.1: Gateway Integration (Internal: Red → Green → Refactor)
|
||||
- IMPL-5.2: Transaction Management (Internal: Red → Green → Refactor)
|
||||
|
||||
Plans generated:
|
||||
- Unified Plan: .workflow/WFS-auth/IMPL_PLAN.md (includes TDD Implementation Tasks section)
|
||||
- Task List: .workflow/WFS-auth/TODO_LIST.md (with internal TDD phase indicators)
|
||||
|
||||
TDD Configuration:
|
||||
- Each task contains complete Red-Green-Refactor cycle
|
||||
- Green phase includes test-fix cycle (max 3 iterations)
|
||||
- Auto-revert on max iterations reached
|
||||
|
||||
Next: /workflow:action-plan-verify --session WFS-auth (recommended) or /workflow:execute --session WFS-auth
|
||||
```
|
||||
**Output**:
|
||||
- TDD task JSON files in `.task/` directory (IMPL-N.json format)
|
||||
- IMPL_PLAN.md with TDD Implementation Tasks section
|
||||
- TODO_LIST.md with internal TDD phase indicators
|
||||
- Session state updated with task count and TDD metadata
|
||||
- MCP enhancements integrated (if available)
|
||||
|
||||
## Test Coverage Analysis Integration
|
||||
|
||||
@@ -547,9 +509,3 @@ IMPL (Green phase) tasks include automatic test-fix cycle:
|
||||
- **meta.max_iterations**: Number of fix attempts (default: 3 for TDD, 5 for test-gen)
|
||||
- **meta.use_codex**: Enable Codex automated fixes (default: false, manual)
|
||||
|
||||
## Related Commands
|
||||
- `/workflow:tdd-plan` - Orchestrates TDD workflow planning (6 phases)
|
||||
- `/workflow:tools:test-context-gather` - Analyzes test coverage
|
||||
- `/workflow:execute` - Executes TDD tasks in order
|
||||
- `/workflow:tdd-verify` - Verifies TDD compliance
|
||||
- `/workflow:test-gen` - Post-implementation test generation
|
||||
|
||||
@@ -45,8 +45,33 @@ This command is built on a set of core principles to ensure efficient and reliab
|
||||
- **Memory-First**: Prioritizes using documents already loaded in conversation memory to avoid redundant file operations
|
||||
- **Mode-Flexible**: Supports both agent-driven execution (default) and CLI tool execution (with `--cli-execute` flag)
|
||||
- **Multi-Step Support**: Complex tasks can use multiple sequential steps in `implementation_approach` with codex resume mechanism
|
||||
- **Quantification-Enforced**: **NEW** - All requirements, acceptance criteria, and modification points MUST include explicit counts and enumerations to prevent ambiguity (e.g., "17 commands: [list]" not "implement commands")
|
||||
- **Responsibility**: Parses analysis, detects artifacts, generates enhanced task JSONs, creates `IMPL_PLAN.md` and `TODO_LIST.md`, updates session state
|
||||
|
||||
## 3.5. Quantification Requirements (MANDATORY)
|
||||
|
||||
**Purpose**: Eliminate ambiguity by enforcing explicit counts and enumerations in all task specifications.
|
||||
|
||||
**Core Rules**:
|
||||
1. **Extract Counts from Analysis**: Search for HOW MANY items and list them explicitly
|
||||
2. **Enforce Explicit Lists**: Every deliverable uses format `{count} {type}: [{explicit_list}]`
|
||||
3. **Make Acceptance Measurable**: Include verification commands (e.g., `ls ... | wc -l = N`)
|
||||
4. **Quantify Modification Points**: Specify exact targets (files, functions with line numbers)
|
||||
5. **Avoid Vague Language**: Replace "complete", "comprehensive", "reorganize" with quantified statements
|
||||
|
||||
**Standard Formats**:
|
||||
|
||||
- **Requirements**: `"Implement N items: [item1, item2, ...]"` or `"Modify N files: [file1:func:lines, ...]"`
|
||||
- **Acceptance**: `"N items exist: verify by [command]"` or `"Coverage >= X%: verify by [test command]"`
|
||||
- **Modification Points**: `"Create N files: [list]"` or `"Modify N functions: [func() in file lines X-Y]"`
|
||||
|
||||
**Validation Checklist**:
|
||||
- [ ] Every requirement contains explicit count or enumerated list
|
||||
- [ ] Every acceptance criterion is measurable with verification command
|
||||
- [ ] Every modification_point specifies exact targets (files/functions/lines)
|
||||
- [ ] No vague language ("complete", "comprehensive", "reorganize" without counts)
|
||||
- [ ] Each implementation step has its own acceptance criteria
|
||||
|
||||
## 4. Execution Flow
|
||||
The command follows a streamlined, three-step process to convert analysis into executable tasks.
|
||||
|
||||
@@ -59,13 +84,39 @@ The process begins by gathering all necessary inputs. It follows a **Memory-Firs
|
||||
|
||||
### Step 2: Task Decomposition & Grouping
|
||||
Once all inputs are loaded, the command analyzes the tasks defined in the analysis results and groups them based on shared context.
|
||||
1. **Task Definition Parsing**: Extracts task definitions, requirements, and dependencies.
|
||||
2. **Context Signature Analysis**: Computes a unique hash (`context_signature`) for each task based on its `focus_paths` and referenced `artifacts`.
|
||||
|
||||
**Phase 2.1: Quantification Extraction (NEW - CRITICAL)**
|
||||
1. **Count Extraction**: Scan analysis documents for quantifiable information:
|
||||
- Search for numbers + nouns (e.g., "5 files", "17 commands", "3 features")
|
||||
- Identify enumerated lists (bullet points, numbered lists, comma-separated items)
|
||||
- Extract explicit counts from tables, diagrams, or structured data
|
||||
- Store extracted counts with their context (what is being counted)
|
||||
|
||||
2. **List Enumeration**: Build explicit lists for each deliverable:
|
||||
- If analysis says "implement session commands", enumerate ALL commands: [start, resume, list, complete, archive]
|
||||
- If analysis mentions "create categories", list ALL categories: [literature, experiment, data-analysis, visualization, context]
|
||||
- If analysis describes "modify functions", list ALL functions with line numbers
|
||||
- Maintain full enumerations (no "..." unless list exceeds 20 items)
|
||||
|
||||
3. **Verification Method Assignment**: For each deliverable, determine verification approach:
|
||||
- File count: `ls {path}/*.{ext} | wc -l = {count}`
|
||||
- Directory existence: `ls {parent}/ | grep -E '(name1|name2|...)' | wc -l = {count}`
|
||||
- Test coverage: `pytest --cov={module} --cov-report=term | grep TOTAL | awk '{print $4}' >= {percentage}`
|
||||
- Function existence: `grep -E '(func1|func2|...)' {file} | wc -l = {count}`
|
||||
|
||||
4. **Ambiguity Detection**: Flag vague language for replacement:
|
||||
- Detect words: "complete", "comprehensive", "reorganize", "refactor", "implement", "create" without counts
|
||||
- Require quantification: "implement" → "implement {N} {items}: [{list}]"
|
||||
- Reject unquantified deliverables
|
||||
|
||||
**Phase 2.2: Task Definition & Grouping**
|
||||
1. **Task Definition Parsing**: Extracts task definitions, requirements, and dependencies from quantified analysis
|
||||
2. **Context Signature Analysis**: Computes a unique hash (`context_signature`) for each task based on its `focus_paths` and referenced `artifacts`
|
||||
3. **Task Grouping**:
|
||||
* Tasks with the **same signature** are candidates for merging, as they operate on the same context.
|
||||
* Tasks with **different signatures** and no dependencies are grouped for parallel execution.
|
||||
* Tasks with `depends_on` relationships are marked for sequential execution.
|
||||
4. **Modification Target Determination**: Extracts specific code locations (`file:function:lines`) from the analysis to populate the `target_files` field.
|
||||
* Tasks with the **same signature** are candidates for merging, as they operate on the same context
|
||||
* Tasks with **different signatures** and no dependencies are grouped for parallel execution
|
||||
* Tasks with `depends_on` relationships are marked for sequential execution
|
||||
4. **Modification Target Determination**: Extracts specific code locations (`file:function:lines`) from the analysis to populate the `target_files` field
|
||||
|
||||
### Step 3: Output Generation
|
||||
Finally, the command generates all the necessary output files.
|
||||
@@ -167,38 +218,82 @@ function assignExecutionGroups(tasks) {
|
||||
The command produces three key documents and a directory of task files.
|
||||
|
||||
### 6.1. Task JSON Schema (`.task/IMPL-*.json`)
|
||||
This enhanced 5-field schema embeds all necessary context, artifacts, and execution steps.
|
||||
Each task JSON embeds all necessary context, artifacts, and execution steps using this schema:
|
||||
|
||||
**Top-Level Fields**:
|
||||
- `id`: Task identifier (format: `IMPL-N` or `IMPL-N.M` for subtasks)
|
||||
- `title`: Descriptive task name
|
||||
- `status`: Task state (`pending|active|completed|blocked|container`)
|
||||
- `context_package_path`: Path to context package (`.workflow/WFS-[session]/.process/context-package.json`)
|
||||
- `meta`: Task metadata
|
||||
- `context`: Task-specific context and requirements
|
||||
- `flow_control`: Execution steps and workflow
|
||||
|
||||
**Meta Object**:
|
||||
- `type`: Task category (`feature|bugfix|refactor|test-gen|test-fix|docs`)
|
||||
- `agent`: Assigned agent (`@code-developer|@test-fix-agent|@universal-executor`)
|
||||
- `execution_group`: Parallelization group ID or null
|
||||
- `context_signature`: Hash for context-based grouping
|
||||
|
||||
**Context Object**:
|
||||
- `requirements`: Quantified implementation requirements (with counts and explicit lists)
|
||||
- `focus_paths`: Target directories/files (absolute or relative paths)
|
||||
- `acceptance`: Measurable acceptance criteria (with verification commands)
|
||||
- `parent`: Parent task ID for subtasks
|
||||
- `depends_on`: Prerequisite task IDs
|
||||
- `inherited`: Shared patterns and dependencies from parent
|
||||
- `shared_context`: Tech stack and conventions
|
||||
- `artifacts`: Referenced brainstorm artifacts with paths, priority, and usage
|
||||
|
||||
**Flow Control Object**:
|
||||
- `pre_analysis`: Context loading and preparation steps
|
||||
- `load_context_package`: Load smart context and artifact catalog
|
||||
- `load_role_analysis_artifacts`: Load role analyses dynamically from context package
|
||||
- `load_planning_context`: Load finalized decisions with resolved conflicts
|
||||
- `codebase_exploration`: Discover existing patterns
|
||||
- `analyze_task_patterns`: Identify modification targets
|
||||
- `implementation_approach`: Execution steps
|
||||
- **Agent Mode**: Steps contain `modification_points` and `logic_flow` (agent executes autonomously)
|
||||
- **CLI Mode**: Steps include `command` field with CLI tool invocation
|
||||
- `target_files`: Specific files/functions/lines to modify
|
||||
|
||||
**Key Characteristics**:
|
||||
- **Quantification**: All requirements/acceptance use explicit counts and enumerations
|
||||
- **Mode Flexibility**: Supports both agent execution (default) and CLI tool execution (`--cli-execute`)
|
||||
- **Context Intelligence**: References context-package.json for smart context and artifact paths
|
||||
- **Artifact Integration**: Dynamically loads role analyses and brainstorm artifacts
|
||||
|
||||
**Example Task JSON**:
|
||||
```json
|
||||
{
|
||||
"id": "IMPL-N[.M]",
|
||||
"title": "Descriptive task name",
|
||||
"status": "pending|active|completed|blocked|container",
|
||||
"context_package_path": ".workflow/WFS-[session]/.process/context-package.json",
|
||||
"id": "IMPL-1",
|
||||
"title": "Implement feature X with Y components",
|
||||
"status": "pending",
|
||||
"context_package_path": ".workflow/WFS-session/.process/context-package.json",
|
||||
"meta": {
|
||||
"type": "feature|bugfix|refactor|test-gen|test-fix|docs",
|
||||
"agent": "@code-developer|@test-fix-agent|@universal-executor",
|
||||
"execution_group": "group-id|null",
|
||||
"context_signature": "hash-of-focus_paths-and-artifacts"
|
||||
"type": "feature",
|
||||
"agent": "@code-developer",
|
||||
"execution_group": "parallel-abc123",
|
||||
"context_signature": "hash-value"
|
||||
},
|
||||
"context": {
|
||||
"requirements": ["Clear requirement from analysis"],
|
||||
"focus_paths": ["D:\\project\\src\\module\\path", "./tests/module/path"],
|
||||
"acceptance": ["Measurable acceptance criterion"],
|
||||
"parent": "IMPL-N",
|
||||
"depends_on": ["IMPL-N.M"],
|
||||
"inherited": {"shared_patterns": [], "common_dependencies": []},
|
||||
"shared_context": {"tech_stack": [], "conventions": []},
|
||||
"requirements": [
|
||||
"Implement 5 commands: [cmd1, cmd2, cmd3, cmd4, cmd5]",
|
||||
"Create 3 directories: [dir1/, dir2/, dir3/]",
|
||||
"Modify 2 functions: [funcA() in file1.ts lines 10-25, funcB() in file2.ts lines 40-60]"
|
||||
],
|
||||
"focus_paths": ["D:\\project\\src\\module", "./tests/module"],
|
||||
"acceptance": [
|
||||
"5 command files created: verify by ls .claude/commands/*/*.md | wc -l = 5",
|
||||
"3 directories exist: verify by ls -d dir*/ | wc -l = 3",
|
||||
"All tests pass: pytest tests/ --cov=src/module (>=80% coverage)"
|
||||
],
|
||||
"depends_on": [],
|
||||
"artifacts": [
|
||||
{
|
||||
"path": "{{from context-package.json → brainstorm_artifacts.role_analyses[].files[].path}}",
|
||||
"path": ".workflow/WFS-session/.brainstorming/system-architect/analysis.md",
|
||||
"priority": "highest",
|
||||
"usage": "Role-specific requirements, design specs, enhanced by synthesis. Paths loaded dynamically from context-package.json (supports multiple files per role: analysis.md, analysis-01.md, analysis-api.md, etc.). Common roles: product-manager, system-architect, ui-designer, data-architect, ux-expert."
|
||||
},
|
||||
{
|
||||
"path": ".workflow/WFS-[session]/.brainstorming/guidance-specification.md",
|
||||
"priority": "high",
|
||||
"usage": "Finalized design decisions (potentially modified by conflict resolution if conflict_risk was medium/high). Use for: understanding resolved requirements, design choices, conflict resolutions applied in-place"
|
||||
"usage": "Architecture decisions and API specifications"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -206,18 +301,14 @@ This enhanced 5-field schema embeds all necessary context, artifacts, and execut
|
||||
"pre_analysis": [
|
||||
{
|
||||
"step": "load_context_package",
|
||||
"action": "Load context package for artifact paths",
|
||||
"note": "Context package path is now at top-level field: context_package_path",
|
||||
"commands": [
|
||||
"Read({{context_package_path}})"
|
||||
],
|
||||
"action": "Load context package for artifact paths and smart context",
|
||||
"commands": ["Read({{context_package_path}})"],
|
||||
"output_to": "context_package",
|
||||
"on_error": "fail"
|
||||
},
|
||||
{
|
||||
"step": "load_role_analysis_artifacts",
|
||||
"action": "Load role analyses from context-package.json (supports multiple files per role)",
|
||||
"note": "Paths loaded from context-package.json → brainstorm_artifacts.role_analyses[]. Supports analysis*.md automatically.",
|
||||
"action": "Load role analyses from context-package.json",
|
||||
"commands": [
|
||||
"Read({{context_package_path}})",
|
||||
"Extract(brainstorm_artifacts.role_analyses[].files[].path)",
|
||||
@@ -225,73 +316,36 @@ This enhanced 5-field schema embeds all necessary context, artifacts, and execut
|
||||
],
|
||||
"output_to": "role_analysis_artifacts",
|
||||
"on_error": "skip_optional"
|
||||
},
|
||||
{
|
||||
"step": "load_planning_context",
|
||||
"action": "Load plan-generated context intelligence with resolved conflicts",
|
||||
"note": "CRITICAL: context-package.json (from context_package_path) provides smart context (focus paths, dependencies, patterns) and conflict resolution status. If conflict_risk was medium/high, conflicts have been resolved in guidance-specification.md and role analyses.",
|
||||
"commands": [
|
||||
"Read({{context_package_path}})",
|
||||
"Read(.workflow/WFS-[session]/.brainstorming/guidance-specification.md)"
|
||||
],
|
||||
"output_to": "planning_context",
|
||||
"on_error": "fail",
|
||||
"usage_guidance": {
|
||||
"context-package.json": "Use for focus_paths validation, dependency resolution, existing pattern discovery, module structure understanding, conflict_risk status (resolved/none/low)",
|
||||
"guidance-specification.md": "Use for finalized design decisions (includes applied conflict resolutions if any)"
|
||||
}
|
||||
},
|
||||
{
|
||||
"step": "codebase_exploration",
|
||||
"action": "Explore codebase using native tools",
|
||||
"command": "bash(find . -name \"[patterns]\" -type f && rg \"[patterns]\")",
|
||||
"output_to": "codebase_structure"
|
||||
},
|
||||
{
|
||||
"step": "analyze_task_patterns",
|
||||
"action": "Analyze existing code patterns and identify modification targets",
|
||||
"commands": [
|
||||
"bash(cd \"[focus_paths]\")",
|
||||
"bash(gemini \"PURPOSE: Identify modification targets TASK: Analyze '[title]' and locate specific files/functions/lines to modify CONTEXT: [role_analyses] [individual_artifacts] EXPECTED: Code locations in format 'file:function:lines' RULES: Consult role analyses for requirements, identify exact modification points\")"
|
||||
],
|
||||
"output_to": "task_context_with_targets",
|
||||
"on_error": "fail"
|
||||
}
|
||||
],
|
||||
"implementation_approach": [
|
||||
{
|
||||
"step": 1,
|
||||
"title": "Implement task following role analyses and context",
|
||||
"description": "Implement '[title]' following this priority: 1) role analysis.md files (requirements, design specs, enhancements from synthesis), 2) guidance-specification.md (finalized decisions with resolved conflicts), 3) context-package.json (smart context, focus paths, patterns). Role analyses are enhanced by synthesis phase with concept improvements and clarifications. If conflict_risk was medium/high, conflict resolutions are already applied in-place.",
|
||||
"title": "Implement feature following role analyses",
|
||||
"description": "Implement feature X using requirements from role analyses and context package",
|
||||
"modification_points": [
|
||||
"Apply requirements and design specs from role analysis documents",
|
||||
"Use enhancements and clarifications from synthesis phase",
|
||||
"Use finalized decisions from guidance-specification.md (includes resolved conflicts)",
|
||||
"Use context-package.json for focus paths and dependency resolution",
|
||||
"Consult specific role artifacts for implementation details when needed",
|
||||
"Integrate with existing patterns"
|
||||
"Create 5 command files: [cmd1.md, cmd2.md, cmd3.md, cmd4.md, cmd5.md]",
|
||||
"Modify funcA() in file1.ts lines 10-25: add validation logic",
|
||||
"Modify funcB() in file2.ts lines 40-60: integrate with new API"
|
||||
],
|
||||
"logic_flow": [
|
||||
"Load role analyses (requirements, design, enhancements from synthesis)",
|
||||
"Load guidance-specification.md (finalized decisions with resolved conflicts if any)",
|
||||
"Load context-package.json (smart context: focus paths, dependencies, patterns, conflict_risk status)",
|
||||
"Extract requirements and design decisions from role documents",
|
||||
"Review synthesis enhancements and clarifications",
|
||||
"Use finalized decisions (conflicts already resolved if applicable)",
|
||||
"Identify modification targets using context package",
|
||||
"Implement following role requirements and design specs",
|
||||
"Consult role artifacts for detailed specifications when needed",
|
||||
"Load role analyses and context package",
|
||||
"Extract requirements and design decisions",
|
||||
"Implement commands following existing patterns",
|
||||
"Update functions with new logic",
|
||||
"Validate against acceptance criteria"
|
||||
],
|
||||
"depends_on": [],
|
||||
"output": "implementation"
|
||||
}
|
||||
],
|
||||
"target_files": ["file:function:lines"]
|
||||
"target_files": ["file1.ts:funcA:10-25", "file2.ts:funcB:40-60"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Note**: In CLI Execute Mode (`--cli-execute`), `implementation_approach` steps include a `command` field with the CLI tool invocation (e.g., `bash(codex ...)`).
|
||||
|
||||
### 6.2. IMPL_PLAN.md Structure
|
||||
This document provides a high-level overview of the entire implementation plan.
|
||||
|
||||
@@ -585,194 +639,7 @@ Artifacts are mapped to tasks based on their relevance to the task's domain.
|
||||
|
||||
This ensures that each task has access to the most relevant and detailed specifications from role-specific analyses.
|
||||
|
||||
## 8. CLI Execute Mode Details
|
||||
When using `--cli-execute`, each step in `implementation_approach` includes a `command` field with the execution command.
|
||||
|
||||
**Key Points**:
|
||||
- **Sequential Steps**: Steps execute in order defined in `implementation_approach` array
|
||||
- **Context Delivery**: Each codex command receives context via CONTEXT field: `@{context_package_path}` (role analyses loaded dynamically from context package)- **Multi-Step Tasks**: First step provides full context, subsequent steps use `resume --last` to maintain session continuity
|
||||
- **Step Dependencies**: Later steps reference outputs from earlier steps via `depends_on` field
|
||||
|
||||
### Example 1: Agent Mode - Simple Task (Default, No Command)
|
||||
```json
|
||||
{
|
||||
"id": "IMPL-001",
|
||||
"title": "Implement user authentication module",
|
||||
"context_package_path": ".workflow/WFS-session/.process/context-package.json",
|
||||
"context": {
|
||||
"depends_on": [],
|
||||
"focus_paths": ["src/auth"],
|
||||
"requirements": ["JWT-based authentication", "Login and registration endpoints"],
|
||||
"acceptance": [
|
||||
"JWT token generation working",
|
||||
"Login and registration endpoints implemented",
|
||||
"Tests passing with >70% coverage"
|
||||
]
|
||||
},
|
||||
"flow_control": {
|
||||
"pre_analysis": [
|
||||
{
|
||||
"step": "load_role_analyses",
|
||||
"action": "Load role analyses from context-package.json",
|
||||
"commands": [
|
||||
"Read({{context_package_path}})",
|
||||
"Extract(brainstorm_artifacts.role_analyses[].files[].path)",
|
||||
"Read(each extracted path)"
|
||||
],
|
||||
"output_to": "role_analyses",
|
||||
"on_error": "fail"
|
||||
},
|
||||
{
|
||||
"step": "load_context",
|
||||
"action": "Load context package for project structure",
|
||||
"commands": ["Read({{context_package_path}})"],
|
||||
"output_to": "context_pkg",
|
||||
"on_error": "fail"
|
||||
}
|
||||
],
|
||||
"implementation_approach": [
|
||||
{
|
||||
"step": 1,
|
||||
"title": "Implement JWT-based authentication",
|
||||
"description": "Create authentication module using JWT following [role_analyses] requirements and [context_pkg] patterns",
|
||||
"modification_points": [
|
||||
"Create auth service with JWT generation",
|
||||
"Implement login endpoint with credential validation",
|
||||
"Implement registration endpoint with user creation",
|
||||
"Add JWT middleware for route protection"
|
||||
],
|
||||
"logic_flow": [
|
||||
"User registers → validate input → hash password → create user",
|
||||
"User logs in → validate credentials → generate JWT → return token",
|
||||
"Protected routes → validate JWT → extract user → allow access"
|
||||
],
|
||||
"depends_on": [],
|
||||
"output": "auth_implementation"
|
||||
}
|
||||
],
|
||||
"target_files": ["src/auth/service.ts", "src/auth/middleware.ts", "src/routes/auth.ts"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example 2: CLI Execute Mode - Single Codex Step
|
||||
```json
|
||||
{
|
||||
"id": "IMPL-002",
|
||||
"title": "Implement user authentication module",
|
||||
"context_package_path": ".workflow/WFS-session/.process/context-package.json",
|
||||
"context": {
|
||||
"depends_on": [],
|
||||
"focus_paths": ["src/auth"],
|
||||
"requirements": ["JWT-based authentication", "Login and registration endpoints"],
|
||||
"acceptance": ["JWT generation working", "Endpoints implemented", "Tests passing"]
|
||||
},
|
||||
"flow_control": {
|
||||
"pre_analysis": [
|
||||
{
|
||||
"step": "load_role_analyses",
|
||||
"action": "Load role analyses from context-package.json",
|
||||
"commands": [
|
||||
"Read({{context_package_path}})",
|
||||
"Extract(brainstorm_artifacts.role_analyses[].files[].path)",
|
||||
"Read(each extracted path)"
|
||||
],
|
||||
"output_to": "role_analyses",
|
||||
"on_error": "fail"
|
||||
}
|
||||
],
|
||||
"implementation_approach": [
|
||||
{
|
||||
"step": 1,
|
||||
"title": "Implement authentication with Codex",
|
||||
"description": "Create JWT-based authentication module",
|
||||
"command": "bash(codex -C src/auth --full-auto exec \"PURPOSE: Implement user authentication TASK: JWT-based auth with login/registration MODE: auto CONTEXT: @{{context_package_path}} EXPECTED: Complete auth module with tests RULES: Load role analyses from context-package.json → brainstorm_artifacts\" --skip-git-repo-check -s danger-full-access)",
|
||||
"modification_points": ["Create auth service", "Implement endpoints", "Add JWT middleware"],
|
||||
"logic_flow": ["Validate credentials", "Generate JWT", "Return token"],
|
||||
"depends_on": [],
|
||||
"output": "auth_implementation"
|
||||
}
|
||||
],
|
||||
"target_files": ["src/auth/service.ts", "src/auth/middleware.ts"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example 3: CLI Execute Mode - Multi-Step with Resume
|
||||
```json
|
||||
{
|
||||
"id": "IMPL-003",
|
||||
"title": "Implement role-based access control",
|
||||
"context_package_path": ".workflow/WFS-session/.process/context-package.json",
|
||||
"context": {
|
||||
"depends_on": ["IMPL-002"],
|
||||
"focus_paths": ["src/auth", "src/middleware"],
|
||||
"requirements": ["User roles and permissions", "Route protection middleware"],
|
||||
"acceptance": ["RBAC models created", "Middleware working", "Management API complete"]
|
||||
},
|
||||
"flow_control": {
|
||||
"pre_analysis": [
|
||||
{
|
||||
"step": "load_context",
|
||||
"action": "Load context and role analyses from context-package.json",
|
||||
"commands": [
|
||||
"Read({{context_package_path}})",
|
||||
"Extract(brainstorm_artifacts.role_analyses[].files[].path)",
|
||||
"Read(each extracted path)"
|
||||
],
|
||||
"output_to": "full_context",
|
||||
"on_error": "fail"
|
||||
}
|
||||
],
|
||||
"implementation_approach": [
|
||||
{
|
||||
"step": 1,
|
||||
"title": "Create RBAC models",
|
||||
"description": "Define role and permission data models",
|
||||
"command": "bash(codex -C src/auth --full-auto exec \"PURPOSE: Create RBAC models TASK: Role and permission models MODE: auto CONTEXT: @{{context_package_path}} EXPECTED: Models with migrations RULES: Load role analyses from context-package.json → brainstorm_artifacts\" --skip-git-repo-check -s danger-full-access)",
|
||||
"modification_points": ["Define role model", "Define permission model", "Create migrations"],
|
||||
"logic_flow": ["Design schema", "Implement models", "Generate migrations"],
|
||||
"depends_on": [],
|
||||
"output": "rbac_models"
|
||||
},
|
||||
{
|
||||
"step": 2,
|
||||
"title": "Implement RBAC middleware",
|
||||
"description": "Create route protection middleware using models from step 1",
|
||||
"command": "bash(codex --full-auto exec \"PURPOSE: Create RBAC middleware TASK: Route protection middleware MODE: auto CONTEXT: RBAC models from step 1 EXPECTED: Middleware for route protection RULES: Use session patterns\" resume --last --skip-git-repo-check -s danger-full-access)",
|
||||
"modification_points": ["Create permission checker", "Add route decorators", "Integrate with auth"],
|
||||
"logic_flow": ["Check user role", "Validate permissions", "Allow/deny access"],
|
||||
"depends_on": [1],
|
||||
"output": "rbac_middleware"
|
||||
},
|
||||
{
|
||||
"step": 3,
|
||||
"title": "Add role management API",
|
||||
"description": "Create CRUD endpoints for roles and permissions",
|
||||
"command": "bash(codex --full-auto exec \"PURPOSE: Role management API TASK: CRUD endpoints for roles/permissions MODE: auto CONTEXT: Models and middleware from previous steps EXPECTED: Complete API with validation RULES: Maintain consistency\" resume --last --skip-git-repo-check -s danger-full-access)",
|
||||
"modification_points": ["Create role endpoints", "Create permission endpoints", "Add validation"],
|
||||
"logic_flow": ["Define routes", "Implement controllers", "Add authorization"],
|
||||
"depends_on": [2],
|
||||
"output": "role_management_api"
|
||||
}
|
||||
],
|
||||
"target_files": [
|
||||
"src/models/Role.ts",
|
||||
"src/models/Permission.ts",
|
||||
"src/middleware/rbac.ts",
|
||||
"src/routes/roles.ts"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Pattern Summary**:
|
||||
- **Agent Mode (Example 1)**: No `command` field - agent executes via `modification_points` and `logic_flow`
|
||||
- **CLI Mode Single-Step (Example 2)**: One `command` field with full context package
|
||||
- **CLI Mode Multi-Step (Example 3)**: First step uses full context, subsequent steps use `resume --last`
|
||||
- **Context Delivery**: Context package provided via `@{...}` references in CONTEXT field
|
||||
|
||||
## 9. Error Handling
|
||||
## 8. Error Handling
|
||||
|
||||
### Input Validation Errors
|
||||
| Error | Cause | Resolution |
|
||||
@@ -795,21 +662,19 @@ When using `--cli-execute`, each step in `implementation_approach` includes a `c
|
||||
| Invalid format | Corrupted file | Skip artifact loading |
|
||||
| Path invalid | Moved/deleted | Update references |
|
||||
|
||||
## 10. Integration & Usage
|
||||
## 10. Usage & Related Commands
|
||||
|
||||
### Command Chain
|
||||
- **Called By**: `/workflow:plan` (Phase 4)
|
||||
- **Calls**: None (terminal command)
|
||||
- **Followed By**: `/workflow:execute`, `/workflow:status`
|
||||
|
||||
### Basic Usage
|
||||
**Basic Usage**:
|
||||
```bash
|
||||
/workflow:tools:task-generate --session WFS-auth
|
||||
/workflow:tools:task-generate --session WFS-auth [--cli-execute]
|
||||
```
|
||||
|
||||
## 11. Related Commands
|
||||
- `/workflow:plan` - Orchestrates entire planning
|
||||
- `/workflow:plan --cli-execute` - Planning with CLI execution mode
|
||||
- `/workflow:tools:context-gather` - Provides context package
|
||||
- `/workflow:tools:conflict-resolution` - Provides conflict resolution strategies (optional)
|
||||
**Workflow Integration**:
|
||||
- Called by: `/workflow:plan` (task generation phase)
|
||||
- Followed by: `/workflow:execute`, `/workflow:status`
|
||||
|
||||
**Related Commands**:
|
||||
- `/workflow:plan` - Orchestrates entire planning workflow
|
||||
- `/workflow:tools:context-gather` - Provides context package input
|
||||
- `/workflow:tools:conflict-resolution` - Provides conflict resolution (if needed)
|
||||
- `/workflow:execute` - Executes generated tasks
|
||||
|
||||
@@ -275,7 +275,3 @@ Overall Compliance: 93/100
|
||||
Detailed report: .workflow/WFS-auth/.process/tdd-cycle-report.md
|
||||
```
|
||||
|
||||
## Related Commands
|
||||
- `/workflow:tdd-verify` - Uses this tool for verification
|
||||
- `/workflow:tools:task-generate-tdd` - Generates tasks this tool analyzes
|
||||
- `/workflow:execute` - Executes tasks before analysis
|
||||
|
||||
@@ -460,8 +460,3 @@ Synthesize Gemini analysis into standardized format:
|
||||
- ✅ Execution time < 20 minutes
|
||||
- ✅ Output follows existing test conventions
|
||||
|
||||
## Related Commands
|
||||
|
||||
- `/workflow:tools:test-context-gather` - Provides input context
|
||||
- `/workflow:tools:test-task-generate` - Consumes analysis results
|
||||
- `/workflow:test-gen` - Main test generation workflow
|
||||
|
||||
@@ -203,8 +203,3 @@ Refer to `test-context-search-agent.md` Phase 3.2 for complete `test-context-pac
|
||||
- **Framework agnostic**: Supports Jest, Mocha, pytest, RSpec, Go testing, etc.
|
||||
- **Coverage focus**: Primary goal is identifying implementation files without tests
|
||||
|
||||
## Related Commands
|
||||
|
||||
- `/workflow:test-gen` - Main test generation workflow
|
||||
- `/workflow:tools:test-concept-enhanced` - Test generation analysis
|
||||
- `/workflow:tools:test-task-generate` - Test task JSON generation
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: test-task-generate
|
||||
description: Generate test-fix task JSON with iterative test-fix-retest cycle specification using Gemini/Qwen/Codex
|
||||
description: Autonomous test-fix task generation using action-planning-agent with test-fix-retest cycle specification and discovery phase
|
||||
argument-hint: "[--use-codex] [--cli-execute] --session WFS-test-session-id"
|
||||
examples:
|
||||
- /workflow:tools:test-task-generate --session WFS-test-auth
|
||||
@@ -9,10 +9,23 @@ examples:
|
||||
- /workflow:tools:test-task-generate --cli-execute --use-codex --session WFS-test-auth
|
||||
---
|
||||
|
||||
# Test Task Generation Command
|
||||
# Autonomous Test Task Generation Command
|
||||
|
||||
## Overview
|
||||
Generate specialized test-fix task JSON with comprehensive test-fix-retest cycle specification, including Gemini diagnosis (using bug-fix template) and manual fix workflow (Codex automation only when explicitly requested).
|
||||
Autonomous test-fix task JSON generation using action-planning-agent with two-phase execution: discovery and document generation. Supports both agent-driven execution (default) and CLI tool execution modes. Generates specialized test-fix tasks with comprehensive test-fix-retest cycle specification.
|
||||
|
||||
## Core Philosophy
|
||||
- **Agent-Driven**: Delegate execution to action-planning-agent for autonomous operation
|
||||
- **Two-Phase Flow**: Discovery (context gathering) → Output (document generation)
|
||||
- **Memory-First**: Reuse loaded documents from conversation memory
|
||||
- **MCP-Enhanced**: Use MCP tools for advanced code analysis and test research
|
||||
- **Pre-Selected Templates**: Command selects correct test template based on `--cli-execute` flag **before** invoking agent
|
||||
- **Agent Simplicity**: Agent receives pre-selected template and focuses only on content generation
|
||||
- **Path Clarity**: All `focus_paths` prefer absolute paths (e.g., `D:\\project\\src\\module`), or clear relative paths from project root
|
||||
- **Test-First**: Generate comprehensive test coverage before execution
|
||||
- **Iterative Refinement**: Test-fix-retest cycle until all tests pass
|
||||
- **Surgical Fixes**: Minimal code changes, no refactoring during test fixes
|
||||
- **Auto-Revert**: Rollback all changes if max iterations reached
|
||||
|
||||
## Execution Modes
|
||||
|
||||
@@ -24,583 +37,278 @@ Generate specialized test-fix task JSON with comprehensive test-fix-retest cycle
|
||||
- **Manual Mode (Default)**: Gemini diagnosis → user applies fixes
|
||||
- **Codex Mode (`--use-codex`)**: Gemini diagnosis → Codex applies fixes with resume mechanism
|
||||
|
||||
## Core Philosophy
|
||||
- **Analysis-Driven Test Generation**: Use TEST_ANALYSIS_RESULTS.md from test-concept-enhanced
|
||||
- **Agent-Based Test Creation**: Call @code-developer agent for comprehensive test generation
|
||||
- **Coverage-First**: Generate all missing tests before execution
|
||||
- **Test Execution**: Execute complete test suite after generation
|
||||
- **Gemini Diagnosis**: Use Gemini for root cause analysis and fix suggestions (references bug-fix template)
|
||||
- **Manual Fixes First**: Apply fixes manually by default, codex only when explicitly needed
|
||||
- **Iterative Refinement**: Repeat test-analyze-fix-retest cycle until all tests pass
|
||||
- **Surgical Fixes**: Minimal code changes, no refactoring during test fixes
|
||||
- **Auto-Revert**: Rollback all changes if max iterations reached
|
||||
|
||||
## Core Responsibilities
|
||||
- Parse TEST_ANALYSIS_RESULTS.md from test-concept-enhanced
|
||||
- Extract test requirements and generation strategy
|
||||
- Parse `--use-codex` flag to determine fix mode (manual vs automated)
|
||||
- Generate test generation subtask calling @code-developer
|
||||
- Generate test execution and fix cycle task JSON with appropriate fix mode
|
||||
- Configure Gemini diagnosis workflow (bug-fix template) and manual/Codex fix application
|
||||
- Create test-oriented IMPL_PLAN.md and TODO_LIST.md with test generation phase
|
||||
|
||||
## Execution Lifecycle
|
||||
|
||||
### Phase 1: Input Validation & Discovery
|
||||
### Phase 1: Discovery & Context Loading
|
||||
**⚡ Memory-First Rule**: Skip file loading if documents already in conversation memory
|
||||
|
||||
1. **Parameter Parsing**
|
||||
- Parse `--use-codex` flag from command arguments → Controls IMPL-002 fix mode
|
||||
- Parse `--cli-execute` flag from command arguments → Controls IMPL-001 generation mode
|
||||
- Store flag values for task JSON generation
|
||||
|
||||
2. **Test Session Validation**
|
||||
- Load `.workflow/{test-session-id}/workflow-session.json`
|
||||
- Verify `workflow_type: "test_session"`
|
||||
- Extract `source_session_id` from metadata
|
||||
|
||||
3. **Test Analysis Results Loading**
|
||||
- **REQUIRED**: Load `.workflow/{test-session-id}/.process/TEST_ANALYSIS_RESULTS.md`
|
||||
- Parse test requirements by file
|
||||
- Extract test generation strategy
|
||||
- Identify test files to create with specifications
|
||||
|
||||
4. **Test Context Package Loading**
|
||||
- Load `.workflow/{test-session-id}/.process/test-context-package.json`
|
||||
- Extract test framework configuration
|
||||
- Extract coverage gaps and priorities
|
||||
- Load source session implementation summaries
|
||||
|
||||
### Phase 2: Task JSON Generation
|
||||
|
||||
Generate **TWO task JSON files**:
|
||||
1. **IMPL-001.json** - Test Generation (calls @code-developer)
|
||||
2. **IMPL-002.json** - Test Execution and Fix Cycle (calls @test-fix-agent)
|
||||
|
||||
#### IMPL-001.json - Test Generation Task
|
||||
|
||||
```json
|
||||
**Agent Context Package**:
|
||||
```javascript
|
||||
{
|
||||
"id": "IMPL-001",
|
||||
"title": "Generate comprehensive tests for [sourceSessionId]",
|
||||
"status": "pending",
|
||||
"meta": {
|
||||
"type": "test-gen",
|
||||
"agent": "@code-developer",
|
||||
"source_session": "[sourceSessionId]",
|
||||
"test_framework": "jest|pytest|cargo|detected"
|
||||
"session_id": "WFS-test-[session-id]",
|
||||
"execution_mode": "agent-mode" | "cli-execute-mode", // Determined by flag
|
||||
"task_json_template_path": "~/.claude/workflows/cli-templates/prompts/workflow/task-json-agent-mode.txt"
|
||||
| "~/.claude/workflows/cli-templates/prompts/workflow/task-json-cli-mode.txt",
|
||||
// Path selected by command based on --cli-execute flag, agent reads it
|
||||
"workflow_type": "test_session",
|
||||
"use_codex": true | false, // Determined by --use-codex flag
|
||||
"session_metadata": {
|
||||
// If in memory: use cached content
|
||||
// Else: Load from .workflow/{test-session-id}/workflow-session.json
|
||||
},
|
||||
"context": {
|
||||
"requirements": [
|
||||
"Generate comprehensive test files based on TEST_ANALYSIS_RESULTS.md",
|
||||
"Follow existing test patterns and conventions from test framework",
|
||||
"Create tests for all missing coverage identified in analysis",
|
||||
"Include happy path, error handling, edge cases, and integration tests",
|
||||
"Use test data and mocks as specified in analysis",
|
||||
"Ensure tests follow project coding standards"
|
||||
],
|
||||
"focus_paths": [
|
||||
"tests/**/*",
|
||||
"src/**/*.test.*",
|
||||
"{paths_from_analysis}"
|
||||
],
|
||||
"acceptance": [
|
||||
"All test files from TEST_ANALYSIS_RESULTS.md section 5 are created",
|
||||
"Tests follow existing test patterns and conventions",
|
||||
"Test scenarios cover happy path, errors, edge cases, integration",
|
||||
"All dependencies are properly mocked",
|
||||
"Test files are syntactically valid and can be executed",
|
||||
"Test coverage meets analysis requirements"
|
||||
],
|
||||
"depends_on": [],
|
||||
"source_context": {
|
||||
"session_id": "[sourceSessionId]",
|
||||
"test_analysis": ".workflow/[testSessionId]/.process/TEST_ANALYSIS_RESULTS.md",
|
||||
"test_context": ".workflow/[testSessionId]/.process/test-context-package.json",
|
||||
"implementation_summaries": [
|
||||
".workflow/[sourceSessionId]/.summaries/IMPL-001-summary.md"
|
||||
]
|
||||
}
|
||||
"test_analysis_results_path": ".workflow/{test-session-id}/.process/TEST_ANALYSIS_RESULTS.md",
|
||||
"test_analysis_results": {
|
||||
// If in memory: use cached content
|
||||
// Else: Load from TEST_ANALYSIS_RESULTS.md
|
||||
},
|
||||
"flow_control": {
|
||||
"pre_analysis": [
|
||||
{
|
||||
"step": "load_test_analysis",
|
||||
"action": "Load test generation requirements and strategy",
|
||||
"commands": [
|
||||
"Read(.workflow/[testSessionId]/.process/TEST_ANALYSIS_RESULTS.md)",
|
||||
"Read(.workflow/[testSessionId]/.process/test-context-package.json)"
|
||||
],
|
||||
"output_to": "test_generation_requirements",
|
||||
"on_error": "fail"
|
||||
},
|
||||
{
|
||||
"step": "load_implementation_context",
|
||||
"action": "Load source implementation for test generation context",
|
||||
"commands": [
|
||||
"bash(for f in .workflow/[sourceSessionId]/.summaries/IMPL-*-summary.md; do echo \"=== $(basename $f) ===\"&& cat \"$f\"; done)"
|
||||
],
|
||||
"output_to": "implementation_context",
|
||||
"on_error": "skip_optional"
|
||||
},
|
||||
{
|
||||
"step": "load_existing_test_patterns",
|
||||
"action": "Study existing tests for pattern reference",
|
||||
"commands": [
|
||||
"bash(find . -name \"*.test.*\" -type f)",
|
||||
"bash(# Read first 2 existing test files as examples)",
|
||||
"bash(test_files=$(find . -name \"*.test.*\" -type f | head -2))",
|
||||
"bash(for f in $test_files; do echo \"=== $f ===\"&& cat \"$f\"; done)"
|
||||
],
|
||||
"output_to": "existing_test_patterns",
|
||||
"on_error": "skip_optional"
|
||||
}
|
||||
],
|
||||
// Agent Mode (Default): Agent implements tests
|
||||
"implementation_approach": [
|
||||
{
|
||||
"step": 1,
|
||||
"title": "Generate comprehensive test suite",
|
||||
"description": "Generate comprehensive test suite based on TEST_ANALYSIS_RESULTS.md. Follow test generation strategy and create all test files listed in section 5 (Implementation Targets).",
|
||||
"modification_points": [
|
||||
"Read TEST_ANALYSIS_RESULTS.md sections 3 and 4",
|
||||
"Study existing test patterns",
|
||||
"Create test files with all required scenarios",
|
||||
"Implement happy path, error handling, edge case, and integration tests",
|
||||
"Add required mocks and fixtures"
|
||||
],
|
||||
"logic_flow": [
|
||||
"Read TEST_ANALYSIS_RESULTS.md section 3 (Test Requirements by File)",
|
||||
"Read TEST_ANALYSIS_RESULTS.md section 4 (Test Generation Strategy)",
|
||||
"Study existing test patterns from test_context.test_framework.conventions",
|
||||
"For each test file in section 5 (Implementation Targets): Create test file with specified scenarios, Implement happy path tests, Implement error handling tests, Implement edge case tests, Implement integration tests (if specified), Add required mocks and fixtures",
|
||||
"Follow test framework conventions and project standards",
|
||||
"Ensure all tests are executable and syntactically valid"
|
||||
],
|
||||
"depends_on": [],
|
||||
"output": "test_suite"
|
||||
}
|
||||
],
|
||||
|
||||
// CLI Execute Mode (--cli-execute): Use Codex command (alternative format shown below)
|
||||
"implementation_approach": [{
|
||||
"step": 1,
|
||||
"title": "Generate tests using Codex",
|
||||
"description": "Use Codex CLI to autonomously generate comprehensive test suite based on TEST_ANALYSIS_RESULTS.md",
|
||||
"modification_points": [
|
||||
"Codex loads TEST_ANALYSIS_RESULTS.md and existing test patterns",
|
||||
"Codex generates all test files listed in analysis section 5",
|
||||
"Codex ensures tests follow framework conventions"
|
||||
],
|
||||
"logic_flow": [
|
||||
"Start new Codex session",
|
||||
"Pass TEST_ANALYSIS_RESULTS.md to Codex",
|
||||
"Codex studies existing test patterns",
|
||||
"Codex generates comprehensive test suite",
|
||||
"Codex validates test syntax and executability"
|
||||
],
|
||||
"command": "bash(codex -C [focus_paths] --full-auto exec \"PURPOSE: Generate comprehensive test suite TASK: Create test files based on TEST_ANALYSIS_RESULTS.md section 5 MODE: write CONTEXT: @.workflow/WFS-test-[session]/.process/TEST_ANALYSIS_RESULTS.md @.workflow/WFS-test-[session]/.process/test-context-package.json EXPECTED: All test files with happy path, error handling, edge cases, integration tests RULES: Follow test framework conventions, ensure tests are executable\" --skip-git-repo-check -s danger-full-access)",
|
||||
"depends_on": [],
|
||||
"output": "test_generation"
|
||||
}],
|
||||
"target_files": [
|
||||
"{test_file_1 from TEST_ANALYSIS_RESULTS.md section 5}",
|
||||
"{test_file_2 from TEST_ANALYSIS_RESULTS.md section 5}",
|
||||
"{test_file_N from TEST_ANALYSIS_RESULTS.md section 5}"
|
||||
]
|
||||
"test_context_package_path": ".workflow/{test-session-id}/.process/test-context-package.json",
|
||||
"test_context_package": {
|
||||
// Existing test patterns and coverage analysis
|
||||
},
|
||||
"source_session_id": "[source-session-id]", // if exists
|
||||
"source_session_summaries": {
|
||||
// Implementation context from source session
|
||||
},
|
||||
"mcp_capabilities": {
|
||||
"code_index": true,
|
||||
"exa_code": true,
|
||||
"exa_web": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### IMPL-002.json - Test Execution & Fix Cycle Task
|
||||
**Discovery Actions**:
|
||||
1. **Load Test Session Context** (if not in memory)
|
||||
```javascript
|
||||
if (!memory.has("workflow-session.json")) {
|
||||
Read(.workflow/{test-session-id}/workflow-session.json)
|
||||
}
|
||||
```
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "IMPL-002",
|
||||
"title": "Execute and fix tests for [sourceSessionId]",
|
||||
"status": "pending",
|
||||
"meta": {
|
||||
"type": "test-fix",
|
||||
"agent": "@test-fix-agent",
|
||||
"source_session": "[sourceSessionId]",
|
||||
"test_framework": "jest|pytest|cargo|detected",
|
||||
"max_iterations": 5,
|
||||
"use_codex": false // Set to true if --use-codex flag present
|
||||
},
|
||||
"context": {
|
||||
"requirements": [
|
||||
"Execute complete test suite (generated in IMPL-001)",
|
||||
"Diagnose test failures using Gemini analysis with bug-fix template",
|
||||
"Present fixes to user for manual application (default)",
|
||||
"Use Codex ONLY if user explicitly requests automation",
|
||||
"Iterate until all tests pass or max iterations reached",
|
||||
"Revert changes if unable to fix within iteration limit"
|
||||
],
|
||||
"focus_paths": [
|
||||
"tests/**/*",
|
||||
"src/**/*.test.*",
|
||||
"{implementation_files_from_source_session}"
|
||||
],
|
||||
"acceptance": [
|
||||
"All tests pass successfully (100% pass rate)",
|
||||
"No test failures or errors in final run",
|
||||
"Code changes are minimal and surgical",
|
||||
"All fixes are verified through retest",
|
||||
"Iteration logs document fix progression"
|
||||
],
|
||||
"depends_on": ["IMPL-001"],
|
||||
"source_context": {
|
||||
"session_id": "[sourceSessionId]",
|
||||
"test_generation_summary": ".workflow/[testSessionId]/.summaries/IMPL-001-summary.md",
|
||||
"implementation_summaries": [
|
||||
".workflow/[sourceSessionId]/.summaries/IMPL-001-summary.md"
|
||||
]
|
||||
}
|
||||
},
|
||||
"flow_control": {
|
||||
"pre_analysis": [
|
||||
{
|
||||
"step": "load_source_session_summaries",
|
||||
"action": "Load implementation context from source session",
|
||||
"commands": [
|
||||
"bash(find .workflow/[sourceSessionId]/.summaries/ -name 'IMPL-*-summary.md' 2>/dev/null)",
|
||||
"bash(for f in .workflow/[sourceSessionId]/.summaries/IMPL-*-summary.md; do echo \"=== $(basename $f) ===\"&& cat \"$f\"; done)"
|
||||
],
|
||||
"output_to": "implementation_context",
|
||||
"on_error": "skip_optional"
|
||||
},
|
||||
{
|
||||
"step": "discover_test_framework",
|
||||
"action": "Identify test framework and test command",
|
||||
"commands": [
|
||||
"bash(jq -r '.scripts.test // \"npm test\"' package.json 2>/dev/null || echo 'pytest' || echo 'cargo test')",
|
||||
"bash([ -f 'package.json' ] && echo 'jest/npm' || [ -f 'pytest.ini' ] && echo 'pytest' || [ -f 'Cargo.toml' ] && echo 'cargo' || echo 'unknown')"
|
||||
],
|
||||
"output_to": "test_command",
|
||||
"on_error": "fail"
|
||||
},
|
||||
{
|
||||
"step": "analyze_test_coverage",
|
||||
"action": "Analyze test coverage and identify missing tests",
|
||||
"commands": [
|
||||
"bash(find . -name \"*.test.*\" -type f)",
|
||||
"bash(rg \"test|describe|it|def test_\" -g \"*.test.*\")",
|
||||
"bash(# Count implementation files vs test files)",
|
||||
"bash(impl_count=$(find [changed_files_dirs] -type f \\( -name '*.ts' -o -name '*.js' -o -name '*.py' \\) ! -name '*.test.*' 2>/dev/null | wc -l))",
|
||||
"bash(test_count=$(find . -name \"*.test.*\" -type f | wc -l))",
|
||||
"bash(echo \"Implementation files: $impl_count, Test files: $test_count\")"
|
||||
],
|
||||
"output_to": "test_coverage_analysis",
|
||||
"on_error": "skip_optional"
|
||||
},
|
||||
{
|
||||
"step": "identify_files_without_tests",
|
||||
"action": "List implementation files that lack corresponding test files",
|
||||
"commands": [
|
||||
"bash(# For each changed file from source session, check if test exists)",
|
||||
"bash(for file in [changed_files]; do test_file=$(echo $file | sed 's/\\(.*\\)\\.\\(ts\\|js\\|py\\)$/\\1.test.\\2/'); [ ! -f \"$test_file\" ] && echo \"$file\"; done)"
|
||||
],
|
||||
"output_to": "files_without_tests",
|
||||
"on_error": "skip_optional"
|
||||
},
|
||||
{
|
||||
"step": "prepare_test_environment",
|
||||
"action": "Ensure test environment is ready",
|
||||
"commands": [
|
||||
"bash([ -f 'package.json' ] && npm install 2>/dev/null || true)",
|
||||
"bash([ -f 'requirements.txt' ] && pip install -q -r requirements.txt 2>/dev/null || true)"
|
||||
],
|
||||
"output_to": "environment_status",
|
||||
"on_error": "skip_optional"
|
||||
}
|
||||
],
|
||||
"implementation_approach": [
|
||||
{
|
||||
"step": 1,
|
||||
"title": "Execute iterative test-fix-retest cycle",
|
||||
"description": "Execute iterative test-fix-retest cycle using Gemini diagnosis (bug-fix template) and manual fixes (Codex only if meta.use_codex=true). Max 5 iterations with automatic revert on failure.",
|
||||
"test_fix_cycle": {
|
||||
"max_iterations": 5,
|
||||
"cycle_pattern": "test → gemini_diagnose → manual_fix (or codex if needed) → retest",
|
||||
"tools": {
|
||||
"test_execution": "bash(test_command)",
|
||||
"diagnosis": "gemini (MODE: analysis, uses bug-fix template)",
|
||||
"fix_application": "manual (default) or codex exec resume --last (if explicitly needed)",
|
||||
"verification": "bash(test_command) + regression_check"
|
||||
},
|
||||
"exit_conditions": {
|
||||
"success": "all_tests_pass",
|
||||
"failure": "max_iterations_reached",
|
||||
"error": "test_command_not_found"
|
||||
}
|
||||
},
|
||||
"modification_points": [
|
||||
"PHASE 1: Initial Test Execution",
|
||||
" 1.1. Discover test command from framework detection",
|
||||
" 1.2. Execute initial test run: bash([test_command])",
|
||||
" 1.3. Parse test output and count failures",
|
||||
" 1.4. If all pass → Skip to PHASE 3 (success)",
|
||||
" 1.5. If failures → Store failure output, proceed to PHASE 2",
|
||||
"",
|
||||
"PHASE 2: Iterative Test-Fix-Retest Cycle (max 5 iterations)",
|
||||
" Note: This phase handles test failures, NOT test generation failures",
|
||||
" Initialize: max_iterations=5, current_iteration=0",
|
||||
" ",
|
||||
" WHILE (tests failing AND current_iteration < max_iterations):",
|
||||
" current_iteration++",
|
||||
" ",
|
||||
" STEP 2.1: Gemini Diagnosis (using bug-fix template)",
|
||||
" - Prepare diagnosis context:",
|
||||
" * Test failure output from previous run",
|
||||
" * Source files from focus_paths",
|
||||
" * Implementation summaries from source session",
|
||||
" - Execute Gemini analysis with bug-fix template:",
|
||||
" bash(cd .workflow/WFS-test-[session]/.process && gemini \"",
|
||||
" PURPOSE: Diagnose test failure iteration [N] and propose minimal fix",
|
||||
" TASK: Systematic bug analysis and fix recommendations for test failure",
|
||||
" MODE: analysis",
|
||||
" CONTEXT: @CLAUDE.md,**/*CLAUDE.md",
|
||||
" Test output: [test_failures]",
|
||||
" Source files: [focus_paths]",
|
||||
" Implementation: [implementation_context]",
|
||||
" EXPECTED: Root cause analysis, code path tracing, targeted fixes",
|
||||
" RULES: $(cat ~/.claude/workflows/cli-templates/prompts/analysis/01-diagnose-bug-root-cause.txt) | Bug: [test_failure_description]",
|
||||
" Minimal surgical fixes only - no refactoring",
|
||||
" \" > fix-iteration-[N]-diagnosis.md)",
|
||||
" - Parse diagnosis → extract fix_suggestion and target_files",
|
||||
" - Present fix to user for manual application (default)",
|
||||
" ",
|
||||
" STEP 2.2: Apply Fix (Based on meta.use_codex Flag)",
|
||||
" ",
|
||||
" IF meta.use_codex = false (DEFAULT):",
|
||||
" - Present Gemini diagnosis to user for manual fix",
|
||||
" - User applies fix based on diagnosis recommendations",
|
||||
" - Stage changes: bash(git add -A)",
|
||||
" - Store fix log: .process/fix-iteration-[N]-changes.log",
|
||||
" ",
|
||||
" IF meta.use_codex = true (--use-codex flag present):",
|
||||
" - Stage current changes (if valid git repo): bash(git add -A)",
|
||||
" - First iteration: Start new Codex session",
|
||||
" codex -C [project_root] --full-auto exec \"",
|
||||
" PURPOSE: Fix test failure iteration 1",
|
||||
" TASK: [fix_suggestion from Gemini]",
|
||||
" MODE: write",
|
||||
" CONTEXT: Diagnosis: .workflow/.process/fix-iteration-1-diagnosis.md",
|
||||
" Target files: [target_files]",
|
||||
" Implementation context: [implementation_context]",
|
||||
" EXPECTED: Minimal code changes to resolve test failure",
|
||||
" RULES: Apply ONLY suggested changes, no refactoring",
|
||||
" Preserve existing code style",
|
||||
" \" --skip-git-repo-check -s danger-full-access",
|
||||
" - Subsequent iterations: Resume session for context continuity",
|
||||
" codex exec \"",
|
||||
" CONTINUE TO NEXT FIX:",
|
||||
" Iteration [N] of 5: Fix test failure",
|
||||
" ",
|
||||
" PURPOSE: Fix remaining test failures",
|
||||
" TASK: [fix_suggestion from Gemini iteration N]",
|
||||
" CONTEXT: Previous fixes applied, diagnosis: .process/fix-iteration-[N]-diagnosis.md",
|
||||
" EXPECTED: Surgical fix for current failure",
|
||||
" RULES: Build on previous fixes, maintain consistency",
|
||||
" \" resume --last --skip-git-repo-check -s danger-full-access",
|
||||
" - Store fix log: .process/fix-iteration-[N]-changes.log",
|
||||
" ",
|
||||
" STEP 2.3: Retest and Verification",
|
||||
" - Re-execute test suite: bash([test_command])",
|
||||
" - Capture output: .process/fix-iteration-[N]-retest.log",
|
||||
" - Count failures: bash(grep -c 'FAIL\\|ERROR' .process/fix-iteration-[N]-retest.log)",
|
||||
" - Check for regression:",
|
||||
" IF new_failures > previous_failures:",
|
||||
" WARN: Regression detected",
|
||||
" Include in next Gemini diagnosis context",
|
||||
" - Analyze results:",
|
||||
" IF all_tests_pass:",
|
||||
" BREAK loop → Proceed to PHASE 3",
|
||||
" ELSE:",
|
||||
" Update test_failures context",
|
||||
" CONTINUE loop",
|
||||
" ",
|
||||
" IF max_iterations reached AND tests still failing:",
|
||||
" EXECUTE: git reset --hard HEAD (revert all changes)",
|
||||
" MARK: Task status = blocked",
|
||||
" GENERATE: Detailed failure report with iteration logs",
|
||||
" EXIT: Require manual intervention",
|
||||
"",
|
||||
"PHASE 3: Final Validation and Certification",
|
||||
" 3.1. Execute final confirmation test run",
|
||||
" 3.2. Generate success summary:",
|
||||
" - Iterations required: [current_iteration]",
|
||||
" - Fixes applied: [summary from iteration logs]",
|
||||
" - Test results: All passing ✅",
|
||||
" 3.3. Mark task status: completed",
|
||||
" 3.4. Update TODO_LIST.md: Mark as ✅",
|
||||
" 3.5. Certify code: APPROVED for deployment"
|
||||
],
|
||||
"logic_flow": [
|
||||
"Load source session implementation context",
|
||||
"Discover test framework and command",
|
||||
"PHASE 0: Test Coverage Check",
|
||||
" Analyze existing test files",
|
||||
" Identify files without tests",
|
||||
" IF tests missing:",
|
||||
" Report to user (no automatic generation)",
|
||||
" Wait for user to generate tests or request automation",
|
||||
" ELSE:",
|
||||
" Skip to Phase 1",
|
||||
"PHASE 1: Initial Test Execution",
|
||||
" Execute test suite",
|
||||
" IF all pass → Success (Phase 3)",
|
||||
" ELSE → Store failures, proceed to Phase 2",
|
||||
"PHASE 2: Iterative Fix Cycle (max 5 iterations)",
|
||||
" LOOP (max 5 times):",
|
||||
" 1. Gemini diagnoses failure with bug-fix template → fix suggestion",
|
||||
" 2. Check meta.use_codex flag:",
|
||||
" - IF false (default): Present fix to user for manual application",
|
||||
" - IF true (--use-codex): Codex applies fix with resume for continuity",
|
||||
" 3. Retest and check results",
|
||||
" 4. IF pass → Exit loop to Phase 3",
|
||||
" 5. ELSE → Continue with updated context",
|
||||
" IF max iterations → Revert + report failure",
|
||||
"PHASE 3: Final Validation",
|
||||
" Confirm all tests pass",
|
||||
" Generate summary (include test generation info)",
|
||||
" Certify code APPROVED"
|
||||
],
|
||||
"error_handling": {
|
||||
"max_iterations_reached": {
|
||||
"action": "revert_all_changes",
|
||||
"commands": [
|
||||
"bash(git reset --hard HEAD)",
|
||||
"bash(jq '.status = \"blocked\"' .workflow/[session]/.task/IMPL-001.json > temp.json && mv temp.json .workflow/[session]/.task/IMPL-001.json)"
|
||||
],
|
||||
"report": "Generate failure report with iteration logs in .summaries/IMPL-001-failure-report.md"
|
||||
},
|
||||
"test_command_fails": {
|
||||
"action": "treat_as_test_failure",
|
||||
"context": "Use stderr as failure context for Gemini diagnosis"
|
||||
},
|
||||
"codex_apply_fails": {
|
||||
"action": "retry_once_then_skip",
|
||||
"fallback": "Mark iteration as skipped, continue to next"
|
||||
},
|
||||
"gemini_diagnosis_fails": {
|
||||
"action": "retry_with_simplified_context",
|
||||
"fallback": "Use previous diagnosis, continue"
|
||||
},
|
||||
"regression_detected": {
|
||||
"action": "log_warning_continue",
|
||||
"context": "Include regression info in next Gemini diagnosis"
|
||||
}
|
||||
},
|
||||
"depends_on": [],
|
||||
"output": "test_fix_results"
|
||||
}
|
||||
],
|
||||
"target_files": [
|
||||
"Auto-discovered from test failures",
|
||||
"Extracted from Gemini diagnosis each iteration",
|
||||
"Format: file:function:lines or file (for new files)"
|
||||
],
|
||||
"codex_session": {
|
||||
"strategy": "resume_for_continuity",
|
||||
"first_iteration": "codex exec \"fix iteration 1\" --full-auto",
|
||||
"subsequent_iterations": "codex exec \"fix iteration N\" resume --last",
|
||||
"benefits": [
|
||||
"Maintains conversation context across fixes",
|
||||
"Remembers previous decisions and patterns",
|
||||
"Ensures consistency in fix approach",
|
||||
"Reduces redundant context injection"
|
||||
]
|
||||
}
|
||||
}
|
||||
2. **Load TEST_ANALYSIS_RESULTS.md** (if not in memory, REQUIRED)
|
||||
```javascript
|
||||
if (!memory.has("TEST_ANALYSIS_RESULTS.md")) {
|
||||
Read(.workflow/{test-session-id}/.process/TEST_ANALYSIS_RESULTS.md)
|
||||
}
|
||||
```
|
||||
|
||||
3. **Load Test Context Package** (if not in memory)
|
||||
```javascript
|
||||
if (!memory.has("test-context-package.json")) {
|
||||
Read(.workflow/{test-session-id}/.process/test-context-package.json)
|
||||
}
|
||||
```
|
||||
|
||||
4. **Load Source Session Summaries** (if source_session_id exists)
|
||||
```javascript
|
||||
if (sessionMetadata.source_session_id) {
|
||||
const summaryFiles = Bash("find .workflow/{source-session-id}/.summaries/ -name 'IMPL-*-summary.md'")
|
||||
summaryFiles.forEach(file => Read(file))
|
||||
}
|
||||
```
|
||||
|
||||
5. **Code Analysis with Native Tools** (optional - enhance understanding)
|
||||
```bash
|
||||
# Find test files and patterns
|
||||
find . -name "*test*" -type f
|
||||
rg "describe|it\(|test\(" -g "*.ts"
|
||||
```
|
||||
|
||||
6. **MCP External Research** (optional - gather test best practices)
|
||||
```javascript
|
||||
// Get external test examples and patterns
|
||||
mcp__exa__get_code_context_exa(
|
||||
query="TypeScript test generation best practices jest",
|
||||
tokensNum="dynamic"
|
||||
)
|
||||
```
|
||||
|
||||
### Phase 2: Agent Execution (Document Generation)
|
||||
|
||||
**Pre-Agent Template Selection** (Command decides path before invoking agent):
|
||||
```javascript
|
||||
// Command checks flag and selects template PATH (not content)
|
||||
const templatePath = hasCliExecuteFlag
|
||||
? "~/.claude/workflows/cli-templates/prompts/workflow/task-json-cli-mode.txt"
|
||||
: "~/.claude/workflows/cli-templates/prompts/workflow/task-json-agent-mode.txt";
|
||||
```
|
||||
|
||||
**Agent Invocation**:
|
||||
```javascript
|
||||
Task(
|
||||
subagent_type="action-planning-agent",
|
||||
description="Generate test-fix task JSON and implementation plan",
|
||||
prompt=`
|
||||
## Execution Context
|
||||
|
||||
**Session ID**: WFS-test-{session-id}
|
||||
**Workflow Type**: Test Session
|
||||
**Execution Mode**: {agent-mode | cli-execute-mode}
|
||||
**Task JSON Template Path**: {template_path}
|
||||
**Use Codex**: {true | false}
|
||||
|
||||
## Phase 1: Discovery Results (Provided Context)
|
||||
|
||||
### Test Session Metadata
|
||||
{session_metadata_content}
|
||||
- source_session_id: {source_session_id} (if exists)
|
||||
- workflow_type: "test_session"
|
||||
|
||||
### TEST_ANALYSIS_RESULTS.md (REQUIRED)
|
||||
{test_analysis_results_content}
|
||||
- Coverage Assessment
|
||||
- Test Framework & Conventions
|
||||
- Test Requirements by File
|
||||
- Test Generation Strategy
|
||||
- Implementation Targets
|
||||
- Success Criteria
|
||||
|
||||
### Test Context Package
|
||||
{test_context_package_summary}
|
||||
- Existing test patterns, framework config, coverage analysis
|
||||
|
||||
### Source Session Implementation Context (Optional)
|
||||
{source_session_summaries}
|
||||
- Implementation context from completed session
|
||||
|
||||
### MCP Analysis Results (Optional)
|
||||
**Code Structure**: {mcp_code_index_results}
|
||||
**External Research**: {mcp_exa_research_results}
|
||||
|
||||
## Phase 2: Test Task Document Generation
|
||||
|
||||
**Agent Configuration Reference**: All test task generation rules, test-fix cycle structure, quality standards, and execution details are defined in action-planning-agent.
|
||||
|
||||
Refer to: @.claude/agents/action-planning-agent.md for:
|
||||
- Test Task Decomposition Standards
|
||||
- Test-Fix-Retest Cycle Requirements
|
||||
- 5-Field Task JSON Schema
|
||||
- IMPL_PLAN.md Structure (Test variant)
|
||||
- TODO_LIST.md Format
|
||||
- Test Execution Flow & Quality Validation
|
||||
|
||||
### Test-Specific Requirements Summary
|
||||
|
||||
#### Task Structure Philosophy
|
||||
- **Minimum 2 tasks**: IMPL-001 (test generation) + IMPL-002 (test execution & fix)
|
||||
- **Expandable**: Add IMPL-003+ for complex projects (per-module, integration, etc.)
|
||||
- IMPL-001: Uses @code-developer or CLI execution
|
||||
- IMPL-002: Uses @test-fix-agent with iterative fix cycle
|
||||
|
||||
#### Test-Fix Cycle Configuration
|
||||
- **Max Iterations**: 5 (for IMPL-002)
|
||||
- **Diagnosis Tool**: Gemini with bug-fix template
|
||||
- **Fix Application**: Manual (default) or Codex (if --use-codex flag)
|
||||
- **Cycle Pattern**: test → gemini_diagnose → manual_fix (or codex) → retest
|
||||
- **Exit Conditions**: All tests pass OR max iterations reached (auto-revert)
|
||||
|
||||
#### Required Outputs Summary
|
||||
|
||||
##### 1. Test Task JSON Files (.task/IMPL-*.json)
|
||||
- **Location**: `.workflow/{test-session-id}/.task/`
|
||||
- **Template**: Read from `{template_path}` (pre-selected by command based on `--cli-execute` flag)
|
||||
- **Schema**: 5-field structure with test-specific metadata
|
||||
- IMPL-001: `meta.type: "test-gen"`, `meta.agent: "@code-developer"`
|
||||
- IMPL-002: `meta.type: "test-fix"`, `meta.agent: "@test-fix-agent"`, `meta.use_codex: {use_codex}`
|
||||
- `flow_control`: Test generation approach (IMPL-001) or test-fix cycle (IMPL-002)
|
||||
- **Details**: See action-planning-agent.md § Test Task JSON Generation
|
||||
|
||||
##### 2. IMPL_PLAN.md (Test Variant)
|
||||
- **Location**: `.workflow/{test-session-id}/IMPL_PLAN.md`
|
||||
- **Template**: `~/.claude/workflows/cli-templates/prompts/workflow/impl-plan-template.txt`
|
||||
- **Test-Specific Frontmatter**: workflow_type="test_session", test_framework, source_session_id
|
||||
- **Test-Fix-Retest Cycle Section**: Iterative fix cycle with Gemini diagnosis
|
||||
- **Details**: See action-planning-agent.md § Test Implementation Plan Creation
|
||||
|
||||
##### 3. TODO_LIST.md
|
||||
- **Location**: `.workflow/{test-session-id}/TODO_LIST.md`
|
||||
- **Format**: Task list with test generation and execution phases
|
||||
- **Status**: [ ] (pending), [x] (completed)
|
||||
- **Details**: See action-planning-agent.md § TODO List Generation
|
||||
|
||||
### Agent Execution Summary
|
||||
|
||||
**Key Steps** (Detailed instructions in action-planning-agent.md):
|
||||
1. Load task JSON template from provided path
|
||||
2. Parse TEST_ANALYSIS_RESULTS.md for test requirements
|
||||
3. Generate IMPL-001 (test generation) task JSON
|
||||
4. Generate IMPL-002 (test execution & fix) task JSON with use_codex flag
|
||||
5. Generate additional IMPL-*.json if project complexity requires
|
||||
6. Create IMPL_PLAN.md using test template variant
|
||||
7. Generate TODO_LIST.md with test task indicators
|
||||
8. Update session state with test metadata
|
||||
|
||||
**Quality Gates** (Full checklist in action-planning-agent.md):
|
||||
- ✓ Minimum 2 tasks created (IMPL-001 + IMPL-002)
|
||||
- ✓ IMPL-001 has test generation approach from TEST_ANALYSIS_RESULTS.md
|
||||
- ✓ IMPL-002 has test-fix cycle with correct use_codex flag
|
||||
- ✓ Test framework configuration integrated
|
||||
- ✓ Source session context referenced (if exists)
|
||||
- ✓ MCP tool integration added
|
||||
- ✓ Documents follow test template structure
|
||||
|
||||
## Output
|
||||
|
||||
Generate all three documents and report completion status:
|
||||
- Test task JSON files created: N files (minimum 2)
|
||||
- Test requirements integrated: TEST_ANALYSIS_RESULTS.md
|
||||
- Test context integrated: existing patterns and coverage
|
||||
- Source session context: {source_session_id} summaries (if exists)
|
||||
- MCP enhancements: code-index, exa-research
|
||||
- Session ready for test execution: /workflow:execute or /workflow:test-cycle-execute
|
||||
`
|
||||
)
|
||||
```
|
||||
|
||||
### Agent Context Passing
|
||||
|
||||
**Memory-Aware Context Assembly**:
|
||||
```javascript
|
||||
// Assemble context package for agent
|
||||
const agentContext = {
|
||||
session_id: "WFS-test-[id]",
|
||||
workflow_type: "test_session",
|
||||
use_codex: hasUseCodexFlag,
|
||||
|
||||
// Use memory if available, else load
|
||||
session_metadata: memory.has("workflow-session.json")
|
||||
? memory.get("workflow-session.json")
|
||||
: Read(.workflow/WFS-test-[id]/workflow-session.json),
|
||||
|
||||
test_analysis_results_path: ".workflow/WFS-test-[id]/.process/TEST_ANALYSIS_RESULTS.md",
|
||||
|
||||
test_analysis_results: memory.has("TEST_ANALYSIS_RESULTS.md")
|
||||
? memory.get("TEST_ANALYSIS_RESULTS.md")
|
||||
: Read(".workflow/WFS-test-[id]/.process/TEST_ANALYSIS_RESULTS.md"),
|
||||
|
||||
test_context_package_path: ".workflow/WFS-test-[id]/.process/test-context-package.json",
|
||||
|
||||
test_context_package: memory.has("test-context-package.json")
|
||||
? memory.get("test-context-package.json")
|
||||
: Read(".workflow/WFS-test-[id]/.process/test-context-package.json"),
|
||||
|
||||
// Load source session summaries if exists
|
||||
source_session_id: session_metadata.source_session_id || null,
|
||||
|
||||
source_session_summaries: session_metadata.source_session_id
|
||||
? loadSourceSummaries(session_metadata.source_session_id)
|
||||
: null,
|
||||
|
||||
// Optional MCP enhancements
|
||||
mcp_analysis: executeMcpDiscovery()
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 3: IMPL_PLAN.md Generation
|
||||
## Test Task Structure Reference
|
||||
|
||||
#### Document Structure
|
||||
```markdown
|
||||
---
|
||||
identifier: WFS-test-[session-id]
|
||||
source_session: WFS-[source-session-id]
|
||||
workflow_type: test_session
|
||||
test_framework: jest|pytest|cargo|detected
|
||||
---
|
||||
This section provides quick reference for test task JSON structure. For complete implementation details, see the agent invocation prompt in Phase 2 above.
|
||||
|
||||
# Test Validation Plan: [Source Session Topic]
|
||||
|
||||
## Summary
|
||||
Execute comprehensive test suite for implementation from session WFS-[source-session-id].
|
||||
Diagnose and fix all test failures using iterative Gemini analysis and Codex execution.
|
||||
|
||||
## Source Session Context
|
||||
- **Implementation Session**: WFS-[source-session-id]
|
||||
- **Completed Tasks**: IMPL-001, IMPL-002, ...
|
||||
- **Changed Files**: [list from git log]
|
||||
- **Implementation Summaries**: [references to source session summaries]
|
||||
|
||||
## Test Framework
|
||||
- **Detected Framework**: jest|pytest|cargo|other
|
||||
- **Test Command**: npm test|pytest|cargo test
|
||||
- **Test Files**: [discovered test files]
|
||||
- **Coverage**: [estimated test coverage]
|
||||
|
||||
## Test-Fix-Retest Cycle
|
||||
- **Max Iterations**: 5
|
||||
- **Diagnosis Tool**: Gemini (analysis mode with bug-fix template from bug-index.md)
|
||||
- **Fix Tool**: Manual (default, meta.use_codex=false) or Codex (if --use-codex flag, meta.use_codex=true)
|
||||
- **Verification**: Bash test execution + regression check
|
||||
|
||||
### Cycle Workflow
|
||||
1. **Initial Test**: Execute full suite, capture failures
|
||||
2. **Iterative Fix Loop** (max 5 times):
|
||||
- Gemini diagnoses failure using bug-fix template → surgical fix suggestion
|
||||
- Check meta.use_codex flag:
|
||||
- If false (default): Present fix to user for manual application
|
||||
- If true (--use-codex): Codex applies fix with resume for context continuity
|
||||
- Retest and verify (check for regressions)
|
||||
- Continue until all pass or max iterations reached
|
||||
3. **Final Validation**: Confirm all tests pass, certify code
|
||||
|
||||
### Error Recovery
|
||||
- **Max iterations reached**: Revert all changes, report failure
|
||||
- **Test command fails**: Treat as test failure, diagnose with Gemini
|
||||
- **Codex fails**: Retry once, skip iteration if still failing
|
||||
- **Regression detected**: Log warning, include in next diagnosis
|
||||
|
||||
## Task Breakdown
|
||||
- **IMPL-001**: Execute and validate tests with iterative fix cycle
|
||||
|
||||
## Implementation Strategy
|
||||
- **Phase 1**: Initial test execution and failure capture
|
||||
- **Phase 2**: Iterative Gemini diagnosis + Codex fix + retest
|
||||
- **Phase 3**: Final validation and code certification
|
||||
|
||||
## Success Criteria
|
||||
- All tests pass (100% pass rate)
|
||||
- No test failures or errors in final run
|
||||
- Minimal, surgical code changes
|
||||
- Iteration logs document fix progression
|
||||
- Code certified APPROVED for deployment
|
||||
```
|
||||
|
||||
### Phase 4: TODO_LIST.md Generation
|
||||
|
||||
```markdown
|
||||
# Tasks: Test Validation for [Source Session]
|
||||
|
||||
## Task Progress
|
||||
- [ ] **IMPL-001**: Execute and validate tests with iterative fix cycle → [📋](./.task/IMPL-001.json)
|
||||
|
||||
## Execution Details
|
||||
- **Source Session**: WFS-[source-session-id]
|
||||
- **Test Framework**: jest|pytest|cargo
|
||||
- **Max Iterations**: 5
|
||||
- **Tools**: Gemini diagnosis + Codex resume fixes
|
||||
|
||||
## Status Legend
|
||||
- `- [ ]` = Pending
|
||||
- `- [x]` = Completed
|
||||
```
|
||||
**Quick Reference**:
|
||||
- Minimum 2 tasks: IMPL-001 (test-gen) + IMPL-002 (test-fix)
|
||||
- Expandable for complex projects (IMPL-003+)
|
||||
- IMPL-001: `meta.agent: "@code-developer"`, test generation approach
|
||||
- IMPL-002: `meta.agent: "@test-fix-agent"`, `meta.use_codex: {flag}`, test-fix cycle
|
||||
- See Phase 2 agent prompt for full schema and requirements
|
||||
|
||||
## Output Files Structure
|
||||
```
|
||||
@@ -648,29 +356,42 @@ Diagnose and fix all test failures using iterative Gemini analysis and Codex exe
|
||||
## Integration & Usage
|
||||
|
||||
### Command Chain
|
||||
- **Called By**: `/workflow:test-gen` (Phase 4)
|
||||
- **Calls**: None (terminal command)
|
||||
- **Followed By**: `/workflow:execute` (user-triggered)
|
||||
- **Called By**: `/workflow:test-gen` (Phase 4), `/workflow:test-fix-gen` (Phase 4)
|
||||
- **Invokes**: `action-planning-agent` for autonomous task generation
|
||||
- **Followed By**: `/workflow:execute` or `/workflow:test-cycle-execute` (user-triggered)
|
||||
|
||||
### Basic Usage
|
||||
```bash
|
||||
# Manual fix mode (default)
|
||||
# Agent mode (default, autonomous execution)
|
||||
/workflow:tools:test-task-generate --session WFS-test-auth
|
||||
|
||||
# Automated Codex fix mode
|
||||
# With automated Codex fixes for IMPL-002
|
||||
/workflow:tools:test-task-generate --use-codex --session WFS-test-auth
|
||||
|
||||
# CLI execution mode for IMPL-001 test generation
|
||||
/workflow:tools:test-task-generate --cli-execute --session WFS-test-auth
|
||||
|
||||
# Both flags combined
|
||||
/workflow:tools:test-task-generate --cli-execute --use-codex --session WFS-test-auth
|
||||
```
|
||||
|
||||
### Flag Behavior
|
||||
- **No flag**: `meta.use_codex=false`, manual fixes presented to user
|
||||
- **--use-codex**: `meta.use_codex=true`, Codex automatically applies fixes with resume mechanism
|
||||
### Execution Modes
|
||||
- **Agent mode** (default): Uses `action-planning-agent` with agent-mode task template
|
||||
- **CLI mode** (`--cli-execute`): Uses Gemini/Qwen/Codex with cli-mode task template for IMPL-001
|
||||
- **Codex fixes** (`--use-codex`): Enables automated fixes in IMPL-002 task
|
||||
|
||||
## Related Commands
|
||||
- `/workflow:test-gen` - Creates test session and calls this tool
|
||||
- `/workflow:tools:context-gather` - Provides cross-session context
|
||||
- `/workflow:tools:concept-enhanced` - Provides test strategy analysis
|
||||
- `/workflow:execute` - Executes the generated test-fix task
|
||||
- `@test-fix-agent` - Agent that executes the iterative test-fix cycle
|
||||
### Flag Behavior
|
||||
- **No flags**: `meta.use_codex=false` (manual fixes), agent-mode generation
|
||||
- **--use-codex**: `meta.use_codex=true` (Codex automated fixes with resume mechanism in IMPL-002)
|
||||
- **--cli-execute**: Uses CLI tool execution mode for IMPL-001 test generation
|
||||
- **Both flags**: CLI generation + automated Codex fixes
|
||||
|
||||
### Output
|
||||
- Test task JSON files in `.task/` directory (minimum 2: IMPL-001.json + IMPL-002.json)
|
||||
- IMPL_PLAN.md with test generation and fix cycle strategy
|
||||
- TODO_LIST.md with test task indicators
|
||||
- Session state updated with test metadata
|
||||
- MCP enhancements integrated (if available)
|
||||
|
||||
## Agent Execution Notes
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,480 +0,0 @@
|
||||
---
|
||||
name: batch-generate
|
||||
description: Prompt-driven batch UI generation using target-style-centric parallel execution with design token application
|
||||
argument-hint: [--targets "<list>"] [--target-type "page|component"] [--device-type "desktop|mobile|tablet|responsive"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*), mcp__exa__web_search_exa(*)
|
||||
---
|
||||
|
||||
# Batch Generate UI Prototypes (/workflow:ui-design:batch-generate)
|
||||
|
||||
## Overview
|
||||
Prompt-driven UI generation with intelligent target extraction and **target-style-centric batch execution**. Each agent handles all layouts for one target × style combination.
|
||||
|
||||
**Strategy**: Prompt → Targets → Batched Generation
|
||||
- **Prompt-driven**: Describe what to build, command extracts targets
|
||||
- **Agent scope**: Each of `T × S` agents generates `L` layouts
|
||||
- **Parallel batching**: Max 6 concurrent agents for optimal throughput
|
||||
- **Component isolation**: Complete task independence
|
||||
- **Style-aware**: HTML adapts to design_attributes
|
||||
- **Self-contained CSS**: Direct token values (no var() refs)
|
||||
|
||||
**Supports**: Pages (full layouts) and components (isolated elements)
|
||||
|
||||
## Phase 1: Setup & Validation
|
||||
|
||||
### Step 1: Parse Prompt & Resolve Configuration
|
||||
```bash
|
||||
# Parse required parameters
|
||||
prompt_text = --prompt
|
||||
device_type = --device-type OR "responsive"
|
||||
|
||||
# Extract targets from prompt
|
||||
IF --targets:
|
||||
target_list = split_and_clean(--targets)
|
||||
ELSE:
|
||||
target_list = extract_targets_from_prompt(prompt_text) # See helpers
|
||||
IF NOT target_list: target_list = ["home"] # Fallback
|
||||
|
||||
# Detect target type
|
||||
target_type = --target-type OR detect_target_type(target_list)
|
||||
|
||||
# Resolve base path
|
||||
IF --base-path:
|
||||
base_path = --base-path
|
||||
ELSE IF --session:
|
||||
bash(find .workflow/WFS-{session} -type d -name "design-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
|
||||
ELSE:
|
||||
bash(find .workflow -type d -name "design-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
|
||||
|
||||
# Get variant counts
|
||||
style_variants = --style-variants OR bash(ls {base_path}/style-extraction/style-* -d | wc -l)
|
||||
layout_variants = --layout-variants OR 3
|
||||
```
|
||||
|
||||
**Output**: `base_path`, `target_list[]`, `target_type`, `device_type`, `style_variants`, `layout_variants`
|
||||
|
||||
### Step 2: Validate Design Tokens
|
||||
```bash
|
||||
# Check design tokens exist
|
||||
bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
|
||||
|
||||
# Load design space analysis (optional, from intermediates)
|
||||
IF exists({base_path}/.intermediates/style-analysis/design-space-analysis.json):
|
||||
design_space_analysis = Read({base_path}/.intermediates/style-analysis/design-space-analysis.json)
|
||||
```
|
||||
|
||||
**Output**: `design_tokens_valid`, `design_space_analysis`
|
||||
|
||||
### Step 3: Gather Layout Inspiration (Reuse or Create)
|
||||
```bash
|
||||
# Check if layout inspirations already exist from layout-extract phase
|
||||
inspiration_source = "{base_path}/.intermediates/layout-analysis/inspirations"
|
||||
|
||||
FOR target IN target_list:
|
||||
# Priority 1: Reuse existing inspiration from layout-extract
|
||||
IF exists({inspiration_source}/{target}-layout-ideas.txt):
|
||||
# Reuse existing inspiration (no action needed)
|
||||
REPORT: "Using existing layout inspiration for {target}"
|
||||
ELSE:
|
||||
# Priority 2: Generate new inspiration via MCP
|
||||
bash(mkdir -p {inspiration_source})
|
||||
search_query = "{target} {target_type} layout patterns variations"
|
||||
mcp__exa__web_search_exa(query=search_query, numResults=5)
|
||||
|
||||
# Extract context from prompt for this target
|
||||
target_requirements = extract_relevant_context_from_prompt(prompt_text, target)
|
||||
|
||||
# Write inspiration file to centralized location
|
||||
Write({inspiration_source}/{target}-layout-ideas.txt, inspiration_content)
|
||||
REPORT: "Created new layout inspiration for {target}"
|
||||
```
|
||||
|
||||
**Output**: `T` inspiration text files (reused or created in `.intermediates/layout-analysis/inspirations/`)
|
||||
|
||||
## Phase 2: Target-Style-Centric Batch Generation (Agent)
|
||||
|
||||
**Executor**: `Task(ui-design-agent)` × `T × S` tasks in **batched parallel** (max 6 concurrent)
|
||||
|
||||
### Step 1: Calculate Batch Execution Plan
|
||||
```bash
|
||||
bash(mkdir -p {base_path}/prototypes)
|
||||
|
||||
# Build task list: T × S combinations
|
||||
MAX_PARALLEL = 6
|
||||
total_tasks = T × S
|
||||
total_batches = ceil(total_tasks / MAX_PARALLEL)
|
||||
|
||||
# Initialize batch tracking
|
||||
TodoWrite({todos: [
|
||||
{content: "Batch 1/{batches}: Generate 6 tasks", status: "in_progress"},
|
||||
{content: "Batch 2/{batches}: Generate 6 tasks", status: "pending"},
|
||||
...
|
||||
]})
|
||||
```
|
||||
|
||||
### Step 2: Launch Batched Agent Tasks
|
||||
For each batch (up to 6 parallel tasks):
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[TARGET_STYLE_UI_GENERATION_FROM_PROMPT]
|
||||
🎯 ONE component: {target} × Style-{style_id} ({philosophy_name})
|
||||
Generate: {layout_variants} × 2 files (HTML + CSS per layout)
|
||||
|
||||
PROMPT CONTEXT: {target_requirements} # Extracted from original prompt
|
||||
TARGET: {target} | TYPE: {target_type} | STYLE: {style_id}/{style_variants}
|
||||
BASE_PATH: {base_path}
|
||||
DEVICE: {device_type}
|
||||
${design_attributes ? "DESIGN_ATTRIBUTES: " + JSON.stringify(design_attributes) : ""}
|
||||
|
||||
## Reference
|
||||
- Layout inspiration: Read("{base_path}/.intermediates/layout-analysis/inspirations/{target}-layout-ideas.txt")
|
||||
- Design tokens: Read("{base_path}/style-extraction/style-{style_id}/design-tokens.json")
|
||||
Parse ALL token values including:
|
||||
* colors, typography (with combinations), spacing, opacity
|
||||
* border_radius, shadows, breakpoints
|
||||
* component_styles (button, card, input variants)
|
||||
${design_attributes ? "- Adapt DOM to: density, visual_weight, formality, organic_vs_geometric" : ""}
|
||||
|
||||
## Generation
|
||||
For EACH layout (1 to {layout_variants}):
|
||||
|
||||
1. HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-N.html
|
||||
- Complete HTML5: <!DOCTYPE>, <head>, <body>
|
||||
- CSS ref: <link href="{target}-style-{style_id}-layout-N.css">
|
||||
- Semantic: <header>, <nav>, <main>, <footer>
|
||||
- A11y: ARIA labels, landmarks, responsive meta
|
||||
- Viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
- Follow user requirements from prompt
|
||||
${design_attributes ? `
|
||||
- DOM adaptation:
|
||||
* density='spacious' → flatter hierarchy
|
||||
* density='compact' → deeper nesting
|
||||
* visual_weight='heavy' → extra wrappers
|
||||
* visual_weight='minimal' → direct structure` : ""}
|
||||
- Device-specific: Optimize for {device_type}
|
||||
|
||||
2. CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-N.css
|
||||
- Self-contained: Direct token VALUES (no var())
|
||||
- Use tokens: colors, fonts, spacing, opacity, borders, shadows
|
||||
- IF tokens.component_styles exists: Use component presets for buttons, cards, inputs
|
||||
- IF tokens.typography.combinations exists: Use typography presets for headings and body text
|
||||
- Device-optimized: {device_type} styles
|
||||
${device_type === 'responsive' ? '- Responsive: Mobile-first @media' : '- Fixed: ' + device_type}
|
||||
${design_attributes ? `
|
||||
- Token selection: density → spacing, visual_weight → shadows` : ""}
|
||||
|
||||
## Notes
|
||||
- ✅ Token VALUES directly from design-tokens.json (with typography.combinations, opacity, component_styles support)
|
||||
- ✅ Follow prompt requirements for {target}
|
||||
- ✅ Optimize for {device_type}
|
||||
- ❌ NO var() refs, NO external deps
|
||||
- Layouts structurally DISTINCT
|
||||
- Write files IMMEDIATELY (per layout)
|
||||
- CSS filename MUST match HTML <link href>
|
||||
`
|
||||
|
||||
# After each batch completes
|
||||
TodoWrite: Mark batch completed, next batch in_progress
|
||||
```
|
||||
|
||||
## Phase 3: Verify & Generate Previews
|
||||
|
||||
### Step 1: Verify Generated Files
|
||||
```bash
|
||||
# Count expected vs found
|
||||
bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
|
||||
# Expected: S × L × T × 2
|
||||
|
||||
# Validate samples
|
||||
Read({base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html)
|
||||
# Check: <!DOCTYPE html>, correct CSS href, sufficient CSS length
|
||||
```
|
||||
|
||||
**Output**: `S × L × T × 2` files verified
|
||||
|
||||
### Step 2: Run Preview Generation Script
|
||||
```bash
|
||||
bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
|
||||
```
|
||||
|
||||
**Script generates**:
|
||||
- `compare.html` (interactive matrix)
|
||||
- `index.html` (navigation)
|
||||
- `PREVIEW.md` (instructions)
|
||||
|
||||
### Step 3: Verify Preview Files
|
||||
```bash
|
||||
bash(ls {base_path}/prototypes/compare.html {base_path}/prototypes/index.html {base_path}/prototypes/PREVIEW.md)
|
||||
```
|
||||
|
||||
**Output**: 3 preview files
|
||||
|
||||
## Completion
|
||||
|
||||
### Todo Update
|
||||
```javascript
|
||||
TodoWrite({todos: [
|
||||
{content: "Setup and parse prompt", status: "completed", activeForm: "Parsing prompt"},
|
||||
{content: "Detect token sources", status: "completed", activeForm: "Loading design systems"},
|
||||
{content: "Gather layout inspiration", status: "completed", activeForm: "Researching layouts"},
|
||||
{content: "Batch 1/{batches}: Generate 6 tasks", status: "completed", activeForm: "Generating batch 1"},
|
||||
... (all batches completed)
|
||||
{content: "Verify files & generate previews", status: "completed", activeForm: "Creating previews"}
|
||||
]});
|
||||
```
|
||||
|
||||
### Output Message
|
||||
```
|
||||
✅ Prompt-driven batch UI generation complete!
|
||||
|
||||
Prompt: {prompt_text}
|
||||
|
||||
Configuration:
|
||||
- Style Variants: {style_variants}
|
||||
- Layout Variants: {layout_variants}
|
||||
- Target Type: {target_type}
|
||||
- Device Type: {device_type}
|
||||
- Targets: {target_list} ({T} targets)
|
||||
- Total Prototypes: {S × L × T}
|
||||
|
||||
Batch Execution:
|
||||
- Total tasks: {T × S} (targets × styles)
|
||||
- Batches: {batches} (max 6 parallel per batch)
|
||||
- Agent scope: {L} layouts per target×style
|
||||
- Component isolation: Complete task independence
|
||||
- Device-specific: All layouts optimized for {device_type}
|
||||
|
||||
Quality:
|
||||
- Style-aware: {design_space_analysis ? 'HTML adapts to design_attributes' : 'Standard structure'}
|
||||
- CSS: Self-contained (direct token values, no var())
|
||||
- Device-optimized: {device_type} layouts
|
||||
- Tokens: Production-ready (WCAG AA compliant)
|
||||
|
||||
Generated Files:
|
||||
{base_path}/prototypes/
|
||||
├── {target}-style-{s}-layout-{l}.html ({S×L×T} prototypes)
|
||||
├── {target}-style-{s}-layout-{l}.css
|
||||
├── compare.html (interactive matrix)
|
||||
├── index.html (navigation)
|
||||
└── PREVIEW.md (instructions)
|
||||
|
||||
Layout Inspirations:
|
||||
{base_path}/.intermediates/layout-analysis/inspirations/ ({T} text files, reused or created)
|
||||
|
||||
Preview:
|
||||
1. Open compare.html (recommended)
|
||||
2. Open index.html
|
||||
3. Read PREVIEW.md
|
||||
|
||||
Next: /workflow:ui-design:update
|
||||
```
|
||||
|
||||
## Simple Bash Commands
|
||||
|
||||
### Path Operations
|
||||
```bash
|
||||
# Find design directory
|
||||
bash(find .workflow -type d -name "design-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
|
||||
|
||||
# Count style variants
|
||||
bash(ls {base_path}/style-extraction/style-* -d | wc -l)
|
||||
|
||||
# Check design tokens exist
|
||||
bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
|
||||
```
|
||||
|
||||
### Validation Commands
|
||||
```bash
|
||||
# Count generated files
|
||||
bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
|
||||
|
||||
# Verify preview
|
||||
bash(test -f {base_path}/prototypes/compare.html && echo "exists")
|
||||
```
|
||||
|
||||
### File Operations
|
||||
```bash
|
||||
# Create prototypes directory
|
||||
bash(mkdir -p {base_path}/prototypes)
|
||||
|
||||
# Create inspirations directory (if needed)
|
||||
bash(mkdir -p {base_path}/.intermediates/layout-analysis/inspirations)
|
||||
|
||||
# Run preview script
|
||||
bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
|
||||
```
|
||||
|
||||
## Output Structure
|
||||
|
||||
```
|
||||
{base_path}/
|
||||
├── .intermediates/
|
||||
│ └── layout-analysis/
|
||||
│ └── inspirations/
|
||||
│ └── {target}-layout-ideas.txt # Layout inspiration (reused or created)
|
||||
├── prototypes/
|
||||
│ ├── {target}-style-{s}-layout-{l}.html # Final prototypes
|
||||
│ ├── {target}-style-{s}-layout-{l}.css
|
||||
│ ├── compare.html
|
||||
│ ├── index.html
|
||||
│ └── PREVIEW.md
|
||||
└── style-extraction/
|
||||
└── style-{s}/
|
||||
├── design-tokens.json
|
||||
└── style-guide.md
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
### Common Errors
|
||||
```
|
||||
ERROR: No design tokens found
|
||||
→ Run /workflow:ui-design:style-extract first
|
||||
|
||||
ERROR: No targets extracted from prompt
|
||||
→ Use --targets explicitly or rephrase prompt
|
||||
|
||||
ERROR: MCP search failed
|
||||
→ Check network, retry
|
||||
|
||||
ERROR: Batch {N} agent tasks failed
|
||||
→ Check agent output, retry specific target×style combinations
|
||||
|
||||
ERROR: Script permission denied
|
||||
→ chmod +x ~/.claude/scripts/ui-generate-preview.sh
|
||||
```
|
||||
|
||||
### Recovery Strategies
|
||||
- **Partial success**: Keep successful target×style combinations
|
||||
- **Missing design_attributes**: Works without (less style-aware)
|
||||
- **Invalid tokens**: Validate design-tokens.json structure
|
||||
- **Failed batch**: Re-run command, only failed combinations will retry
|
||||
|
||||
## Quality Checklist
|
||||
|
||||
- [ ] Prompt clearly describes targets
|
||||
- [ ] CSS uses direct token values (no var())
|
||||
- [ ] HTML adapts to design_attributes (if available)
|
||||
- [ ] Semantic HTML5 structure
|
||||
- [ ] ARIA attributes present
|
||||
- [ ] Device-optimized layouts
|
||||
- [ ] Layouts structurally distinct
|
||||
- [ ] compare.html works
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Prompt-Driven**: Describe what to build, command extracts targets
|
||||
- **Target-Style-Centric**: `T×S` agents, each handles `L` layouts
|
||||
- **Parallel Batching**: Max 6 concurrent agents with progress tracking
|
||||
- **Component Isolation**: Complete task independence
|
||||
- **Style-Aware**: HTML adapts to design_attributes
|
||||
- **Self-Contained CSS**: Direct token values (no var())
|
||||
- **Device-Specific**: Optimized for desktop/mobile/tablet/responsive
|
||||
- **Inspiration-Based**: MCP-powered layout research
|
||||
- **Production-Ready**: Semantic, accessible, responsive
|
||||
|
||||
## Integration
|
||||
|
||||
**Input**:
|
||||
- Required: Prompt, design-tokens.json
|
||||
- Optional: design-space-analysis.json (from `.intermediates/style-analysis/`)
|
||||
- Reuses: Layout inspirations from `.intermediates/layout-analysis/inspirations/` (if available from layout-extract)
|
||||
|
||||
**Output**: S×L×T prototypes for `/workflow:ui-design:update`
|
||||
**Compatible**: style-extract, explore-auto, imitate-auto outputs
|
||||
**Optimization**: Reuses layout inspirations from layout-extract phase, avoiding duplicate MCP searches
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic: Auto-detection
|
||||
```bash
|
||||
/workflow:ui-design:batch-generate \
|
||||
--prompt "Dashboard with metric cards and charts"
|
||||
|
||||
# Auto: latest design run, extracts "dashboard" target
|
||||
# Output: S × L × 1 prototypes
|
||||
```
|
||||
|
||||
### With Session
|
||||
```bash
|
||||
/workflow:ui-design:batch-generate \
|
||||
--prompt "Auth pages: login, signup, password reset" \
|
||||
--session WFS-auth
|
||||
|
||||
# Uses WFS-auth's design run
|
||||
# Extracts: ["login", "signup", "password-reset"]
|
||||
# Batches: 2 (if S=3: 9 tasks = 6+3)
|
||||
# Output: S × L × 3 prototypes
|
||||
```
|
||||
|
||||
### Components with Device Type
|
||||
```bash
|
||||
/workflow:ui-design:batch-generate \
|
||||
--prompt "Mobile UI components: navbar, card, footer" \
|
||||
--target-type component \
|
||||
--device-type mobile
|
||||
|
||||
# Mobile-optimized component generation
|
||||
# Output: S × L × 3 prototypes
|
||||
```
|
||||
|
||||
### Large Scale (Multi-batch)
|
||||
```bash
|
||||
/workflow:ui-design:batch-generate \
|
||||
--prompt "E-commerce site" \
|
||||
--targets "home,shop,product,cart,checkout" \
|
||||
--style-variants 4 \
|
||||
--layout-variants 2
|
||||
|
||||
# Tasks: 5 × 4 = 20 (4 batches: 6+6+6+2)
|
||||
# Output: 4 × 2 × 5 = 40 prototypes
|
||||
```
|
||||
|
||||
## Helper Functions Reference
|
||||
|
||||
### Target Extraction
|
||||
```python
|
||||
# extract_targets_from_prompt(prompt_text)
|
||||
# Patterns: "Create X and Y", "Generate X, Y, Z pages", "Build X"
|
||||
# Returns: ["x", "y", "z"] (normalized lowercase with hyphens)
|
||||
|
||||
# detect_target_type(target_list)
|
||||
# Keywords: page (home, dashboard, login) vs component (navbar, card, button)
|
||||
# Returns: "page" or "component"
|
||||
|
||||
# extract_relevant_context_from_prompt(prompt_text, target)
|
||||
# Extracts sentences mentioning specific target
|
||||
# Returns: Relevant context string
|
||||
```
|
||||
|
||||
## Batch Execution Details
|
||||
|
||||
### Parallel Control
|
||||
- **Max concurrent**: 6 agents per batch
|
||||
- **Task distribution**: T × S tasks = ceil(T×S/6) batches
|
||||
- **Progress tracking**: TodoWrite per-batch status
|
||||
- **Examples**:
|
||||
- 3 tasks → 1 batch
|
||||
- 9 tasks → 2 batches (6+3)
|
||||
- 20 tasks → 4 batches (6+6+6+2)
|
||||
|
||||
### Performance
|
||||
| Tasks | Batches | Est. Time | Efficiency |
|
||||
|-------|---------|-----------|------------|
|
||||
| 1-6 | 1 | 3-5 min | 100% |
|
||||
| 7-12 | 2 | 6-10 min | ~85% |
|
||||
| 13-18 | 3 | 9-15 min | ~80% |
|
||||
| 19-30 | 4-5 | 12-25 min | ~75% |
|
||||
|
||||
### Optimization Tips
|
||||
1. **Reduce tasks**: Fewer targets or styles
|
||||
2. **Adjust layouts**: L=2 instead of L=3 for faster iteration
|
||||
3. **Stage generation**: Core pages first, secondary pages later
|
||||
|
||||
## Notes
|
||||
|
||||
- **Prompt quality**: Clear descriptions improve target extraction
|
||||
- **Token sources**: Consolidated (production) or proposed (fast-track)
|
||||
- **Batch parallelism**: Max 6 concurrent for stability
|
||||
- **Scalability**: Tested up to 30+ tasks (5+ batches)
|
||||
- **Dependencies**: MCP web search, ui-generate-preview.sh script
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: capture
|
||||
description: Batch screenshot capture for UI design workflows using MCP puppeteer or local fallback with URL mapping
|
||||
argument-hint: --url-map "target:url,..." [--base-path path] [--session id]
|
||||
argument-hint: --url-map "target:url,..." [--design-id <id>] [--session <id>]
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Glob(*), ListMcpResourcesTool(*), mcp__chrome-devtools__*, mcp__playwright__*
|
||||
---
|
||||
|
||||
@@ -15,19 +15,38 @@ Batch screenshot tool with MCP-first strategy and multi-tier fallback. Processes
|
||||
|
||||
## Phase 1: Initialize & Parse
|
||||
|
||||
### Step 1: Determine Base Path
|
||||
### Step 1: Determine Base Path & Generate Design ID
|
||||
```bash
|
||||
# Priority: --base-path > session > standalone
|
||||
bash(if [ -n "$BASE_PATH" ]; then
|
||||
echo "$BASE_PATH"
|
||||
# Priority: --design-id > session (latest) > standalone (create new)
|
||||
if [ -n "$DESIGN_ID" ]; then
|
||||
# Use provided design ID
|
||||
relative_path=$(find .workflow -name "${DESIGN_ID}" -type d -print -quit)
|
||||
if [ -z "$relative_path" ]; then
|
||||
echo "ERROR: Design run not found: $DESIGN_ID"
|
||||
echo "HINT: Run '/workflow:ui-design:list' to see available design runs"
|
||||
exit 1
|
||||
fi
|
||||
elif [ -n "$SESSION_ID" ]; then
|
||||
find .workflow/WFS-$SESSION_ID/design-* -type d | head -1 || \
|
||||
echo ".workflow/WFS-$SESSION_ID/design-run-$(date +%Y%m%d-%H%M%S)"
|
||||
# Find latest in session or create new
|
||||
relative_path=$(find .workflow/WFS-$SESSION_ID -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
|
||||
if [ -z "$relative_path" ]; then
|
||||
design_id="design-run-$(date +%Y%m%d)-$RANDOM"
|
||||
relative_path=".workflow/WFS-$SESSION_ID/${design_id}"
|
||||
fi
|
||||
else
|
||||
echo ".workflow/.design/run-$(date +%Y%m%d-%H%M%S)"
|
||||
fi)
|
||||
# Create new standalone design run
|
||||
design_id="design-run-$(date +%Y%m%d)-$RANDOM"
|
||||
relative_path=".workflow/.design/${design_id}"
|
||||
fi
|
||||
|
||||
bash(mkdir -p $BASE_PATH/screenshots)
|
||||
# Create directory and convert to absolute path
|
||||
bash(mkdir -p "$relative_path"/screenshots)
|
||||
base_path=$(cd "$relative_path" && pwd)
|
||||
|
||||
# Extract and display design_id
|
||||
design_id=$(basename "$base_path")
|
||||
echo "✓ Design ID: $design_id"
|
||||
echo "✓ Base path: $base_path"
|
||||
```
|
||||
|
||||
### Step 2: Parse URL Map
|
||||
@@ -187,7 +206,7 @@ bash($chrome --headless --screenshot="$output_file" --window-size=1920,1080 "$ur
|
||||
|
||||
Failed URLs:
|
||||
home: https://linear.app
|
||||
Save to: .workflow/.design/run-20250110/screenshots/home.png
|
||||
Save to: .workflow/.design/design-run-20250110/screenshots/home.png
|
||||
|
||||
Steps:
|
||||
1. Visit URL in browser
|
||||
@@ -270,7 +289,7 @@ Next: /workflow:ui-design:extract --images "screenshots/*.png"
|
||||
### Path Operations
|
||||
```bash
|
||||
# Find design directory
|
||||
bash(find .workflow -type d -name "design-*" | head -1)
|
||||
bash(find .workflow -type d -name "design-run-*" | head -1)
|
||||
|
||||
# Create screenshot directory
|
||||
bash(mkdir -p $BASE_PATH/screenshots)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: explore-auto
|
||||
description: Exploratory UI design workflow with style-centric batch generation, creates design variants from prompts/images with parallel execution
|
||||
description: Interactive exploratory UI design workflow with style-centric batch generation, creates design variants from prompts/images with parallel execution and user selection
|
||||
argument-hint: "[--prompt "<desc>"] [--images "<glob>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--batch-plan]""
|
||||
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*), Task(conceptual-planning-agent)
|
||||
---
|
||||
@@ -19,20 +19,22 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
**Autonomous Flow** (⚠️ CONTINUOUS EXECUTION - DO NOT STOP):
|
||||
1. User triggers: `/workflow:ui-design:explore-auto [params]`
|
||||
2. Phase 0c: Target confirmation → User confirms → **IMMEDIATELY triggers Phase 1**
|
||||
3. Phase 1 (style-extract) → **WAIT for completion** → Auto-continues
|
||||
4. Phase 2.3 (animation-extract, optional) → **WAIT for completion** → Auto-continues
|
||||
5. Phase 2.5 (layout-extract) → **WAIT for completion** → Auto-continues
|
||||
6. **Phase 3 (ui-assembly)** → **WAIT for completion** → Auto-continues
|
||||
7. Phase 4 (design-update) → **WAIT for completion** → Auto-continues
|
||||
3. Phase 1 (style-extract) → **Execute phase (blocks until finished)** → Auto-continues to Phase 2.3
|
||||
4. Phase 2.3 (animation-extract, conditional):
|
||||
- **IF should_extract_animation**: Execute animation extraction → Auto-continues to Phase 2.5
|
||||
- **ELSE**: Skip (use code import) → Auto-continues to Phase 2.5
|
||||
5. Phase 2.5 (layout-extract) → **Execute phase (blocks until finished)** → Auto-continues to Phase 3
|
||||
6. **Phase 3 (ui-assembly)** → **Execute phase (blocks until finished)** → Auto-continues to Phase 4
|
||||
7. Phase 4 (design-update) → **Execute phase (blocks until finished)** → Auto-continues to Phase 5 (if --batch-plan)
|
||||
8. Phase 5 (batch-plan, optional) → Reports completion
|
||||
|
||||
**Phase Transition Mechanism**:
|
||||
- **Phase 0c (User Interaction)**: User confirms targets → IMMEDIATELY triggers Phase 1
|
||||
- **Phase 1-5 (Autonomous)**: `SlashCommand` is BLOCKING - execution pauses until completion
|
||||
- Upon each phase completion: Automatically process output and execute next phase
|
||||
- **Phase 1-5 (Autonomous)**: `SlashCommand` is BLOCKING - execution pauses until the command finishes
|
||||
- When each phase finishes executing: Automatically process output and execute next phase
|
||||
- No additional user interaction after Phase 0c confirmation
|
||||
|
||||
**Auto-Continue Mechanism**: TodoWrite tracks phase status. Upon each phase completion, you MUST immediately construct and execute the next phase command. No user intervention required. The workflow is NOT complete until reaching Phase 4 (or Phase 5 if --batch-plan).
|
||||
**Auto-Continue Mechanism**: TodoWrite tracks phase status. When each phase finishes executing, you MUST immediately construct and execute the next phase command. No user intervention required. The workflow is NOT complete until reaching Phase 4 (or Phase 5 if --batch-plan).
|
||||
|
||||
**Target Type Detection**: Automatically inferred from prompt/targets, or explicitly set via `--target-type`.
|
||||
|
||||
@@ -43,7 +45,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 after each phase
|
||||
6. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. After each SlashCommand completes, you MUST wait for completion, then immediately execute the next phase. Workflow is NOT complete until Phase 4 (or Phase 5 if --batch-plan).
|
||||
6. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. Each SlashCommand execution blocks until finished, then you MUST immediately execute the next phase. Workflow is NOT complete until Phase 4 (or Phase 5 if --batch-plan).
|
||||
|
||||
## Parameter Requirements
|
||||
|
||||
@@ -154,6 +156,9 @@ ELSE:
|
||||
layout_variants = --layout-variants OR 3
|
||||
|
||||
VALIDATE: 1 <= style_variants <= 5, 1 <= layout_variants <= 5
|
||||
|
||||
# Interactive mode (always enabled)
|
||||
interactive_mode = true # Always use interactive mode
|
||||
```
|
||||
|
||||
### Phase 0a-2: Device Type Inference
|
||||
@@ -203,13 +208,16 @@ STORE: device_type, device_source
|
||||
|
||||
### Phase 0b: Run Initialization & Directory Setup
|
||||
```bash
|
||||
run_id = "run-$(date +%Y%m%d-%H%M%S)"
|
||||
base_path = --session ? ".workflow/WFS-{session}/design-${run_id}" : ".workflow/.design/${run_id}"
|
||||
design_id = "design-run-$(date +%Y%m%d)-$RANDOM"
|
||||
relative_base_path = --session ? ".workflow/WFS-{session}/${design_id}" : ".workflow/.design/${design_id}"
|
||||
|
||||
Bash(mkdir -p "${base_path}/{style-extraction,style-consolidation,prototypes}")
|
||||
# Create directory and convert to absolute path
|
||||
Bash(mkdir -p "${relative_base_path}/style-extraction")
|
||||
Bash(mkdir -p "${relative_base_path}/prototypes")
|
||||
base_path=$(cd "${relative_base_path}" && pwd)
|
||||
|
||||
Write({base_path}/.run-metadata.json): {
|
||||
"run_id": "${run_id}", "session_id": "${session_id}", "timestamp": "...",
|
||||
"design_id": "${design_id}", "session_id": "${session_id}", "timestamp": "...",
|
||||
"workflow": "ui-design:auto",
|
||||
"architecture": "style-centric-batch-generation",
|
||||
"parameters": { "style_variants": ${style_variants}, "layout_variants": ${layout_variants},
|
||||
@@ -219,6 +227,11 @@ Write({base_path}/.run-metadata.json): {
|
||||
"status": "in_progress",
|
||||
"performance_mode": "optimized"
|
||||
}
|
||||
|
||||
# Initialize default flags for animation extraction logic
|
||||
animation_complete = false # Default: always extract animations unless code import proves complete
|
||||
needs_visual_supplement = false # Will be set to true in hybrid mode
|
||||
skip_animation_extraction = false # User preference for code import scenario
|
||||
```
|
||||
|
||||
### Phase 0c: Unified Target Inference with Intelligent Type Detection
|
||||
@@ -307,13 +320,27 @@ detect_target_type(target_list):
|
||||
```bash
|
||||
IF design_source IN ["code_only", "hybrid"]:
|
||||
REPORT: "🔍 Phase 0d: Code Import ({design_source})"
|
||||
command = "/workflow:ui-design:import-from-code --base-path \"{base_path}\" --base-path \"{code_base_path}\""
|
||||
SlashCommand(command)
|
||||
command = "/workflow:ui-design:import-from-code --design-id \"{design_id}\" --source \"{code_base_path}\""
|
||||
|
||||
TRY:
|
||||
SlashCommand(command)
|
||||
CATCH error:
|
||||
WARN: "⚠️ Code import failed: {error}"
|
||||
WARN: "Cleaning up incomplete import directories"
|
||||
Bash(rm -rf "{base_path}/style-extraction" "{base_path}/animation-extraction" "{base_path}/layout-extraction" 2>/dev/null)
|
||||
|
||||
IF design_source == "code_only":
|
||||
REPORT: "Cannot proceed with code-only mode after import failure"
|
||||
EXIT 1
|
||||
ELSE: # hybrid mode
|
||||
WARN: "Continuing with visual-only mode"
|
||||
design_source = "visual_only"
|
||||
|
||||
# Check file existence and assess completeness
|
||||
style_exists = exists("{base_path}/style-extraction/style-1/design-tokens.json")
|
||||
animation_exists = exists("{base_path}/animation-extraction/animation-tokens.json")
|
||||
layout_exists = exists("{base_path}/layout-extraction/layout-templates.json")
|
||||
layout_count = bash(ls {base_path}/layout-extraction/layout-*.json 2>/dev/null | wc -l)
|
||||
layout_exists = (layout_count > 0)
|
||||
|
||||
style_complete = false
|
||||
animation_complete = false
|
||||
@@ -349,14 +376,16 @@ IF design_source IN ["code_only", "hybrid"]:
|
||||
|
||||
# Layout completeness check
|
||||
IF layout_exists:
|
||||
layouts = Read("{base_path}/layout-extraction/layout-templates.json")
|
||||
# Read first layout file to verify structure
|
||||
first_layout = bash(ls {base_path}/layout-extraction/layout-*.json 2>/dev/null | head -1)
|
||||
layout_data = Read(first_layout)
|
||||
layout_complete = (
|
||||
layouts.layout_templates?.length >= 3 &&
|
||||
layouts.extraction_metadata?.layout_system?.type &&
|
||||
layouts.extraction_metadata?.responsive?.breakpoints
|
||||
layout_count >= 1 &&
|
||||
layout_data.template?.dom_structure &&
|
||||
layout_data.template?.css_layout_rules
|
||||
)
|
||||
IF NOT layout_complete AND layouts.extraction_metadata?.completeness?.missing_items:
|
||||
missing_categories.extend(layouts.extraction_metadata.completeness.missing_items)
|
||||
IF NOT layout_complete:
|
||||
missing_categories.push("complete layout structure")
|
||||
ELSE:
|
||||
missing_categories.push("layout templates")
|
||||
|
||||
@@ -374,17 +403,33 @@ IF design_source IN ["code_only", "hybrid"]:
|
||||
ELSE IF design_source == "hybrid":
|
||||
needs_visual_supplement = true
|
||||
|
||||
STORE: needs_visual_supplement, style_complete, animation_complete, layout_complete
|
||||
# Animation reuse confirmation (code import with complete animations)
|
||||
IF design_source == "code_only" AND animation_complete:
|
||||
REPORT: "✅ 检测到完整的动画系统(来自代码导入)"
|
||||
REPORT: " Duration scales: {duration_count} | Easing functions: {easing_count}"
|
||||
REPORT: ""
|
||||
REPORT: "Options:"
|
||||
REPORT: " • 'reuse' (默认) - 复用已有动画系统"
|
||||
REPORT: " • 'regenerate' - 重新生成动画系统(交互式)"
|
||||
REPORT: " • 'cancel' - 取消工作流"
|
||||
user_response = WAIT_FOR_USER_INPUT()
|
||||
MATCH user_response:
|
||||
"reuse" → skip_animation_extraction = true
|
||||
"regenerate" → skip_animation_extraction = false
|
||||
"cancel" → EXIT 0
|
||||
default → skip_animation_extraction = true # Default: reuse
|
||||
|
||||
STORE: needs_visual_supplement, style_complete, animation_complete, layout_complete, skip_animation_extraction
|
||||
```
|
||||
|
||||
### Phase 1: Style Extraction
|
||||
```bash
|
||||
IF design_source == "visual_only" OR needs_visual_supplement:
|
||||
REPORT: "🎨 Phase 1: Style Extraction (variants: {style_variants})"
|
||||
command = "/workflow:ui-design:style-extract --base-path \"{base_path}\" " +
|
||||
command = "/workflow:ui-design:style-extract --design-id \"{design_id}\" " +
|
||||
(--images ? "--images \"{images}\" " : "") +
|
||||
(--prompt ? "--prompt \"{prompt}\" " : "") +
|
||||
"--mode explore --variants {style_variants}"
|
||||
"--variants {style_variants} --interactive"
|
||||
SlashCommand(command)
|
||||
ELSE:
|
||||
REPORT: "✅ Phase 1: Style (Using Code Import)"
|
||||
@@ -392,16 +437,41 @@ ELSE:
|
||||
|
||||
### Phase 2.3: Animation Extraction
|
||||
```bash
|
||||
IF design_source == "visual_only" OR NOT animation_complete:
|
||||
# Determine if animation extraction is needed
|
||||
should_extract_animation = false
|
||||
|
||||
IF (design_source == "visual_only" OR needs_visual_supplement):
|
||||
# Pure visual input or hybrid mode requiring visual supplement
|
||||
should_extract_animation = true
|
||||
ELSE IF NOT animation_complete:
|
||||
# Code import but animations are incomplete
|
||||
should_extract_animation = true
|
||||
ELSE IF design_source == "code_only" AND animation_complete AND NOT skip_animation_extraction:
|
||||
# Code import with complete animations, but user chose to regenerate
|
||||
should_extract_animation = true
|
||||
|
||||
IF should_extract_animation:
|
||||
REPORT: "🚀 Phase 2.3: Animation Extraction"
|
||||
command = "/workflow:ui-design:animation-extract --base-path \"{base_path}\" --mode interactive"
|
||||
|
||||
# Build command with available inputs
|
||||
command_parts = [f"/workflow:ui-design:animation-extract --design-id \"{design_id}\""]
|
||||
|
||||
IF --images:
|
||||
command_parts.append(f"--images \"{--images}\"")
|
||||
|
||||
IF --prompt:
|
||||
command_parts.append(f"--prompt \"{--prompt}\"")
|
||||
|
||||
command_parts.append("--interactive")
|
||||
|
||||
command = " ".join(command_parts)
|
||||
SlashCommand(command)
|
||||
ELSE:
|
||||
REPORT: "✅ Phase 2.3: Animation (Using Code Import)"
|
||||
|
||||
# Output: animation-tokens.json + animation-guide.md
|
||||
# SlashCommand blocks until phase complete
|
||||
# Upon completion, IMMEDIATELY execute Phase 2.5 (auto-continue)
|
||||
# SlashCommand blocks until phase finishes executing
|
||||
# When phase finishes, IMMEDIATELY execute Phase 2.5 (auto-continue)
|
||||
```
|
||||
|
||||
### Phase 2.5: Layout Extraction
|
||||
@@ -410,10 +480,10 @@ targets_string = ",".join(inferred_target_list)
|
||||
|
||||
IF (design_source == "visual_only" OR needs_visual_supplement) OR (NOT layout_complete):
|
||||
REPORT: "🚀 Phase 2.5: Layout Extraction ({targets_string}, variants: {layout_variants}, device: {device_type})"
|
||||
command = "/workflow:ui-design:layout-extract --base-path \"{base_path}\" " +
|
||||
command = "/workflow:ui-design:layout-extract --design-id \"{design_id}\" " +
|
||||
(--images ? "--images \"{images}\" " : "") +
|
||||
(--prompt ? "--prompt \"{prompt}\" " : "") +
|
||||
"--targets \"{targets_string}\" --mode explore --variants {layout_variants} --device-type \"{device_type}\""
|
||||
"--targets \"{targets_string}\" --variants {layout_variants} --device-type \"{device_type}\" --interactive"
|
||||
SlashCommand(command)
|
||||
ELSE:
|
||||
REPORT: "✅ Phase 2.5: Layout (Using Code Import)"
|
||||
@@ -421,8 +491,7 @@ ELSE:
|
||||
|
||||
### Phase 3: UI Assembly
|
||||
```bash
|
||||
command = "/workflow:ui-design:generate --base-path \"{base_path}\" " +
|
||||
"--style-variants {style_variants} --layout-variants {layout_variants}"
|
||||
command = "/workflow:ui-design:generate --design-id \"{design_id}\""
|
||||
|
||||
total = style_variants × layout_variants × len(inferred_target_list)
|
||||
|
||||
@@ -433,8 +502,8 @@ REPORT: " → Assembly tasks: {total} combinations"
|
||||
|
||||
SlashCommand(command)
|
||||
|
||||
# SlashCommand blocks until phase complete
|
||||
# Upon completion, IMMEDIATELY execute Phase 4 (auto-continue)
|
||||
# SlashCommand blocks until phase finishes executing
|
||||
# When phase finishes, IMMEDIATELY execute Phase 4 (auto-continue)
|
||||
# Output:
|
||||
# - {target}-style-{s}-layout-{l}.html (assembled prototypes)
|
||||
# - {target}-style-{s}-layout-{l}.css
|
||||
@@ -447,8 +516,8 @@ SlashCommand(command)
|
||||
command = "/workflow:ui-design:update" + (--session ? " --session {session_id}" : "")
|
||||
SlashCommand(command)
|
||||
|
||||
# SlashCommand blocks until phase complete
|
||||
# Upon completion:
|
||||
# SlashCommand blocks until phase finishes executing
|
||||
# When phase finishes:
|
||||
# - If --batch-plan flag present: IMMEDIATELY execute Phase 5 (auto-continue)
|
||||
# - If no --batch-plan: Workflow complete, display final report
|
||||
```
|
||||
@@ -465,80 +534,21 @@ IF --batch-plan:
|
||||
```javascript
|
||||
// Initialize IMMEDIATELY after Phase 0c user confirmation to track multi-phase execution
|
||||
TodoWrite({todos: [
|
||||
{"content": "Execute style extraction", "status": "in_progress", "activeForm": "Executing..."},
|
||||
{"content": "Execute layout extraction", "status": "pending", "activeForm": "Executing..."},
|
||||
{"content": "Execute UI assembly", "status": "pending", "activeForm": "Executing..."},
|
||||
{"content": "Execute design integration", "status": "pending", "activeForm": "Executing..."}
|
||||
{"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": "Execute design integration", "status": "pending", "activeForm": "Executing design integration"}
|
||||
]})
|
||||
|
||||
// ⚠️ CRITICAL: After EACH SlashCommand completion (Phase 1-5), you MUST:
|
||||
// 1. SlashCommand blocks and returns when phase is complete
|
||||
// ⚠️ CRITICAL: When each SlashCommand execution finishes (Phase 1-5), you MUST:
|
||||
// 1. SlashCommand blocks and returns when phase finishes executing
|
||||
// 2. Update current phase: status → "completed"
|
||||
// 3. Update next phase: status → "in_progress"
|
||||
// 4. IMMEDIATELY execute next phase SlashCommand (auto-continue)
|
||||
// This ensures continuous workflow tracking and prevents premature stopping
|
||||
```
|
||||
|
||||
## Key Features
|
||||
|
||||
- **🚀 Performance**: Style-centric batch generation with S agent calls
|
||||
- **🎨 Style-Aware**: HTML structure adapts to design_attributes
|
||||
- **✅ Perfect Consistency**: Each style by single agent
|
||||
- **📦 Autonomous**: No user intervention required between phases
|
||||
- **🧠 Intelligent**: Parses natural language, infers targets/types
|
||||
- **🔄 Reproducible**: Deterministic flow with isolated run directories
|
||||
- **🎯 Flexible**: Supports pages, components, or mixed targets
|
||||
|
||||
## Examples
|
||||
|
||||
### 1. Page Mode (Prompt Inference)
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto --prompt "Modern blog: home, article, author"
|
||||
# Result: 27 prototypes (3×3×3) - responsive layouts (default)
|
||||
```
|
||||
|
||||
### 2. Mobile-First Design
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto --prompt "Mobile shopping app: home, product, cart" --device-type mobile
|
||||
# Result: 27 prototypes (3×3×3) - mobile layouts (375×812px)
|
||||
```
|
||||
|
||||
### 3. Desktop Application
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto --targets "dashboard,analytics,settings" --device-type desktop --style-variants 2 --layout-variants 2
|
||||
# Result: 12 prototypes (2×2×3) - desktop layouts (1920×1080px)
|
||||
```
|
||||
|
||||
### 4. Tablet Interface
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto --prompt "Educational app for tablets" --device-type tablet --targets "courses,lessons,profile"
|
||||
# Result: 27 prototypes (3×3×3) - tablet layouts (768×1024px)
|
||||
```
|
||||
|
||||
### 5. Custom Matrix with Session
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto --session WFS-ecommerce --images "refs/*.png" --style-variants 2 --layout-variants 2
|
||||
# Result: 2×2×N prototypes - device type inferred from session
|
||||
```
|
||||
|
||||
### 6. Component Mode (Desktop)
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto --targets "navbar,hero" --target-type "component" --device-type desktop --style-variants 3 --layout-variants 2
|
||||
# Result: 12 prototypes (3×2×2) - desktop components
|
||||
```
|
||||
|
||||
### 7. Intelligent Parsing + Batch Planning
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto --prompt "Create 4 styles with 2 layouts for mobile dashboard and settings" --batch-plan
|
||||
# Result: 16 prototypes (4×2×2) + auto-generated tasks - mobile-optimized (inferred from prompt)
|
||||
```
|
||||
|
||||
### 8. Large Scale Responsive
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto --targets "home,dashboard,settings,profile" --device-type responsive --style-variants 3 --layout-variants 3
|
||||
# Result: 36 prototypes (3×3×4) - responsive layouts
|
||||
```
|
||||
|
||||
## Completion Output
|
||||
```
|
||||
✅ UI Design Explore-Auto Workflow Complete!
|
||||
@@ -547,10 +557,11 @@ Architecture: Style-Centric Batch Generation
|
||||
Run ID: {run_id} | Session: {session_id or "standalone"}
|
||||
Type: {icon} {target_type} | Device: {device_type} | Matrix: {s}×{l}×{n} = {total} prototypes
|
||||
|
||||
Phase 1: {s} complete design systems (style-extract)
|
||||
Phase 2: {n×l} layout templates (layout-extract explore mode)
|
||||
Phase 1: {s} complete design systems (style-extract with multi-select)
|
||||
Phase 2: {n×l} layout templates (layout-extract with multi-select)
|
||||
- Device: {device_type} layouts
|
||||
- {n} targets × {l} layout variants = {n×l} structural templates
|
||||
- User-selected concepts generated in parallel
|
||||
Phase 3: UI Assembly (generate)
|
||||
- Pure assembly: layout templates + design tokens
|
||||
- {s}×{l}×{n} = {total} final prototypes
|
||||
@@ -560,21 +571,24 @@ Phase 4: Brainstorming artifacts updated
|
||||
Assembly Process:
|
||||
✅ Separation of Concerns: Layout (structure) + Style (tokens) kept separate
|
||||
✅ Layout Extraction: {n×l} reusable structural templates
|
||||
✅ Multi-Selection Workflow: User selects multiple variants from generated options
|
||||
✅ Pure Assembly: No design decisions in generate phase
|
||||
✅ Device-Optimized: Layouts designed for {device_type}
|
||||
|
||||
Design Quality:
|
||||
✅ Token-Driven Styling: 100% var() usage
|
||||
✅ Structural Variety: {l} distinct layouts per target
|
||||
✅ Style Variety: {s} independent design systems
|
||||
✅ Structural Variety: {l} distinct layouts per target (user-selected)
|
||||
✅ Style Variety: {s} independent design systems (user-selected)
|
||||
✅ Device-Optimized: Layouts designed for {device_type}
|
||||
|
||||
📂 {base_path}/
|
||||
├── .intermediates/ (Intermediate analysis files)
|
||||
│ ├── style-analysis/ (computed-styles.json, design-space-analysis.json)
|
||||
│ └── layout-analysis/ (dom-structure-*.json, inspirations/*.txt)
|
||||
│ ├── style-analysis/ (analysis-options.json with embedded user_selection, computed-styles.json if URL mode)
|
||||
│ ├── animation-analysis/ (analysis-options.json with embedded user_selection, animations-*.json if URL mode)
|
||||
│ └── layout-analysis/ (analysis-options.json with embedded user_selection, dom-structure-*.json if URL mode)
|
||||
├── style-extraction/ ({s} complete design systems)
|
||||
├── layout-extraction/ ({n×l} layout templates + layout-space-analysis.json)
|
||||
├── animation-extraction/ (animation-tokens.json, animation-guide.md)
|
||||
├── layout-extraction/ ({n×l} layout template files: layout-{target}-{variant}.json)
|
||||
├── prototypes/ ({total} assembled prototypes)
|
||||
└── .run-metadata.json (includes device type)
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: explore-layers
|
||||
description: Interactive deep UI capture with depth-controlled layer exploration using MCP puppeteer
|
||||
argument-hint: --url <url> --depth <1-5> [--session id] [--base-path path]
|
||||
argument-hint: --url <url> --depth <1-5> [--design-id <id>] [--session <id>]
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Glob(*), mcp__chrome-devtools__*
|
||||
---
|
||||
|
||||
@@ -38,17 +38,39 @@ IF depth NOT IN [1, 2, 3, 4, 5]:
|
||||
|
||||
### Step 2: Determine Base Path
|
||||
```bash
|
||||
bash(if [ -n "$BASE_PATH" ]; then
|
||||
echo "$BASE_PATH"
|
||||
# Priority: --design-id > --session > create new
|
||||
if [ -n "$DESIGN_ID" ]; then
|
||||
# Exact match by design ID
|
||||
relative_path=$(find .workflow -name "${DESIGN_ID}" -type d -print -quit)
|
||||
if [ -z "$relative_path" ]; then
|
||||
echo "ERROR: Design run not found: $DESIGN_ID"
|
||||
echo "HINT: Run '/workflow:ui-design:list' to see available design runs"
|
||||
exit 1
|
||||
fi
|
||||
elif [ -n "$SESSION_ID" ]; then
|
||||
find .workflow/WFS-$SESSION_ID/design-* -type d | head -1 || \
|
||||
echo ".workflow/WFS-$SESSION_ID/design-layers-$(date +%Y%m%d-%H%M%S)"
|
||||
# Find latest in session or create new
|
||||
relative_path=$(find .workflow/WFS-$SESSION_ID -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
|
||||
if [ -z "$relative_path" ]; then
|
||||
design_id="design-run-$(date +%Y%m%d)-$RANDOM"
|
||||
relative_path=".workflow/WFS-$SESSION_ID/${design_id}"
|
||||
fi
|
||||
else
|
||||
echo ".workflow/.design/layers-$(date +%Y%m%d-%H%M%S)"
|
||||
fi)
|
||||
# Create new standalone design run
|
||||
design_id="design-run-$(date +%Y%m%d)-$RANDOM"
|
||||
relative_path=".workflow/.design/${design_id}"
|
||||
fi
|
||||
|
||||
# Create directory structure and convert to absolute path
|
||||
bash(mkdir -p "$relative_path")
|
||||
base_path=$(cd "$relative_path" && pwd)
|
||||
|
||||
# Extract and display design_id
|
||||
design_id=$(basename "$base_path")
|
||||
echo "✓ Design ID: $design_id"
|
||||
echo "✓ Base path: $base_path"
|
||||
|
||||
# Create depth directories
|
||||
bash(for i in $(seq 1 $depth); do mkdir -p $BASE_PATH/screenshots/depth-$i; done)
|
||||
bash(for i in $(seq 1 $depth); do mkdir -p "$base_path"/screenshots/depth-$i; done)
|
||||
```
|
||||
|
||||
**Output**: `url`, `depth`, `base_path`
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: generate
|
||||
description: Assemble UI prototypes by combining layout templates with design tokens, pure assembler without new content generation
|
||||
argument-hint: [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
|
||||
description: Assemble UI prototypes by combining layout templates with design tokens (default animation support), pure assembler without new content generation
|
||||
argument-hint: [--design-id <id>] [--session <id>]
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
|
||||
---
|
||||
|
||||
@@ -11,7 +11,7 @@ allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
|
||||
Pure assembler that combines pre-extracted layout templates with design tokens to generate UI prototypes (`style × layout × targets`). No layout design logic - purely combines existing components.
|
||||
|
||||
**Strategy**: Pure Assembly
|
||||
- **Input**: `layout-templates.json` + `design-tokens.json` (+ reference images if available)
|
||||
- **Input**: `layout-*.json` files + `design-tokens.json` (+ reference images if available)
|
||||
- **Process**: Combine structure (DOM) with style (tokens)
|
||||
- **Output**: Complete HTML/CSS prototypes
|
||||
- **No Design Logic**: All layout and style decisions already made
|
||||
@@ -25,23 +25,48 @@ Pure assembler that combines pre-extracted layout templates with design tokens t
|
||||
|
||||
### Step 1: Resolve Base Path & Parse Configuration
|
||||
```bash
|
||||
# Determine working directory
|
||||
bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect
|
||||
# Determine base path with priority: --design-id > --session > auto-detect
|
||||
if [ -n "$DESIGN_ID" ]; then
|
||||
# Exact match by design ID
|
||||
relative_path=$(find .workflow -name "${DESIGN_ID}" -type d -print -quit)
|
||||
elif [ -n "$SESSION_ID" ]; then
|
||||
# Latest in session
|
||||
relative_path=$(find .workflow/WFS-$SESSION_ID -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
|
||||
else
|
||||
# Latest globally
|
||||
relative_path=$(find .workflow -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
|
||||
fi
|
||||
|
||||
# Validate and convert to absolute path
|
||||
if [ -z "$relative_path" ] || [ ! -d "$relative_path" ]; then
|
||||
echo "❌ ERROR: Design run not found"
|
||||
echo "💡 HINT: Run '/workflow:ui-design:list' to see available design runs"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
base_path=$(cd "$relative_path" && pwd)
|
||||
bash(echo "✓ Base path: $base_path")
|
||||
|
||||
# Get style count
|
||||
bash(ls {base_path}/style-extraction/style-* -d | wc -l)
|
||||
bash(ls "$base_path"/style-extraction/style-* -d | wc -l)
|
||||
|
||||
# Image reference auto-detected from layout template source_image_path
|
||||
```
|
||||
|
||||
### Step 2: Load Layout Templates
|
||||
```bash
|
||||
# Check layout templates exist
|
||||
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
|
||||
# Check layout templates exist (multi-file pattern)
|
||||
bash(find {base_path}/layout-extraction -name "layout-*.json" -print -quit | grep -q . && echo "exists")
|
||||
|
||||
# Load layout templates
|
||||
Read({base_path}/layout-extraction/layout-templates.json)
|
||||
# Extract: targets, layout_variants count, device_type, template structures
|
||||
# Get list of all layout files
|
||||
bash(ls {base_path}/layout-extraction/layout-*.json 2>/dev/null)
|
||||
|
||||
# Load each layout template file
|
||||
FOR each layout_file in layout_files:
|
||||
template_data = Read(layout_file)
|
||||
# Extract: target, variant_id, device_type, dom_structure, css_layout_rules
|
||||
|
||||
# Aggregate: targets[], layout_variants count, device_type, all template structures
|
||||
```
|
||||
|
||||
**Output**: `base_path`, `style_variants`, `layout_templates[]`, `targets[]`, `device_type`
|
||||
@@ -74,30 +99,97 @@ ELSE:
|
||||
|
||||
## Phase 2: Assembly (Agent)
|
||||
|
||||
**Executor**: `Task(ui-design-agent)` × `T × S × L` tasks (can be batched)
|
||||
**Executor**: `Task(ui-design-agent)` grouped by `target × style` (max 10 layouts per agent, max 6 concurrent agents)
|
||||
|
||||
### Step 1: Launch Assembly Tasks
|
||||
```bash
|
||||
bash(mkdir -p {base_path}/prototypes)
|
||||
**⚠️ Core Principle**: **Each agent processes ONLY ONE style** (but can process multiple layouts for that style)
|
||||
|
||||
### Agent Grouping Strategy
|
||||
|
||||
**Grouping Rules**:
|
||||
1. **Style Isolation**: Each agent processes ONLY ONE style (never mixed)
|
||||
2. **Balanced Distribution**: Layouts evenly split (e.g., 12→6+6, not 10+2)
|
||||
3. **Target Separation**: Different targets use different agents
|
||||
|
||||
**Distribution Formula**:
|
||||
```
|
||||
agents_needed = ceil(layout_count / MAX_LAYOUTS_PER_AGENT)
|
||||
base_count = floor(layout_count / agents_needed)
|
||||
remainder = layout_count % agents_needed
|
||||
# First 'remainder' agents get (base_count + 1), others get base_count
|
||||
```
|
||||
|
||||
For each `target × style_id × layout_id`:
|
||||
**Examples** (MAX=10):
|
||||
|
||||
| Scenario | Result | Explanation |
|
||||
|----------|--------|-------------|
|
||||
| 3 styles × 3 layouts | 3 agents | Each style: 1 agent (3 layouts) |
|
||||
| 3 styles × 12 layouts | 6 agents | Each style: 2 agents (6+6 layouts) |
|
||||
| 2 styles × 5 layouts × 2 targets | 4 agents | Each (target, style): 1 agent (5 layouts) |
|
||||
|
||||
### Step 1: Calculate Agent Grouping Plan
|
||||
```bash
|
||||
bash(mkdir -p {base_path}/prototypes)
|
||||
|
||||
MAX_LAYOUTS_PER_AGENT = 10
|
||||
MAX_PARALLEL = 6
|
||||
|
||||
agent_groups = []
|
||||
FOR each target in targets:
|
||||
FOR each style_id in [1..S]:
|
||||
layouts_for_this_target_style = filter layouts by current target
|
||||
layout_count = len(layouts_for_this_target_style)
|
||||
|
||||
# Balanced distribution (e.g., 12 layouts → 6+6)
|
||||
agents_needed = ceil(layout_count / MAX_LAYOUTS_PER_AGENT)
|
||||
base_count = floor(layout_count / agents_needed)
|
||||
remainder = layout_count % agents_needed
|
||||
|
||||
layout_chunks = []
|
||||
start_idx = 0
|
||||
FOR i in range(agents_needed):
|
||||
chunk_size = base_count + 1 if i < remainder else base_count
|
||||
layout_chunks.append(layouts[start_idx : start_idx + chunk_size])
|
||||
start_idx += chunk_size
|
||||
|
||||
FOR each chunk in layout_chunks:
|
||||
agent_groups.append({
|
||||
target: target, # Single target
|
||||
style_id: style_id, # Single style
|
||||
layout_ids: chunk # Balanced layouts (≤10)
|
||||
})
|
||||
|
||||
total_agents = len(agent_groups)
|
||||
total_batches = ceil(total_agents / MAX_PARALLEL)
|
||||
|
||||
TodoWrite({todos: [
|
||||
{content: "Setup and validation", status: "completed", activeForm: "Loading design systems"},
|
||||
{content: "Batch 1/{total_batches}: Assemble up to 6 agent groups", status: "in_progress", activeForm: "Assembling batch 1"},
|
||||
{content: "Batch 2/{total_batches}: Assemble up to 6 agent groups", status: "pending", activeForm: "Assembling batch 2"},
|
||||
... (continue for all batches)
|
||||
]})
|
||||
```
|
||||
|
||||
### Step 2: Launch Batched Assembly Tasks
|
||||
|
||||
For each batch (up to 6 parallel agents per batch):
|
||||
For each agent group `{target, style_id, layout_ids[]}` in current batch:
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[LAYOUT_STYLE_ASSEMBLY]
|
||||
🎯 Assembly task: {target} × Style-{style_id} × Layout-{layout_id}
|
||||
Combine: Pre-extracted layout structure + design tokens → Final HTML/CSS
|
||||
🎯 {target} × Style-{style_id} × Layouts-{layout_ids}
|
||||
⚠️ CONSTRAINT: Use ONLY style-{style_id}/design-tokens.json (never mix styles)
|
||||
|
||||
TARGET: {target} | STYLE: {style_id} | LAYOUT: {layout_id}
|
||||
TARGET: {target} | STYLE: {style_id} | LAYOUTS: {layout_ids} (max 10)
|
||||
BASE_PATH: {base_path}
|
||||
|
||||
## Inputs (READ ONLY - NO DESIGN DECISIONS)
|
||||
1. Layout Template:
|
||||
Read("{base_path}/layout-extraction/layout-templates.json")
|
||||
Find template where: target={target} AND variant_id="layout-{layout_id}"
|
||||
Extract: dom_structure, css_layout_rules, device_type, source_image_path
|
||||
1. Layout Templates (LOOP THROUGH):
|
||||
FOR each layout_id in layout_ids:
|
||||
Read("{base_path}/layout-extraction/layout-{target}-{layout_id}.json")
|
||||
This file contains the specific layout template for this target and variant.
|
||||
Extract: dom_structure, css_layout_rules, device_type, source_image_path (from template field)
|
||||
|
||||
2. Design Tokens:
|
||||
2. Design Tokens (SHARED - READ ONCE):
|
||||
Read("{base_path}/style-extraction/style-{style_id}/design-tokens.json")
|
||||
Extract: ALL token values including:
|
||||
* colors, typography (with combinations), spacing, opacity
|
||||
@@ -121,61 +213,70 @@ Task(ui-design-agent): `
|
||||
ELSE:
|
||||
Use generic placeholder content
|
||||
|
||||
## Assembly Process
|
||||
1. Build HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html
|
||||
- Recursively build from template.dom_structure
|
||||
- Add: <!DOCTYPE html>, <head>, <meta viewport>
|
||||
- CSS link: <link href="{target}-style-{style_id}-layout-{layout_id}.css">
|
||||
- Inject placeholder content:
|
||||
* Default: Use Lorem ipsum, generic sample data
|
||||
* If reference image available: Generate more contextually appropriate placeholders
|
||||
(e.g., realistic headings, meaningful text snippets that match the visual context)
|
||||
- Preserve all attributes from dom_structure
|
||||
## Assembly Process (LOOP FOR EACH LAYOUT)
|
||||
FOR each layout_id in layout_ids:
|
||||
|
||||
2. Build CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.css
|
||||
- Start with template.css_layout_rules
|
||||
- Replace ALL var(--*) with actual token values from design-tokens.json
|
||||
Example: var(--spacing-4) → 1rem (from tokens.spacing.4)
|
||||
Example: var(--breakpoint-md) → 768px (from tokens.breakpoints.md)
|
||||
Example: var(--opacity-80) → 0.8 (from tokens.opacity.80)
|
||||
- Add visual styling using design tokens:
|
||||
* Colors: tokens.colors.*
|
||||
* Typography: tokens.typography.* (including combinations)
|
||||
* Opacity: tokens.opacity.*
|
||||
* Shadows: tokens.shadows.*
|
||||
* Border radius: tokens.border_radius.*
|
||||
- IF tokens.component_styles exists: Add component style classes
|
||||
* Generate classes for button variants (.btn-primary, .btn-secondary)
|
||||
* Generate classes for card variants (.card-default, .card-interactive)
|
||||
* Generate classes for input variants (.input-default, .input-focus, .input-error)
|
||||
* Use var() references that resolve to actual token values
|
||||
- IF tokens.typography.combinations exists: Add typography preset classes
|
||||
* Generate classes for typography presets (.text-heading-primary, .text-body-regular, .text-caption)
|
||||
* Use var() references for family, size, weight, line-height, letter-spacing
|
||||
- IF has_animations == true: Inject animation tokens
|
||||
* Add CSS Custom Properties for animations at :root level:
|
||||
--duration-instant, --duration-fast, --duration-normal, etc.
|
||||
--easing-linear, --easing-ease-out, etc.
|
||||
* Add @keyframes rules from animation_tokens.keyframes
|
||||
* Add interaction classes (.button-hover, .card-hover) from animation_tokens.interactions
|
||||
* Add utility classes (.transition-color, .transition-transform) from animation_tokens.transitions
|
||||
* Include prefers-reduced-motion media query for accessibility
|
||||
- Device-optimized for template.device_type
|
||||
1. Build HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html
|
||||
- Recursively build from template.dom_structure
|
||||
- Add: <!DOCTYPE html>, <head>, <meta viewport>
|
||||
- CSS link: <link href="{target}-style-{style_id}-layout-{layout_id}.css">
|
||||
- Inject placeholder content:
|
||||
* Default: Use Lorem ipsum, generic sample data
|
||||
* If reference image available: Generate more contextually appropriate placeholders
|
||||
(e.g., realistic headings, meaningful text snippets that match the visual context)
|
||||
- Preserve all attributes from dom_structure
|
||||
|
||||
2. Build CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.css
|
||||
- Start with template.css_layout_rules
|
||||
- Replace ALL var(--*) with actual token values from design-tokens.json
|
||||
Example: var(--spacing-4) → 1rem (from tokens.spacing.4)
|
||||
Example: var(--breakpoint-md) → 768px (from tokens.breakpoints.md)
|
||||
Example: var(--opacity-80) → 0.8 (from tokens.opacity.80)
|
||||
- Add visual styling using design tokens:
|
||||
* Colors: tokens.colors.*
|
||||
* Typography: tokens.typography.* (including combinations)
|
||||
* Opacity: tokens.opacity.*
|
||||
* Shadows: tokens.shadows.*
|
||||
* Border radius: tokens.border_radius.*
|
||||
- IF tokens.component_styles exists: Add component style classes
|
||||
* Generate classes for button variants (.btn-primary, .btn-secondary)
|
||||
* Generate classes for card variants (.card-default, .card-interactive)
|
||||
* Generate classes for input variants (.input-default, .input-focus, .input-error)
|
||||
* Use var() references that resolve to actual token values
|
||||
- IF tokens.typography.combinations exists: Add typography preset classes
|
||||
* Generate classes for typography presets (.text-heading-primary, .text-body-regular, .text-caption)
|
||||
* Use var() references for family, size, weight, line-height, letter-spacing
|
||||
- IF has_animations == true: Inject animation tokens (ONCE, shared across layouts)
|
||||
* Add CSS Custom Properties for animations at :root level:
|
||||
--duration-instant, --duration-fast, --duration-normal, etc.
|
||||
--easing-linear, --easing-ease-out, etc.
|
||||
* Add @keyframes rules from animation_tokens.keyframes
|
||||
* Add interaction classes (.button-hover, .card-hover) from animation_tokens.interactions
|
||||
* Add utility classes (.transition-color, .transition-transform) from animation_tokens.transitions
|
||||
* Include prefers-reduced-motion media query for accessibility
|
||||
- Device-optimized for template.device_type
|
||||
|
||||
3. Write files IMMEDIATELY after each layout completes
|
||||
|
||||
## Assembly Rules
|
||||
- ✅ Pure assembly: Combine existing structure + existing style
|
||||
- ❌ NO layout design decisions (structure pre-defined)
|
||||
- ❌ NO style design decisions (tokens pre-defined)
|
||||
- ✅ Pure assembly: Combine pre-extracted structure + tokens
|
||||
- ❌ NO design decisions (layout/style pre-defined)
|
||||
- ✅ Read tokens ONCE, apply to all layouts in this batch
|
||||
- ✅ Replace var() with actual values
|
||||
- ✅ Add placeholder content only
|
||||
- Write files IMMEDIATELY
|
||||
- CSS filename MUST match HTML <link href="...">
|
||||
- ✅ CSS filename MUST match HTML <link href="...">
|
||||
|
||||
## Output
|
||||
- Files: {len(layout_ids) × 2} (HTML + CSS pairs)
|
||||
- Each layout generates 2 files independently
|
||||
`
|
||||
|
||||
# After each batch completes
|
||||
TodoWrite: Mark current batch completed, next batch in_progress
|
||||
```
|
||||
|
||||
### Step 2: Verify Generated Files
|
||||
### Step 3: Verify Generated Files
|
||||
```bash
|
||||
# Count expected vs found
|
||||
# Count expected vs found (should equal S × L × T)
|
||||
bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
|
||||
|
||||
# Validate samples
|
||||
@@ -183,7 +284,7 @@ Read({base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html)
|
||||
# Check: <!DOCTYPE html>, correct CSS href, sufficient CSS length
|
||||
```
|
||||
|
||||
**Output**: `S × L × T × 2` files verified
|
||||
**Output**: `total_files = S × L × T × 2` files verified (HTML + CSS pairs)
|
||||
|
||||
## Phase 3: Generate Preview Files
|
||||
|
||||
@@ -210,10 +311,10 @@ bash(ls {base_path}/prototypes/compare.html {base_path}/prototypes/index.html {b
|
||||
```javascript
|
||||
TodoWrite({todos: [
|
||||
{content: "Setup and validation", status: "completed", activeForm: "Loading design systems"},
|
||||
{content: "Load layout templates", status: "completed", activeForm: "Reading layout templates"},
|
||||
{content: "Assembly (agent)", status: "completed", activeForm: "Assembling prototypes"},
|
||||
{content: "Verify files", status: "completed", activeForm: "Validating output"},
|
||||
{content: "Generate previews", status: "completed", activeForm: "Creating preview files"}
|
||||
{content: "Batch 1/{total_batches}: Assemble 6 tasks", status: "completed", activeForm: "Assembling batch 1"},
|
||||
{content: "Batch 2/{total_batches}: Assemble 6 tasks", status: "completed", activeForm: "Assembling batch 2"},
|
||||
... (all batches completed)
|
||||
{content: "Verify files & generate previews", status: "completed", activeForm: "Creating previews"}
|
||||
]});
|
||||
```
|
||||
|
||||
@@ -223,33 +324,41 @@ TodoWrite({todos: [
|
||||
|
||||
Configuration:
|
||||
- Style Variants: {style_variants}
|
||||
- Layout Variants: {layout_variants} (from layout-templates.json)
|
||||
- Layout Variants: {layout_variants} (from layout-*.json files)
|
||||
- Device Type: {device_type}
|
||||
- Targets: {targets}
|
||||
- Total Prototypes: {S × L × T}
|
||||
- Image Reference: Auto-detected (uses source images when available in layout templates)
|
||||
- Animation Support: {has_animations ? 'Enabled (animation-tokens.json loaded)' : 'Not available'}
|
||||
|
||||
Assembly Process:
|
||||
- Pure assembly: Combined pre-extracted layouts + design tokens
|
||||
- No design decisions: All structure and style pre-defined
|
||||
- Assembly tasks: T×S×L = {T}×{S}×{L} = {T×S×L} combinations
|
||||
- Agent grouping: target × style (max 10 layouts per agent)
|
||||
- Balanced distribution: Layouts evenly split (e.g., 12 → 6+6, not 10+2)
|
||||
|
||||
Batch Execution:
|
||||
- Total agents: {total_agents} (each processes ONE style only)
|
||||
- Batches: {total_batches} (max 6 agents parallel)
|
||||
- Token efficiency: Read once per agent, apply to all layouts
|
||||
|
||||
Quality:
|
||||
- Structure: From layout-extract (DOM, CSS layout rules)
|
||||
- Style: From style-extract (design tokens)
|
||||
- CSS: Token values directly applied (var() replaced)
|
||||
- Device-optimized: Layouts match device_type from templates
|
||||
- Animations: {has_animations ? 'CSS custom properties and @keyframes injected' : 'Static styles only'}
|
||||
|
||||
Generated Files:
|
||||
{base_path}/prototypes/
|
||||
├── _templates/
|
||||
│ └── layout-templates.json (input, pre-extracted)
|
||||
├── {target}-style-{s}-layout-{l}.html ({S×L×T} prototypes)
|
||||
├── {target}-style-{s}-layout-{l}.css
|
||||
├── compare.html (interactive matrix)
|
||||
├── index.html (navigation)
|
||||
└── PREVIEW.md (instructions)
|
||||
|
||||
Input Files (from layout-extraction/):
|
||||
├── layout-{target}-{variant}.json (multiple files, one per target-variant combination)
|
||||
|
||||
Preview:
|
||||
1. Open compare.html (recommended)
|
||||
2. Open index.html
|
||||
@@ -263,7 +372,7 @@ Next: /workflow:ui-design:update
|
||||
### Path Operations
|
||||
```bash
|
||||
# Find design directory
|
||||
bash(find .workflow -type d -name "design-*" | head -1)
|
||||
bash(find .workflow -type d -name "design-run-*" | head -1)
|
||||
|
||||
# Count style variants
|
||||
bash(ls {base_path}/style-extraction/style-* -d | wc -l)
|
||||
@@ -271,8 +380,11 @@ bash(ls {base_path}/style-extraction/style-* -d | wc -l)
|
||||
|
||||
### Validation Commands
|
||||
```bash
|
||||
# Check layout templates exist
|
||||
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
|
||||
# Check layout templates exist (multi-file pattern)
|
||||
bash(find {base_path}/layout-extraction -name "layout-*.json" -print -quit | grep -q . && echo "exists")
|
||||
|
||||
# Count layout files
|
||||
bash(ls {base_path}/layout-extraction/layout-*.json 2>/dev/null | wc -l)
|
||||
|
||||
# Check design tokens exist
|
||||
bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
|
||||
@@ -298,10 +410,10 @@ bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
|
||||
```
|
||||
{base_path}/
|
||||
├── layout-extraction/
|
||||
│ └── layout-templates.json # Input (from layout-extract)
|
||||
│ └── layout-{target}-{variant}.json # Input (multiple files from layout-extract)
|
||||
├── style-extraction/
|
||||
│ └── style-{s}/
|
||||
│ ├── design-tokens.json # Input (from style-extract)
|
||||
│ ├── design-tokens.json # Input (from style-extract)
|
||||
│ └── style-guide.md
|
||||
└── prototypes/
|
||||
├── {target}-style-{s}-layout-{l}.html # Assembled prototypes
|
||||
@@ -330,7 +442,7 @@ ERROR: Script permission denied
|
||||
|
||||
### Recovery Strategies
|
||||
- **Partial success**: Keep successful assembly combinations
|
||||
- **Invalid template structure**: Validate layout-templates.json
|
||||
- **Invalid template structure**: Validate layout-*.json files
|
||||
- **Invalid tokens**: Validate design-tokens.json structure
|
||||
|
||||
## Quality Checklist
|
||||
@@ -346,18 +458,17 @@ ERROR: Script permission denied
|
||||
## Key Features
|
||||
|
||||
- **Pure Assembly**: No design decisions, only combination
|
||||
- **Separation of Concerns**: Layout (structure) + Style (tokens) kept separate until final assembly
|
||||
- **Token Resolution**: var() placeholders replaced with actual values
|
||||
- **Pre-validated**: Inputs already validated by extract/consolidate
|
||||
- **Efficient**: Simple assembly vs complex generation
|
||||
- **Token Resolution**: var() → actual values
|
||||
- **Efficient Grouping**: target × style (max 10 layouts/agent, balanced split)
|
||||
- **Style Isolation**: Each agent processes ONE style only
|
||||
- **Production-Ready**: Semantic, accessible, token-driven
|
||||
|
||||
## Integration
|
||||
|
||||
**Prerequisites**:
|
||||
- `/workflow:ui-design:style-extract` → `design-tokens.json` + `style-guide.md`
|
||||
- `/workflow:ui-design:layout-extract` → `layout-templates.json`
|
||||
- `/workflow:ui-design:layout-extract` → `layout-{target}-{variant}.json` files
|
||||
|
||||
**Input**: `layout-templates.json` + `design-tokens.json`
|
||||
**Input**: `layout-*.json` files + `design-tokens.json`
|
||||
**Output**: S×L×T prototypes for `/workflow:ui-design:update`
|
||||
**Called by**: `/workflow:ui-design:explore-auto`, `/workflow:ui-design:imitate-auto`
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: imitate-auto
|
||||
description: High-speed multi-page UI replication with batch screenshot capture and design token extraction
|
||||
argument-hint: --url-map "<map>" [--capture-mode <batch|deep>] [--depth <1-5>] [--session <id>] [--prompt "<desc>"]
|
||||
description: UI design workflow with direct code/image input for design token extraction and prototype generation
|
||||
argument-hint: "[--images "<glob>"] [--prompt "<desc>"] [--session <id>]"
|
||||
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
|
||||
---
|
||||
|
||||
@@ -9,79 +9,72 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
|
||||
|
||||
## Overview & Execution Model
|
||||
|
||||
**Fully autonomous replication orchestrator**: Efficiently replicate multiple web pages through sequential execution from screenshot capture to design integration.
|
||||
**Fully autonomous design orchestrator**: Efficiently create UI prototypes through sequential execution from design token extraction to system integration.
|
||||
|
||||
**Dual Capture Strategy**: Supports two capture modes for different use cases:
|
||||
- **Batch Mode** (default): Fast multi-URL screenshot capture via `/workflow:ui-design:capture`
|
||||
- **Deep Mode**: Interactive layer exploration for single URL via `/workflow:ui-design:explore-layers`
|
||||
**Direct Input Strategy**: Accepts local code files and images:
|
||||
- **Code Files**: Detect file paths in `--prompt` parameter
|
||||
- **Images**: Reference images via `--images` glob pattern
|
||||
- **Hybrid**: Combine both code and visual inputs
|
||||
|
||||
**Autonomous Flow** (⚠️ CONTINUOUS EXECUTION - DO NOT STOP):
|
||||
1. User triggers: `/workflow:ui-design:imitate-auto --url-map "..."`
|
||||
2. Phase 0: Initialize and parse parameters
|
||||
3. Phase 1: Screenshot capture (batch or deep mode) → **WAIT for completion** → Auto-continues
|
||||
4. Phase 2: Style extraction (complete design systems) → **WAIT for completion** → Auto-continues
|
||||
5. Phase 2.3: Animation extraction (CSS auto mode) → **WAIT for completion** → Auto-continues
|
||||
6. Phase 2.5: Layout extraction (structure templates) → **WAIT for completion** → Auto-continues
|
||||
7. Phase 3: Batch UI assembly → **WAIT for completion** → Auto-continues
|
||||
8. Phase 4: Design system integration → Reports completion
|
||||
1. User triggers: `/workflow:ui-design:imitate-auto [--images "..."] [--prompt "..."]`
|
||||
2. Phase 0: Initialize and detect input sources
|
||||
3. Phase 2: Style extraction (complete design systems) → **Execute phase (blocks until finished)** → Auto-continues
|
||||
4. Phase 2.3: Animation extraction (CSS auto mode) → **Execute phase (blocks until finished)** → Auto-continues
|
||||
5. Phase 2.5: Layout extraction (structure templates) → **Execute phase (blocks until finished)** → Auto-continues
|
||||
6. Phase 3: Batch UI assembly → **Execute phase (blocks until finished)** → Auto-continues
|
||||
7. Phase 4: Design system integration → Reports completion
|
||||
|
||||
**Phase Transition Mechanism**:
|
||||
- `SlashCommand` is BLOCKING - execution pauses until completion
|
||||
- Upon each phase completion: Automatically process output and execute next phase
|
||||
- `SlashCommand` is BLOCKING - execution pauses until the command finishes
|
||||
- When each phase finishes executing: Automatically process output and execute next phase
|
||||
- No user interaction required after initial parameter parsing
|
||||
|
||||
**Auto-Continue Mechanism**: TodoWrite tracks phase status. Upon each phase completion, you MUST immediately construct and execute the next phase command. No user intervention required. The workflow is NOT complete until reaching Phase 5.
|
||||
**Auto-Continue Mechanism**: TodoWrite tracks phase status. When each phase finishes executing, you MUST immediately construct and execute the next phase command. No user intervention required. The workflow is NOT complete until reaching Phase 4.
|
||||
|
||||
## Core Rules
|
||||
|
||||
1. **Start Immediately**: TodoWrite initialization → Phase 1 execution
|
||||
1. **Start Immediately**: TodoWrite initialization → Phase 2 execution
|
||||
2. **No Preliminary Validation**: Sub-commands handle their own validation
|
||||
3. **Parse & Pass**: Extract data from each output for next phase
|
||||
4. **Track Progress**: Update TodoWrite after each phase
|
||||
5. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. After each SlashCommand completes, you MUST wait for completion, then immediately execute the next phase. Workflow is NOT complete until Phase 5.
|
||||
5. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. Each SlashCommand execution blocks until finished, then you MUST immediately execute the next phase. Workflow is NOT complete until Phase 4.
|
||||
|
||||
## Parameter Requirements
|
||||
|
||||
**Required Parameters**:
|
||||
- `--url-map "<map>"`: Target page mapping
|
||||
- Format: `"target1:url1, target2:url2, ..."`
|
||||
- Example: `"home:https://linear.app, pricing:https://linear.app/pricing"`
|
||||
- First target serves as primary style source
|
||||
**Optional Parameters** (at least one of --images or --prompt required):
|
||||
- `--images "<glob>"`: Reference image paths (e.g., `"design-refs/*"`, `"screenshots/*.png"`)
|
||||
- Glob patterns supported
|
||||
- Multiple images can be matched
|
||||
|
||||
**Optional Parameters**:
|
||||
- `--capture-mode <batch|deep>` (Optional, default: batch): Screenshot capture strategy
|
||||
- `batch` (default): Multi-URL fast batch capture via `/workflow:ui-design:capture`
|
||||
- `deep`: Single-URL interactive depth exploration via `/workflow:ui-design:explore-layers`
|
||||
- **Note**: `deep` mode only uses first URL from url-map
|
||||
|
||||
- `--depth <1-5>` (Optional, default: 3): Capture depth for deep mode
|
||||
- `1`: Page level (full-page screenshot)
|
||||
- `2`: Element level (+ key components)
|
||||
- `3`: Interaction level (+ modals, dropdowns)
|
||||
- `4`: Embedded level (+ iframes)
|
||||
- `5`: Shadow DOM (+ web components)
|
||||
- **Only applies when** `--capture-mode deep`
|
||||
- `--prompt "<desc>"`: Design description or file path
|
||||
- Can contain file paths (automatically detected)
|
||||
- Influences extract command analysis focus
|
||||
- Example: `"Focus on dark mode"`, `"Emphasize minimalist design"`
|
||||
- Example with path: `"Use design from ./src/components"`
|
||||
|
||||
- `--session <id>` (Optional): Workflow session ID
|
||||
- Integrate into existing session (`.workflow/WFS-{session}/`)
|
||||
- Enable automatic design system integration (Phase 5)
|
||||
- Enable automatic design system integration (Phase 4)
|
||||
- If not provided: standalone mode (`.workflow/.design/`)
|
||||
|
||||
- `--prompt "<desc>"` (Optional): Style extraction guidance
|
||||
- Influences extract command analysis focus
|
||||
- Example: `"Focus on dark mode"`, `"Emphasize minimalist design"`
|
||||
- **Note**: Design systems are now production-ready by default (no separate consolidate step)
|
||||
**Input Rules**:
|
||||
- Must provide at least one: `--images` or `--prompt`
|
||||
- Multiple parameters can be combined for guided analysis
|
||||
- File paths in `--prompt` are automatically detected and imported
|
||||
|
||||
## Execution Modes
|
||||
|
||||
**Capture Modes**:
|
||||
- **Batch Mode** (default): Multi-URL screenshot capture for fast replication
|
||||
- Uses `/workflow:ui-design:capture` for parallel screenshot capture
|
||||
- Optimized for replicating multiple pages efficiently
|
||||
- **Deep Mode**: Single-URL layer exploration for detailed analysis
|
||||
- Uses `/workflow:ui-design:explore-layers` for interactive depth traversal
|
||||
- Captures page layers at different depths (1-5)
|
||||
- Only processes first URL from url-map
|
||||
**Input Sources**:
|
||||
- **Code Files**: Automatically detected from `--prompt` file paths
|
||||
- Triggers `/workflow:ui-design:import-from-code` for token extraction
|
||||
- Analyzes existing CSS/JS/HTML files
|
||||
- **Visual Input**: Images via `--images` glob pattern
|
||||
- Reference images for style extraction
|
||||
- Screenshots or design mockups
|
||||
- **Hybrid Mode**: Combines code import with visual supplements
|
||||
- Code provides base tokens
|
||||
- Images supplement missing design elements
|
||||
|
||||
**Token Processing**:
|
||||
- **Direct Generation**: Complete design systems generated in style-extract phase
|
||||
@@ -94,31 +87,15 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
|
||||
- Integrated: Design system automatically added to session artifacts
|
||||
- Standalone: Output in `.workflow/.design/{run_id}/`
|
||||
|
||||
## 6-Phase Execution
|
||||
## 5-Phase Execution
|
||||
|
||||
### Phase 0: Initialization and Target Parsing
|
||||
### Phase 0: Intelligent Path Detection & Initialization
|
||||
|
||||
```bash
|
||||
# Generate run ID
|
||||
run_id = "run-$(date +%Y%m%d-%H%M%S)"
|
||||
|
||||
# Determine base path and session mode
|
||||
IF --session:
|
||||
session_id = {provided_session}
|
||||
base_path = ".workflow/WFS-{session_id}/design-{run_id}"
|
||||
session_mode = "integrated"
|
||||
ELSE:
|
||||
session_id = null
|
||||
base_path = ".workflow/.design/{run_id}"
|
||||
session_mode = "standalone"
|
||||
|
||||
# Create base directory
|
||||
Bash(mkdir -p "{base_path}")
|
||||
|
||||
# Step 0.1: Intelligent Path Detection
|
||||
# Step 1: Detect design source from inputs
|
||||
code_files_detected = false
|
||||
code_base_path = null
|
||||
design_source = "web" # Default for imitate-auto
|
||||
has_visual_input = false
|
||||
|
||||
IF --prompt:
|
||||
# Extract potential file paths from prompt
|
||||
@@ -127,88 +104,73 @@ IF --prompt:
|
||||
IF file_or_directory_exists(path):
|
||||
code_files_detected = true
|
||||
code_base_path = path
|
||||
design_source = "hybrid" # Web + Code
|
||||
BREAK
|
||||
|
||||
STORE: design_source, code_base_path
|
||||
IF --images:
|
||||
# Check if images parameter points to existing files
|
||||
IF glob_matches_files(--images):
|
||||
has_visual_input = true
|
||||
|
||||
# Parse url-map
|
||||
url_map_string = {--url-map}
|
||||
VALIDATE: url_map_string is not empty, "--url-map parameter is required"
|
||||
|
||||
# Parse target:url pairs
|
||||
url_map = {} # {target_name: url}
|
||||
target_names = []
|
||||
|
||||
FOR pair IN split(url_map_string, ","):
|
||||
pair = pair.strip()
|
||||
|
||||
IF ":" NOT IN pair:
|
||||
ERROR: "Invalid url-map format: '{pair}'"
|
||||
ERROR: "Expected format: 'target:url'"
|
||||
ERROR: "Example: 'home:https://example.com, pricing:https://example.com/pricing'"
|
||||
EXIT 1
|
||||
|
||||
target, url = pair.split(":", 1)
|
||||
target = target.strip().lower().replace(" ", "-")
|
||||
url = url.strip()
|
||||
|
||||
url_map[target] = url
|
||||
target_names.append(target)
|
||||
|
||||
VALIDATE: len(target_names) > 0, "url-map must contain at least one target:url pair"
|
||||
|
||||
primary_target = target_names[0] # First target as primary style source
|
||||
|
||||
# Parse capture mode
|
||||
capture_mode = --capture-mode OR "batch"
|
||||
depth = int(--depth OR 3)
|
||||
|
||||
# Validate capture mode
|
||||
IF capture_mode NOT IN ["batch", "deep"]:
|
||||
ERROR: "Invalid --capture-mode: {capture_mode}"
|
||||
ERROR: "Valid options: batch, deep"
|
||||
# Step 2: Determine design source strategy
|
||||
design_source = "unknown"
|
||||
IF code_files_detected AND has_visual_input:
|
||||
design_source = "hybrid" # Both code and visual
|
||||
ELSE IF code_files_detected:
|
||||
design_source = "code_only" # Only code files
|
||||
ELSE IF has_visual_input OR --prompt:
|
||||
design_source = "visual_only" # Only visual/prompt
|
||||
ELSE:
|
||||
ERROR: "No design source provided (code files, images, or prompt required)"
|
||||
EXIT 1
|
||||
|
||||
# Validate depth (only for deep mode)
|
||||
IF capture_mode == "deep":
|
||||
IF depth NOT IN [1, 2, 3, 4, 5]:
|
||||
ERROR: "Invalid --depth: {depth}"
|
||||
ERROR: "Valid range: 1-5"
|
||||
EXIT 1
|
||||
STORE: design_source, code_base_path, has_visual_input
|
||||
|
||||
# Warn if multiple URLs in deep mode
|
||||
IF len(target_names) > 1:
|
||||
WARN: "⚠️ Deep mode only uses first URL: '{primary_target}'"
|
||||
WARN: " Other URLs will be ignored: {', '.join(target_names[1:])}"
|
||||
WARN: " For multi-URL, use --capture-mode batch"
|
||||
# Step 3: Initialize directories
|
||||
design_id = "design-run-$(date +%Y%m%d)-$RANDOM"
|
||||
|
||||
IF --session:
|
||||
session_id = {provided_session}
|
||||
relative_base_path = ".workflow/WFS-{session_id}/{design_id}"
|
||||
session_mode = "integrated"
|
||||
ELSE:
|
||||
session_id = null
|
||||
relative_base_path = ".workflow/.design/{design_id}"
|
||||
session_mode = "standalone"
|
||||
|
||||
# Create base directory and convert to absolute path
|
||||
Bash(mkdir -p "{relative_base_path}")
|
||||
base_path=$(cd "{relative_base_path}" && pwd)
|
||||
|
||||
# Write metadata
|
||||
metadata = {
|
||||
"workflow": "imitate-auto",
|
||||
"run_id": run_id,
|
||||
"run_id": design_id,
|
||||
"session_id": session_id,
|
||||
"timestamp": current_timestamp(),
|
||||
"parameters": {
|
||||
"url_map": url_map,
|
||||
"capture_mode": capture_mode,
|
||||
"depth": depth IF capture_mode == "deep" ELSE null,
|
||||
"design_source": design_source,
|
||||
"code_base_path": code_base_path,
|
||||
"images": --images OR null,
|
||||
"prompt": --prompt OR null
|
||||
},
|
||||
"targets": target_names,
|
||||
"status": "in_progress"
|
||||
}
|
||||
|
||||
Write("{base_path}/.run-metadata.json", JSON.stringify(metadata, null, 2))
|
||||
|
||||
# Initialize default flags
|
||||
animation_complete = false
|
||||
needs_visual_supplement = false
|
||||
style_complete = false
|
||||
layout_complete = false
|
||||
|
||||
# Initialize TodoWrite
|
||||
TodoWrite({todos: [
|
||||
{content: "Initialize and parse url-map", status: "completed", activeForm: "Initializing"},
|
||||
{content: capture_mode == "batch" ? f"Batch screenshot capture ({len(target_names)} targets)" : f"Deep exploration (depth {depth})", status: "pending", activeForm: "Capturing screenshots"},
|
||||
{content: "Initialize and detect design source", status: "completed", 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: f"Assemble UI for {len(target_names)} targets", status: "pending", activeForm: "Assembling UI"},
|
||||
{content: "Assemble UI prototypes", status: "pending", activeForm: "Assembling UI"},
|
||||
{content: session_id ? "Integrate design system" : "Standalone completion", status: "pending", activeForm: "Completing"}
|
||||
]})
|
||||
```
|
||||
@@ -224,8 +186,8 @@ IF design_source == "hybrid":
|
||||
REPORT: " → Source: {code_base_path}"
|
||||
REPORT: " → Mode: Hybrid (Web + Code)"
|
||||
|
||||
command = "/workflow:ui-design:import-from-code --base-path \"{base_path}\" " +
|
||||
"--base-path \"{code_base_path}\""
|
||||
command = "/workflow:ui-design:import-from-code --design-id \"{design_id}\" " +
|
||||
"--source \"{code_base_path}\""
|
||||
|
||||
TRY:
|
||||
SlashCommand(command)
|
||||
@@ -238,7 +200,8 @@ IF design_source == "hybrid":
|
||||
# Check file existence and assess completeness
|
||||
style_exists = exists("{base_path}/style-extraction/style-1/design-tokens.json")
|
||||
animation_exists = exists("{base_path}/animation-extraction/animation-tokens.json")
|
||||
layout_exists = exists("{base_path}/layout-extraction/layout-templates.json")
|
||||
layout_count = bash(ls {base_path}/layout-extraction/layout-*.json 2>/dev/null | wc -l)
|
||||
layout_exists = (layout_count > 0)
|
||||
|
||||
style_complete = false
|
||||
animation_complete = false
|
||||
@@ -274,14 +237,16 @@ IF design_source == "hybrid":
|
||||
|
||||
# Layout completeness check
|
||||
IF layout_exists:
|
||||
layouts = Read("{base_path}/layout-extraction/layout-templates.json")
|
||||
# Read first layout file to verify structure
|
||||
first_layout = bash(ls {base_path}/layout-extraction/layout-*.json 2>/dev/null | head -1)
|
||||
layout_data = Read(first_layout)
|
||||
layout_complete = (
|
||||
layouts.layout_templates?.length >= 3 &&
|
||||
layouts.extraction_metadata?.layout_system?.type &&
|
||||
layouts.extraction_metadata?.responsive?.breakpoints
|
||||
layout_count >= 1 &&
|
||||
layout_data.template?.dom_structure &&
|
||||
layout_data.template?.css_layout_rules
|
||||
)
|
||||
IF NOT layout_complete AND layouts.extraction_metadata?.completeness?.missing_items:
|
||||
missing_categories.extend(layouts.extraction_metadata.completeness.missing_items)
|
||||
IF NOT layout_complete:
|
||||
missing_categories.push("complete layout structure")
|
||||
ELSE:
|
||||
missing_categories.push("layout templates")
|
||||
|
||||
@@ -306,105 +271,36 @@ IF design_source == "hybrid":
|
||||
|
||||
STORE: style_complete, animation_complete, layout_complete
|
||||
|
||||
TodoWrite(mark_completed: "Initialize and parse url-map",
|
||||
mark_in_progress: capture_mode == "batch" ? f"Batch screenshot capture ({len(target_names)} targets)" : f"Deep exploration (depth {depth})")
|
||||
```
|
||||
|
||||
### Phase 1: Screenshot Capture (Dual Mode)
|
||||
|
||||
```bash
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
REPORT: "🚀 Phase 1: Screenshot Capture"
|
||||
IF design_source == "hybrid":
|
||||
REPORT: " → Purpose: Verify and supplement code analysis"
|
||||
REPORT: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
|
||||
|
||||
IF capture_mode == "batch":
|
||||
# Mode A: Batch Multi-URL Capture
|
||||
url_map_command_string = ",".join([f"{name}:{url}" for name, url in url_map.items()])
|
||||
capture_command = f"/workflow:ui-design:capture --base-path \"{base_path}\" --url-map \"{url_map_command_string}\""
|
||||
|
||||
TRY:
|
||||
SlashCommand(capture_command)
|
||||
CATCH error:
|
||||
ERROR: "Batch capture failed: {error}"
|
||||
ERROR: "Cannot proceed without screenshots"
|
||||
EXIT 1
|
||||
|
||||
# Verify batch capture results
|
||||
screenshot_metadata_path = "{base_path}/screenshots/capture-metadata.json"
|
||||
|
||||
IF NOT exists(screenshot_metadata_path):
|
||||
ERROR: "capture command did not generate metadata file"
|
||||
ERROR: "Expected: {screenshot_metadata_path}"
|
||||
EXIT 1
|
||||
|
||||
screenshot_metadata = Read(screenshot_metadata_path)
|
||||
captured_count = screenshot_metadata.total_captured
|
||||
total_requested = screenshot_metadata.total_requested
|
||||
missing_count = total_requested - captured_count
|
||||
|
||||
IF missing_count > 0:
|
||||
missing_targets = [s.target for s in screenshot_metadata.screenshots if not s.captured]
|
||||
WARN: "⚠️ Missing {missing_count} screenshots: {', '.join(missing_targets)}"
|
||||
|
||||
IF captured_count == 0:
|
||||
ERROR: "No screenshots captured - cannot proceed"
|
||||
EXIT 1
|
||||
|
||||
ELSE: # capture_mode == "deep"
|
||||
# Mode B: Deep Interactive Layer Exploration
|
||||
primary_url = url_map[primary_target]
|
||||
explore_command = f"/workflow:ui-design:explore-layers --url \"{primary_url}\" --depth {depth} --base-path \"{base_path}\""
|
||||
|
||||
TRY:
|
||||
SlashCommand(explore_command)
|
||||
CATCH error:
|
||||
ERROR: "Deep exploration failed: {error}"
|
||||
ERROR: "Cannot proceed without screenshots"
|
||||
EXIT 1
|
||||
|
||||
# Verify deep exploration results
|
||||
layer_map_path = "{base_path}/screenshots/layer-map.json"
|
||||
|
||||
IF NOT exists(layer_map_path):
|
||||
ERROR: "explore-layers did not generate layer-map.json"
|
||||
ERROR: "Expected: {layer_map_path}"
|
||||
EXIT 1
|
||||
|
||||
layer_map = Read(layer_map_path)
|
||||
captured_count = layer_map.summary.total_captures
|
||||
total_requested = captured_count # For consistency with batch mode
|
||||
|
||||
TodoWrite(mark_completed: f"Batch screenshot capture ({len(target_names)} targets)" IF capture_mode == "batch" ELSE f"Deep exploration (depth {depth})",
|
||||
mark_in_progress: "Extract style (visual tokens)")
|
||||
TodoWrite(mark_completed: "Initialize and detect design source",
|
||||
mark_in_progress: "Extract style (complete design systems)")
|
||||
```
|
||||
|
||||
### Phase 2: Style Extraction
|
||||
|
||||
```bash
|
||||
# Determine if style extraction needed
|
||||
skip_style = (design_source == "hybrid" AND style_complete)
|
||||
skip_style = (design_source == "code_only" AND style_complete)
|
||||
|
||||
IF skip_style:
|
||||
REPORT: "✅ Phase 2: Style (Using Code Import)"
|
||||
ELSE:
|
||||
REPORT: "🚀 Phase 2: Style Extraction"
|
||||
IF capture_mode == "batch":
|
||||
images_glob = f"{base_path}/screenshots/*.{{png,jpg,jpeg,webp}}"
|
||||
ELSE:
|
||||
images_glob = f"{base_path}/screenshots/**/*.{{png,jpg,jpeg,webp}}"
|
||||
|
||||
# Build command with available inputs
|
||||
command_parts = [f"/workflow:ui-design:style-extract --design-id \"{design_id}\""]
|
||||
|
||||
IF --images:
|
||||
command_parts.append(f"--images \"{--images}\"")
|
||||
|
||||
IF --prompt:
|
||||
extraction_prompt = f"Extract visual style tokens from '{primary_target}'. {--prompt}"
|
||||
ELSE:
|
||||
extraction_prompt = --prompt
|
||||
IF design_source == "hybrid":
|
||||
extraction_prompt = f"Extract visual style tokens from '{primary_target}' to supplement code-imported design tokens."
|
||||
ELSE:
|
||||
extraction_prompt = f"Extract visual style tokens from '{primary_target}' with consistency across all pages."
|
||||
extraction_prompt = f"{--prompt} (supplement code-imported tokens)"
|
||||
command_parts.append(f"--prompt \"{extraction_prompt}\"")
|
||||
|
||||
url_map_for_extract = ",".join([f"{name}:{url}" for name, url in url_map.items()])
|
||||
extract_command = f"/workflow:ui-design:style-extract --base-path \"{base_path}\" --images \"{images_glob}\" --urls \"{url_map_for_extract}\" --prompt \"{extraction_prompt}\" --mode imitate"
|
||||
command_parts.extend(["--variants 1", "--refine", "--interactive"])
|
||||
|
||||
extract_command = " ".join(command_parts)
|
||||
SlashCommand(extract_command)
|
||||
|
||||
TodoWrite(mark_completed: "Extract style", mark_in_progress: "Extract animation")
|
||||
@@ -413,29 +309,54 @@ TodoWrite(mark_completed: "Extract style", mark_in_progress: "Extract animation"
|
||||
### Phase 2.3: Animation Extraction
|
||||
|
||||
```bash
|
||||
skip_animation = (design_source == "hybrid" AND animation_complete)
|
||||
skip_animation = (design_source == "code_only" AND animation_complete)
|
||||
|
||||
IF skip_animation:
|
||||
REPORT: "✅ Phase 2.3: Animation (Using Code Import)"
|
||||
ELSE:
|
||||
REPORT: "🚀 Phase 2.3: Animation Extraction"
|
||||
url_map_for_animation = ",".join([f"{target}:{url}" for target, url in url_map.items()])
|
||||
animation_extract_command = f"/workflow:ui-design:animation-extract --base-path \"{base_path}\" --urls \"{url_map_for_animation}\" --mode auto"
|
||||
|
||||
# Build command with available inputs
|
||||
command_parts = [f"/workflow:ui-design:animation-extract --design-id \"{design_id}\""]
|
||||
|
||||
IF --images:
|
||||
command_parts.append(f"--images \"{--images}\"")
|
||||
|
||||
IF --prompt:
|
||||
command_parts.append(f"--prompt \"{--prompt}\"")
|
||||
|
||||
command_parts.extend(["--refine", "--interactive"])
|
||||
|
||||
animation_extract_command = " ".join(command_parts)
|
||||
SlashCommand(animation_extract_command)
|
||||
|
||||
TodoWrite(mark_completed: "Extract animation", mark_in_progress: "Extract layout")
|
||||
```
|
||||
|
||||
### Phase 2.5: Layout Extraction
|
||||
|
||||
```bash
|
||||
skip_layout = (design_source == "hybrid" AND layout_complete)
|
||||
skip_layout = (design_source == "code_only" AND layout_complete)
|
||||
|
||||
IF skip_layout:
|
||||
REPORT: "✅ Phase 2.5: Layout (Using Code Import)"
|
||||
ELSE:
|
||||
REPORT: "🚀 Phase 2.5: Layout Extraction"
|
||||
url_map_for_layout = ",".join([f"{target}:{url}" for target, url in url_map.items()])
|
||||
layout_extract_command = f"/workflow:ui-design:layout-extract --base-path \"{base_path}\" --images \"{images_glob}\" --urls \"{url_map_for_layout}\" --targets \"{','.join(target_names)}\" --mode imitate"
|
||||
|
||||
# Build command with available inputs
|
||||
command_parts = [f"/workflow:ui-design:layout-extract --design-id \"{design_id}\""]
|
||||
|
||||
IF --images:
|
||||
command_parts.append(f"--images \"{--images}\"")
|
||||
|
||||
IF --prompt:
|
||||
command_parts.append(f"--prompt \"{--prompt}\"")
|
||||
|
||||
# Default target if not specified
|
||||
command_parts.append("--targets \"home\"")
|
||||
command_parts.extend(["--variants 1", "--refine", "--interactive"])
|
||||
|
||||
layout_extract_command = " ".join(command_parts)
|
||||
SlashCommand(layout_extract_command)
|
||||
|
||||
TodoWrite(mark_completed: "Extract layout", mark_in_progress: "Assemble UI")
|
||||
@@ -445,7 +366,7 @@ TodoWrite(mark_completed: "Extract layout", mark_in_progress: "Assemble UI")
|
||||
|
||||
```bash
|
||||
REPORT: "🚀 Phase 3: UI Assembly"
|
||||
generate_command = f"/workflow:ui-design:generate --base-path \"{base_path}\" --style-variants 1 --layout-variants 1"
|
||||
generate_command = f"/workflow:ui-design:generate --design-id \"{design_id}\" --style-variants 1 --layout-variants 1"
|
||||
SlashCommand(generate_command)
|
||||
|
||||
TodoWrite(mark_completed: "Assemble UI", mark_in_progress: session_id ? "Integrate design system" : "Completion")
|
||||
@@ -486,7 +407,7 @@ TodoWrite({todos: [
|
||||
]})
|
||||
```
|
||||
|
||||
### Phase 6: Completion Report
|
||||
### Phase 4: Completion Report
|
||||
|
||||
**Completion Message**:
|
||||
```
|
||||
@@ -496,26 +417,24 @@ TodoWrite({todos: [
|
||||
|
||||
━━━ 📊 Workflow Summary ━━━
|
||||
|
||||
Mode: {capture_mode == "batch" ? "Batch Multi-Page Replication" : f"Deep Interactive Exploration (depth {depth})"}
|
||||
Mode: Direct Input ({design_source})
|
||||
Session: {session_id or "standalone"}
|
||||
Run ID: {run_id}
|
||||
|
||||
Phase 1 - Screenshot Capture: ✅ {IF capture_mode == "batch": f"{captured_count}/{total_requested} screenshots" ELSE: f"{captured_count} screenshots ({total_layers} layers)"}
|
||||
{IF capture_mode == "batch" AND captured_count < total_requested: f"⚠️ {total_requested - captured_count} missing" ELSE: "All targets captured"}
|
||||
Phase 0 - Input Detection: ✅ {design_source} mode
|
||||
{IF design_source == "code_only": "Code files imported" ELSE IF design_source == "hybrid": "Code + visual inputs" ELSE: "Visual inputs"}
|
||||
|
||||
Phase 2 - Style Extraction: ✅ Production-ready design systems
|
||||
Output: style-extraction/style-1/ (design-tokens.json + style-guide.md)
|
||||
Quality: WCAG AA compliant, OKLCH colors
|
||||
|
||||
Phase 2.3 - Animation Extraction: ✅ CSS animations and transitions
|
||||
Phase 2.3 - Animation Extraction: ✅ Animation tokens
|
||||
Output: animation-extraction/ (animation-tokens.json + animation-guide.md)
|
||||
Method: Auto-extracted from live URLs via Chrome DevTools
|
||||
|
||||
Phase 2.5 - Layout Extraction: ✅ Structure templates
|
||||
Templates: {template_count} layout structures
|
||||
|
||||
Phase 3 - UI Assembly: ✅ {generated_count} pages assembled
|
||||
Targets: {', '.join(target_names)}
|
||||
Phase 3 - UI Assembly: ✅ {generated_count} prototypes assembled
|
||||
Configuration: 1 style × 1 layout × {generated_count} pages
|
||||
|
||||
Phase 4 - Integration: {IF session_id: "✅ Integrated into session" ELSE: "⏭️ Standalone mode"}
|
||||
@@ -523,20 +442,6 @@ Phase 4 - Integration: {IF session_id: "✅ Integrated into session" ELSE: "⏭
|
||||
━━━ 📂 Output Structure ━━━
|
||||
|
||||
{base_path}/
|
||||
├── screenshots/ # {captured_count} screenshots
|
||||
{IF capture_mode == "batch":
|
||||
│ ├── {target1}.png
|
||||
│ ├── {target2}.png
|
||||
│ └── capture-metadata.json
|
||||
ELSE:
|
||||
│ ├── depth-1/
|
||||
│ │ └── full-page.png
|
||||
│ ├── depth-2/
|
||||
│ │ └── {elements}.png
|
||||
│ ├── depth-{depth}/
|
||||
│ │ └── {layers}.png
|
||||
│ └── layer-map.json
|
||||
}
|
||||
├── style-extraction/ # Production-ready design systems
|
||||
│ └── style-1/
|
||||
│ ├── design-tokens.json
|
||||
@@ -545,19 +450,18 @@ ELSE:
|
||||
│ ├── animation-tokens.json
|
||||
│ └── animation-guide.md
|
||||
├── layout-extraction/ # Structure templates
|
||||
│ └── layout-templates.json
|
||||
│ └── layout-home-1.json # Layout templates
|
||||
└── prototypes/ # {generated_count} HTML/CSS files
|
||||
├── {target1}-style-1-layout-1.html + .css
|
||||
├── {target2}-style-1-layout-1.html + .css
|
||||
├── home-style-1-layout-1.html + .css
|
||||
├── compare.html # Interactive preview
|
||||
└── index.html # Quick navigation
|
||||
|
||||
━━━ ⚡ Performance ━━━
|
||||
|
||||
Total workflow time: ~{estimate_total_time()} minutes
|
||||
Screenshot capture: ~{capture_time}
|
||||
Style extraction: ~{extract_time}
|
||||
Token processing: ~{token_processing_time}
|
||||
Animation extraction: ~{animation_time}
|
||||
Layout extraction: ~{layout_time}
|
||||
UI generation: ~{generate_time}
|
||||
|
||||
━━━ 🌐 Next Steps ━━━
|
||||
@@ -588,16 +492,16 @@ ELSE:
|
||||
```javascript
|
||||
// Initialize IMMEDIATELY at start of Phase 0 to track multi-phase execution
|
||||
TodoWrite({todos: [
|
||||
{content: "Initialize and parse url-map", status: "in_progress", activeForm: "Initializing"},
|
||||
{content: "Batch screenshot capture", status: "pending", activeForm: "Capturing screenshots"},
|
||||
{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 for all targets", status: "pending", activeForm: "Assembling UI"},
|
||||
{content: "Assemble UI prototypes", status: "pending", activeForm: "Assembling UI"},
|
||||
{content: "Integrate design system", status: "pending", activeForm: "Integrating"}
|
||||
]})
|
||||
|
||||
// ⚠️ CRITICAL: After EACH SlashCommand completion (Phase 1-5), you MUST:
|
||||
// 1. SlashCommand blocks and returns when phase is complete
|
||||
// ⚠️ CRITICAL: When each SlashCommand execution finishes (Phase 2-4), you MUST:
|
||||
// 1. SlashCommand blocks and returns when phase finishes executing
|
||||
// 2. Update current phase: status → "completed"
|
||||
// 3. Update next phase: status → "in_progress"
|
||||
// 4. IMMEDIATELY execute next phase SlashCommand (auto-continue)
|
||||
@@ -607,82 +511,48 @@ TodoWrite({todos: [
|
||||
## Error Handling
|
||||
|
||||
### Pre-execution Checks
|
||||
- **url-map format validation**: Clear error message with format example
|
||||
- **Empty url-map**: Error and exit
|
||||
- **Invalid target names**: Regex validation with suggestions
|
||||
- **Input validation**: Must provide at least one of --images or --prompt
|
||||
- **Design source detection**: Error if no valid inputs found
|
||||
- **Code import failure**: Fallback to visual-only mode in hybrid, error in code-only mode
|
||||
|
||||
### Phase-Specific Errors
|
||||
- **Screenshot capture failure (Phase 1)**:
|
||||
- If total_captured == 0: Terminate workflow
|
||||
- If partial failure: Warn but continue with available screenshots
|
||||
- **Code import failure (Phase 0.5)**:
|
||||
- code_only mode: Terminate with clear error
|
||||
- hybrid mode: Warn and fallback to visual-only mode
|
||||
|
||||
- **Style extraction failure (Phase 2)**:
|
||||
- If extract fails: Terminate with clear error
|
||||
- If style-cards.json missing: Terminate with debugging info
|
||||
- If design-tokens.json missing: Terminate with debugging info
|
||||
|
||||
- **Token processing failure (Phase 3)**:
|
||||
- Consolidate mode: Terminate if consolidate fails
|
||||
- Fast mode: Validate proposed_tokens exist before copying
|
||||
- **Animation extraction failure (Phase 2.3)**:
|
||||
- Non-critical: Warn but continue
|
||||
- Can proceed without animation tokens
|
||||
|
||||
- **UI generation failure (Phase 4)**:
|
||||
- **Layout extraction failure (Phase 2.5)**:
|
||||
- If extract fails: Terminate with error
|
||||
- Need layout templates for assembly
|
||||
|
||||
- **UI generation failure (Phase 3)**:
|
||||
- If generate fails: Terminate with error
|
||||
- If generated_count < target_count: Warn but proceed
|
||||
- If generated_count < expected: Warn but proceed
|
||||
|
||||
- **Integration failure (Phase 5)**:
|
||||
- **Integration failure (Phase 4)**:
|
||||
- Non-blocking: Warn but don't terminate
|
||||
- Prototypes already available
|
||||
|
||||
### Recovery Strategies
|
||||
- **Partial screenshot failure**: Continue with available screenshots, list missing in warning
|
||||
- **Generate failure**: Report specific target failures, user can re-generate individually
|
||||
- **Code import failure**: Automatic fallback to visual-only in hybrid mode
|
||||
- **Generate failure**: Report specific failures, user can re-generate individually
|
||||
- **Integration failure**: Prototypes still usable, can integrate manually
|
||||
|
||||
|
||||
## Key Features
|
||||
|
||||
- **🚀 Dual Capture**: Batch mode for speed, deep mode for detail
|
||||
- **⚡ Production-Ready**: Complete design systems generated directly (~30-60s faster)
|
||||
- **🎨 High-Fidelity**: Single unified design system from primary target
|
||||
- **📦 Autonomous**: No user intervention required between phases
|
||||
- **🔄 Reproducible**: Deterministic flow with isolated run directories
|
||||
- **🎯 Flexible**: Standalone or session-integrated modes
|
||||
|
||||
## Examples
|
||||
|
||||
### 1. Basic Multi-Page Replication
|
||||
```bash
|
||||
/workflow:ui-design:imitate-auto --url-map "home:https://linear.app, features:https://linear.app/features"
|
||||
# Result: 2 prototypes with fast-track tokens
|
||||
```
|
||||
|
||||
### 2. Session Integration
|
||||
```bash
|
||||
/workflow:ui-design:imitate-auto --session WFS-payment --url-map "pricing:https://stripe.com/pricing"
|
||||
# Result: 1 prototype with production-ready design system, integrated into session
|
||||
```
|
||||
|
||||
### 3. Deep Exploration Mode
|
||||
```bash
|
||||
/workflow:ui-design:imitate-auto --url-map "app:https://app.com" --capture-mode deep --depth 3
|
||||
# Result: Interactive layer capture + prototype
|
||||
```
|
||||
|
||||
### 4. Guided Style Extraction
|
||||
```bash
|
||||
/workflow:ui-design:imitate-auto --url-map "home:https://example.com, about:https://example.com/about" --prompt "Focus on minimalist design"
|
||||
# Result: 2 prototypes with minimalist style focus
|
||||
```
|
||||
|
||||
## Integration Points
|
||||
|
||||
- **Input**: `--url-map` (multiple target:url pairs) + optional `--capture-mode`, `--depth`, `--session`, `--prompt`
|
||||
- **Output**: Complete design system in `{base_path}/` (screenshots, style-extraction, layout-extraction, prototypes)
|
||||
- **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**:
|
||||
1. Phase 1 (conditional):
|
||||
- `--capture-mode batch`: `/workflow:ui-design:capture` (multi-URL batch)
|
||||
- `--capture-mode deep`: `/workflow:ui-design:explore-layers` (single-URL depth exploration)
|
||||
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 - CSS animations and transitions)
|
||||
3. `/workflow:ui-design:animation-extract` (Phase 2.3 - animation tokens)
|
||||
4. `/workflow:ui-design:layout-extract` (Phase 2.5 - structure templates)
|
||||
5. `/workflow:ui-design:generate` (Phase 3 - pure assembly)
|
||||
6. `/workflow:ui-design:update` (Phase 4, if --session)
|
||||
@@ -692,30 +562,31 @@ TodoWrite({todos: [
|
||||
```
|
||||
✅ UI Design Imitate-Auto Workflow Complete!
|
||||
|
||||
Mode: {capture_mode} | Session: {session_id or "standalone"}
|
||||
Mode: Direct Input ({design_source}) | Session: {session_id or "standalone"}
|
||||
Run ID: {run_id}
|
||||
|
||||
Phase 1 - Screenshot Capture: ✅ {captured_count} screenshots
|
||||
Phase 0 - Input Detection: ✅ {design_source} mode
|
||||
Phase 2 - Style Extraction: ✅ Production-ready design systems
|
||||
Phase 2.3 - Animation Extraction: ✅ Animation tokens
|
||||
Phase 2.5 - Layout Extraction: ✅ Structure templates
|
||||
Phase 3 - UI Assembly: ✅ {generated_count} pages assembled
|
||||
Phase 3 - UI Assembly: ✅ {generated_count} prototypes assembled
|
||||
Phase 4 - Integration: {IF session_id: "✅ Integrated" ELSE: "⏭️ Standalone"}
|
||||
|
||||
Design Quality:
|
||||
✅ High-Fidelity Replication: Accurate style from primary target
|
||||
✅ Token-Driven Styling: 100% var() usage
|
||||
✅ Production-Ready: WCAG AA compliant, OKLCH colors
|
||||
✅ Multi-Source: Code import + visual extraction
|
||||
|
||||
📂 {base_path}/
|
||||
├── screenshots/ # {captured_count} screenshots
|
||||
├── style-extraction/style-1/ # Production-ready design system
|
||||
├── animation-extraction/ # Animation tokens
|
||||
├── layout-extraction/ # Structure templates
|
||||
└── prototypes/ # {generated_count} HTML/CSS files
|
||||
|
||||
🌐 Preview: {base_path}/prototypes/compare.html
|
||||
- Interactive preview
|
||||
- Side-by-side comparison
|
||||
- {generated_count} replicated pages
|
||||
- Design token driven
|
||||
- {generated_count} assembled prototypes
|
||||
|
||||
Next: [/workflow:execute] OR [Open compare.html → /workflow:plan]
|
||||
```
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: workflow:ui-design:import-from-code
|
||||
description: Import design system from code files (CSS/JS/HTML/SCSS) using parallel agent analysis with final synthesis
|
||||
argument-hint: "[--base-path <path>] [--css \"<glob>\"] [--js \"<glob>\"] [--scss \"<glob>\"] [--html \"<glob>\"] [--style-files \"<glob>\"] [--session <id>]"
|
||||
argument-hint: "[--design-id <id>] [--session <id>] [--source <path>] [--css \"<glob>\"] [--js \"<glob>\"] [--scss \"<glob>\"] [--html \"<glob>\"] [--style-files \"<glob>\"]"
|
||||
allowed-tools: Read,Write,Bash,Glob,Grep,Task,TodoWrite
|
||||
auto-continue: true
|
||||
---
|
||||
@@ -34,32 +34,36 @@ Extract design system tokens from source code files (CSS/SCSS/JS/TS/HTML) using
|
||||
/workflow:ui-design:import-from-code [FLAGS]
|
||||
|
||||
# Flags
|
||||
--base-path <path> Base directory for analysis (default: current directory)
|
||||
--design-id <id> Design run ID to import into (must exist)
|
||||
--session <id> Session ID (uses latest design run in session)
|
||||
--source <path> Source code directory to analyze (required)
|
||||
--css "<glob>" CSS file glob pattern (e.g., "theme/*.css")
|
||||
--scss "<glob>" SCSS file glob pattern (e.g., "styles/*.scss")
|
||||
--js "<glob>" JavaScript file glob pattern (e.g., "theme/*.js")
|
||||
--html "<glob>" HTML file glob pattern (e.g., "pages/*.html")
|
||||
--style-files "<glob>" Universal style file glob (applies to CSS/SCSS/JS)
|
||||
--session <id> Session identifier for workflow tracking
|
||||
```
|
||||
|
||||
### Usage Examples
|
||||
|
||||
```bash
|
||||
# Basic usage - auto-discover all files
|
||||
/workflow:ui-design:import-from-code --base-path ./
|
||||
# Import into specific design run
|
||||
/workflow:ui-design:import-from-code --design-id design-run-20250109-12345 --source ./src
|
||||
|
||||
# Import into session's latest design run
|
||||
/workflow:ui-design:import-from-code --session WFS-20250109-12345 --source ./src
|
||||
|
||||
# Target specific directories
|
||||
/workflow:ui-design:import-from-code --base-path ./src --css "theme/*.css" --js "theme/*.js"
|
||||
/workflow:ui-design:import-from-code --session WFS-20250109-12345 --source ./src --css "theme/*.css" --js "theme/*.js"
|
||||
|
||||
# Tailwind config only
|
||||
/workflow:ui-design:import-from-code --js "tailwind.config.js"
|
||||
/workflow:ui-design:import-from-code --design-id design-run-20250109-12345 --source ./ --js "tailwind.config.js"
|
||||
|
||||
# CSS framework import
|
||||
/workflow:ui-design:import-from-code --css "styles/**/*.scss" --html "components/**/*.html"
|
||||
/workflow:ui-design:import-from-code --session WFS-20250109-12345 --source ./src --css "styles/**/*.scss" --html "components/**/*.html"
|
||||
|
||||
# Universal style files
|
||||
/workflow:ui-design:import-from-code --style-files "**/theme.*"
|
||||
/workflow:ui-design:import-from-code --design-id design-run-20250109-12345 --source ./src --style-files "**/theme.*"
|
||||
```
|
||||
|
||||
---
|
||||
@@ -73,12 +77,40 @@ Extract design system tokens from source code files (CSS/SCSS/JS/TS/HTML) using
|
||||
**Operations**:
|
||||
|
||||
```bash
|
||||
# 1. Initialize directories
|
||||
base_path="${base_path:-.}"
|
||||
# 1. Determine base path with priority: --design-id > --session > error
|
||||
if [ -n "$DESIGN_ID" ]; then
|
||||
# Exact match by design ID
|
||||
relative_path=$(find .workflow -name "${DESIGN_ID}" -type d -print -quit)
|
||||
if [ -z "$relative_path" ]; then
|
||||
echo "ERROR: Design run not found: $DESIGN_ID"
|
||||
echo "HINT: Run '/workflow:ui-design:list' to see available design runs"
|
||||
exit 1
|
||||
fi
|
||||
elif [ -n "$SESSION_ID" ]; then
|
||||
# Latest in session
|
||||
relative_path=$(find .workflow/WFS-$SESSION_ID -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
|
||||
if [ -z "$relative_path" ]; then
|
||||
echo "ERROR: No design run found in session: $SESSION_ID"
|
||||
echo "HINT: Create a design run first or provide --design-id"
|
||||
exit 1
|
||||
fi
|
||||
else
|
||||
echo "ERROR: Must provide --design-id or --session parameter"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
base_path=$(cd "$relative_path" && pwd)
|
||||
design_id=$(basename "$base_path")
|
||||
|
||||
# 2. Initialize directories
|
||||
source="${source:-.}"
|
||||
intermediates_dir="${base_path}/.intermediates/import-analysis"
|
||||
mkdir -p "$intermediates_dir"
|
||||
|
||||
echo "[Phase 0] File Discovery Started"
|
||||
echo " Design ID: $design_id"
|
||||
echo " Source: $source"
|
||||
echo " Output: $base_path"
|
||||
```
|
||||
|
||||
<!-- TodoWrite: Initialize todo list -->
|
||||
@@ -95,7 +127,7 @@ echo "[Phase 0] File Discovery Started"
|
||||
|
||||
```bash
|
||||
# 2. Discover files by type
|
||||
cd "$base_path" || exit 1
|
||||
cd "$source" || exit 1
|
||||
|
||||
# CSS files
|
||||
if [ -n "$css" ]; then
|
||||
@@ -181,7 +213,7 @@ Task(ui-design-agent): `
|
||||
[STYLE_TOKENS_EXTRACTION]
|
||||
Extract visual design tokens (colors, typography, spacing, shadows, borders) from ALL file types
|
||||
|
||||
MODE: style-extraction | BASE_PATH: ${base_path}
|
||||
MODE: style-extraction | SOURCE: ${source} | BASE_PATH: ${base_path}
|
||||
|
||||
## Input Files (Can reference ANY file type)
|
||||
|
||||
@@ -357,7 +389,7 @@ Task(ui-design-agent): `
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML) - not restricted to CSS only
|
||||
- ✅ Use Read() tool for each file you want to analyze
|
||||
- ✅ Use Read() tool for each file you want to analyze (files are in SOURCE: ${source})
|
||||
- ✅ Cross-reference between file types for better extraction
|
||||
- ✅ Extract all visual token types systematically
|
||||
- ✅ Create style-extraction/style-1/ directory first: Bash(mkdir -p "${base_path}/style-extraction/style-1")
|
||||
@@ -378,7 +410,7 @@ Task(ui-design-agent): `
|
||||
[ANIMATION_TOKENS_EXTRACTION]
|
||||
Extract animation/transition tokens from ALL file types
|
||||
|
||||
MODE: animation-extraction | BASE_PATH: ${base_path}
|
||||
MODE: animation-extraction | SOURCE: ${source} | BASE_PATH: ${base_path}
|
||||
|
||||
## Input Files (Can reference ANY file type)
|
||||
|
||||
@@ -530,7 +562,7 @@ Task(ui-design-agent): `
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML)
|
||||
- ✅ Use Read() tool for each file you want to analyze
|
||||
- ✅ Use Read() tool for each file you want to analyze (files are in SOURCE: ${source})
|
||||
- ✅ Detect animation framework if used
|
||||
- ✅ Extract all animation-related tokens
|
||||
- ✅ Create animation-extraction/ directory first: Bash(mkdir -p "${base_path}/animation-extraction")
|
||||
@@ -551,7 +583,7 @@ Task(ui-design-agent): `
|
||||
[LAYOUT_PATTERNS_EXTRACTION]
|
||||
Extract layout patterns and component structures from ALL file types
|
||||
|
||||
MODE: layout-extraction | BASE_PATH: ${base_path}
|
||||
MODE: layout-extraction | SOURCE: ${source} | BASE_PATH: ${base_path}
|
||||
|
||||
## Input Files (Can reference ANY file type)
|
||||
|
||||
@@ -675,7 +707,7 @@ Task(ui-design-agent): `
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML)
|
||||
- ✅ Use Read() tool for each file you want to analyze
|
||||
- ✅ Use Read() tool for each file you want to analyze (files are in SOURCE: ${source})
|
||||
- ✅ Identify naming conventions and layout systems
|
||||
- ✅ Extract component patterns with variants and states
|
||||
- ✅ Create layout-extraction/ directory first: Bash(mkdir -p "${base_path}/layout-extraction")
|
||||
@@ -769,7 +801,7 @@ ${base_path}/
|
||||
|
||||
| Error | Cause | Resolution |
|
||||
|-------|-------|------------|
|
||||
| No files discovered | Glob patterns too restrictive or wrong base-path | Check glob patterns and base-path, verify file locations |
|
||||
| No files discovered | Glob patterns too restrictive or wrong --source path | Check glob patterns and --source parameter, verify file locations |
|
||||
| Agent reports "failed" status | No tokens found in any file | Review file content, check if files contain design tokens |
|
||||
| Empty completeness reports | Files exist but contain no extractable tokens | Manually verify token definitions in source files |
|
||||
| Missing file type | Specific file type not discovered | Use explicit glob flags (--css, --js, --html, --scss) |
|
||||
@@ -779,7 +811,8 @@ ${base_path}/
|
||||
## Best Practices
|
||||
|
||||
1. **Use auto-discovery for full projects**: Omit glob flags to discover all files automatically
|
||||
2. **Target specific directories for speed**: Use `--base-path` + specific globs for focused analysis
|
||||
3. **Cross-reference agent reports**: Compare all three completeness reports to identify gaps
|
||||
4. **Review missing content**: Check `missing` field in reports for actionable improvements
|
||||
5. **Verify file discovery**: Check `.intermediates/import-analysis/*-files.txt` if agents report no data
|
||||
2. **Target specific directories for speed**: Use `--source` to specify source code location and `--design-id` or `--session` to target design run, combined with specific globs for focused analysis
|
||||
3. **Specify target design run**: Use `--design-id` for existing design run or `--session` to use session's latest design run (one of these is required)
|
||||
4. **Cross-reference agent reports**: Compare all three completeness reports to identify gaps
|
||||
5. **Review missing content**: Check `missing` field in reports for actionable improvements
|
||||
6. **Verify file discovery**: Check `${base_path}/.intermediates/import-analysis/*-files.txt` if agents report no data
|
||||
|
||||
@@ -1,23 +1,25 @@
|
||||
---
|
||||
name: layout-extract
|
||||
description: Extract structural layout information from reference images, URLs, or text prompts using Claude analysis
|
||||
argument-hint: [--base-path <path>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--targets "<list>"] [--mode <imitate|explore>] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>]
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), Task(ui-design-agent), mcp__exa__web_search_exa(*)
|
||||
description: Extract structural layout information from reference images, URLs, or text prompts using Claude analysis with variant generation or refinement mode
|
||||
argument-hint: [--design-id <id>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--targets "<list>"] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>] [--interactive] [--refine]
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), AskUserQuestion(*), Task(ui-design-agent), mcp__exa__web_search_exa(*)
|
||||
---
|
||||
|
||||
# Layout Extraction Command
|
||||
|
||||
## Overview
|
||||
|
||||
Extract structural layout information from reference images, URLs, or text prompts using AI analysis. This command separates the "scaffolding" (HTML structure and CSS layout) from the "paint" (visual tokens handled by `style-extract`).
|
||||
Extract structural layout information from reference images, URLs, or text prompts using AI analysis. Supports two modes:
|
||||
1. **Exploration Mode** (default): Generate multiple contrasting layout variants
|
||||
2. **Refinement Mode** (`--refine`): Refine a single existing layout through detailed adjustments
|
||||
|
||||
This command separates the "scaffolding" (HTML structure and CSS layout) from the "paint" (visual tokens handled by `style-extract`).
|
||||
|
||||
**Strategy**: AI-Driven Structural Analysis
|
||||
|
||||
- **Agent-Powered**: Uses `ui-design-agent` for deep structural analysis
|
||||
- **Dual-Mode**:
|
||||
- `imitate`: High-fidelity replication of single layout structure
|
||||
- `explore`: Multiple structurally distinct layout variations
|
||||
- **Single Output**: `layout-templates.json` with DOM structure, component hierarchy, and CSS layout rules
|
||||
- **Dual Mode**: Exploration (multiple contrasting variants) or Refinement (single layout fine-tuning)
|
||||
- **Output**: `layout-templates.json` with DOM structure, component hierarchy, and CSS layout rules
|
||||
- **Device-Aware**: Optimized for specific device types (desktop, mobile, tablet, responsive)
|
||||
- **Token-Based**: CSS uses `var()` placeholders for spacing and breakpoints
|
||||
|
||||
@@ -45,15 +47,19 @@ ELSE:
|
||||
has_urls = false
|
||||
url_list = []
|
||||
|
||||
# Determine extraction mode
|
||||
extraction_mode = --mode OR "imitate" # "imitate" or "explore"
|
||||
# Detect refinement mode
|
||||
refine_mode = --refine OR false
|
||||
|
||||
# Set variants count based on mode
|
||||
IF extraction_mode == "imitate":
|
||||
variants_count = 1 # Force single variant (ignore --variants)
|
||||
ELSE IF extraction_mode == "explore":
|
||||
variants_count = --variants OR 3 # Default to 3
|
||||
# Set variants count
|
||||
# Refinement mode: Force variants_count = 1 (ignore user-provided --variants)
|
||||
# Exploration mode: Use --variants or default to 3 (range: 1-5)
|
||||
IF refine_mode:
|
||||
variants_count = 1
|
||||
REPORT: "🔧 Refinement mode enabled: Will generate 1 refined layout per target"
|
||||
ELSE:
|
||||
variants_count = --variants OR 3
|
||||
VALIDATE: 1 <= variants_count <= 5
|
||||
REPORT: "🔍 Exploration mode: Will generate {variants_count} contrasting layout concepts per target"
|
||||
|
||||
# Resolve targets
|
||||
# Priority: --targets → url_list targets → prompt analysis → default ["page"]
|
||||
@@ -62,6 +68,9 @@ IF --targets:
|
||||
ELSE IF has_urls:
|
||||
targets = [url_info.target for url_info in url_list]
|
||||
ELSE IF --prompt:
|
||||
# Extract targets from prompt using pattern matching
|
||||
# Looks for keywords: "page names", target descriptors (login, dashboard, etc.)
|
||||
# Returns lowercase, hyphenated strings (e.g., ["login", "dashboard"])
|
||||
targets = extract_from_prompt(--prompt)
|
||||
ELSE:
|
||||
targets = ["page"]
|
||||
@@ -69,9 +78,27 @@ ELSE:
|
||||
# Resolve device type
|
||||
device_type = --device-type OR "responsive" # desktop|mobile|tablet|responsive
|
||||
|
||||
# Determine base path
|
||||
bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect
|
||||
# OR use --base-path / --session parameters
|
||||
# Determine base path with priority: --design-id > --session > auto-detect
|
||||
if [ -n "$DESIGN_ID" ]; then
|
||||
# Exact match by design ID
|
||||
relative_path=$(find .workflow -name "${DESIGN_ID}" -type d -print -quit)
|
||||
elif [ -n "$SESSION_ID" ]; then
|
||||
# Latest in session
|
||||
relative_path=$(find .workflow/WFS-$SESSION_ID -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
|
||||
else
|
||||
# Latest globally
|
||||
relative_path=$(find .workflow -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
|
||||
fi
|
||||
|
||||
# Validate and convert to absolute path
|
||||
if [ -z "$relative_path" ] || [ ! -d "$relative_path" ]; then
|
||||
echo "❌ ERROR: Design run not found"
|
||||
echo "💡 HINT: Run '/workflow:ui-design:list' to see available design runs"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
base_path=$(cd "$relative_path" && pwd)
|
||||
bash(echo "✓ Base path: $base_path")
|
||||
```
|
||||
|
||||
### Step 2: Load Inputs & Create Directories
|
||||
@@ -188,58 +215,54 @@ IF result.exploration?.triggered:
|
||||
IF session_has_inputs: SKIP Step 2 file reading
|
||||
|
||||
# 2. Check if output already exists
|
||||
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
|
||||
bash(find {base_path}/layout-extraction -name "layout-*.json" -print -quit | grep -q . && echo "exists")
|
||||
IF exists: SKIP to completion
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Phase 0 Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `targets[]`, `device_type`, loaded inputs
|
||||
**Phase 0 Output**: `input_mode`, `base_path`, `variants_count`, `targets[]`, `device_type`, loaded inputs
|
||||
|
||||
## Phase 1: Layout Concept Generation (Explore Mode Only)
|
||||
## Phase 1: Layout Concept or Refinement Options Generation
|
||||
|
||||
### Step 1: Check Extraction Mode
|
||||
### Step 0.5: Load Existing Layout (Refinement Mode)
|
||||
```bash
|
||||
# extraction_mode == "imitate" → skip this phase
|
||||
# extraction_mode == "explore" → execute this phase
|
||||
IF refine_mode:
|
||||
# Load existing layout for refinement
|
||||
existing_layouts = {}
|
||||
FOR target IN targets:
|
||||
layout_files = bash(find {base_path}/layout-extraction -name "layout-{target}-*.json" -print)
|
||||
IF layout_files:
|
||||
# Use first/latest layout file for this target
|
||||
existing_layouts[target] = Read(first_layout_file)
|
||||
```
|
||||
|
||||
**If imitate mode**: Skip to Phase 2
|
||||
|
||||
### Step 2: Gather Layout Inspiration (Explore Mode)
|
||||
```bash
|
||||
bash(mkdir -p {base_path}/.intermediates/layout-analysis/inspirations)
|
||||
|
||||
# For each target: Research via MCP
|
||||
# mcp__exa__web_search_exa(query="{target} layout patterns {device_type}", numResults=5)
|
||||
|
||||
# Write inspiration file
|
||||
Write({base_path}/.intermediates/layout-analysis/inspirations/{target}-layout-ideas.txt, inspiration_content)
|
||||
```
|
||||
|
||||
### Step 3: Generate Layout Concept Options (Agent Task 1)
|
||||
### Step 1: Generate Options (Agent Task 1 - Mode-Specific)
|
||||
**Executor**: `Task(ui-design-agent)`
|
||||
|
||||
Launch agent to generate `variants_count` layout concept options for each target:
|
||||
**Exploration Mode** (default): Generate contrasting layout concepts
|
||||
**Refinement Mode** (`--refine`): Generate refinement options for existing layouts
|
||||
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[LAYOUT_CONCEPT_GENERATION_TASK]
|
||||
Generate {variants_count} structurally distinct layout concepts for each target
|
||||
// Conditional agent task based on refine_mode
|
||||
IF NOT refine_mode:
|
||||
// EXPLORATION MODE
|
||||
Task(ui-design-agent): `
|
||||
[LAYOUT_CONCEPT_GENERATION_TASK]
|
||||
Generate {variants_count} structurally distinct layout concepts for each target
|
||||
|
||||
SESSION: {session_id} | MODE: explore | BASE_PATH: {base_path}
|
||||
TARGETS: {targets} | DEVICE_TYPE: {device_type}
|
||||
SESSION: {session_id} | MODE: explore | BASE_PATH: {base_path}
|
||||
TARGETS: {targets} | DEVICE_TYPE: {device_type}
|
||||
|
||||
## Input Analysis
|
||||
- Targets: {targets.join(", ")}
|
||||
- Device type: {device_type}
|
||||
- Layout inspiration: Read inspirations from {base_path}/.intermediates/layout-analysis/inspirations/
|
||||
- Visual references: {loaded_images if available}
|
||||
${dom_structure_available ? "- DOM Structure: Read from .intermediates/layout-analysis/dom-structure-*.json" : ""}
|
||||
## Input Analysis
|
||||
- Targets: {targets.join(", ")}
|
||||
- Device type: {device_type}
|
||||
- Visual references: {loaded_images if available}
|
||||
${dom_structure_available ? "- DOM Structure: Read from .intermediates/layout-analysis/dom-structure-*.json" : ""}
|
||||
|
||||
## Analysis Rules
|
||||
- For EACH target, generate {variants_count} structurally DIFFERENT layout concepts
|
||||
- Concepts must differ in: grid structure, component arrangement, visual hierarchy
|
||||
## Analysis Rules
|
||||
- For EACH target, generate {variants_count} structurally DIFFERENT layout concepts
|
||||
- Concepts must differ in: grid structure, component arrangement, visual hierarchy
|
||||
- Each concept should have distinct navigation pattern, content flow, and responsive behavior
|
||||
|
||||
## Generate for EACH Target
|
||||
@@ -267,10 +290,74 @@ Task(ui-design-agent): `
|
||||
Use schema from INTERACTIVE-DATA-SPEC.md (Layout Extract: analysis-options.json)
|
||||
|
||||
CRITICAL: Use Write() tool immediately after generating complete JSON
|
||||
`
|
||||
`
|
||||
ELSE:
|
||||
// REFINEMENT MODE
|
||||
Task(ui-design-agent): `
|
||||
[LAYOUT_REFINEMENT_OPTIONS_TASK]
|
||||
Generate refinement options for existing layout(s)
|
||||
|
||||
SESSION: {session_id} | MODE: refine | BASE_PATH: {base_path}
|
||||
TARGETS: {targets} | DEVICE_TYPE: {device_type}
|
||||
|
||||
## Existing Layouts
|
||||
${FOR target IN targets: "- {target}: {existing_layouts[target]}"}
|
||||
|
||||
## Input Guidance
|
||||
- User prompt: {prompt_guidance if available}
|
||||
- Visual references: {loaded_images if available}
|
||||
|
||||
## Refinement Categories
|
||||
Generate 8-12 refinement options per target across these categories:
|
||||
|
||||
1. **Density Adjustments** (2-3 options per target):
|
||||
- More compact: Tighter spacing, reduced whitespace
|
||||
- More spacious: Increased margins, breathing room
|
||||
- Balanced: Moderate adjustments
|
||||
|
||||
2. **Responsiveness Tuning** (2-3 options per target):
|
||||
- Breakpoint behavior: Earlier/later column stacking
|
||||
- Mobile layout: Different navigation/content priority
|
||||
- Tablet optimization: Hybrid desktop/mobile approach
|
||||
|
||||
3. **Grid/Flex Specifics** (2-3 options per target):
|
||||
- Column counts: 2-col ↔ 3-col ↔ 4-col
|
||||
- Gap sizes: Tighter ↔ wider gutters
|
||||
- Alignment: Different flex/grid justification
|
||||
|
||||
4. **Component Arrangement** (1-2 options per target):
|
||||
- Navigation placement: Top ↔ side ↔ bottom
|
||||
- Sidebar position: Left ↔ right ↔ none
|
||||
- Content hierarchy: Different section ordering
|
||||
|
||||
## Output Format
|
||||
Each option (per target):
|
||||
- target: Which target this refinement applies to
|
||||
- category: "density|responsiveness|grid|arrangement"
|
||||
- option_id: unique identifier
|
||||
- label: Short descriptive name (e.g., "More Compact Spacing")
|
||||
- description: What changes (2-3 sentences)
|
||||
- preview_changes: Key structural adjustments
|
||||
- impact_scope: Which layout regions affected
|
||||
|
||||
## Output
|
||||
Write single JSON file: {base_path}/.intermediates/layout-analysis/analysis-options.json
|
||||
|
||||
Use refinement schema:
|
||||
{
|
||||
"mode": "refinement",
|
||||
"device_type": "{device_type}",
|
||||
"refinement_options": {
|
||||
"{target1}": [array of refinement options],
|
||||
"{target2}": [array of refinement options]
|
||||
}
|
||||
}
|
||||
|
||||
CRITICAL: Use Write() tool immediately after generating complete JSON
|
||||
`
|
||||
```
|
||||
|
||||
### Step 4: Verify Options File Created
|
||||
### Step 2: Verify Options File Created
|
||||
```bash
|
||||
bash(test -f {base_path}/.intermediates/layout-analysis/analysis-options.json && echo "created")
|
||||
|
||||
@@ -282,17 +369,40 @@ bash(cat {base_path}/.intermediates/layout-analysis/analysis-options.json | grep
|
||||
|
||||
---
|
||||
|
||||
## Phase 1.5: User Confirmation (Explore Mode Only - INTERACTIVE)
|
||||
## Phase 1.5: User Confirmation (Optional - Triggered by --interactive)
|
||||
|
||||
**Purpose**: Allow user to select preferred layout concept(s) for each target before generating detailed templates
|
||||
**Purpose**:
|
||||
- **Exploration Mode**: Allow user to select preferred layout concept(s) per target
|
||||
- **Refinement Mode**: Allow user to select refinement options to apply per target
|
||||
|
||||
### Step 1: Load and Present Options
|
||||
**Trigger Condition**: Execute this phase ONLY if `--interactive` flag is present
|
||||
|
||||
### Step 1: Check Interactive Flag
|
||||
```bash
|
||||
# Skip this entire phase if --interactive flag is not present
|
||||
IF NOT --interactive:
|
||||
SKIP to Phase 2
|
||||
IF refine_mode:
|
||||
REPORT: "ℹ️ Non-interactive refinement mode: Will apply all suggested refinements"
|
||||
ELSE:
|
||||
REPORT: "ℹ️ Non-interactive mode: Will generate all {variants_count} variants per target"
|
||||
|
||||
# Interactive mode enabled
|
||||
REPORT: "🎯 Interactive mode: User selection required for {targets.length} target(s)"
|
||||
```
|
||||
|
||||
### Step 2: Load and Present Options (Mode-Specific)
|
||||
```bash
|
||||
# Read options file
|
||||
options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
|
||||
|
||||
# Parse layout concepts
|
||||
layout_concepts = options.layout_concepts
|
||||
# Branch based on mode
|
||||
IF NOT refine_mode:
|
||||
# EXPLORATION MODE
|
||||
layout_concepts = options.layout_concepts
|
||||
ELSE:
|
||||
# REFINEMENT MODE
|
||||
refinement_options = options.refinement_options
|
||||
```
|
||||
|
||||
### Step 2: Present Options to User (Per Target)
|
||||
@@ -329,15 +439,34 @@ Please select your preferred concept for this target.
|
||||
}
|
||||
```
|
||||
|
||||
### Step 3: Capture User Selection (Per Target)
|
||||
### Step 3: Capture User Selection and Update Options File (Per Target)
|
||||
|
||||
**Interaction Strategy**: If total concepts > 4 OR any target has > 3 concepts, use batch text format:
|
||||
|
||||
```
|
||||
【目标[N] - [target]】选择布局方案
|
||||
[key]) Concept [index]: [concept_name]
|
||||
[design_philosophy]
|
||||
[key]) Concept [index]: [concept_name]
|
||||
[design_philosophy]
|
||||
...
|
||||
请回答 (格式: 1a 2b 或 1a,b 2c 多选):
|
||||
|
||||
User input:
|
||||
"[N][key] [N][key] ..." → Single selection per target
|
||||
"[N][key1,key2] [N][key3] ..." → Multi-selection per target
|
||||
```
|
||||
|
||||
Otherwise, use `AskUserQuestion` below.
|
||||
|
||||
```javascript
|
||||
// Use AskUserQuestion tool for each target
|
||||
// Use AskUserQuestion tool for each target (multi-select enabled)
|
||||
FOR each target:
|
||||
AskUserQuestion({
|
||||
questions: [{
|
||||
question: "Which layout concept do you prefer for '{target}'?",
|
||||
question: "Which layout concept(s) do you prefer for '{target}'?",
|
||||
header: "Layout for " + target,
|
||||
multiSelect: false,
|
||||
multiSelect: true, // Multi-selection enabled (default behavior)
|
||||
options: [
|
||||
{FOR each concept in layout_concepts[target]:
|
||||
label: "Concept {concept.index}: {concept.concept_name}",
|
||||
@@ -347,193 +476,213 @@ FOR each target:
|
||||
}]
|
||||
})
|
||||
|
||||
// Parse user response
|
||||
selected_option_text = user_answer
|
||||
// Parse user response (array of selections)
|
||||
selected_options = user_answer
|
||||
|
||||
// Check for user cancellation
|
||||
IF selected_option_text == null OR selected_option_text == "":
|
||||
IF selected_options == null OR selected_options.length == 0:
|
||||
REPORT: "⚠️ User canceled selection. Workflow terminated."
|
||||
EXIT workflow
|
||||
|
||||
// Extract concept index from response format "Concept N: Name"
|
||||
match = selected_option_text.match(/Concept (\d+):/)
|
||||
IF match:
|
||||
selected_index = parseInt(match[1])
|
||||
ELSE:
|
||||
ERROR: "Invalid selection format. Expected 'Concept N: ...' format"
|
||||
EXIT workflow
|
||||
// Extract concept indices from array
|
||||
selected_indices = []
|
||||
FOR each selected_option_text IN selected_options:
|
||||
match = selected_option_text.match(/Concept (\d+):/)
|
||||
IF match:
|
||||
selected_indices.push(parseInt(match[1]))
|
||||
ELSE:
|
||||
ERROR: "Invalid selection format. Expected 'Concept N: ...' format"
|
||||
EXIT workflow
|
||||
|
||||
// Store selection for this target
|
||||
// Store selections for this target (array of indices)
|
||||
selections[target] = {
|
||||
selected_index: selected_index,
|
||||
concept_name: layout_concepts[target][selected_index-1].concept_name
|
||||
selected_indices: selected_indices, // Array of selected indices
|
||||
concept_names: selected_indices.map(i => layout_concepts[target][i-1].concept_name)
|
||||
}
|
||||
```
|
||||
|
||||
### Step 4: Write User Selection File
|
||||
```bash
|
||||
# Create user selection JSON
|
||||
selection_data = {
|
||||
"metadata": {
|
||||
"selected_at": "{current_timestamp}",
|
||||
"selection_type": "per_target",
|
||||
"session_id": "{session_id}"
|
||||
},
|
||||
"selections": selections // {target: {selected_index, concept_name}}
|
||||
REPORT: "✅ Selected {selected_indices.length} layout(s) for {target}"
|
||||
|
||||
// Calculate total selections across all targets
|
||||
total_selections = sum([len(selections[t].selected_indices) for t in targets])
|
||||
|
||||
// Update analysis-options.json with user selection (embedded in same file)
|
||||
options_file = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
|
||||
options_file.user_selection = {
|
||||
"selected_at": "{current_timestamp}",
|
||||
"selection_type": "per_target_multi",
|
||||
"session_id": "{session_id}",
|
||||
"total_selections": total_selections,
|
||||
"selected_variants": selections // {target: {selected_indices: [...], concept_names: [...]}}
|
||||
}
|
||||
|
||||
# Write to file
|
||||
bash(echo '{selection_data}' > {base_path}/.intermediates/layout-analysis/user-selection.json)
|
||||
|
||||
# Verify
|
||||
bash(test -f {base_path}/.intermediates/layout-analysis/user-selection.json && echo "saved")
|
||||
// Write updated file back
|
||||
Write({base_path}/.intermediates/layout-analysis/analysis-options.json, JSON.stringify(options_file, indent=2))
|
||||
```
|
||||
|
||||
### Step 5: Confirmation Message
|
||||
### Step 4: Confirmation Message
|
||||
```
|
||||
✅ Selections recorded!
|
||||
✅ Selections recorded! Total: {total_selections} layout(s)
|
||||
|
||||
{FOR each target, selection in selections:
|
||||
• {target}: Concept {selection.selected_index} - {selection.concept_name}
|
||||
• {target}: {selection.selected_indices.length} layout(s) selected
|
||||
{FOR each index IN selection.selected_indices:
|
||||
- Concept {index}: {layout_concepts[target][index-1].concept_name}
|
||||
}
|
||||
}
|
||||
|
||||
Proceeding to generate detailed layout templates based on your selections...
|
||||
Proceeding to generate {total_selections} detailed layout template(s)...
|
||||
```
|
||||
|
||||
**Output**: `user-selection.json` with user's choices for all targets
|
||||
**Output**: `analysis-options.json` updated with embedded `user_selection` field
|
||||
|
||||
## Phase 2: Layout Template Generation (Agent Task 2)
|
||||
|
||||
**Executor**: `Task(ui-design-agent)` for selected concept(s)
|
||||
**Executor**: `Task(ui-design-agent)` × `Total_Selected_Templates` in **parallel**
|
||||
|
||||
### Step 1: Load User Selection (Explore Mode)
|
||||
### Step 1: Load User Selections or Default to All
|
||||
```bash
|
||||
# For explore mode, read user selection
|
||||
IF extraction_mode == "explore":
|
||||
selection = Read({base_path}/.intermediates/layout-analysis/user-selection.json)
|
||||
selections_per_target = selection.selections
|
||||
# Read analysis-options.json which may contain user_selection
|
||||
options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
|
||||
layout_concepts = options.layout_concepts
|
||||
|
||||
# Also read the selected concept details from options
|
||||
options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
|
||||
layout_concepts = options.layout_concepts
|
||||
|
||||
# Build selected concepts map
|
||||
selected_concepts = {}
|
||||
FOR each target in targets:
|
||||
selected_index = selections_per_target[target].selected_index
|
||||
selected_concepts[target] = layout_concepts[target][selected_index-1] # 0-indexed
|
||||
# Check if user_selection field exists (interactive mode)
|
||||
IF options.user_selection AND options.user_selection.selected_variants:
|
||||
# Interactive mode: Use user-selected variants
|
||||
selections_per_target = options.user_selection.selected_variants
|
||||
total_selections = options.user_selection.total_selections
|
||||
ELSE:
|
||||
# Imitate mode - no selection needed
|
||||
selected_concepts = null
|
||||
# Non-interactive mode: Generate ALL variants for ALL targets (default behavior)
|
||||
selections_per_target = {}
|
||||
total_selections = 0
|
||||
|
||||
FOR each target in targets:
|
||||
selections_per_target[target] = {
|
||||
"selected_indices": [1, 2, ..., variants_count], # All indices
|
||||
"concept_names": [] # Will be filled from options
|
||||
}
|
||||
total_selections += variants_count
|
||||
|
||||
# Build task list for all selected concepts across all targets
|
||||
task_list = []
|
||||
FOR each target in targets:
|
||||
selected_indices = selections_per_target[target].selected_indices # Array
|
||||
concept_names = selections_per_target[target].concept_names # Array
|
||||
|
||||
FOR i in range(len(selected_indices)):
|
||||
idx = selected_indices[i]
|
||||
concept = layout_concepts[target][idx - 1] # 0-indexed array
|
||||
variant_id = i + 1 # 1-based variant numbering
|
||||
|
||||
task_list.push({
|
||||
target: target,
|
||||
variant_id: variant_id,
|
||||
concept: concept,
|
||||
output_file: "{base_path}/layout-extraction/layout-{target}-{variant_id}.json"
|
||||
})
|
||||
|
||||
total_tasks = task_list.length
|
||||
REPORT: "Generating {total_tasks} layout templates across {targets.length} targets"
|
||||
```
|
||||
|
||||
### Step 2: Launch Agent Task
|
||||
Generate layout templates for selected concepts:
|
||||
### Step 2: Launch Parallel Agent Tasks
|
||||
Generate layout templates for ALL selected concepts in parallel:
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[LAYOUT_TEMPLATE_GENERATION_TASK]
|
||||
Generate detailed layout templates based on user-selected concepts.
|
||||
Focus ONLY on structure and layout. DO NOT concern with visual style (colors, fonts, etc.).
|
||||
FOR each task in task_list:
|
||||
Task(ui-design-agent): `
|
||||
[LAYOUT_TEMPLATE_GENERATION_TASK #{task.variant_id} for {task.target}]
|
||||
Generate detailed layout template based on user-selected concept.
|
||||
Focus ONLY on structure and layout. DO NOT concern with visual style (colors, fonts, etc.).
|
||||
|
||||
SESSION: {session_id} | MODE: {extraction_mode} | BASE_PATH: {base_path}
|
||||
DEVICE_TYPE: {device_type}
|
||||
SESSION: {session_id} | BASE_PATH: {base_path}
|
||||
TARGET: {task.target} | VARIANT: {task.variant_id}
|
||||
DEVICE_TYPE: {device_type}
|
||||
|
||||
${extraction_mode == "explore" ? `
|
||||
USER SELECTIONS:
|
||||
${targets.map(target => `
|
||||
Target: ${target}
|
||||
- Selected Concept: ${selected_concepts[target].concept_name}
|
||||
- Philosophy: ${selected_concepts[target].design_philosophy}
|
||||
- Pattern: ${selected_concepts[target].layout_pattern}
|
||||
- Key Components: ${selected_concepts[target].key_components.join(", ")}
|
||||
- Structural Features: ${selected_concepts[target].structural_features.join(", ")}
|
||||
`).join("\n")}
|
||||
` : `
|
||||
MODE: Imitate - High-fidelity replication of reference layout structure
|
||||
TARGETS: ${targets.join(", ")}
|
||||
`}
|
||||
USER SELECTION:
|
||||
- Selected Concept: {task.concept.concept_name}
|
||||
- Philosophy: {task.concept.design_philosophy}
|
||||
- Pattern: {task.concept.layout_pattern}
|
||||
- Key Components: {task.concept.key_components.join(", ")}
|
||||
- Structural Features: {task.concept.structural_features.join(", ")}
|
||||
|
||||
## Input Analysis
|
||||
- Targets: {targets.join(", ")}
|
||||
- Device type: {device_type}
|
||||
- Visual references: {loaded_images if available}
|
||||
${dom_structure_available ? "- DOM Structure Data: Read from .intermediates/layout-analysis/dom-structure-*.json - USE THIS for accurate layout properties" : ""}
|
||||
## Input Analysis
|
||||
- Target: {task.target}
|
||||
- Device type: {device_type}
|
||||
- Visual references: {loaded_images if available}
|
||||
${dom_structure_available ? "- DOM Structure Data: Read from .intermediates/layout-analysis/dom-structure-{task.target}.json - USE THIS for accurate layout properties" : ""}
|
||||
|
||||
## Generation Rules
|
||||
${extraction_mode == "explore" ? `
|
||||
- **Explore Mode**: Develop each user-selected layout concept into a detailed template
|
||||
- Use the selected concept's key_components as foundation
|
||||
- Apply the selected layout_pattern (grid-3col, flex-row, etc.)
|
||||
- Honor the structural_features defined in the concept
|
||||
- Expand the concept with complete DOM structure and CSS layout rules
|
||||
` : `
|
||||
- **Imitate Mode**: High-fidelity replication of reference layout structure
|
||||
${dom_structure_available ? "- Use DOM structure data as ground truth" : "- Use visual inference"}
|
||||
`}
|
||||
${dom_structure_available ? `
|
||||
- IMPORTANT: You have access to real DOM structure data with accurate flex/grid properties
|
||||
- Use DOM data as primary source for layout properties
|
||||
- Extract real flex/grid configurations (display, flexDirection, justifyContent, alignItems, gap)
|
||||
- Use actual element bounds for responsive breakpoint decisions
|
||||
- Preserve identified patterns from DOM structure
|
||||
` : ""}
|
||||
## Generation Rules
|
||||
- Develop the user-selected layout concept into a detailed template
|
||||
- Use the selected concept's key_components as foundation
|
||||
- Apply the selected layout_pattern (grid-3col, flex-row, etc.)
|
||||
- Honor the structural_features defined in the concept
|
||||
- Expand the concept with complete DOM structure and CSS layout rules
|
||||
${dom_structure_available ? `
|
||||
- IMPORTANT: You have access to real DOM structure data with accurate flex/grid properties
|
||||
- Use DOM data as primary source for layout properties
|
||||
- Extract real flex/grid configurations (display, flexDirection, justifyContent, alignItems, gap)
|
||||
- Use actual element bounds for responsive breakpoint decisions
|
||||
- Preserve identified patterns from DOM structure
|
||||
` : ""}
|
||||
|
||||
## Generate for EACH Target
|
||||
For target in {targets}:
|
||||
${extraction_mode == "explore" ? "Based on user-selected concept:" : "Based on reference:"}
|
||||
## Template Generation
|
||||
|
||||
1. **DOM Structure**:
|
||||
- Semantic HTML5 tags: <header>, <nav>, <main>, <aside>, <section>, <footer>
|
||||
- ARIA roles and accessibility attributes
|
||||
${extraction_mode == "explore" ? "- Use key_components from selected concept" : ""}
|
||||
${dom_structure_available ? "- Base on extracted DOM tree from .intermediates" : "- Infer from visual analysis"}
|
||||
- Device-specific optimizations for {device_type}
|
||||
1. **DOM Structure**:
|
||||
- Semantic HTML5 tags: <header>, <nav>, <main>, <aside>, <section>, <footer>
|
||||
- ARIA roles and accessibility attributes
|
||||
- Use key_components from selected concept
|
||||
${dom_structure_available ? "- Base on extracted DOM tree from .intermediates" : "- Infer from visual analysis"}
|
||||
- Device-specific optimizations for {device_type}
|
||||
|
||||
2. **Component Hierarchy**:
|
||||
- Array of main layout regions
|
||||
${extraction_mode == "explore" ? "- Derived from selected concept's key_components" : ""}
|
||||
2. **Component Hierarchy**:
|
||||
- Array of main layout regions
|
||||
- Derived from selected concept's key_components
|
||||
|
||||
3. **CSS Layout Rules**:
|
||||
${extraction_mode == "explore" ? "- Implement selected layout_pattern" : ""}
|
||||
${dom_structure_available ? "- Use real layout properties from DOM structure data" : "- Focus on Grid, Flexbox, position, alignment"}
|
||||
- Use CSS Custom Properties: var(--spacing-*), var(--breakpoint-*)
|
||||
- Device-specific styles (mobile-first @media for responsive)
|
||||
- NO colors, NO fonts, NO shadows - layout structure only
|
||||
3. **CSS Layout Rules**:
|
||||
- Implement selected layout_pattern
|
||||
${dom_structure_available ? "- Use real layout properties from DOM structure data" : "- Focus on Grid, Flexbox, position, alignment"}
|
||||
- Use CSS Custom Properties: var(--spacing-*), var(--breakpoint-*)
|
||||
- Device-specific styles (mobile-first @media for responsive)
|
||||
- NO colors, NO fonts, NO shadows - layout structure only
|
||||
|
||||
## Output Format
|
||||
Write complete layout-templates.json with layout_templates array.
|
||||
Each template must include:
|
||||
- target (string)
|
||||
- variant_id: "layout-1" (always 1 since only selected concept is generated)
|
||||
- source_image_path (string): Reference image path
|
||||
- device_type (string)
|
||||
- design_philosophy (string ${extraction_mode == "explore" ? "- from selected concept" : ""})
|
||||
- dom_structure (JSON object)
|
||||
- component_hierarchy (array of strings)
|
||||
- css_layout_rules (string)
|
||||
## Output Format
|
||||
Write single-template JSON object with:
|
||||
- target: "{task.target}"
|
||||
- variant_id: "layout-{task.variant_id}"
|
||||
- source_image_path (string): Reference image path
|
||||
- device_type: "{device_type}"
|
||||
- design_philosophy (string from selected concept)
|
||||
- dom_structure (JSON object)
|
||||
- component_hierarchy (array of strings)
|
||||
- css_layout_rules (string)
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Use Write() tool for layout-templates.json
|
||||
- ✅ One template per target (only selected concept)
|
||||
- ✅ Structure only, no visual styling
|
||||
- ✅ Token-based CSS (var())
|
||||
${extraction_mode == "explore" ? "- ✅ Maintain consistency with selected concepts" : ""}
|
||||
`
|
||||
## Critical Requirements
|
||||
- ✅ Use Write() tool for {task.output_file}
|
||||
- ✅ Single template for {task.target} variant {task.variant_id}
|
||||
- ✅ Structure only, no visual styling
|
||||
- ✅ Token-based CSS (var())
|
||||
- ✅ Maintain consistency with selected concept
|
||||
`
|
||||
```
|
||||
|
||||
**Output**: Agent generates `layout-templates.json` with one template per target
|
||||
**Output**: Agent generates multiple layout template files (one per selected concept)
|
||||
|
||||
### Step 2: Write Output File
|
||||
### Step 3: Verify Output Files
|
||||
```bash
|
||||
# Take JSON output from agent
|
||||
bash(echo '{agent_json_output}' > {base_path}/layout-extraction/layout-templates.json)
|
||||
# Count generated files
|
||||
expected_count = total_tasks
|
||||
actual_count = bash(ls {base_path}/layout-extraction/layout-*.json | wc -l)
|
||||
|
||||
# Verify output
|
||||
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
|
||||
bash(cat {base_path}/layout-extraction/layout-templates.json | grep -q "layout_templates" && echo "valid")
|
||||
# Verify all files were created
|
||||
IF actual_count == expected_count:
|
||||
REPORT: "✓ All {expected_count} layout template files generated"
|
||||
ELSE:
|
||||
ERROR: "Expected {expected_count} files, found {actual_count}"
|
||||
|
||||
# Verify file structure (sample check)
|
||||
bash(cat {base_path}/layout-extraction/layout-{first_target}-1.json | grep -q "variant_id" && echo "valid structure")
|
||||
```
|
||||
|
||||
**Output**: `layout-templates.json` created and verified
|
||||
**Output**: All layout template files created and verified (one file per selected concept)
|
||||
|
||||
## Completion
|
||||
|
||||
@@ -541,9 +690,10 @@ bash(cat {base_path}/layout-extraction/layout-templates.json | grep -q "layout_t
|
||||
```javascript
|
||||
TodoWrite({todos: [
|
||||
{content: "Setup and input validation", status: "completed", activeForm: "Validating inputs"},
|
||||
{content: "Layout research (explore mode)", status: "completed", activeForm: "Researching layout patterns"},
|
||||
{content: "Layout analysis and synthesis (agent)", status: "completed", activeForm: "Generating layout templates"},
|
||||
{content: "Write layout-templates.json", status: "completed", activeForm: "Saving templates"}
|
||||
{content: "Layout concept analysis (agent)", status: "completed", activeForm: "Analyzing layout patterns"},
|
||||
{content: "User selection confirmation", status: "completed", activeForm: "Confirming selections"},
|
||||
{content: "Generate layout templates (parallel)", status: "completed", activeForm: "Generating templates"},
|
||||
{content: "Verify output files", status: "completed", activeForm: "Verifying files"}
|
||||
]});
|
||||
```
|
||||
|
||||
@@ -553,11 +703,9 @@ TodoWrite({todos: [
|
||||
|
||||
Configuration:
|
||||
- Session: {session_id}
|
||||
- Extraction Mode: {extraction_mode} (imitate/explore)
|
||||
- Device Type: {device_type}
|
||||
- Targets: {targets}
|
||||
- Variants per Target: {variants_count}
|
||||
- Total Templates: {targets.length × variants_count}
|
||||
- Targets: {targets.join(", ")}
|
||||
- Total Templates: {total_tasks} ({targets.length} targets with multi-selection)
|
||||
{IF has_urls AND dom_structure_available:
|
||||
- 🔍 URL Mode: DOM structure extracted from {len(url_list)} URL(s)
|
||||
- Accuracy: Real flex/grid properties from live pages
|
||||
@@ -566,22 +714,27 @@ Configuration:
|
||||
- ⚠️ URL Mode: Chrome DevTools unavailable, used visual analysis fallback
|
||||
}
|
||||
|
||||
{IF extraction_mode == "explore":
|
||||
Layout Research:
|
||||
- {targets.length} inspiration files generated
|
||||
- Pattern search focused on {device_type} layouts
|
||||
User Selections:
|
||||
{FOR each target in targets:
|
||||
- {target}: {selections_per_target[target].concept_names.join(", ")} ({selections_per_target[target].selected_indices.length} variants)
|
||||
}
|
||||
|
||||
Generated Templates:
|
||||
{FOR each template: - Target: {template.target} | Variant: {template.variant_id} | Philosophy: {template.design_philosophy}}
|
||||
|
||||
Output File:
|
||||
- {base_path}/layout-extraction/layout-templates.json
|
||||
{IF dom_structure_available:
|
||||
- {base_path}/.intermediates/layout-analysis/dom-structure-*.json ({len(url_list)} files)
|
||||
{base_path}/layout-extraction/
|
||||
{FOR each target in targets:
|
||||
{FOR each variant_id in range(1, selections_per_target[target].selected_indices.length + 1):
|
||||
├── layout-{target}-{variant_id}.json
|
||||
}
|
||||
}
|
||||
|
||||
Next: /workflow:ui-design:generate will combine these structural templates with style systems to produce final prototypes.
|
||||
Intermediate Files:
|
||||
- {base_path}/.intermediates/layout-analysis/
|
||||
├── analysis-options.json (concept proposals + user selections embedded)
|
||||
{IF dom_structure_available:
|
||||
├── dom-structure-*.json ({len(url_list)} DOM extracts)
|
||||
}
|
||||
|
||||
Next: /workflow:ui-design:generate will combine these structural templates with design systems to produce final prototypes.
|
||||
```
|
||||
|
||||
## Simple Bash Commands
|
||||
@@ -589,23 +742,22 @@ Next: /workflow:ui-design:generate will combine these structural templates with
|
||||
### Path Operations
|
||||
```bash
|
||||
# Find design directory
|
||||
bash(find .workflow -type d -name "design-*" | head -1)
|
||||
bash(find .workflow -type d -name "design-run-*" | head -1)
|
||||
|
||||
# Create output directories
|
||||
bash(mkdir -p {base_path}/layout-extraction)
|
||||
bash(mkdir -p {base_path}/.intermediates/layout-analysis/inspirations) # explore mode only
|
||||
```
|
||||
|
||||
### Validation Commands
|
||||
```bash
|
||||
# Check if already extracted
|
||||
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
|
||||
bash(find {base_path}/layout-extraction -name "layout-*.json" -print -quit | grep -q . && echo "exists")
|
||||
|
||||
# Validate JSON structure
|
||||
bash(cat layout-templates.json | grep -q "layout_templates" && echo "valid")
|
||||
# Count generated files
|
||||
bash(ls {base_path}/layout-extraction/layout-*.json | wc -l)
|
||||
|
||||
# Count templates
|
||||
bash(cat layout-templates.json | grep -c "\"target\":")
|
||||
# Validate JSON structure (sample check)
|
||||
bash(cat {base_path}/layout-extraction/layout-{first_target}-1.json | grep -q "variant_id" && echo "valid")
|
||||
```
|
||||
|
||||
### File Operations
|
||||
@@ -614,9 +766,6 @@ bash(cat layout-templates.json | grep -c "\"target\":")
|
||||
bash(ls {images_pattern})
|
||||
Read({image_path})
|
||||
|
||||
# Write inspiration files (explore mode)
|
||||
Write({base_path}/.intermediates/layout-analysis/inspirations/{target}-layout-ideas.txt, content)
|
||||
|
||||
# Write layout templates
|
||||
bash(echo '{json}' > {base_path}/layout-extraction/layout-templates.json)
|
||||
```
|
||||
@@ -627,28 +776,27 @@ bash(echo '{json}' > {base_path}/layout-extraction/layout-templates.json)
|
||||
{base_path}/
|
||||
├── .intermediates/ # Intermediate analysis files
|
||||
│ └── layout-analysis/
|
||||
│ ├── dom-structure-{target}.json # Extracted DOM structure (URL mode only)
|
||||
│ └── inspirations/ # Explore mode only
|
||||
│ └── {target}-layout-ideas.txt # Layout inspiration research
|
||||
│ ├── analysis-options.json # Generated layout concepts + user selections (embedded)
|
||||
│ └── dom-structure-{target}.json # Extracted DOM structure (URL mode only)
|
||||
└── layout-extraction/ # Final layout templates
|
||||
├── layout-templates.json # Structural layout templates
|
||||
└── layout-space-analysis.json # Layout directions (explore mode only)
|
||||
└── layout-{target}-{variant}.json # Structural layout templates (one per selected concept)
|
||||
```
|
||||
|
||||
## layout-templates.json Format
|
||||
## Layout Template File Format
|
||||
|
||||
Each `layout-{target}-{variant}.json` file contains a single template:
|
||||
|
||||
```json
|
||||
{
|
||||
"extraction_metadata": {
|
||||
"session_id": "...",
|
||||
"input_mode": "image|url|prompt|hybrid",
|
||||
"extraction_mode": "imitate|explore",
|
||||
"device_type": "desktop|mobile|tablet|responsive",
|
||||
"timestamp": "...",
|
||||
"variants_count": 3,
|
||||
"targets": ["home", "dashboard"]
|
||||
"target": "home",
|
||||
"variant_id": "layout-1"
|
||||
},
|
||||
"layout_templates": [
|
||||
"template":
|
||||
{
|
||||
"target": "home",
|
||||
"variant_id": "layout-1",
|
||||
@@ -703,8 +851,8 @@ ERROR: Invalid target name
|
||||
ERROR: Agent task failed
|
||||
→ Check agent output, retry with simplified prompt
|
||||
|
||||
ERROR: MCP search failed (explore mode)
|
||||
→ Check network, retry
|
||||
ERROR: MCP search failed
|
||||
→ Check network connection, retry command
|
||||
```
|
||||
|
||||
### Recovery Strategies
|
||||
@@ -718,29 +866,12 @@ ERROR: MCP search failed (explore mode)
|
||||
- **Hybrid Extraction Strategy** - Combines real DOM structure data with AI visual analysis
|
||||
- **Accurate Layout Properties** - Chrome DevTools extracts real flex/grid configurations, bounds, and hierarchy
|
||||
- **Separation of Concerns** - Decouples layout (structure) from style (visuals)
|
||||
- **Structural Exploration** - Explore mode enables A/B testing of different layouts
|
||||
- **Multi-Selection Workflow** - Generate N concepts → User selects multiple → Parallel template generation
|
||||
- **Structural Exploration** - Enables A/B testing of different layouts through multi-selection
|
||||
- **Token-Based Layout** - CSS uses `var()` placeholders for instant design system adaptation
|
||||
- **Device-Specific** - Tailored structures for different screen sizes
|
||||
- **Graceful Fallback** - Falls back to visual analysis if Chrome DevTools unavailable
|
||||
- **Foundation for Assembly** - Provides structural blueprint for refactored `generate` command
|
||||
- **Foundation for Assembly** - Provides structural blueprint for prototype generation
|
||||
- **Agent-Powered** - Deep structural analysis with AI
|
||||
|
||||
## Integration
|
||||
|
||||
**Workflow Position**: Between style extraction and prototype generation
|
||||
|
||||
**New Workflow**:
|
||||
1. `/workflow:ui-design:style-extract` → `design-tokens.json` + `style-guide.md` (Complete design systems)
|
||||
2. `/workflow:ui-design:layout-extract` → `layout-templates.json` (Structural templates)
|
||||
3. `/workflow:ui-design:generate` (Pure assembler):
|
||||
- **Reads**: `design-tokens.json` + `layout-templates.json`
|
||||
- **Action**: For each style × layout combination:
|
||||
1. Build HTML from `dom_structure`
|
||||
2. Create layout CSS from `css_layout_rules`
|
||||
3. Link design tokens CSS
|
||||
4. Inject placeholder content
|
||||
- **Output**: Complete token-driven HTML/CSS prototypes
|
||||
|
||||
**Input**: Reference images, URLs, or text prompts
|
||||
**Output**: `layout-templates.json` for `/workflow:ui-design:generate`
|
||||
**Next**: `/workflow:ui-design:generate --session {session_id}`
|
||||
|
||||
174
.claude/commands/workflow/ui-design/list.md
Normal file
174
.claude/commands/workflow/ui-design/list.md
Normal file
@@ -0,0 +1,174 @@
|
||||
---
|
||||
name: list
|
||||
description: List all available design runs with metadata (session, created time, prototype count)
|
||||
argument-hint: [--session <id>]
|
||||
allowed-tools: Bash(*), Read(*)
|
||||
---
|
||||
|
||||
# List Design Runs (/workflow:ui-design:list)
|
||||
|
||||
## Overview
|
||||
List all available UI design runs across sessions or within a specific session. Displays design IDs with metadata for easy reference.
|
||||
|
||||
**Output**: Formatted list with design-id, session, created time, and prototype count
|
||||
|
||||
## Implementation
|
||||
|
||||
### Step 1: Determine Search Scope
|
||||
```bash
|
||||
# Priority: --session > all sessions
|
||||
search_path=$(if [ -n "$SESSION_ID" ]; then
|
||||
echo ".workflow/WFS-$SESSION_ID"
|
||||
else
|
||||
echo ".workflow"
|
||||
fi)
|
||||
```
|
||||
|
||||
### Step 2: Find and Display Design Runs
|
||||
```bash
|
||||
echo "Available design runs:"
|
||||
echo ""
|
||||
|
||||
# Find all design-run directories
|
||||
found_count=0
|
||||
while IFS= read -r line; do
|
||||
timestamp=$(echo "$line" | cut -d' ' -f1)
|
||||
path=$(echo "$line" | cut -d' ' -f2-)
|
||||
|
||||
# Extract design_id from path
|
||||
design_id=$(basename "$path")
|
||||
|
||||
# Extract session from path
|
||||
session_id=$(echo "$path" | grep -oP 'WFS-\K[^/]+' || echo "standalone")
|
||||
|
||||
# Format created date
|
||||
created_at=$(date -d "@${timestamp%.*}" '+%Y-%m-%d %H:%M' 2>/dev/null || echo "unknown")
|
||||
|
||||
# Count prototypes
|
||||
prototype_count=$(find "$path/prototypes" -name "*.html" 2>/dev/null | wc -l)
|
||||
|
||||
# Display formatted output
|
||||
echo " - $design_id"
|
||||
echo " Session: $session_id"
|
||||
echo " Created: $created_at"
|
||||
echo " Prototypes: $prototype_count"
|
||||
echo ""
|
||||
|
||||
found_count=$((found_count + 1))
|
||||
done < <(find "$search_path" -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr)
|
||||
|
||||
# Summary
|
||||
if [ $found_count -eq 0 ]; then
|
||||
echo " No design runs found."
|
||||
echo ""
|
||||
if [ -n "$SESSION_ID" ]; then
|
||||
echo "💡 HINT: Try running '/workflow:ui-design:explore-auto' to create a design run"
|
||||
else
|
||||
echo "💡 HINT: Try running '/workflow:ui-design:explore-auto --session <id>' to create a design run"
|
||||
fi
|
||||
else
|
||||
echo "Total: $found_count design run(s)"
|
||||
echo ""
|
||||
echo "💡 USE: /workflow:ui-design:generate --design-id \"<id>\""
|
||||
echo " OR: /workflow:ui-design:generate --session \"<session>\""
|
||||
fi
|
||||
```
|
||||
|
||||
### Step 3: Execute List Command
|
||||
```bash
|
||||
Bash(
|
||||
description: "List all UI design runs with metadata",
|
||||
command: "
|
||||
search_path=\"${search_path}\"
|
||||
SESSION_ID=\"${SESSION_ID:-}\"
|
||||
|
||||
echo 'Available design runs:'
|
||||
echo ''
|
||||
|
||||
found_count=0
|
||||
while IFS= read -r line; do
|
||||
timestamp=\$(echo \"\$line\" | cut -d' ' -f1)
|
||||
path=\$(echo \"\$line\" | cut -d' ' -f2-)
|
||||
|
||||
design_id=\$(basename \"\$path\")
|
||||
session_id=\$(echo \"\$path\" | grep -oP 'WFS-\\K[^/]+' || echo 'standalone')
|
||||
created_at=\$(date -d \"@\${timestamp%.*}\" '+%Y-%m-%d %H:%M' 2>/dev/null || echo 'unknown')
|
||||
prototype_count=\$(find \"\$path/prototypes\" -name '*.html' 2>/dev/null | wc -l)
|
||||
|
||||
echo \" - \$design_id\"
|
||||
echo \" Session: \$session_id\"
|
||||
echo \" Created: \$created_at\"
|
||||
echo \" Prototypes: \$prototype_count\"
|
||||
echo ''
|
||||
|
||||
found_count=\$((found_count + 1))
|
||||
done < <(find \"\$search_path\" -name 'design-run-*' -type d -printf '%T@ %p\\n' 2>/dev/null | sort -nr)
|
||||
|
||||
if [ \$found_count -eq 0 ]; then
|
||||
echo ' No design runs found.'
|
||||
echo ''
|
||||
if [ -n \"\$SESSION_ID\" ]; then
|
||||
echo '💡 HINT: Try running \\'/workflow:ui-design:explore-auto\\' to create a design run'
|
||||
else
|
||||
echo '💡 HINT: Try running \\'/workflow:ui-design:explore-auto --session <id>\\' to create a design run'
|
||||
fi
|
||||
else
|
||||
echo \"Total: \$found_count design run(s)\"
|
||||
echo ''
|
||||
echo '💡 USE: /workflow:ui-design:generate --design-id \"<id>\"'
|
||||
echo ' OR: /workflow:ui-design:generate --session \"<session>\"'
|
||||
fi
|
||||
"
|
||||
)
|
||||
```
|
||||
|
||||
## Example Output
|
||||
|
||||
### With Session Filter
|
||||
```
|
||||
$ /workflow:ui-design:list --session ui-redesign
|
||||
|
||||
Available design runs:
|
||||
|
||||
- design-run-20250109-143052
|
||||
Session: ui-redesign
|
||||
Created: 2025-01-09 14:30
|
||||
Prototypes: 12
|
||||
|
||||
- design-run-20250109-101534
|
||||
Session: ui-redesign
|
||||
Created: 2025-01-09 10:15
|
||||
Prototypes: 6
|
||||
|
||||
Total: 2 design run(s)
|
||||
|
||||
💡 USE: /workflow:ui-design:generate --design-id "<id>"
|
||||
OR: /workflow:ui-design:generate --session "<session>"
|
||||
```
|
||||
|
||||
### All Sessions
|
||||
```
|
||||
$ /workflow:ui-design:list
|
||||
|
||||
Available design runs:
|
||||
|
||||
- design-run-20250109-143052
|
||||
Session: ui-redesign
|
||||
Created: 2025-01-09 14:30
|
||||
Prototypes: 12
|
||||
|
||||
- design-run-20250108-092314
|
||||
Session: landing-page
|
||||
Created: 2025-01-08 09:23
|
||||
Prototypes: 3
|
||||
|
||||
- design-run-20250107-155623
|
||||
Session: standalone
|
||||
Created: 2025-01-07 15:56
|
||||
Prototypes: 8
|
||||
|
||||
Total: 3 design run(s)
|
||||
|
||||
💡 USE: /workflow:ui-design:generate --design-id "<id>"
|
||||
OR: /workflow:ui-design:generate --session "<session>"
|
||||
```
|
||||
@@ -1,20 +1,22 @@
|
||||
---
|
||||
name: style-extract
|
||||
description: Extract design style from reference images or text prompts using Claude analysis with variant generation
|
||||
argument-hint: "[--base-path <path>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--mode <imitate|explore>] [--variants <count>]"
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*)
|
||||
description: Extract design style from reference images or text prompts using Claude analysis with variant generation or refinement mode
|
||||
argument-hint: "[--design-id <id>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--variants <count>] [--interactive] [--refine]"
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), AskUserQuestion(*), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*)
|
||||
---
|
||||
|
||||
# Style Extraction Command
|
||||
|
||||
## Overview
|
||||
Extract design style from reference images or text prompts using Claude's built-in analysis. Directly generates production-ready design systems with complete `design-tokens.json` and `style-guide.md` for each variant.
|
||||
Extract design style from reference images or text prompts using Claude's built-in analysis. Supports two modes:
|
||||
1. **Exploration Mode** (default): Generate multiple contrasting design variants
|
||||
2. **Refinement Mode** (`--refine`): Refine a single existing design through detailed adjustments
|
||||
|
||||
**Strategy**: AI-Driven Design Space Exploration
|
||||
- **Claude-Native**: 100% Claude analysis, no external tools
|
||||
- **Direct Output**: Complete design systems (design-tokens.json + style-guide.md)
|
||||
- **Flexible Input**: Images, text prompts, or both (hybrid mode)
|
||||
- **Maximum Contrast**: AI generates maximally divergent design directions
|
||||
- **Dual Mode**: Exploration (multiple contrasting variants) or Refinement (single design fine-tuning)
|
||||
- **Production-Ready**: WCAG AA compliant, OKLCH colors, semantic naming
|
||||
|
||||
## Phase 0: Setup & Input Validation
|
||||
@@ -40,20 +42,41 @@ IF --urls:
|
||||
ELSE:
|
||||
has_urls = false
|
||||
|
||||
# Determine extraction mode
|
||||
# Priority: --mode parameter → default "imitate"
|
||||
extraction_mode = --mode OR "imitate" # "imitate" or "explore"
|
||||
# Detect refinement mode
|
||||
refine_mode = --refine OR false
|
||||
|
||||
# Set variants count based on mode
|
||||
IF extraction_mode == "imitate":
|
||||
variants_count = 1 # Force single variant for imitate mode (ignore --variants)
|
||||
ELSE IF extraction_mode == "explore":
|
||||
variants_count = --variants OR 3 # Default to 3 for explore mode
|
||||
# Set variants count
|
||||
# Refinement mode: Force variants_count = 1 (ignore user-provided --variants)
|
||||
# Exploration mode: Use --variants or default to 3 (range: 1-5)
|
||||
IF refine_mode:
|
||||
variants_count = 1
|
||||
REPORT: "🔧 Refinement mode enabled: Will generate 1 refined design system"
|
||||
ELSE:
|
||||
variants_count = --variants OR 3
|
||||
VALIDATE: 1 <= variants_count <= 5
|
||||
REPORT: "🔍 Exploration mode: Will generate {variants_count} contrasting design directions"
|
||||
|
||||
# Determine base path
|
||||
bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect
|
||||
# OR use --base-path / --session parameters
|
||||
# Determine base path with priority: --design-id > --session > auto-detect
|
||||
if [ -n "$DESIGN_ID" ]; then
|
||||
# Exact match by design ID
|
||||
relative_path=$(find .workflow -name "${DESIGN_ID}" -type d -print -quit)
|
||||
elif [ -n "$SESSION_ID" ]; then
|
||||
# Latest in session
|
||||
relative_path=$(find .workflow/WFS-$SESSION_ID -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
|
||||
else
|
||||
# Latest globally
|
||||
relative_path=$(find .workflow -name "design-run-*" -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
|
||||
fi
|
||||
|
||||
# Validate and convert to absolute path
|
||||
if [ -z "$relative_path" ] || [ ! -d "$relative_path" ]; then
|
||||
echo "❌ ERROR: Design run not found"
|
||||
echo "💡 HINT: Run '/workflow:ui-design:list' to see available design runs"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
base_path=$(cd "$relative_path" && pwd)
|
||||
bash(echo "✓ Base path: $base_path")
|
||||
```
|
||||
|
||||
### Step 2: Extract Computed Styles (URL Mode - Auto-Trigger)
|
||||
@@ -140,72 +163,133 @@ IF exists: SKIP to completion
|
||||
|
||||
**Phase 0 Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `loaded_images[]` or `prompt_guidance`, `has_urls`, `url_list[]`, `computed_styles_available`
|
||||
|
||||
## Phase 1: Design Direction Generation (Explore Mode Only)
|
||||
## Phase 1: Design Direction or Refinement Options Generation
|
||||
|
||||
### Step 1: Check Extraction Mode
|
||||
```bash
|
||||
# Check extraction mode
|
||||
# extraction_mode == "imitate" → skip this phase
|
||||
# extraction_mode == "explore" → execute this phase
|
||||
```
|
||||
|
||||
**If imitate mode**: Skip to Phase 2
|
||||
|
||||
### Step 2: Load Project Context (Explore Mode)
|
||||
### Step 1: Load Project Context
|
||||
```bash
|
||||
# Load brainstorming context if available
|
||||
bash(test -f {base_path}/.brainstorming/role analysis documents && cat it)
|
||||
|
||||
# Load existing design system if refinement mode
|
||||
IF refine_mode:
|
||||
existing_tokens = Read({base_path}/style-extraction/style-1/design-tokens.json)
|
||||
existing_guide = Read({base_path}/style-extraction/style-1/style-guide.md)
|
||||
```
|
||||
|
||||
### Step 3: Generate Design Direction Options (Agent Task 1)
|
||||
### Step 2: Generate Options (Agent Task 1 - Mode-Specific)
|
||||
**Executor**: `Task(ui-design-agent)`
|
||||
|
||||
Launch agent to generate `variants_count` design direction options with previews:
|
||||
**Exploration Mode** (default): Generate contrasting design directions
|
||||
**Refinement Mode** (`--refine`): Generate refinement options for existing design
|
||||
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[DESIGN_DIRECTION_GENERATION_TASK]
|
||||
Generate {variants_count} maximally contrasting design directions with visual previews
|
||||
// Conditional agent task based on refine_mode
|
||||
IF NOT refine_mode:
|
||||
// EXPLORATION MODE
|
||||
Task(ui-design-agent): `
|
||||
[DESIGN_DIRECTION_GENERATION_TASK]
|
||||
Generate {variants_count} maximally contrasting design directions with visual previews
|
||||
|
||||
SESSION: {session_id} | MODE: explore | BASE_PATH: {base_path}
|
||||
SESSION: {session_id} | MODE: explore | BASE_PATH: {base_path}
|
||||
|
||||
## Input Analysis
|
||||
- User prompt: {prompt_guidance}
|
||||
- Visual references: {loaded_images if available}
|
||||
- Project context: {brainstorming_context if available}
|
||||
## Input Analysis
|
||||
- User prompt: {prompt_guidance}
|
||||
- Visual references: {loaded_images if available}
|
||||
- Project context: {brainstorming_context if available}
|
||||
|
||||
## Analysis Rules
|
||||
- Analyze 6D attribute space: color saturation, visual weight, formality, organic/geometric, innovation, density
|
||||
- Generate {variants_count} directions with MAXIMUM contrast
|
||||
- Each direction must be distinctly different (min distance score: 0.7)
|
||||
## Analysis Rules
|
||||
- Analyze 6D attribute space: color saturation, visual weight, formality, organic/geometric, innovation, density
|
||||
- Generate {variants_count} directions with MAXIMUM contrast
|
||||
- Each direction must be distinctly different (min distance score: 0.7)
|
||||
|
||||
## Generate for EACH Direction
|
||||
1. **Core Philosophy**:
|
||||
- philosophy_name (2-3 words, e.g., "Minimalist & Airy")
|
||||
- design_attributes (6D scores 0-1)
|
||||
- search_keywords (3-5 keywords)
|
||||
- anti_keywords (2-3 keywords to avoid)
|
||||
- rationale (why this is distinct from others)
|
||||
## Generate for EACH Direction
|
||||
1. **Core Philosophy**:
|
||||
- philosophy_name (2-3 words, e.g., "Minimalist & Airy")
|
||||
- design_attributes (6D scores 0-1)
|
||||
- search_keywords (3-5 keywords)
|
||||
- anti_keywords (2-3 keywords to avoid)
|
||||
- rationale (why this is distinct from others)
|
||||
|
||||
2. **Visual Preview Elements**:
|
||||
- primary_color (OKLCH format)
|
||||
- secondary_color (OKLCH format)
|
||||
- accent_color (OKLCH format)
|
||||
- font_family_heading (specific font name)
|
||||
- font_family_body (specific font name)
|
||||
- border_radius_base (e.g., "0.5rem")
|
||||
- mood_description (1-2 sentences describing the feel)
|
||||
2. **Visual Preview Elements**:
|
||||
- primary_color (OKLCH format)
|
||||
- secondary_color (OKLCH format)
|
||||
- accent_color (OKLCH format)
|
||||
- font_family_heading (specific font name)
|
||||
- font_family_body (specific font name)
|
||||
- border_radius_base (e.g., "0.5rem")
|
||||
- mood_description (1-2 sentences describing the feel)
|
||||
|
||||
## Output
|
||||
Write single JSON file: {base_path}/.intermediates/style-analysis/analysis-options.json
|
||||
## Output
|
||||
Write single JSON file: {base_path}/.intermediates/style-analysis/analysis-options.json
|
||||
|
||||
Use schema from INTERACTIVE-DATA-SPEC.md (Style Extract: analysis-options.json)
|
||||
Use schema from INTERACTIVE-DATA-SPEC.md (Style Extract: analysis-options.json)
|
||||
|
||||
CRITICAL: Use Write() tool immediately after generating complete JSON
|
||||
`
|
||||
CRITICAL: Use Write() tool immediately after generating complete JSON
|
||||
`
|
||||
ELSE:
|
||||
// REFINEMENT MODE
|
||||
Task(ui-design-agent): `
|
||||
[DESIGN_REFINEMENT_OPTIONS_TASK]
|
||||
Generate refinement options for existing design system
|
||||
|
||||
SESSION: {session_id} | MODE: refine | BASE_PATH: {base_path}
|
||||
|
||||
## Existing Design System
|
||||
- design-tokens.json: {existing_tokens}
|
||||
- style-guide.md: {existing_guide}
|
||||
|
||||
## Input Guidance
|
||||
- User prompt: {prompt_guidance}
|
||||
- Visual references: {loaded_images if available}
|
||||
|
||||
## Refinement Categories
|
||||
Generate 8-12 refinement options across these categories:
|
||||
|
||||
1. **Intensity/Degree Adjustments** (2-3 options):
|
||||
- Color intensity: more vibrant ↔ more muted
|
||||
- Visual weight: bolder ↔ lighter
|
||||
- Density: more compact ↔ more spacious
|
||||
|
||||
2. **Specific Attribute Tuning** (3-4 options):
|
||||
- Border radius: sharper corners ↔ rounder edges
|
||||
- Shadow depth: subtler shadows ↔ deeper elevation
|
||||
- Typography scale: tighter scale ↔ more contrast
|
||||
- Spacing scale: tighter rhythm ↔ more breathing room
|
||||
|
||||
3. **Context-Specific Variations** (2-3 options):
|
||||
- Dark mode optimization
|
||||
- Mobile-specific adjustments
|
||||
- High-contrast accessibility mode
|
||||
|
||||
4. **Component-Level Customization** (1-2 options):
|
||||
- Button styling emphasis
|
||||
- Card/container treatment
|
||||
- Form input refinements
|
||||
|
||||
## Output Format
|
||||
Each option:
|
||||
- category: "intensity|attribute|context|component"
|
||||
- option_id: unique identifier
|
||||
- label: Short descriptive name (e.g., "More Vibrant Colors")
|
||||
- description: What changes (2-3 sentences)
|
||||
- preview_changes: Key token adjustments preview
|
||||
- impact_scope: Which tokens affected
|
||||
|
||||
## Output
|
||||
Write single JSON file: {base_path}/.intermediates/style-analysis/analysis-options.json
|
||||
|
||||
Use refinement schema:
|
||||
{
|
||||
"mode": "refinement",
|
||||
"base_design": "style-1",
|
||||
"refinement_options": [array of refinement options]
|
||||
}
|
||||
|
||||
CRITICAL: Use Write() tool immediately after generating complete JSON
|
||||
`
|
||||
```
|
||||
|
||||
### Step 4: Verify Options File Created
|
||||
### Step 3: Verify Options File Created
|
||||
```bash
|
||||
bash(test -f {base_path}/.intermediates/style-analysis/analysis-options.json && echo "created")
|
||||
|
||||
@@ -217,20 +301,44 @@ bash(cat {base_path}/.intermediates/style-analysis/analysis-options.json | grep
|
||||
|
||||
---
|
||||
|
||||
## Phase 1.5: User Confirmation (Explore Mode Only - INTERACTIVE)
|
||||
## Phase 1.5: User Confirmation (Optional - Triggered by --interactive)
|
||||
|
||||
**Purpose**: Allow user to select preferred design direction(s) before generating full design systems
|
||||
**Purpose**:
|
||||
- **Exploration Mode**: Allow user to select preferred design direction(s)
|
||||
- **Refinement Mode**: Allow user to select refinement options to apply
|
||||
|
||||
### Step 1: Load and Present Options
|
||||
**Trigger Condition**: Execute this phase ONLY if `--interactive` flag is present
|
||||
|
||||
### Step 1: Check Interactive Flag
|
||||
```bash
|
||||
# Skip this entire phase if --interactive flag is not present
|
||||
IF NOT --interactive:
|
||||
SKIP to Phase 2
|
||||
IF refine_mode:
|
||||
REPORT: "ℹ️ Non-interactive refinement mode: Will apply all suggested refinements"
|
||||
ELSE:
|
||||
REPORT: "ℹ️ Non-interactive mode: Will generate all {variants_count} variants"
|
||||
|
||||
REPORT: "🎯 Interactive mode enabled: User selection required"
|
||||
```
|
||||
|
||||
### Step 2: Load and Present Options (Mode-Specific)
|
||||
```bash
|
||||
# Read options file
|
||||
options = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
|
||||
|
||||
# Parse design directions
|
||||
design_directions = options.design_directions
|
||||
# Branch based on mode
|
||||
IF NOT refine_mode:
|
||||
# EXPLORATION MODE
|
||||
design_directions = options.design_directions
|
||||
ELSE:
|
||||
# REFINEMENT MODE
|
||||
refinement_options = options.refinement_options
|
||||
```
|
||||
|
||||
### Step 2: Present Options to User
|
||||
### Step 3: Present Options to User (Mode-Specific)
|
||||
|
||||
**Exploration Mode**:
|
||||
```
|
||||
📋 Design Direction Options
|
||||
|
||||
@@ -263,14 +371,39 @@ Please select the direction(s) you'd like to develop into complete design system
|
||||
═══════════════════════════════════════════════════
|
||||
```
|
||||
|
||||
### Step 3: Capture User Selection
|
||||
**Refinement Mode**:
|
||||
```
|
||||
📋 Design Refinement Options
|
||||
|
||||
We've analyzed your existing design system and generated refinement options.
|
||||
Please select the refinement(s) you'd like to apply.
|
||||
|
||||
Base Design: style-1
|
||||
|
||||
{FOR each option in refinement_options grouped by category:
|
||||
━━━ {category_name} ━━━
|
||||
|
||||
{FOR each refinement in category_options:
|
||||
[{refinement.option_id}] {refinement.label}
|
||||
{refinement.description}
|
||||
Preview: {refinement.preview_changes}
|
||||
Affects: {refinement.impact_scope}
|
||||
}
|
||||
}
|
||||
|
||||
═══════════════════════════════════════════════════
|
||||
```
|
||||
|
||||
### Step 4: Capture User Selection and Update Analysis JSON
|
||||
|
||||
**Exploration Mode Interaction**:
|
||||
```javascript
|
||||
// Use AskUserQuestion tool for selection
|
||||
// Use AskUserQuestion tool for multi-selection
|
||||
AskUserQuestion({
|
||||
questions: [{
|
||||
question: "Which design direction would you like to develop into a complete design system?",
|
||||
question: "Which design direction(s) would you like to develop into complete design systems?",
|
||||
header: "Style Choice",
|
||||
multiSelect: false, // Single selection for Phase 1
|
||||
multiSelect: true, // Multi-selection enabled
|
||||
options: [
|
||||
{FOR each direction:
|
||||
label: "Option {direction.index}: {direction.philosophy_name}",
|
||||
@@ -280,142 +413,187 @@ AskUserQuestion({
|
||||
}]
|
||||
})
|
||||
|
||||
// Parse user response (e.g., "Option 1: Minimalist & Airy")
|
||||
selected_option_text = user_answer
|
||||
// Parse user response (array of selections)
|
||||
selected_options = user_answer
|
||||
|
||||
// Check for user cancellation
|
||||
IF selected_option_text == null OR selected_option_text == "":
|
||||
IF selected_options == null OR selected_options.length == 0:
|
||||
REPORT: "⚠️ User canceled selection. Workflow terminated."
|
||||
EXIT workflow
|
||||
|
||||
// Extract option index from response format "Option N: Name"
|
||||
match = selected_option_text.match(/Option (\d+):/)
|
||||
IF match:
|
||||
selected_index = parseInt(match[1])
|
||||
ELSE:
|
||||
ERROR: "Invalid selection format. Expected 'Option N: ...' format"
|
||||
EXIT workflow
|
||||
```
|
||||
// Extract option indices
|
||||
selected_indices = []
|
||||
FOR each selected_option_text IN selected_options:
|
||||
match = selected_option_text.match(/Option (\d+):/)
|
||||
IF match:
|
||||
selected_indices.push(parseInt(match[1]))
|
||||
|
||||
### Step 4: Write User Selection File
|
||||
```bash
|
||||
# Create user selection JSON
|
||||
selection_data = {
|
||||
"metadata": {
|
||||
"selected_at": "{current_timestamp}",
|
||||
"selection_type": "single",
|
||||
"session_id": "{session_id}"
|
||||
},
|
||||
"selected_indices": [selected_index],
|
||||
"refinements": {
|
||||
"enabled": false
|
||||
}
|
||||
REPORT: "✅ Selected {selected_indices.length} design direction(s)"
|
||||
|
||||
// Update analysis-options.json
|
||||
options_file = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
|
||||
options_file.user_selection = {
|
||||
"selected_at": NOW(),
|
||||
"selected_indices": selected_indices,
|
||||
"selection_count": selected_indices.length
|
||||
}
|
||||
|
||||
# Write to file
|
||||
bash(echo '{selection_data}' > {base_path}/.intermediates/style-analysis/user-selection.json)
|
||||
|
||||
# Verify
|
||||
bash(test -f {base_path}/.intermediates/style-analysis/user-selection.json && echo "saved")
|
||||
Write({base_path}/.intermediates/style-analysis/analysis-options.json, JSON.stringify(options_file, indent=2))
|
||||
```
|
||||
|
||||
### Step 5: Confirmation Message
|
||||
**Refinement Mode Interaction**:
|
||||
```javascript
|
||||
// Use AskUserQuestion tool for multi-selection of refinements
|
||||
AskUserQuestion({
|
||||
questions: [{
|
||||
question: "Which refinement(s) would you like to apply to your design system?",
|
||||
header: "Refinements",
|
||||
multiSelect: true, // Multi-selection enabled
|
||||
options: [
|
||||
{FOR each refinement:
|
||||
label: "{refinement.label}",
|
||||
description: "{refinement.description} (Affects: {refinement.impact_scope})"
|
||||
}
|
||||
]
|
||||
}]
|
||||
})
|
||||
|
||||
// Parse user response
|
||||
selected_refinements = user_answer
|
||||
|
||||
// Check for user cancellation
|
||||
IF selected_refinements == null OR selected_refinements.length == 0:
|
||||
REPORT: "⚠️ User canceled selection. Workflow terminated."
|
||||
EXIT workflow
|
||||
|
||||
// Extract refinement option_ids
|
||||
selected_option_ids = []
|
||||
FOR each selected_text IN selected_refinements:
|
||||
# Match against refinement labels to find option_ids
|
||||
FOR each refinement IN refinement_options:
|
||||
IF refinement.label IN selected_text:
|
||||
selected_option_ids.push(refinement.option_id)
|
||||
|
||||
REPORT: "✅ Selected {selected_option_ids.length} refinement(s)"
|
||||
|
||||
// Update analysis-options.json
|
||||
options_file = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
|
||||
options_file.user_selection = {
|
||||
"selected_at": NOW(),
|
||||
"selected_option_ids": selected_option_ids,
|
||||
"selection_count": selected_option_ids.length
|
||||
}
|
||||
Write({base_path}/.intermediates/style-analysis/analysis-options.json, JSON.stringify(options_file, indent=2))
|
||||
```
|
||||
|
||||
### Step 5: Confirmation Message (Mode-Specific)
|
||||
|
||||
**Exploration Mode**:
|
||||
```
|
||||
✅ Selection recorded!
|
||||
|
||||
You selected: Option {selected_index} - {selected_direction.philosophy_name}
|
||||
You selected {selected_indices.length} design direction(s):
|
||||
{FOR each index IN selected_indices:
|
||||
• Option {index} - {design_directions[index-1].philosophy_name}
|
||||
}
|
||||
|
||||
Proceeding to generate complete design system based on your selection...
|
||||
Proceeding to generate {selected_indices.length} complete design system(s)...
|
||||
```
|
||||
|
||||
**Output**: `user-selection.json` with user's choice
|
||||
**Refinement Mode**:
|
||||
```
|
||||
✅ Selection recorded!
|
||||
|
||||
You selected {selected_option_ids.length} refinement(s):
|
||||
{FOR each id IN selected_option_ids:
|
||||
• {refinement_by_id[id].label} ({refinement_by_id[id].category})
|
||||
}
|
||||
|
||||
Proceeding to apply refinements and generate updated design system...
|
||||
```
|
||||
|
||||
**Output**: Updated `analysis-options.json` with user's selection embedded
|
||||
|
||||
## Phase 2: Design System Generation (Agent Task 2)
|
||||
|
||||
**Executor**: `Task(ui-design-agent)` for selected variant(s)
|
||||
|
||||
### Step 1: Load User Selection (Explore Mode)
|
||||
### Step 1: Load User Selection or Default to All
|
||||
```bash
|
||||
# For explore mode, read user selection
|
||||
IF extraction_mode == "explore":
|
||||
selection = Read({base_path}/.intermediates/style-analysis/user-selection.json)
|
||||
selected_indices = selection.selected_indices
|
||||
refinements = selection.refinements
|
||||
# Read analysis-options.json which may contain user_selection
|
||||
options = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
|
||||
|
||||
# Also read the selected direction details from options
|
||||
options = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
|
||||
selected_directions = [options.design_directions[i-1] for i in selected_indices] # 0-indexed
|
||||
# Check if user_selection field exists (interactive mode)
|
||||
IF options.user_selection AND options.user_selection.selected_indices:
|
||||
# Interactive mode: Use user-selected variants
|
||||
selected_indices = options.user_selection.selected_indices # Array of selected indices (e.g., [1, 3])
|
||||
|
||||
# For Phase 1, we only allow single selection
|
||||
selected_direction = selected_directions[0]
|
||||
actual_variants_count = 1
|
||||
REPORT: "🎯 Interactive mode: Using {selected_indices.length} user-selected variant(s)"
|
||||
ELSE:
|
||||
# Imitate mode - generate single variant without selection
|
||||
selected_direction = null
|
||||
actual_variants_count = 1
|
||||
# Non-interactive mode: Generate ALL variants (default behavior)
|
||||
selected_indices = [1, 2, ..., variants_count] # All indices from 1 to variants_count
|
||||
|
||||
REPORT: "ℹ️ Non-interactive mode: Generating all {variants_count} variant(s)"
|
||||
|
||||
# Extract the selected direction details from options
|
||||
selected_directions = [options.design_directions[i-1] for i in selected_indices] # 0-indexed array
|
||||
|
||||
actual_variants_count = selected_indices.length
|
||||
REPORT: "📦 Generating {actual_variants_count} design system(s)..."
|
||||
```
|
||||
|
||||
### Step 2: Create Output Directory
|
||||
### Step 2: Create Output Directories
|
||||
```bash
|
||||
# Create directory for selected variant only
|
||||
bash(mkdir -p {base_path}/style-extraction/style-1)
|
||||
# Create directories for each selected variant
|
||||
FOR index IN 1..actual_variants_count:
|
||||
bash(mkdir -p {base_path}/style-extraction/style-{index})
|
||||
```
|
||||
|
||||
### Step 3: Launch Agent Task
|
||||
Generate design system for selected direction:
|
||||
### Step 3: Launch Agent Tasks (Parallel)
|
||||
Generate design systems for ALL selected directions in parallel (max 5 concurrent):
|
||||
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[DESIGN_SYSTEM_GENERATION_TASK]
|
||||
Generate production-ready design system based on user-selected direction
|
||||
// Launch parallel tasks, one for each selected direction
|
||||
FOR variant_index IN 1..actual_variants_count:
|
||||
selected_direction = selected_directions[variant_index - 1] // 0-indexed
|
||||
|
||||
SESSION: {session_id} | MODE: {extraction_mode} | BASE_PATH: {base_path}
|
||||
Task(ui-design-agent): `
|
||||
[DESIGN_SYSTEM_GENERATION_TASK #{variant_index}/{actual_variants_count}]
|
||||
Generate production-ready design system based on user-selected direction
|
||||
|
||||
${extraction_mode == "explore" ? `
|
||||
USER SELECTION:
|
||||
- Selected Direction: ${selected_direction.philosophy_name}
|
||||
- Design Attributes: ${JSON.stringify(selected_direction.design_attributes)}
|
||||
- Search Keywords: ${selected_direction.search_keywords.join(", ")}
|
||||
- Anti-keywords: ${selected_direction.anti_keywords.join(", ")}
|
||||
- Rationale: ${selected_direction.rationale}
|
||||
- Preview Colors: Primary=${selected_direction.preview.primary_color}, Accent=${selected_direction.preview.accent_color}
|
||||
- Preview Typography: Heading=${selected_direction.preview.font_family_heading}, Body=${selected_direction.preview.font_family_body}
|
||||
- Preview Border Radius: ${selected_direction.preview.border_radius_base}
|
||||
SESSION: {session_id} | VARIANT: {variant_index}/{actual_variants_count} | BASE_PATH: {base_path}
|
||||
|
||||
${refinements.enabled ? `
|
||||
USER REFINEMENTS:
|
||||
${refinements.primary_color ? "- Primary Color Override: " + refinements.primary_color : ""}
|
||||
${refinements.font_family_heading ? "- Heading Font Override: " + refinements.font_family_heading : ""}
|
||||
${refinements.font_family_body ? "- Body Font Override: " + refinements.font_family_body : ""}
|
||||
` : ""}
|
||||
` : ""}
|
||||
USER SELECTION:
|
||||
- Selected Direction: ${selected_direction.philosophy_name}
|
||||
- Design Attributes: ${JSON.stringify(selected_direction.design_attributes)}
|
||||
- Search Keywords: ${selected_direction.search_keywords.join(", ")}
|
||||
- Anti-keywords: ${selected_direction.anti_keywords.join(", ")}
|
||||
- Rationale: ${selected_direction.rationale}
|
||||
- Preview Colors: Primary=${selected_direction.preview.primary_color}, Accent=${selected_direction.preview.accent_color}
|
||||
- Preview Typography: Heading=${selected_direction.preview.font_family_heading}, Body=${selected_direction.preview.font_family_body}
|
||||
- Preview Border Radius: ${selected_direction.preview.border_radius_base}
|
||||
|
||||
## Input Analysis
|
||||
- Input mode: {input_mode} (image/text/hybrid${has_urls ? "/url" : ""})
|
||||
- Visual references: {loaded_images OR prompt_guidance}
|
||||
${computed_styles_available ? "- Computed styles: Use as ground truth (Read from .intermediates/style-analysis/computed-styles.json)" : ""}
|
||||
## Input Analysis
|
||||
- Input mode: {input_mode} (image/text/hybrid${has_urls ? "/url" : ""})
|
||||
- Visual references: {loaded_images OR prompt_guidance}
|
||||
${computed_styles_available ? "- Computed styles: Use as ground truth (Read from .intermediates/style-analysis/computed-styles.json)" : ""}
|
||||
|
||||
## Generation Rules
|
||||
${extraction_mode == "explore" ? `
|
||||
- **Explore Mode**: Develop the selected design direction into a complete design system
|
||||
- Use preview elements as foundation and expand with full token coverage
|
||||
- Apply design_attributes to all token values:
|
||||
* color_saturation → OKLCH chroma values
|
||||
* visual_weight → font weights, shadow depths
|
||||
* density → spacing scale compression/expansion
|
||||
* formality → typography choices, border radius
|
||||
* organic_geometric → border radius, shape patterns
|
||||
* innovation → token naming, experimental values
|
||||
- Honor search_keywords for design inspiration
|
||||
- Avoid anti_keywords patterns
|
||||
` : `
|
||||
- **Imitate Mode**: High-fidelity replication of reference design
|
||||
${computed_styles_available ? "- Use computed styles as ground truth for all measurements" : "- Use visual inference for measurements"}
|
||||
`}
|
||||
- All colors in OKLCH format ${computed_styles_available ? "(convert from computed RGB)" : ""}
|
||||
- WCAG AA compliance: 4.5:1 text contrast, 3:1 UI contrast
|
||||
## Generation Rules
|
||||
- Develop the selected design direction into a complete design system
|
||||
- Use preview elements as foundation and expand with full token coverage
|
||||
- Apply design_attributes to all token values:
|
||||
* color_saturation → OKLCH chroma values
|
||||
* visual_weight → font weights, shadow depths
|
||||
* density → spacing scale compression/expansion
|
||||
* formality → typography choices, border radius
|
||||
* organic_geometric → border radius, shape patterns
|
||||
* innovation → token naming, experimental values
|
||||
- Honor search_keywords for design inspiration
|
||||
- Avoid anti_keywords patterns
|
||||
- All colors in OKLCH format ${computed_styles_available ? "(convert from computed RGB)" : ""}
|
||||
- WCAG AA compliance: 4.5:1 text contrast, 3:1 UI contrast
|
||||
|
||||
## Generate
|
||||
Create complete design system in {base_path}/style-extraction/style-1/
|
||||
## Generate
|
||||
Create complete design system in {base_path}/style-extraction/style-{variant_index}/
|
||||
|
||||
1. **design-tokens.json**:
|
||||
- Complete token structure with ALL fields:
|
||||
@@ -448,14 +626,13 @@ Task(ui-design-agent): `
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Use Write() tool immediately for each file
|
||||
- ✅ Write to style-1/ directory (single output)
|
||||
- ✅ Write to style-{variant_index}/ directory
|
||||
- ❌ NO external research or MCP calls (pure AI generation)
|
||||
- ✅ Maintain consistency with user-selected direction
|
||||
${refinements.enabled ? "- ✅ Apply user refinements precisely" : ""}
|
||||
`
|
||||
`
|
||||
```
|
||||
|
||||
**Output**: Agent generates 2 files (design-tokens.json, style-guide.md) for selected direction
|
||||
**Output**: {actual_variants_count} parallel agent tasks generate 2 files each (design-tokens.json, style-guide.md)
|
||||
|
||||
## Phase 3: Verify Output
|
||||
|
||||
@@ -520,8 +697,7 @@ Intermediate Analysis:
|
||||
{base_path}/.intermediates/style-analysis/computed-styles.json (extracted from {primary_url})
|
||||
}
|
||||
{IF extraction_mode == "explore":
|
||||
{base_path}/.intermediates/style-analysis/analysis-options.json (design direction options)
|
||||
{base_path}/.intermediates/style-analysis/user-selection.json (your selection)
|
||||
{base_path}/.intermediates/style-analysis/analysis-options.json (design direction options + user selection)
|
||||
}
|
||||
|
||||
Next: /workflow:ui-design:layout-extract --session {session_id} --targets "..."
|
||||
@@ -533,7 +709,7 @@ Next: /workflow:ui-design:layout-extract --session {session_id} --targets "..."
|
||||
### Path Operations
|
||||
```bash
|
||||
# Find design directory
|
||||
bash(find .workflow -type d -name "design-*" | head -1)
|
||||
bash(find .workflow -type d -name "design-run-*" | head -1)
|
||||
|
||||
# Expand image pattern
|
||||
bash(ls {images_pattern})
|
||||
@@ -559,8 +735,10 @@ bash(cat {base_path}/style-extraction/style-1/design-tokens.json | grep -q "colo
|
||||
# Load brainstorming context
|
||||
bash(test -f .brainstorming/role analysis documents && cat it)
|
||||
|
||||
# Create directories
|
||||
bash(mkdir -p {base_path}/style-extraction/style-{{1..3}})
|
||||
# Create directories (example for multiple variants)
|
||||
bash(mkdir -p {base_path}/style-extraction/style-1)
|
||||
bash(mkdir -p {base_path}/style-extraction/style-2)
|
||||
bash(mkdir -p {base_path}/style-extraction/style-3)
|
||||
|
||||
# Verify output
|
||||
bash(ls {base_path}/style-extraction/style-1/)
|
||||
@@ -574,8 +752,7 @@ bash(test -f {base_path}/.intermediates/style-analysis/analysis-options.json &&
|
||||
├── .intermediates/ # Intermediate analysis files
|
||||
│ └── style-analysis/
|
||||
│ ├── computed-styles.json # Extracted CSS values from DOM (if URL available)
|
||||
│ ├── analysis-options.json # Design direction options (explore mode only)
|
||||
│ └── user-selection.json # User's selected direction (explore mode only)
|
||||
│ └── analysis-options.json # Design direction options + user selection (explore mode only)
|
||||
└── style-extraction/ # Final design system
|
||||
└── style-1/
|
||||
├── design-tokens.json # Production-ready design tokens
|
||||
@@ -662,10 +839,4 @@ ERROR: Claude JSON parsing error
|
||||
- **Production-Ready** - OKLCH colors, WCAG AA compliance, semantic naming
|
||||
- **Agent-Driven** - Autonomous multi-file generation with ui-design-agent
|
||||
|
||||
## Integration
|
||||
|
||||
**Input**: Reference images or text prompts
|
||||
**Output**: `style-extraction/style-{N}/` with design-tokens.json + style-guide.md
|
||||
**Next**: `/workflow:ui-design:layout-extract --session {session_id}` OR `/workflow:ui-design:generate --session {session_id}`
|
||||
|
||||
**Note**: This command extracts visual style (colors, typography, spacing) and generates production-ready design systems. For layout structure extraction, use `/workflow:ui-design:layout-extract`.
|
||||
|
||||
@@ -28,7 +28,7 @@ Synchronize finalized design system references to brainstorming artifacts, prepa
|
||||
CHECK: .workflow/.active-* marker files; VALIDATE: session_id matches active session
|
||||
|
||||
# Verify design artifacts in latest design run
|
||||
latest_design = find_latest_path_matching(".workflow/WFS-{session}/design-*")
|
||||
latest_design = find_latest_path_matching(".workflow/WFS-{session}/design-run-*")
|
||||
|
||||
# Detect design system structure
|
||||
IF exists({latest_design}/style-extraction/style-1/design-tokens.json):
|
||||
@@ -89,8 +89,8 @@ Update `.brainstorming/role analysis documents` with design system references.
|
||||
## UI/UX Guidelines
|
||||
|
||||
### Design System Reference
|
||||
**Finalized Design Tokens**: @../design-{run_id}/{design_tokens_path}
|
||||
**Style Guide**: @../design-{run_id}/{style_guide_path}
|
||||
**Finalized Design Tokens**: @../{design_id}/{design_tokens_path}
|
||||
**Style Guide**: @../{design_id}/{style_guide_path}
|
||||
**Design System Mode**: {design_system_mode}
|
||||
|
||||
### Implementation Requirements
|
||||
@@ -101,12 +101,12 @@ Update `.brainstorming/role analysis documents` with design system references.
|
||||
|
||||
### Reference Prototypes
|
||||
{FOR each selected_prototype:
|
||||
- **{page_name}**: @../design-{run_id}/prototypes/{prototype}.html | Layout: {layout_strategy from notes}
|
||||
- **{page_name}**: @../{design_id}/prototypes/{prototype}.html | Layout: {layout_strategy from notes}
|
||||
}
|
||||
|
||||
### Design System Assets
|
||||
```json
|
||||
{"design_tokens": "design-{run_id}/{design_tokens_path}", "style_guide": "design-{run_id}/{style_guide_path}", "design_system_mode": "{design_system_mode}", "prototypes": [{FOR each: "design-{run_id}/prototypes/{prototype}.html"}]}
|
||||
{"design_tokens": "{design_id}/{design_tokens_path}", "style_guide": "{design_id}/{style_guide_path}", "design_system_mode": "{design_system_mode}", "prototypes": [{FOR each: "{design_id}/prototypes/{prototype}.html"}]}
|
||||
```
|
||||
```
|
||||
|
||||
@@ -145,9 +145,9 @@ IF selected_list: pm_files = Glob(".workflow/WFS-{session}/.brainstorming/produc
|
||||
```markdown
|
||||
## Design System Implementation Reference
|
||||
|
||||
**Design Tokens**: @../../design-{run_id}/{design_tokens_path}
|
||||
**Style Guide**: @../../design-{run_id}/{style_guide_path}
|
||||
**Prototypes**: {FOR each: @../../design-{run_id}/prototypes/{prototype}.html}
|
||||
**Design Tokens**: @../../{design_id}/{design_tokens_path}
|
||||
**Style Guide**: @../../{design_id}/{style_guide_path}
|
||||
**Prototypes**: {FOR each: @../../{design_id}/prototypes/{prototype}.html}
|
||||
|
||||
*Reference added by /workflow:ui-design:update*
|
||||
```
|
||||
@@ -156,8 +156,8 @@ IF selected_list: pm_files = Glob(".workflow/WFS-{session}/.brainstorming/produc
|
||||
```markdown
|
||||
## Animation & Interaction Reference
|
||||
|
||||
**Animations**: @../../design-{run_id}/animation-extraction/animation-tokens.json
|
||||
**Prototypes**: {FOR each: @../../design-{run_id}/prototypes/{prototype}.html}
|
||||
**Animations**: @../../{design_id}/animation-extraction/animation-tokens.json
|
||||
**Prototypes**: {FOR each: @../../{design_id}/prototypes/{prototype}.html}
|
||||
|
||||
*Reference added by /workflow:ui-design:update*
|
||||
```
|
||||
@@ -166,7 +166,7 @@ IF selected_list: pm_files = Glob(".workflow/WFS-{session}/.brainstorming/produc
|
||||
```markdown
|
||||
## Layout Structure Reference
|
||||
|
||||
**Layout Templates**: @../../design-{run_id}/layout-extraction/layout-templates.json
|
||||
**Layout Templates**: @../../{design_id}/layout-extraction/layout-templates.json
|
||||
|
||||
*Reference added by /workflow:ui-design:update*
|
||||
```
|
||||
@@ -175,7 +175,7 @@ IF selected_list: pm_files = Glob(".workflow/WFS-{session}/.brainstorming/produc
|
||||
```markdown
|
||||
## Prototype Validation Reference
|
||||
|
||||
**Prototypes**: {FOR each: @../../design-{run_id}/prototypes/{prototype}.html}
|
||||
**Prototypes**: {FOR each: @../../{design_id}/prototypes/{prototype}.html}
|
||||
|
||||
*Reference added by /workflow:ui-design:update*
|
||||
```
|
||||
@@ -197,8 +197,8 @@ Create or update `.brainstorming/ui-designer/design-system-reference.md`:
|
||||
## Design System Integration
|
||||
This style guide references the finalized design system from the design refinement phase.
|
||||
|
||||
**Design Tokens**: @../../design-{run_id}/{design_tokens_path}
|
||||
**Style Guide**: @../../design-{run_id}/{style_guide_path}
|
||||
**Design Tokens**: @../../{design_id}/{design_tokens_path}
|
||||
**Style Guide**: @../../{design_id}/{style_guide_path}
|
||||
**Design System Mode**: {design_system_mode}
|
||||
|
||||
## Implementation Guidelines
|
||||
@@ -209,13 +209,13 @@ This style guide references the finalized design system from the design refineme
|
||||
|
||||
## Reference Prototypes
|
||||
{FOR each selected_prototype:
|
||||
- **{page_name}**: @../../design-{run_id}/prototypes/{prototype}.html
|
||||
- **{page_name}**: @../../{design_id}/prototypes/{prototype}.html
|
||||
}
|
||||
|
||||
## Token System
|
||||
For complete token definitions and usage examples, see:
|
||||
- Design Tokens: @../../design-{run_id}/{design_tokens_path}
|
||||
- Style Guide: @../../design-{run_id}/{style_guide_path}
|
||||
- Design Tokens: @../../{design_id}/{design_tokens_path}
|
||||
- Style Guide: @../../{design_id}/{style_guide_path}
|
||||
|
||||
---
|
||||
*Auto-generated by /workflow:ui-design:update | Last updated: {timestamp}*
|
||||
@@ -271,24 +271,24 @@ Next: /workflow:plan [--agent] "<task description>"
|
||||
|
||||
**@ Reference Format** (role analysis documents):
|
||||
```
|
||||
@../design-{run_id}/style-extraction/style-1/design-tokens.json
|
||||
@../design-{run_id}/style-extraction/style-1/style-guide.md
|
||||
@../design-{run_id}/prototypes/{prototype}.html
|
||||
@../{design_id}/style-extraction/style-1/design-tokens.json
|
||||
@../{design_id}/style-extraction/style-1/style-guide.md
|
||||
@../{design_id}/prototypes/{prototype}.html
|
||||
```
|
||||
|
||||
**@ Reference Format** (ui-designer/design-system-reference.md):
|
||||
```
|
||||
@../../design-{run_id}/style-extraction/style-1/design-tokens.json
|
||||
@../../design-{run_id}/style-extraction/style-1/style-guide.md
|
||||
@../../design-{run_id}/prototypes/{prototype}.html
|
||||
@../../{design_id}/style-extraction/style-1/design-tokens.json
|
||||
@../../{design_id}/style-extraction/style-1/style-guide.md
|
||||
@../../{design_id}/prototypes/{prototype}.html
|
||||
```
|
||||
|
||||
**@ Reference Format** (role analysis.md files):
|
||||
```
|
||||
@../../design-{run_id}/style-extraction/style-1/design-tokens.json
|
||||
@../../design-{run_id}/animation-extraction/animation-tokens.json
|
||||
@../../design-{run_id}/layout-extraction/layout-templates.json
|
||||
@../../design-{run_id}/prototypes/{prototype}.html
|
||||
@../../{design_id}/style-extraction/style-1/design-tokens.json
|
||||
@../../{design_id}/animation-extraction/animation-tokens.json
|
||||
@../../{design_id}/layout-extraction/layout-templates.json
|
||||
@../../{design_id}/prototypes/{prototype}.html
|
||||
```
|
||||
|
||||
## Integration with /workflow:plan
|
||||
@@ -307,9 +307,9 @@ After this update, `/workflow:plan` will discover design assets through:
|
||||
"task_id": "IMPL-001",
|
||||
"context": {
|
||||
"design_system": {
|
||||
"tokens": "design-{run_id}/style-extraction/style-1/design-tokens.json",
|
||||
"style_guide": "design-{run_id}/style-extraction/style-1/style-guide.md",
|
||||
"prototypes": ["design-{run_id}/prototypes/dashboard-variant-1.html"]
|
||||
"tokens": "{design_id}/style-extraction/style-1/design-tokens.json",
|
||||
"style_guide": "{design_id}/style-extraction/style-1/style-guide.md",
|
||||
"prototypes": ["{design_id}/prototypes/dashboard-variant-1.html"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -91,16 +91,23 @@ Comprehensive command guide for Claude DMS3 workflow system covering 69 commands
|
||||
|
||||
**When**: New user needs guidance
|
||||
|
||||
**Triggers**: "新手", "getting started", "如何开始", "常用命令"
|
||||
**Triggers**: "新手", "getting started", "如何开始", "常用命令", **"从0到1"**, **"全新项目"**
|
||||
|
||||
**Process**:
|
||||
1. **Assess user background** - Ask clarifying questions if needed (coding experience? project type?)
|
||||
2. **Design personalized learning path** based on their goals
|
||||
3. **Curate essential commands** from `index/essential-commands.json` - Select 3-5 most relevant for their use case
|
||||
4. **Provide guided first example** - Walk through ONE complete workflow with explanation
|
||||
5. **Set clear next steps** - What to try next, where to get help
|
||||
2. **⚠️ Identify project stage** - FROM-ZERO-TO-ONE vs FEATURE-ADDITION:
|
||||
- **从0到1场景** (全新项目/产品/架构决策) → **MUST START with brainstorming workflow**
|
||||
- **功能新增场景** (已有项目中添加功能) → Start with planning workflow
|
||||
3. **Design personalized learning path** based on their goals and stage
|
||||
4. **Curate essential commands** from `index/essential-commands.json` - Select 3-5 most relevant for their use case
|
||||
5. **Provide guided first example** - Walk through ONE complete workflow with explanation, **emphasizing brainstorming for 0-to-1 scenarios**
|
||||
6. **Set clear next steps** - What to try next, where to get help
|
||||
|
||||
**Example**: "我是新手,如何开始?" → Detect if they have a specific task OR just exploring → For specific task: provide laser-focused 3-step guide; For exploring: progressive learning path starting with simplest workflow, NOT overwhelming 14-command list
|
||||
**Example 1 (从0到1)**: "我是新手,如何开始全新项目?" → Identify as FROM-ZERO-TO-ONE → Emphasize brainstorming workflow (`/workflow:brainstorm:artifacts`) as mandatory first step → Explain brainstorm → plan → execute flow
|
||||
|
||||
**Example 2 (功能新增)**: "我是新手,如何在已有项目中添加功能?" → Identify as FEATURE-ADDITION → Guide to planning workflow (`/workflow:plan`) → Explain plan → execute → test flow
|
||||
|
||||
**Example 3 (探索)**: "我是新手,如何开始?" → Ask clarifying question: "是全新项目启动(从0到1)还是在已有项目中添加功能?" → Based on answer, route to appropriate workflow
|
||||
|
||||
---
|
||||
|
||||
@@ -288,7 +295,8 @@ Templates are auto-populated during Mode 5 (Issue Reporting) interaction.
|
||||
When commands are added/modified/removed:
|
||||
|
||||
```bash
|
||||
bash scripts/update-index.sh
|
||||
cd /d/Claude_dms3/.claude/skills/command-guide
|
||||
python scripts/analyze_commands.py
|
||||
```
|
||||
|
||||
This script:
|
||||
@@ -300,7 +308,7 @@ This script:
|
||||
### Committing Updates
|
||||
|
||||
```bash
|
||||
git add .claude/skills/command-guide/index/
|
||||
git add .claude/skills/command-guide/
|
||||
git commit -m "docs: update command indexes"
|
||||
git push
|
||||
```
|
||||
@@ -318,23 +326,28 @@ Team members get latest indexes via `git pull`.
|
||||
|
||||
---
|
||||
|
||||
**Version**: 1.3.1 (Path configuration for global installation)
|
||||
**Last Updated**: 2025-11-06
|
||||
## 🔄 Maintenance
|
||||
|
||||
### Documentation Updates
|
||||
|
||||
This SKILL documentation is kept in sync with command implementations through a standardized update process.
|
||||
|
||||
**Update Guideline**: See [UPDATE-GUIDELINE.md](UPDATE-GUIDELINE.md) for the complete documentation maintenance process.
|
||||
|
||||
**Update Process**:
|
||||
1. **Analyze**: Identify changed commands/agents from git commits
|
||||
2. **Extract**: Gather change information and impact assessment
|
||||
3. **Update**: Sync reference docs, guides, and examples
|
||||
4. **Regenerate**: Run `scripts/analyze_commands.py` to rebuild indexes
|
||||
5. **Validate**: Test examples and verify consistency
|
||||
6. **Commit**: Follow standardized commit message format
|
||||
|
||||
**Key Capabilities**:
|
||||
- 6 operation modes (Search, Recommendations, Full Docs, Onboarding, Issue Reporting, Deep Analysis)
|
||||
- 80 reference documentation files (11 agents + 69 commands)
|
||||
- 5 JSON indexes for fast command lookup
|
||||
- 8 comprehensive guides covering all workflow patterns
|
||||
- 4 issue templates for standardized problem reporting
|
||||
- CLI-assisted complex query analysis with gemini/qwen integration
|
||||
|
||||
**Maintainer**: Claude DMS3 Team
|
||||
|
||||
**Changelog v1.3.1**:
|
||||
- ✅ Updated all paths to use absolute paths (`~/.claude/skills/command-guide/`)
|
||||
- ✅ CLI commands now use `--include-directories` with absolute reference path
|
||||
- ✅ Ensures skill works correctly when installed in `~/.claude/skills/`
|
||||
|
||||
**Changelog v1.3.0**:
|
||||
- ✅ Added Mode 6: Deep Command Analysis with CLI-assisted queries
|
||||
- ✅ Created reference documentation backup (80 files: 11 agents + 69 commands)
|
||||
- ✅ Support simple queries (direct file lookup) and complex queries (CLI analysis)
|
||||
- ✅ Integrated gemini/qwen for cross-command analysis and best practices
|
||||
|
||||
**Changelog v1.2.0**:
|
||||
- ✅ Added Interactive Diagnosis template with decision tree
|
||||
- ✅ Enhanced all templates with complete command history sections
|
||||
- ✅ Added privacy protection guidelines for sensitive information
|
||||
- ✅ Integrated execution flow emphasis across all issue templates
|
||||
|
||||
592
.claude/skills/command-guide/UPDATE-GUIDELINE.md
Normal file
592
.claude/skills/command-guide/UPDATE-GUIDELINE.md
Normal file
@@ -0,0 +1,592 @@
|
||||
# Command Guide Update Guideline
|
||||
|
||||
## 📋 Purpose
|
||||
|
||||
This document defines a **standardized, repeatable process** for updating command-guide documentation when command changes are detected. Use this guideline every time you need to update command-guide SKILL documentation to ensure consistency and completeness.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Update Trigger Conditions
|
||||
|
||||
Execute this update process when ANY of the following conditions are met:
|
||||
|
||||
1. **New commands added** to `.claude/commands/`
|
||||
2. **Command parameters changed** (new flags, modified behavior)
|
||||
3. **Command architecture refactored** (workflow reorganization)
|
||||
4. **Agent implementations updated** in `.claude/agents/`
|
||||
5. **User explicitly requests** command-guide update
|
||||
|
||||
---
|
||||
|
||||
## 📊 Phase 1: Analysis & Discovery
|
||||
|
||||
### Step 1.1: Identify Changed Files
|
||||
|
||||
**Objective**: Discover what has changed since last update
|
||||
|
||||
**Actions**:
|
||||
```bash
|
||||
# Find recent commits affecting commands/agents
|
||||
git log --oneline --since="<last-update-date>" --grep="command\|agent\|workflow" -20
|
||||
|
||||
# Show detailed changes
|
||||
git diff <last-commit>..<current-commit> --stat .claude/commands/ .claude/agents/
|
||||
|
||||
# Identify modified command files
|
||||
git diff <last-commit>..<current-commit> --name-only .claude/commands/
|
||||
```
|
||||
|
||||
**Output**: List of changed files and commit messages
|
||||
|
||||
**Document**:
|
||||
- Changed command files
|
||||
- Changed agent files
|
||||
- Key commit messages
|
||||
- Change patterns (new features, refactoring, fixes)
|
||||
|
||||
---
|
||||
|
||||
### Step 1.2: Analyze Change Scope
|
||||
|
||||
**Objective**: Understand the nature and impact of changes
|
||||
|
||||
**Questions to Answer**:
|
||||
1. **What changed?** (parameters, workflow, architecture, behavior)
|
||||
2. **Why changed?** (new feature, optimization, bug fix, refactoring)
|
||||
3. **Impact scope?** (single command, workflow pattern, system-wide)
|
||||
4. **User-facing?** (affects user commands, internal only)
|
||||
|
||||
**Analysis Matrix**:
|
||||
|
||||
| Change Type | Detection Method | Impact Level |
|
||||
|-------------|--------------------|--------------|
|
||||
| **New Parameter** | Diff `argument-hint` field | Medium |
|
||||
| **Workflow Reorganization** | Multiple command changes | High |
|
||||
| **Architecture Change** | Agent file changes + command changes | High |
|
||||
| **Bug Fix** | Single file, small change | Low |
|
||||
| **New Command** | New file in `.claude/commands/` | Medium-High |
|
||||
|
||||
**Output**: Change classification and impact assessment
|
||||
|
||||
---
|
||||
|
||||
### Step 1.3: Map Affected Documentation
|
||||
|
||||
**Objective**: Identify which documentation files need updates
|
||||
|
||||
**Mapping Rules**:
|
||||
|
||||
**Command Changes** → Affects:
|
||||
- `reference/commands/<category>/<command-name>.md` (copy from source)
|
||||
- `index/all-commands.json` (regenerate)
|
||||
- `index/by-category.json` (if new category)
|
||||
- `guides/ui-design-workflow-guide.md` (if UI workflow affected)
|
||||
- `guides/workflow-patterns.md` (if workflow pattern changed)
|
||||
|
||||
**Agent Changes** → Affects:
|
||||
- `reference/agents/<agent-name>.md` (copy from source)
|
||||
- `guides/implementation-details.md` (if agent behavior changed)
|
||||
|
||||
**Workflow Reorganization** → Affects:
|
||||
- All related command references
|
||||
- Workflow guides
|
||||
- Examples in guides
|
||||
|
||||
**Output**: Checklist of files to update
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Phase 2: Content Preparation
|
||||
|
||||
### Step 2.1: Extract Key Information
|
||||
|
||||
**Objective**: Gather information needed for documentation updates
|
||||
|
||||
**Extract from Git Commits**:
|
||||
```bash
|
||||
# Get commit details
|
||||
git show <commit-hash> --stat
|
||||
|
||||
# Extract commit message
|
||||
git log --format=%B -n 1 <commit-hash>
|
||||
```
|
||||
|
||||
**Information to Extract**:
|
||||
1. **Feature Name** (from commit message)
|
||||
2. **Change Description** (what was added/modified/removed)
|
||||
3. **Rationale** (why the change was made)
|
||||
4. **New Parameters** (from diff)
|
||||
5. **Breaking Changes** (backward compatibility impact)
|
||||
6. **Usage Examples** (from commit or command file)
|
||||
|
||||
**Output**: Structured data for documentation
|
||||
|
||||
---
|
||||
|
||||
### Step 2.2: Categorize Changes
|
||||
|
||||
**Objective**: Organize changes into logical categories
|
||||
|
||||
**Categories**:
|
||||
|
||||
1. **Major Features**
|
||||
- New commands
|
||||
- New workflows
|
||||
- Architecture changes
|
||||
- User-facing feature additions
|
||||
|
||||
2. **Enhancements**
|
||||
- New parameters
|
||||
- Improved behavior
|
||||
- Performance optimizations
|
||||
- Better error handling
|
||||
|
||||
3. **Refactoring**
|
||||
- Code reorganization (no user impact)
|
||||
- Internal structure changes
|
||||
- Consistency improvements
|
||||
|
||||
4. **Bug Fixes**
|
||||
- Corrected behavior
|
||||
- Fixed edge cases
|
||||
- Parameter validation fixes
|
||||
|
||||
5. **Documentation**
|
||||
- Updated descriptions
|
||||
- New examples
|
||||
- Clarified usage
|
||||
|
||||
**Output**: Changes grouped by category with priority
|
||||
|
||||
---
|
||||
|
||||
### Step 2.3: Analyze User Impact
|
||||
|
||||
**Objective**: Determine what users need to know
|
||||
|
||||
**User Impact Questions**:
|
||||
1. **Do existing workflows break?** → Migration guide needed
|
||||
2. **Are new features optional?** → Enhancement documentation
|
||||
3. **Is behavior significantly different?** → Usage pattern updates
|
||||
4. **Do examples need updates?** → Example refresh required
|
||||
|
||||
**Impact Levels**:
|
||||
- **Critical** (Breaking changes, migration required)
|
||||
- **Important** (New features users should adopt)
|
||||
- **Nice-to-have** (Enhancements, optional)
|
||||
- **Internal** (No user action needed)
|
||||
|
||||
**Output**: User-facing change summary with impact levels
|
||||
|
||||
---
|
||||
|
||||
## 📝 Phase 3: Documentation Updates
|
||||
|
||||
### Step 3.1: Update Reference Documentation
|
||||
|
||||
**Objective**: Sync reference docs with source command files
|
||||
|
||||
**Actions**:
|
||||
|
||||
1. **Run Python Script to Sync & Rebuild**:
|
||||
```bash
|
||||
cd /d/Claude_dms3/.claude/skills/command-guide
|
||||
python scripts/analyze_commands.py
|
||||
```
|
||||
|
||||
This script automatically:
|
||||
- Deletes existing `reference/` directory
|
||||
- Copies all agent files from `.claude/agents/` to `reference/agents/`
|
||||
- Copies all command files from `.claude/commands/` to `reference/commands/`
|
||||
- Regenerates all 5 index files with updated metadata
|
||||
|
||||
2. **Verify Completeness**:
|
||||
- Check sync output for file counts (11 agents + 70 commands)
|
||||
- Verify all 5 index files regenerated successfully
|
||||
- Ensure YAML frontmatter integrity in copied files
|
||||
|
||||
**Output**: Updated reference documentation matching source + regenerated indexes
|
||||
|
||||
---
|
||||
|
||||
### Step 3.2: Update Workflow Guides
|
||||
|
||||
**Objective**: Reflect changes in user-facing workflow guides
|
||||
|
||||
**Workflow Guide Update Pattern**:
|
||||
|
||||
**IF** (UI workflow commands changed):
|
||||
1. Open `guides/ui-design-workflow-guide.md`
|
||||
2. Locate affected workflow pattern sections
|
||||
3. Update examples to use new parameters/behavior
|
||||
4. Add "New!" badges for new features
|
||||
5. Update performance metrics if applicable
|
||||
6. Add troubleshooting entries for new issues
|
||||
|
||||
**IF** (General workflow patterns changed):
|
||||
1. Open `guides/workflow-patterns.md`
|
||||
2. Update affected workflow examples
|
||||
3. Add new pattern sections if applicable
|
||||
|
||||
**Update Template for New Features**:
|
||||
```markdown
|
||||
### [Feature Name] (New!)
|
||||
|
||||
**Purpose**: [What this feature enables]
|
||||
|
||||
**Usage**:
|
||||
```bash
|
||||
[Example command with new feature]
|
||||
```
|
||||
|
||||
**Benefits**:
|
||||
- [Benefit 1]
|
||||
- [Benefit 2]
|
||||
|
||||
**When to Use**:
|
||||
- [Use case 1]
|
||||
- [Use case 2]
|
||||
```
|
||||
|
||||
**Output**: Updated workflow guides with new features documented
|
||||
|
||||
---
|
||||
|
||||
### Step 3.3: Update Examples and Best Practices
|
||||
|
||||
**Objective**: Ensure examples reflect current best practices
|
||||
|
||||
**Example Update Checklist**:
|
||||
- [ ] Remove deprecated parameter usage
|
||||
- [ ] Add examples for new parameters
|
||||
- [ ] Update command syntax if changed
|
||||
- [ ] Verify all examples are runnable
|
||||
- [ ] Add "Note" sections for common pitfalls
|
||||
|
||||
**Best Practices Update**:
|
||||
- [ ] Add recommendations for new features
|
||||
- [ ] Update "When to Use" guidelines
|
||||
- [ ] Revise performance optimization tips
|
||||
- [ ] Update troubleshooting entries
|
||||
|
||||
**Output**: Current, runnable examples
|
||||
|
||||
---
|
||||
|
||||
### Step 3.4: Update SKILL.md Metadata
|
||||
|
||||
**Objective**: Keep SKILL.md current without version-specific details
|
||||
|
||||
**Update Sections**:
|
||||
|
||||
1. **Supporting Guides** (if new guide added):
|
||||
```markdown
|
||||
- **[New Guide Name](guides/new-guide.md)** - Description
|
||||
```
|
||||
|
||||
2. **System Statistics** (if counts changed):
|
||||
```markdown
|
||||
- **Total Commands**: <new-count>
|
||||
- **Total Agents**: <new-count>
|
||||
```
|
||||
|
||||
3. **Remove Old Changelog Entries**:
|
||||
- Keep only last 3 changelog entries
|
||||
- Archive older entries to separate file if needed
|
||||
|
||||
**DO NOT**:
|
||||
- Add version numbers
|
||||
- Add specific dates
|
||||
- Create time-based changelog entries
|
||||
|
||||
**Output**: Updated SKILL.md metadata
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Phase 4: Validation
|
||||
|
||||
### Step 4.1: Consistency Check
|
||||
|
||||
**Objective**: Ensure documentation is internally consistent
|
||||
|
||||
**Checklist**:
|
||||
- [ ] All command references use correct names
|
||||
- [ ] Parameter descriptions match command files
|
||||
- [ ] Examples use valid parameter combinations
|
||||
- [ ] Links between documents are not broken
|
||||
- [ ] Index files reflect current command count
|
||||
|
||||
**Validation Commands**:
|
||||
```bash
|
||||
# Check for broken internal links
|
||||
grep -r "\[.*\](.*\.md)" guides/ reference/ | grep -v "http"
|
||||
|
||||
# Verify command count consistency
|
||||
actual=$(find ../../commands -name "*.md" | wc -l)
|
||||
indexed=$(jq '.commands | length' index/all-commands.json)
|
||||
echo "Actual: $actual, Indexed: $indexed"
|
||||
```
|
||||
|
||||
**Output**: Validation report
|
||||
|
||||
---
|
||||
|
||||
### Step 4.2: Example Testing
|
||||
|
||||
**Objective**: Verify all examples are runnable
|
||||
|
||||
**Test Cases**:
|
||||
- [ ] Copy example commands from guides
|
||||
- [ ] Run in test environment
|
||||
- [ ] Verify expected output
|
||||
- [ ] Document any prerequisites
|
||||
|
||||
**Note**: Some examples may be illustrative only; mark these clearly
|
||||
|
||||
**Output**: Tested examples
|
||||
|
||||
---
|
||||
|
||||
### Step 4.3: Peer Review Checklist
|
||||
|
||||
**Objective**: Prepare documentation for review
|
||||
|
||||
**Review Points**:
|
||||
- [ ] Is the change clearly explained?
|
||||
- [ ] Are examples helpful and clear?
|
||||
- [ ] Is migration guidance complete (if breaking)?
|
||||
- [ ] Are troubleshooting tips adequate?
|
||||
- [ ] Is the documentation easy to scan?
|
||||
|
||||
**Output**: Review-ready documentation
|
||||
|
||||
---
|
||||
|
||||
## 📤 Phase 5: Commit & Distribution
|
||||
|
||||
### Step 5.1: Git Commit Structure
|
||||
|
||||
**Objective**: Create clear, traceable commits
|
||||
|
||||
**Commit Pattern**:
|
||||
```bash
|
||||
git add .claude/skills/command-guide/
|
||||
|
||||
# Commit message format
|
||||
git commit -m "docs(command-guide): update for <feature-name> changes
|
||||
|
||||
- Update reference docs for <changed-commands>
|
||||
- Enhance <guide-name> with <feature> documentation
|
||||
- Regenerate indexes (new count: <count>)
|
||||
- Add troubleshooting for <new-issues>
|
||||
|
||||
Refs: <commit-hashes-of-source-changes>
|
||||
"
|
||||
```
|
||||
|
||||
**Commit Message Rules**:
|
||||
- **Type**: `docs(command-guide)`
|
||||
- **Scope**: Always `command-guide`
|
||||
- **Summary**: Concise, imperative mood
|
||||
- **Body**: Bullet points for each change type
|
||||
- **Refs**: Link to source change commits
|
||||
|
||||
**Output**: Clean commit history
|
||||
|
||||
---
|
||||
|
||||
### Step 5.2: Update Distribution
|
||||
|
||||
**Objective**: Make updates available to users
|
||||
|
||||
**Actions**:
|
||||
```bash
|
||||
# Push to remote
|
||||
git push origin main
|
||||
|
||||
# Verify GitHub reflects changes
|
||||
# Check: https://github.com/<org>/<repo>/tree/main/.claude/skills/command-guide
|
||||
```
|
||||
|
||||
**User Notification** (if breaking changes):
|
||||
- Update project README
|
||||
- Add note to main documentation
|
||||
- Consider announcement in team channels
|
||||
|
||||
**Output**: Published updates
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Phase 6: Iteration & Improvement
|
||||
|
||||
### Step 6.1: Gather Feedback
|
||||
|
||||
**Objective**: Improve documentation based on usage
|
||||
|
||||
**Feedback Sources**:
|
||||
- User questions about changed commands
|
||||
- Confusion points in examples
|
||||
- Missing information requests
|
||||
- Error reports
|
||||
|
||||
**Track**:
|
||||
- Common questions → Add to troubleshooting
|
||||
- Confusing examples → Simplify or expand
|
||||
- Missing use cases → Add to guides
|
||||
|
||||
**Output**: Improvement backlog
|
||||
|
||||
---
|
||||
|
||||
### Step 6.2: Continuous Refinement
|
||||
|
||||
**Objective**: Keep documentation evolving
|
||||
|
||||
**Regular Tasks**:
|
||||
- [ ] Review index statistics monthly
|
||||
- [ ] Update examples with real-world usage
|
||||
- [ ] Consolidate redundant sections
|
||||
- [ ] Expand troubleshooting based on issues
|
||||
- [ ] Refresh screenshots/outputs if UI changed
|
||||
|
||||
**Output**: Living documentation
|
||||
|
||||
---
|
||||
|
||||
## 📐 Update Decision Matrix
|
||||
|
||||
Use this matrix to determine update depth:
|
||||
|
||||
| Change Scope | Reference Docs | Workflow Guides | Examples | Indexes | Migration Guide |
|
||||
|--------------|----------------|-----------------|----------|---------|-----------------|
|
||||
| **New Parameter** | Update command file | Add parameter note | Add usage example | Regenerate | No |
|
||||
| **Workflow Refactor** | Update all affected | Major revision | Update all examples | Regenerate | If breaking |
|
||||
| **New Command** | Copy new file | Add workflow pattern | Add examples | Regenerate | No |
|
||||
| **Architecture Change** | Update all affected | Major revision | Comprehensive update | Regenerate | Yes |
|
||||
| **Bug Fix** | Update description | Add note if user-visible | Fix incorrect examples | No change | No |
|
||||
| **New Feature** | Update affected files | Add feature section | Add feature examples | Regenerate | No |
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Quality Gates
|
||||
|
||||
Before considering documentation update complete, verify:
|
||||
|
||||
### Gate 1: Completeness
|
||||
- [ ] All changed commands have updated reference docs
|
||||
- [ ] All new features are documented in guides
|
||||
- [ ] All examples are current and correct
|
||||
- [ ] Indexes reflect current state
|
||||
|
||||
### Gate 2: Clarity
|
||||
- [ ] Non-expert can understand changes
|
||||
- [ ] Examples demonstrate key use cases
|
||||
- [ ] Migration path is clear (if breaking)
|
||||
- [ ] Troubleshooting covers common issues
|
||||
|
||||
### Gate 3: Consistency
|
||||
- [ ] Terminology is consistent across docs
|
||||
- [ ] Parameter descriptions match everywhere
|
||||
- [ ] Cross-references are accurate
|
||||
- [ ] Formatting follows established patterns
|
||||
|
||||
### Gate 4: Accessibility
|
||||
- [ ] Table of contents is current
|
||||
- [ ] Search/navigation works
|
||||
- [ ] Related docs are linked
|
||||
- [ ] Issue templates reference new content
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Start Template
|
||||
|
||||
When updates are needed, follow this abbreviated workflow:
|
||||
|
||||
```bash
|
||||
# 1. ANALYZE (5 min)
|
||||
git log --oneline --since="<last-update>" --grep="command\|agent" -20
|
||||
# → Identify what changed
|
||||
|
||||
# 2. EXTRACT (10 min)
|
||||
git show <commit-hash> --stat
|
||||
git diff <commit>..HEAD --stat .claude/commands/
|
||||
# → Understand changes
|
||||
|
||||
# 3. UPDATE (30 min)
|
||||
# - Update affected guide sections (ui-design-workflow-guide.md, etc.)
|
||||
# - Add examples for new features
|
||||
# - Document parameter changes
|
||||
|
||||
# 4. SYNC & REGENERATE (2 min)
|
||||
cd /d/Claude_dms3/.claude/skills/command-guide
|
||||
python scripts/analyze_commands.py
|
||||
# → Syncs reference docs + regenerates all 5 indexes
|
||||
|
||||
# 5. VALIDATE (10 min)
|
||||
# - Test examples
|
||||
# - Check consistency
|
||||
# - Verify links
|
||||
|
||||
# 6. COMMIT (5 min)
|
||||
git add .claude/skills/command-guide/
|
||||
git commit -m "docs(command-guide): update for <feature> changes"
|
||||
git push origin main
|
||||
```
|
||||
|
||||
**Total Time**: ~1 hour for typical update
|
||||
|
||||
---
|
||||
|
||||
## 🔗 Related Resources
|
||||
|
||||
- **Python Index Script**: `.claude/skills/command-guide/scripts/analyze_commands.py`
|
||||
- **Issue Templates**: `.claude/skills/command-guide/templates/`
|
||||
- **SKILL Entry Point**: `.claude/skills/command-guide/SKILL.md`
|
||||
- **Reference Source**: `.claude/commands/` and `.claude/agents/`
|
||||
|
||||
---
|
||||
|
||||
## 📌 Appendix: Common Patterns
|
||||
|
||||
### Pattern 1: New Parameter Addition
|
||||
|
||||
**Example**: `--interactive` flag added to `explore-auto`
|
||||
|
||||
**Update Sequence**:
|
||||
1. Update `guides/ui-design-workflow-guide.md` with interactive examples
|
||||
2. Add "When to Use" guidance
|
||||
3. Run Python script to sync reference docs and regenerate indexes
|
||||
4. Update argument-hint in examples
|
||||
|
||||
---
|
||||
|
||||
### Pattern 2: Workflow Reorganization
|
||||
|
||||
**Example**: Layout extraction split into concept generation + selection
|
||||
|
||||
**Update Sequence**:
|
||||
1. Major revision of workflow guide section
|
||||
2. Update all workflow examples
|
||||
3. Add migration notes for existing users
|
||||
4. Update troubleshooting
|
||||
5. Run Python script to sync and regenerate indexes
|
||||
|
||||
---
|
||||
|
||||
### Pattern 3: Architecture Change
|
||||
|
||||
**Example**: Agent execution model changed
|
||||
|
||||
**Update Sequence**:
|
||||
1. Update `guides/implementation-details.md`
|
||||
2. Revise all workflow patterns using affected agents
|
||||
3. Create migration guide
|
||||
4. Update examples comprehensively
|
||||
5. Run Python script to sync and regenerate indexes
|
||||
6. Add extensive troubleshooting
|
||||
|
||||
---
|
||||
|
||||
**End of Update Guideline**
|
||||
|
||||
This guideline is a living document. Improve it based on update experience.
|
||||
@@ -12,7 +12,6 @@ These commands automate end-to-end processes by chaining specialized sub-command
|
||||
|
||||
- **`/workflow:ui-design:explore-auto`**: For creating *new* designs. Generates multiple style and layout variants from a prompt to explore design directions.
|
||||
- **`/workflow:ui-design:imitate-auto`**: For *replicating* existing designs. High-fidelity cloning of target URLs into a reusable design system.
|
||||
- **`/workflow:ui-design:batch-generate`**: For rapid, high-volume prototype generation based on established design tokens.
|
||||
|
||||
### 2. Core Extractors (Specialized Analysis)
|
||||
|
||||
@@ -55,7 +54,7 @@ Tools for combining components and integrating results.
|
||||
4. **Assembly**: System generates a matrix of prototypes (3 styles × 1 layout = 3 prototypes).
|
||||
5. **Review**: User views `compare.html` to select the best direction.
|
||||
|
||||
**Example:**
|
||||
**Example (Non-Interactive - Default):**
|
||||
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto \
|
||||
@@ -71,6 +70,30 @@ Tools for combining components and integrating results.
|
||||
- 6 HTML prototypes (3 × 2 combinations)
|
||||
- `compare.html` for side-by-side comparison
|
||||
|
||||
**Example (Interactive Mode):**
|
||||
|
||||
```bash
|
||||
/workflow:ui-design:explore-auto \
|
||||
--prompt "Modern SaaS landing page with hero, features, pricing sections" \
|
||||
--style-variants 5 \
|
||||
--layout-variants 4 \
|
||||
--interactive \
|
||||
--session WFS-001
|
||||
```
|
||||
|
||||
**Interactive Flow:**
|
||||
1. System generates 5 style concepts
|
||||
2. **User selects** 2-3 preferred styles (multi-select)
|
||||
3. System generates 4 layout concepts
|
||||
4. **User selects** 2 preferred layouts (multi-select)
|
||||
5. System generates only 4-6 final prototypes (selected combinations)
|
||||
|
||||
**Benefits:**
|
||||
- Reduces unnecessary generation (from 20 to 4-6 prototypes)
|
||||
- Focuses resources on preferred design directions
|
||||
- Saves 70-80% computation time
|
||||
- Better exploration quality
|
||||
|
||||
---
|
||||
|
||||
### Workflow B: Design Replication (Imitation)
|
||||
@@ -132,36 +155,6 @@ Tools for combining components and integrating results.
|
||||
|
||||
---
|
||||
|
||||
### Workflow D: Batch Generation (High Volume)
|
||||
|
||||
**Goal:** Generate multiple UI prototypes based on established design tokens.
|
||||
|
||||
**Primary Command:** `batch-generate`
|
||||
|
||||
**Steps:**
|
||||
|
||||
1. **Prerequisites**: Have `design-tokens.json` ready (from previous extraction or manual creation)
|
||||
2. **Initiate**: User runs `/workflow:ui-design:batch-generate --targets "dashboard,settings,profile" --style-variants 2`
|
||||
3. **Parallel Generation**: System generates all targets in parallel, applying style variants
|
||||
4. **Review**: User reviews generated prototypes
|
||||
|
||||
**Example:**
|
||||
|
||||
```bash
|
||||
/workflow:ui-design:batch-generate \
|
||||
--targets "login-page,dashboard,settings,profile,notifications" \
|
||||
--target-type page \
|
||||
--style-variants 2 \
|
||||
--device-type responsive \
|
||||
--session WFS-004
|
||||
```
|
||||
|
||||
**Output:**
|
||||
- 10 HTML prototypes (5 targets × 2 styles)
|
||||
- All using the same design system for consistency
|
||||
|
||||
---
|
||||
|
||||
## Architecture & Best Practices
|
||||
|
||||
### Separation of Concerns
|
||||
@@ -201,7 +194,7 @@ Generated CSS should primarily use CSS custom properties:
|
||||
|
||||
For high-volume generation:
|
||||
- Group tasks by style to minimize context switching
|
||||
- Use `batch-generate` with multiple targets
|
||||
- Use parallel generation with multiple targets
|
||||
- Reuse existing layout inspirations
|
||||
|
||||
### Input Quality Guidelines
|
||||
@@ -237,14 +230,15 @@ You can run UI design workflows within an existing workflow session:
|
||||
|
||||
### Combining Workflows
|
||||
|
||||
**Example: Imitation + Custom Variants**
|
||||
**Example: Imitation + Custom Extraction**
|
||||
|
||||
```bash
|
||||
# 1. Replicate existing design
|
||||
/workflow:ui-design:imitate-auto --url-map "ref:https://example.com"
|
||||
|
||||
# 2. Generate additional variants with batch-generate
|
||||
/workflow:ui-design:batch-generate --targets "new-page-1,new-page-2" --style-variants 1
|
||||
# 2. Extract additional layouts and generate prototypes
|
||||
/workflow:ui-design:layout-extract --targets "new-page-1,new-page-2"
|
||||
/workflow:ui-design:generate
|
||||
```
|
||||
|
||||
### Deep Interactive Capture
|
||||
@@ -279,7 +273,6 @@ For complex UIs with overlays, modals, or dynamic content:
|
||||
### Orchestrators
|
||||
- `/workflow:ui-design:explore-auto` - Create new designs from prompts
|
||||
- `/workflow:ui-design:imitate-auto` - Replicate existing designs
|
||||
- `/workflow:ui-design:batch-generate` - High-volume prototype generation
|
||||
|
||||
### Extractors
|
||||
- `/workflow:ui-design:style-extract` - Extract visual design tokens
|
||||
@@ -306,7 +299,7 @@ The system is designed to run extraction phases in parallel:
|
||||
|
||||
### Reuse Intermediates
|
||||
|
||||
- `batch-generate` reuses existing layout inspirations
|
||||
- Generation commands reuse existing layout inspirations
|
||||
- Cached screenshots avoid redundant captures
|
||||
- Token files can be versioned and reused
|
||||
|
||||
|
||||
@@ -14,6 +14,173 @@
|
||||
|
||||
---
|
||||
|
||||
## 💡 Pattern 0: 头脑风暴(从0到1的第一步)
|
||||
|
||||
**⚠️ 重要**:这是**从0到1开发的起点**!在开始编码之前,通过多角色头脑风暴明确需求、技术选型和架构决策。
|
||||
|
||||
**适用场景**:
|
||||
- 全新项目启动,需求和技术方案不明确
|
||||
- 重大功能开发,涉及多个技术领域和权衡
|
||||
- 架构决策,需要多角色视角分析
|
||||
|
||||
**流程**:话题分析 → 角色选择 → 角色问答 → 冲突解决 → 生成指导文档
|
||||
|
||||
### 模式 A:交互式头脑风暴(推荐)
|
||||
|
||||
**特点**:通过问答交互,逐步明确需求和决策
|
||||
|
||||
```bash
|
||||
# 步骤 1:启动头脑风暴
|
||||
/workflow:brainstorm:artifacts "
|
||||
GOAL: 实现实时协作编辑平台
|
||||
SCOPE: 支持100+用户同时在线,低延迟(<100ms),冲突自动解决
|
||||
CONTEXT: MVP阶段,3个月上线,团队5人(2前端+2后端+1全栈)
|
||||
" --count 3
|
||||
|
||||
# 系统输出 Phase 0:自动收集项目上下文
|
||||
# ✅ 分析现有代码库结构
|
||||
# ✅ 加载相关文档
|
||||
# ✅ 识别技术栈和依赖
|
||||
|
||||
# 系统输出 Phase 1:意图分析(2-4个问题)
|
||||
# 【问题1 - 核心挑战】实时协作的主要技术挑战?
|
||||
# a) 实时数据同步
|
||||
# b) 可扩展性架构
|
||||
# c) 冲突解决机制
|
||||
# 【问题2 - 优先级】MVP阶段最关注?
|
||||
# a) 功能完整性
|
||||
# b) 用户体验
|
||||
# c) 系统稳定性
|
||||
# 请回答 (格式: 1a 2c):
|
||||
|
||||
# 用户输入:1c 2b
|
||||
|
||||
# 系统输出 Phase 2:角色选择(推荐 count+2 个角色)
|
||||
# 【角色选择】请选择 3 个角色参与头脑风暴
|
||||
# a) system-architect (系统架构师) - 实时同步架构设计
|
||||
# b) ui-designer (UI设计师) - 协作界面用户体验
|
||||
# c) product-manager (产品经理) - 功能优先级决策
|
||||
# d) data-architect (数据架构师) - 数据同步模型设计
|
||||
# e) ux-expert (UX专家) - 多用户协作交互流程
|
||||
# 请输入选择 (格式: 2acd 或 2a 2c 2d):
|
||||
|
||||
# 用户输入:2acd
|
||||
|
||||
# 系统输出 Phase 3:角色问题(每个角色 3-4 个问题)
|
||||
# ===== system-architect 问题 =====
|
||||
# 【问题1】100+ 用户实时状态同步方案?
|
||||
# a) Event Sourcing - 完整事件历史,易于回溯
|
||||
# b) 集中式状态管理 - 简单直接,适合MVP
|
||||
# c) CRDT - 自动冲突解决,分布式友好
|
||||
# 【问题2】低延迟通信协议选择?
|
||||
# ...
|
||||
# 请回答:
|
||||
|
||||
# 用户输入:1c 2a 3b 4c
|
||||
|
||||
# 系统输出 Phase 4:冲突检测和解决
|
||||
# 【冲突1】CRDT 与 UI 回滚期望冲突
|
||||
# Background: system-architect 选择 CRDT,但 ui-designer 期望回滚UI
|
||||
# a) 采用 CRDT,显示合并状态
|
||||
# b) 切换到 OT 算法支持回滚
|
||||
# c) 混合方案:CRDT + 本地撤销栈
|
||||
# ...
|
||||
|
||||
# 系统输出 Phase 5:生成指导文档
|
||||
# ✅ 生成 guidance-specification.md
|
||||
# ✅ 记录所有决策和理由
|
||||
# ✅ 标注冲突解决方案
|
||||
# 📁 文件位置:.workflow/WFS-realtime-collab/.brainstorming/guidance-specification.md
|
||||
|
||||
# 步骤 2:查看生成的指导文档
|
||||
cat .workflow/WFS-*//.brainstorming/guidance-specification.md
|
||||
```
|
||||
|
||||
### 模式 B:自动并行头脑风暴(快速)
|
||||
|
||||
**特点**:自动选择角色,并行执行,快速生成多角色分析
|
||||
|
||||
```bash
|
||||
# 步骤 1:一键启动并行头脑风暴
|
||||
/workflow:brainstorm:auto-parallel "
|
||||
GOAL: 实现支付处理模块
|
||||
SCOPE: 支持微信/支付宝/银行卡,日交易10万笔,99.99%可用性
|
||||
CONTEXT: 金融合规要求,PCI DSS认证,风控系统集成
|
||||
" --count 4
|
||||
|
||||
# 系统输出:
|
||||
# ✅ Phase 0: 收集项目上下文
|
||||
# ✅ Phase 1-2: artifacts 交互式框架生成
|
||||
# ⏳ Phase 3: 4个角色并行分析
|
||||
# - system-architect → 分析中...
|
||||
# - data-architect → 分析中...
|
||||
# - product-manager → 分析中...
|
||||
# - subject-matter-expert → 分析中...
|
||||
# ✅ Phase 4: synthesis 综合分析
|
||||
# 📁 输出文件:
|
||||
# - .brainstorming/guidance-specification.md (框架)
|
||||
# - system-architect/analysis.md
|
||||
# - data-architect/analysis.md
|
||||
# - product-manager/analysis.md
|
||||
# - subject-matter-expert/analysis.md
|
||||
# - synthesis/final-recommendations.md
|
||||
|
||||
# 步骤 2:查看综合建议
|
||||
cat .workflow/WFS-*//.brainstorming/synthesis/final-recommendations.md
|
||||
```
|
||||
|
||||
### 模式 C:单角色深度分析(特定领域)
|
||||
|
||||
**特点**:针对特定领域问题,调用单个角色深度分析
|
||||
|
||||
```bash
|
||||
# 系统架构分析
|
||||
/workflow:brainstorm:system-architect "API 网关架构设计,支持10万QPS,微服务集成"
|
||||
|
||||
# UI 设计分析
|
||||
/workflow:brainstorm:ui-designer "管理后台界面设计,复杂数据展示,操作效率优先"
|
||||
|
||||
# 数据架构分析
|
||||
/workflow:brainstorm:data-architect "分布式数据存储方案,MySQL+Redis+ES 组合"
|
||||
```
|
||||
|
||||
### 关键点
|
||||
|
||||
1. **Phase 0 自动上下文收集**:
|
||||
- 自动分析现有代码库、文档、技术栈
|
||||
- 识别潜在冲突和集成点
|
||||
- 为后续问题生成提供上下文
|
||||
|
||||
2. **动态问题生成**:
|
||||
- 基于话题关键词和项目上下文生成问题
|
||||
- 不使用预定义模板
|
||||
- 问题直接针对你的具体场景
|
||||
|
||||
3. **智能角色推荐**:
|
||||
- 基于话题分析推荐最相关的角色
|
||||
- 推荐 count+2 个角色供选择
|
||||
- 每个角色都有基于话题的推荐理由
|
||||
|
||||
4. **输出物**:
|
||||
- `guidance-specification.md` - 确认的指导规范(决策、理由、集成点)
|
||||
- `{role}/analysis.md` - 各角色详细分析(仅 auto-parallel 模式)
|
||||
- `synthesis/final-recommendations.md` - 综合建议(仅 auto-parallel 模式)
|
||||
|
||||
5. **下一步**:
|
||||
- 头脑风暴完成后,使用 `/workflow:plan` 基于指导文档生成实施计划
|
||||
- 指导文档作为规划和实现的权威参考
|
||||
|
||||
### 使用场景对比
|
||||
|
||||
| 场景 | 推荐模式 | 原因 |
|
||||
|------|---------|------|
|
||||
| 全新项目启动 | 交互式 (artifacts) | 需要充分澄清需求和约束 |
|
||||
| 重大架构决策 | 交互式 (artifacts) | 需要深入讨论权衡 |
|
||||
| 快速原型验证 | 自动并行 (auto-parallel) | 快速获得多角色建议 |
|
||||
| 特定技术问题 | 单角色 (specific role) | 专注某个领域深度分析 |
|
||||
|
||||
---
|
||||
|
||||
## 📋 Pattern 1: 规划→执行(最常用)
|
||||
|
||||
**适用场景**:实现新功能、新模块
|
||||
@@ -389,29 +556,44 @@
|
||||
|
||||
## 📊 工作流选择指南
|
||||
|
||||
**核心区分**:从0到1 vs 功能新增
|
||||
- **从0到1**:全新项目、新产品、重大架构决策 → **必须头脑风暴**
|
||||
- **功能新增**:已有项目中添加功能 → **可直接规划**
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[我要做什么?] --> B{任务类型?}
|
||||
A[我要做什么?] --> B{项目阶段?}
|
||||
|
||||
B -->|新功能| C[规划→执行]
|
||||
B -->|需要测试| D{代码是否存在?}
|
||||
B -->|UI开发| E[UI设计工作流]
|
||||
B -->|代码优化| F[分析→重构]
|
||||
B -->|生成文档| G[文档生成]
|
||||
B -->|快速实现| H[Codex YOLO]
|
||||
B -->|从0到1<br/>全新项目/产品| Z[💡头脑风暴<br/>必经阶段]
|
||||
B -->|功能新增<br/>已有项目| C{任务类型?}
|
||||
|
||||
D -->|不存在| I[TDD工作流]
|
||||
D -->|已存在| J[测试生成]
|
||||
Z --> Z1[/workflow:brainstorm:artifacts<br/>或<br/>/workflow:brainstorm:auto-parallel]
|
||||
Z1 --> Z2[⬇️ 生成指导文档]
|
||||
Z2 --> C
|
||||
|
||||
C --> K[/workflow:plan<br/>↓<br/>/workflow:execute]
|
||||
I --> L[/workflow:tdd-plan<br/>↓<br/>/workflow:execute]
|
||||
J --> M[/workflow:test-gen<br/>↓<br/>/workflow:test-cycle-execute]
|
||||
E --> N[/workflow:ui-design:*]
|
||||
F --> O[/cli:analyze<br/>↓<br/>/cli:mode:plan<br/>↓<br/>/cli:execute]
|
||||
G --> P[/memory:docs]
|
||||
H --> Q[/cli:codex-execute]
|
||||
C -->|新功能| D[规划→执行]
|
||||
C -->|需要测试| E{代码是否存在?}
|
||||
C -->|UI开发| F[UI设计工作流]
|
||||
C -->|代码优化| G[分析→重构]
|
||||
C -->|生成文档| H[文档生成]
|
||||
C -->|快速实现| I[Codex YOLO]
|
||||
|
||||
E -->|不存在| J[TDD工作流]
|
||||
E -->|已存在| K[测试生成]
|
||||
|
||||
D --> L[/workflow:plan<br/>↓<br/>/workflow:execute]
|
||||
J --> M[/workflow:tdd-plan<br/>↓<br/>/workflow:execute]
|
||||
K --> N[/workflow:test-gen<br/>↓<br/>/workflow:test-cycle-execute]
|
||||
F --> O[/workflow:ui-design:*]
|
||||
G --> P[/cli:analyze<br/>↓<br/>/cli:mode:plan<br/>↓<br/>/cli:execute]
|
||||
H --> Q[/memory:docs]
|
||||
I --> R[/cli:codex-execute]
|
||||
```
|
||||
|
||||
**说明**:
|
||||
- **从0到1场景**:创业项目、新产品线、系统重构 → 头脑风暴明确方向后再规划
|
||||
- **功能新增场景**:现有系统添加模块、优化现有功能 → 直接进入规划或分析
|
||||
|
||||
---
|
||||
|
||||
## 💡 最佳实践
|
||||
@@ -447,79 +629,24 @@ graph TD
|
||||
|
||||
### ❌ 避免做法
|
||||
|
||||
1. **不要跳过规划直接执行复杂任务**
|
||||
1. **⚠️ 不要在从0到1场景跳过头脑风暴**
|
||||
- ❌ 全新项目直接 `/workflow:plan`
|
||||
- ✅ 先 `/workflow:brainstorm:artifacts` 明确方向再规划
|
||||
|
||||
2. **不要跳过规划直接执行复杂任务**
|
||||
- ❌ 直接 `/cli:execute` 实现复杂功能
|
||||
- ✅ 先 `/workflow:plan` 再 `/workflow:execute`
|
||||
|
||||
2. **不要忽略测试**
|
||||
3. **不要忽略测试**
|
||||
- ❌ 实现完成后不生成测试
|
||||
- ✅ 使用 `/workflow:test-gen` 生成测试
|
||||
|
||||
3. **不要遗忘文档**
|
||||
4. **不要遗忘文档**
|
||||
- ❌ 代码实现后忘记更新文档
|
||||
- ✅ 使用 `/memory:update-related` 自动更新
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Pattern 7: UI设计工作流
|
||||
|
||||
**适用场景**:前端UI设计和原型开发
|
||||
|
||||
**流程**:探索设计 / 模仿设计 / 代码导入 → 生成原型 → 集成
|
||||
|
||||
### 三种子模式
|
||||
|
||||
#### 7.1 探索式设计(新概念)
|
||||
|
||||
```bash
|
||||
# 从提示词创建多个设计方案
|
||||
/workflow:ui-design:explore-auto \
|
||||
--prompt "现代化SaaS着陆页,包含英雄区、特性、定价" \
|
||||
--style-variants 3 \
|
||||
--layout-variants 2
|
||||
|
||||
# 输出:
|
||||
# - 3个风格变体 × 2个布局变体 = 6个原型
|
||||
# - design-tokens-v1/v2/v3.json
|
||||
# - layout-templates-v1/v2.json
|
||||
# - compare.html(对比页面)
|
||||
```
|
||||
|
||||
#### 7.2 模仿式设计(复制现有网站)
|
||||
|
||||
```bash
|
||||
# 高保真克隆目标网站
|
||||
/workflow:ui-design:imitate-auto \
|
||||
--url-map "首页:https://example.com, 定价:https://example.com/pricing"
|
||||
|
||||
# 输出:
|
||||
# - 统一的设计系统(design-tokens.json)
|
||||
# - 页面结构(layout-templates.json)
|
||||
# - 重建的HTML原型
|
||||
```
|
||||
|
||||
#### 7.3 代码优先导入
|
||||
|
||||
```bash
|
||||
# 从现有代码库提取设计系统
|
||||
/workflow:ui-design:import-from-code \
|
||||
--base-path ./src/components
|
||||
|
||||
# 输出:
|
||||
# - 提取的设计令牌
|
||||
# - 完整性报告
|
||||
# - 改进建议
|
||||
```
|
||||
|
||||
**关键概念**:
|
||||
- **关注点分离**:样式(design-tokens)、结构(layout-templates)、动画(animation-tokens)独立
|
||||
- **令牌优先**:使用CSS变量而非硬编码
|
||||
- **可重用性**:设计系统可跨项目复用
|
||||
|
||||
**详细指南**:参见 [UI Design Workflow Guide](ui-design-workflow-guide.md)
|
||||
|
||||
---
|
||||
|
||||
## 🔗 相关资源
|
||||
|
||||
- **快速入门**:[Getting Started](getting-started.md) - 5分钟上手
|
||||
|
||||
@@ -409,8 +409,8 @@
|
||||
{
|
||||
"name": "plan",
|
||||
"command": "/workflow:plan",
|
||||
"description": "5-phase planning workflow with Gemini analysis and action-planning-agent task generation, outputs IMPL_PLAN.md and task JSONs with optional CLI auto-execution",
|
||||
"arguments": "[--agent] [--cli-execute] \\\"text description\\\"|file.md",
|
||||
"description": "5-phase planning workflow with action-planning-agent task generation, outputs IMPL_PLAN.md and task JSONs with optional CLI auto-execution",
|
||||
"arguments": "[--cli-execute] \\\"text description\\\"|file.md",
|
||||
"category": "workflow",
|
||||
"subcategory": null,
|
||||
"usage_scenario": "planning",
|
||||
@@ -498,7 +498,7 @@
|
||||
"name": "tdd-plan",
|
||||
"command": "/workflow:tdd-plan",
|
||||
"description": "TDD workflow planning with Red-Green-Refactor task chain generation, test-first development structure, and cycle tracking",
|
||||
"arguments": "[--agent] \\\"feature description\\\"|file.md",
|
||||
"arguments": "[--cli-execute] \\\"feature description\\\"|file.md",
|
||||
"category": "workflow",
|
||||
"subcategory": null,
|
||||
"usage_scenario": "planning",
|
||||
@@ -585,8 +585,8 @@
|
||||
{
|
||||
"name": "task-generate-tdd",
|
||||
"command": "/workflow:tools:task-generate-tdd",
|
||||
"description": "Generate TDD task chains with Red-Green-Refactor dependencies, test-first structure, and cycle validation",
|
||||
"arguments": "--session WFS-session-id [--agent]",
|
||||
"description": "Autonomous TDD task generation using action-planning-agent with Red-Green-Refactor cycles, test-first structure, and cycle validation",
|
||||
"arguments": "--session WFS-session-id [--cli-execute]",
|
||||
"category": "workflow",
|
||||
"subcategory": "tools",
|
||||
"usage_scenario": "implementation",
|
||||
@@ -640,7 +640,7 @@
|
||||
{
|
||||
"name": "test-task-generate",
|
||||
"command": "/workflow:tools:test-task-generate",
|
||||
"description": "Generate test-fix task JSON with iterative test-fix-retest cycle specification using Gemini/Qwen/Codex",
|
||||
"description": "Autonomous test-fix task generation using action-planning-agent with test-fix-retest cycle specification and discovery phase",
|
||||
"arguments": "[--use-codex] [--cli-execute] --session WFS-test-session-id",
|
||||
"category": "workflow",
|
||||
"subcategory": "tools",
|
||||
@@ -659,17 +659,6 @@
|
||||
"difficulty": "Intermediate",
|
||||
"file_path": "workflow/ui-design/animation-extract.md"
|
||||
},
|
||||
{
|
||||
"name": "batch-generate",
|
||||
"command": "/workflow:ui-design:batch-generate",
|
||||
"description": "Prompt-driven batch UI generation using target-style-centric parallel execution with design token application",
|
||||
"arguments": "[--targets \"<list>\"] [--target-type \"page|component\"] [--device-type \"desktop|mobile|tablet|responsive\"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "implementation",
|
||||
"difficulty": "Intermediate",
|
||||
"file_path": "workflow/ui-design/batch-generate.md"
|
||||
},
|
||||
{
|
||||
"name": "capture",
|
||||
"command": "/workflow:ui-design:capture",
|
||||
@@ -685,7 +674,7 @@
|
||||
"name": "explore-auto",
|
||||
"command": "/workflow:ui-design:explore-auto",
|
||||
"description": "Exploratory UI design workflow with style-centric batch generation, creates design variants from prompts/images with parallel execution",
|
||||
"arguments": "[--prompt \"<desc>\"] [--images \"<glob>\"] [--targets \"<list>\"] [--target-type \"page|component\"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--batch-plan]",
|
||||
"arguments": "[--prompt \"<desc>\"] [--images \"<glob>\"] [--targets \"<list>\"] [--target-type \"page|component\"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--interactive] [--batch-plan]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "general",
|
||||
@@ -707,7 +696,7 @@
|
||||
"name": "generate",
|
||||
"command": "/workflow:ui-design:generate",
|
||||
"description": "Assemble UI prototypes by combining layout templates with design tokens, pure assembler without new content generation",
|
||||
"arguments": "[--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]",
|
||||
"arguments": "[--base-path <path>] [--session <id>]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "implementation",
|
||||
@@ -729,7 +718,7 @@
|
||||
"name": "workflow:ui-design:import-from-code",
|
||||
"command": "/workflow:ui-design:import-from-code",
|
||||
"description": "Import design system from code files (CSS/JS/HTML/SCSS) using parallel agent analysis with final synthesis",
|
||||
"arguments": "[--base-path <path>] [--css \\\"<glob>\\\"] [--js \\\"<glob>\\\"] [--scss \\\"<glob>\\\"] [--html \\\"<glob>\\\"] [--style-files \\\"<glob>\\\"] [--session <id>]",
|
||||
"arguments": "[--base-path <path>] [--source <path>] [--css \\\"<glob>\\\"] [--js \\\"<glob>\\\"] [--scss \\\"<glob>\\\"] [--html \\\"<glob>\\\"] [--style-files \\\"<glob>\\\"] [--session <id>]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "planning",
|
||||
@@ -740,7 +729,7 @@
|
||||
"name": "layout-extract",
|
||||
"command": "/workflow:ui-design:layout-extract",
|
||||
"description": "Extract structural layout information from reference images, URLs, or text prompts using Claude analysis",
|
||||
"arguments": "[--base-path <path>] [--session <id>] [--images \"<glob>\"] [--urls \"<list>\"] [--prompt \"<desc>\"] [--targets \"<list>\"] [--mode <imitate|explore>] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>]",
|
||||
"arguments": "[--base-path <path>] [--session <id>] [--images \"<glob>\"] [--urls \"<list>\"] [--prompt \"<desc>\"] [--targets \"<list>\"] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>] [--interactive]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "general",
|
||||
@@ -751,7 +740,7 @@
|
||||
"name": "style-extract",
|
||||
"command": "/workflow:ui-design:style-extract",
|
||||
"description": "Extract design style from reference images or text prompts using Claude analysis with variant generation",
|
||||
"arguments": "[--base-path <path>] [--session <id>] [--images \"<glob>\"] [--urls \"<list>\"] [--prompt \"<desc>\"] [--mode <imitate|explore>] [--variants <count>]",
|
||||
"arguments": "[--base-path <path>] [--session <id>] [--images \"<glob>\"] [--urls \"<list>\"] [--prompt \"<desc>\"] [--variants <count>] [--interactive]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "general",
|
||||
|
||||
@@ -297,8 +297,8 @@
|
||||
{
|
||||
"name": "plan",
|
||||
"command": "/workflow:plan",
|
||||
"description": "5-phase planning workflow with Gemini analysis and action-planning-agent task generation, outputs IMPL_PLAN.md and task JSONs with optional CLI auto-execution",
|
||||
"arguments": "[--agent] [--cli-execute] \\\"text description\\\"|file.md",
|
||||
"description": "5-phase planning workflow with action-planning-agent task generation, outputs IMPL_PLAN.md and task JSONs with optional CLI auto-execution",
|
||||
"arguments": "[--cli-execute] \\\"text description\\\"|file.md",
|
||||
"category": "workflow",
|
||||
"subcategory": null,
|
||||
"usage_scenario": "planning",
|
||||
@@ -342,7 +342,7 @@
|
||||
"name": "tdd-plan",
|
||||
"command": "/workflow:tdd-plan",
|
||||
"description": "TDD workflow planning with Red-Green-Refactor task chain generation, test-first development structure, and cycle tracking",
|
||||
"arguments": "[--agent] \\\"feature description\\\"|file.md",
|
||||
"arguments": "[--cli-execute] \\\"feature description\\\"|file.md",
|
||||
"category": "workflow",
|
||||
"subcategory": null,
|
||||
"usage_scenario": "planning",
|
||||
@@ -611,8 +611,8 @@
|
||||
{
|
||||
"name": "task-generate-tdd",
|
||||
"command": "/workflow:tools:task-generate-tdd",
|
||||
"description": "Generate TDD task chains with Red-Green-Refactor dependencies, test-first structure, and cycle validation",
|
||||
"arguments": "--session WFS-session-id [--agent]",
|
||||
"description": "Autonomous TDD task generation using action-planning-agent with Red-Green-Refactor cycles, test-first structure, and cycle validation",
|
||||
"arguments": "--session WFS-session-id [--cli-execute]",
|
||||
"category": "workflow",
|
||||
"subcategory": "tools",
|
||||
"usage_scenario": "implementation",
|
||||
@@ -666,7 +666,7 @@
|
||||
{
|
||||
"name": "test-task-generate",
|
||||
"command": "/workflow:tools:test-task-generate",
|
||||
"description": "Generate test-fix task JSON with iterative test-fix-retest cycle specification using Gemini/Qwen/Codex",
|
||||
"description": "Autonomous test-fix task generation using action-planning-agent with test-fix-retest cycle specification and discovery phase",
|
||||
"arguments": "[--use-codex] [--cli-execute] --session WFS-test-session-id",
|
||||
"category": "workflow",
|
||||
"subcategory": "tools",
|
||||
@@ -687,17 +687,6 @@
|
||||
"difficulty": "Intermediate",
|
||||
"file_path": "workflow/ui-design/animation-extract.md"
|
||||
},
|
||||
{
|
||||
"name": "batch-generate",
|
||||
"command": "/workflow:ui-design:batch-generate",
|
||||
"description": "Prompt-driven batch UI generation using target-style-centric parallel execution with design token application",
|
||||
"arguments": "[--targets \"<list>\"] [--target-type \"page|component\"] [--device-type \"desktop|mobile|tablet|responsive\"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "implementation",
|
||||
"difficulty": "Intermediate",
|
||||
"file_path": "workflow/ui-design/batch-generate.md"
|
||||
},
|
||||
{
|
||||
"name": "capture",
|
||||
"command": "/workflow:ui-design:capture",
|
||||
@@ -713,7 +702,7 @@
|
||||
"name": "explore-auto",
|
||||
"command": "/workflow:ui-design:explore-auto",
|
||||
"description": "Exploratory UI design workflow with style-centric batch generation, creates design variants from prompts/images with parallel execution",
|
||||
"arguments": "[--prompt \"<desc>\"] [--images \"<glob>\"] [--targets \"<list>\"] [--target-type \"page|component\"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--batch-plan]",
|
||||
"arguments": "[--prompt \"<desc>\"] [--images \"<glob>\"] [--targets \"<list>\"] [--target-type \"page|component\"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--interactive] [--batch-plan]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "general",
|
||||
@@ -735,7 +724,7 @@
|
||||
"name": "generate",
|
||||
"command": "/workflow:ui-design:generate",
|
||||
"description": "Assemble UI prototypes by combining layout templates with design tokens, pure assembler without new content generation",
|
||||
"arguments": "[--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]",
|
||||
"arguments": "[--base-path <path>] [--session <id>]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "implementation",
|
||||
@@ -757,7 +746,7 @@
|
||||
"name": "workflow:ui-design:import-from-code",
|
||||
"command": "/workflow:ui-design:import-from-code",
|
||||
"description": "Import design system from code files (CSS/JS/HTML/SCSS) using parallel agent analysis with final synthesis",
|
||||
"arguments": "[--base-path <path>] [--css \\\"<glob>\\\"] [--js \\\"<glob>\\\"] [--scss \\\"<glob>\\\"] [--html \\\"<glob>\\\"] [--style-files \\\"<glob>\\\"] [--session <id>]",
|
||||
"arguments": "[--base-path <path>] [--source <path>] [--css \\\"<glob>\\\"] [--js \\\"<glob>\\\"] [--scss \\\"<glob>\\\"] [--html \\\"<glob>\\\"] [--style-files \\\"<glob>\\\"] [--session <id>]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "planning",
|
||||
@@ -768,7 +757,7 @@
|
||||
"name": "layout-extract",
|
||||
"command": "/workflow:ui-design:layout-extract",
|
||||
"description": "Extract structural layout information from reference images, URLs, or text prompts using Claude analysis",
|
||||
"arguments": "[--base-path <path>] [--session <id>] [--images \"<glob>\"] [--urls \"<list>\"] [--prompt \"<desc>\"] [--targets \"<list>\"] [--mode <imitate|explore>] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>]",
|
||||
"arguments": "[--base-path <path>] [--session <id>] [--images \"<glob>\"] [--urls \"<list>\"] [--prompt \"<desc>\"] [--targets \"<list>\"] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>] [--interactive]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "general",
|
||||
@@ -779,7 +768,7 @@
|
||||
"name": "style-extract",
|
||||
"command": "/workflow:ui-design:style-extract",
|
||||
"description": "Extract design style from reference images or text prompts using Claude analysis with variant generation",
|
||||
"arguments": "[--base-path <path>] [--session <id>] [--images \"<glob>\"] [--urls \"<list>\"] [--prompt \"<desc>\"] [--mode <imitate|explore>] [--variants <count>]",
|
||||
"arguments": "[--base-path <path>] [--session <id>] [--images \"<glob>\"] [--urls \"<list>\"] [--prompt \"<desc>\"] [--variants <count>] [--interactive]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "general",
|
||||
|
||||
@@ -314,7 +314,7 @@
|
||||
"name": "explore-auto",
|
||||
"command": "/workflow:ui-design:explore-auto",
|
||||
"description": "Exploratory UI design workflow with style-centric batch generation, creates design variants from prompts/images with parallel execution",
|
||||
"arguments": "[--prompt \"<desc>\"] [--images \"<glob>\"] [--targets \"<list>\"] [--target-type \"page|component\"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--batch-plan]",
|
||||
"arguments": "[--prompt \"<desc>\"] [--images \"<glob>\"] [--targets \"<list>\"] [--target-type \"page|component\"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--interactive] [--batch-plan]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "general",
|
||||
@@ -347,7 +347,7 @@
|
||||
"name": "layout-extract",
|
||||
"command": "/workflow:ui-design:layout-extract",
|
||||
"description": "Extract structural layout information from reference images, URLs, or text prompts using Claude analysis",
|
||||
"arguments": "[--base-path <path>] [--session <id>] [--images \"<glob>\"] [--urls \"<list>\"] [--prompt \"<desc>\"] [--targets \"<list>\"] [--mode <imitate|explore>] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>]",
|
||||
"arguments": "[--base-path <path>] [--session <id>] [--images \"<glob>\"] [--urls \"<list>\"] [--prompt \"<desc>\"] [--targets \"<list>\"] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>] [--interactive]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "general",
|
||||
@@ -358,7 +358,7 @@
|
||||
"name": "style-extract",
|
||||
"command": "/workflow:ui-design:style-extract",
|
||||
"description": "Extract design style from reference images or text prompts using Claude analysis with variant generation",
|
||||
"arguments": "[--base-path <path>] [--session <id>] [--images \"<glob>\"] [--urls \"<list>\"] [--prompt \"<desc>\"] [--mode <imitate|explore>] [--variants <count>]",
|
||||
"arguments": "[--base-path <path>] [--session <id>] [--images \"<glob>\"] [--urls \"<list>\"] [--prompt \"<desc>\"] [--variants <count>] [--interactive]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "general",
|
||||
@@ -458,8 +458,8 @@
|
||||
{
|
||||
"name": "task-generate-tdd",
|
||||
"command": "/workflow:tools:task-generate-tdd",
|
||||
"description": "Generate TDD task chains with Red-Green-Refactor dependencies, test-first structure, and cycle validation",
|
||||
"arguments": "--session WFS-session-id [--agent]",
|
||||
"description": "Autonomous TDD task generation using action-planning-agent with Red-Green-Refactor cycles, test-first structure, and cycle validation",
|
||||
"arguments": "--session WFS-session-id [--cli-execute]",
|
||||
"category": "workflow",
|
||||
"subcategory": "tools",
|
||||
"usage_scenario": "implementation",
|
||||
@@ -480,7 +480,7 @@
|
||||
{
|
||||
"name": "test-task-generate",
|
||||
"command": "/workflow:tools:test-task-generate",
|
||||
"description": "Generate test-fix task JSON with iterative test-fix-retest cycle specification using Gemini/Qwen/Codex",
|
||||
"description": "Autonomous test-fix task generation using action-planning-agent with test-fix-retest cycle specification and discovery phase",
|
||||
"arguments": "[--use-codex] [--cli-execute] --session WFS-test-session-id",
|
||||
"category": "workflow",
|
||||
"subcategory": "tools",
|
||||
@@ -488,22 +488,11 @@
|
||||
"difficulty": "Intermediate",
|
||||
"file_path": "workflow/tools/test-task-generate.md"
|
||||
},
|
||||
{
|
||||
"name": "batch-generate",
|
||||
"command": "/workflow:ui-design:batch-generate",
|
||||
"description": "Prompt-driven batch UI generation using target-style-centric parallel execution with design token application",
|
||||
"arguments": "[--targets \"<list>\"] [--target-type \"page|component\"] [--device-type \"desktop|mobile|tablet|responsive\"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "implementation",
|
||||
"difficulty": "Intermediate",
|
||||
"file_path": "workflow/ui-design/batch-generate.md"
|
||||
},
|
||||
{
|
||||
"name": "generate",
|
||||
"command": "/workflow:ui-design:generate",
|
||||
"description": "Assemble UI prototypes by combining layout templates with design tokens, pure assembler without new content generation",
|
||||
"arguments": "[--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]",
|
||||
"arguments": "[--base-path <path>] [--session <id>]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "implementation",
|
||||
@@ -592,8 +581,8 @@
|
||||
{
|
||||
"name": "plan",
|
||||
"command": "/workflow:plan",
|
||||
"description": "5-phase planning workflow with Gemini analysis and action-planning-agent task generation, outputs IMPL_PLAN.md and task JSONs with optional CLI auto-execution",
|
||||
"arguments": "[--agent] [--cli-execute] \\\"text description\\\"|file.md",
|
||||
"description": "5-phase planning workflow with action-planning-agent task generation, outputs IMPL_PLAN.md and task JSONs with optional CLI auto-execution",
|
||||
"arguments": "[--cli-execute] \\\"text description\\\"|file.md",
|
||||
"category": "workflow",
|
||||
"subcategory": null,
|
||||
"usage_scenario": "planning",
|
||||
@@ -604,7 +593,7 @@
|
||||
"name": "tdd-plan",
|
||||
"command": "/workflow:tdd-plan",
|
||||
"description": "TDD workflow planning with Red-Green-Refactor task chain generation, test-first development structure, and cycle tracking",
|
||||
"arguments": "[--agent] \\\"feature description\\\"|file.md",
|
||||
"arguments": "[--cli-execute] \\\"feature description\\\"|file.md",
|
||||
"category": "workflow",
|
||||
"subcategory": null,
|
||||
"usage_scenario": "planning",
|
||||
@@ -615,7 +604,7 @@
|
||||
"name": "workflow:ui-design:import-from-code",
|
||||
"command": "/workflow:ui-design:import-from-code",
|
||||
"description": "Import design system from code files (CSS/JS/HTML/SCSS) using parallel agent analysis with final synthesis",
|
||||
"arguments": "[--base-path <path>] [--css \\\"<glob>\\\"] [--js \\\"<glob>\\\"] [--scss \\\"<glob>\\\"] [--html \\\"<glob>\\\"] [--style-files \\\"<glob>\\\"] [--session <id>]",
|
||||
"arguments": "[--base-path <path>] [--source <path>] [--css \\\"<glob>\\\"] [--js \\\"<glob>\\\"] [--scss \\\"<glob>\\\"] [--html \\\"<glob>\\\"] [--style-files \\\"<glob>\\\"] [--session <id>]",
|
||||
"category": "workflow",
|
||||
"subcategory": "ui-design",
|
||||
"usage_scenario": "planning",
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
{
|
||||
"name": "plan",
|
||||
"command": "/workflow:plan",
|
||||
"description": "5-phase planning workflow with Gemini analysis and action-planning-agent task generation, outputs IMPL_PLAN.md and task JSONs with optional CLI auto-execution",
|
||||
"arguments": "[--agent] [--cli-execute] \\\"text description\\\"|file.md",
|
||||
"description": "5-phase planning workflow with action-planning-agent task generation, outputs IMPL_PLAN.md and task JSONs with optional CLI auto-execution",
|
||||
"arguments": "[--cli-execute] \\\"text description\\\"|file.md",
|
||||
"category": "workflow",
|
||||
"subcategory": null,
|
||||
"usage_scenario": "planning",
|
||||
|
||||
@@ -151,9 +151,17 @@ Generate individual `.task/IMPL-*.json` files with:
|
||||
"agent": "@code-developer"
|
||||
},
|
||||
"context": {
|
||||
"requirements": ["from analysis_results"],
|
||||
"focus_paths": ["src/paths"],
|
||||
"acceptance": ["measurable criteria"],
|
||||
"requirements": [
|
||||
"Implement 3 features: [authentication, authorization, session management]",
|
||||
"Create 5 files: [auth.service.ts, auth.controller.ts, auth.middleware.ts, auth.types.ts, auth.test.ts]",
|
||||
"Modify 2 existing functions: [validateUser() in users.service.ts lines 45-60, hashPassword() in utils.ts lines 120-135]"
|
||||
],
|
||||
"focus_paths": ["src/auth", "tests/auth"],
|
||||
"acceptance": [
|
||||
"3 features implemented: verify by npm test -- auth (exit code 0)",
|
||||
"5 files created: verify by ls src/auth/*.ts | wc -l = 5",
|
||||
"Test coverage >=80%: verify by npm test -- --coverage | grep auth"
|
||||
],
|
||||
"depends_on": ["IMPL-N"],
|
||||
"artifacts": [
|
||||
{
|
||||
@@ -181,23 +189,50 @@ Generate individual `.task/IMPL-*.json` files with:
|
||||
{
|
||||
"step": 1,
|
||||
"title": "Load and analyze role analyses",
|
||||
"description": "Load role analyses from artifacts and extract requirements",
|
||||
"modification_points": ["Load role analyses", "Extract requirements and design patterns"],
|
||||
"logic_flow": ["Read role analyses from artifacts", "Parse architecture decisions", "Extract implementation requirements"],
|
||||
"description": "Load 3 role analysis files and extract quantified requirements",
|
||||
"modification_points": [
|
||||
"Load 3 role analysis files: [system-architect/analysis.md, product-manager/analysis.md, ui-designer/analysis.md]",
|
||||
"Extract 15 requirements from role analyses",
|
||||
"Parse 8 architecture decisions from system-architect analysis"
|
||||
],
|
||||
"logic_flow": [
|
||||
"Read 3 role analyses from artifacts inventory",
|
||||
"Parse architecture decisions (8 total)",
|
||||
"Extract implementation requirements (15 total)",
|
||||
"Build consolidated requirements list"
|
||||
],
|
||||
"depends_on": [],
|
||||
"output": "synthesis_requirements"
|
||||
},
|
||||
{
|
||||
"step": 2,
|
||||
"title": "Implement following specification",
|
||||
"description": "Implement task requirements following consolidated role analyses",
|
||||
"modification_points": ["Apply requirements from [synthesis_requirements]", "Modify target files", "Integrate with existing code"],
|
||||
"logic_flow": ["Apply changes based on [synthesis_requirements]", "Implement core logic", "Validate against acceptance criteria"],
|
||||
"description": "Implement 3 features across 5 files following consolidated role analyses",
|
||||
"modification_points": [
|
||||
"Create 5 new files in src/auth/: [auth.service.ts (180 lines), auth.controller.ts (120 lines), auth.middleware.ts (60 lines), auth.types.ts (40 lines), auth.test.ts (200 lines)]",
|
||||
"Modify 2 functions: [validateUser() in users.service.ts lines 45-60, hashPassword() in utils.ts lines 120-135]",
|
||||
"Implement 3 core features: [JWT authentication, role-based authorization, session management]"
|
||||
],
|
||||
"logic_flow": [
|
||||
"Apply 15 requirements from [synthesis_requirements]",
|
||||
"Implement 3 features across 5 new files (600 total lines)",
|
||||
"Modify 2 existing functions (30 lines total)",
|
||||
"Write 25 test cases covering all features",
|
||||
"Validate against 3 acceptance criteria"
|
||||
],
|
||||
"depends_on": [1],
|
||||
"output": "implementation"
|
||||
}
|
||||
],
|
||||
"target_files": ["file:function:lines", "path/to/NewFile.ts"]
|
||||
"target_files": [
|
||||
"src/auth/auth.service.ts",
|
||||
"src/auth/auth.controller.ts",
|
||||
"src/auth/auth.middleware.ts",
|
||||
"src/auth/auth.types.ts",
|
||||
"tests/auth/auth.test.ts",
|
||||
"src/users/users.service.ts:validateUser:45-60",
|
||||
"src/utils/utils.ts:hashPassword:120-135"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -285,6 +320,35 @@ Use `analysis_results.complexity` or task count to determine structure:
|
||||
- **Re-scope required**: Maximum 10 tasks hard limit
|
||||
- If analysis_results contains >10 tasks, consolidate or request re-scoping
|
||||
|
||||
## Quantification Requirements (MANDATORY)
|
||||
|
||||
**Purpose**: Eliminate ambiguity by enforcing explicit counts and enumerations in all task specifications.
|
||||
|
||||
**Core Rules**:
|
||||
1. **Extract Counts from Analysis**: Search for HOW MANY items and list them explicitly
|
||||
2. **Enforce Explicit Lists**: Every deliverable uses format `{count} {type}: [{explicit_list}]`
|
||||
3. **Make Acceptance Measurable**: Include verification commands (e.g., `ls ... | wc -l = N`)
|
||||
4. **Quantify Modification Points**: Specify exact targets (files, functions with line numbers)
|
||||
5. **Avoid Vague Language**: Replace "complete", "comprehensive", "reorganize" with quantified statements
|
||||
|
||||
**Standard Formats**:
|
||||
- **Requirements**: `"Implement N items: [item1, item2, ...]"` or `"Modify N files: [file1:func:lines, ...]"`
|
||||
- **Acceptance**: `"N items exist: verify by [command]"` or `"Coverage >= X%: verify by [test command]"`
|
||||
- **Modification Points**: `"Create N files: [list]"` or `"Modify N functions: [func() in file lines X-Y]"`
|
||||
|
||||
**Validation Checklist** (Apply to every generated task JSON):
|
||||
- [ ] Every requirement contains explicit count or enumerated list
|
||||
- [ ] Every acceptance criterion is measurable with verification command
|
||||
- [ ] Every modification_point specifies exact targets (files/functions/lines)
|
||||
- [ ] No vague language ("complete", "comprehensive", "reorganize" without counts)
|
||||
- [ ] Each implementation step has its own acceptance criteria
|
||||
|
||||
**Examples**:
|
||||
- ✅ GOOD: `"Implement 5 commands: [cmd1, cmd2, cmd3, cmd4, cmd5]"`
|
||||
- ❌ BAD: `"Implement new commands"`
|
||||
- ✅ GOOD: `"5 files created: verify by ls .claude/commands/*.md | wc -l = 5"`
|
||||
- ❌ BAD: `"All commands implemented successfully"`
|
||||
|
||||
## Quality Standards
|
||||
|
||||
**Planning Principles:**
|
||||
@@ -305,6 +369,7 @@ Use `analysis_results.complexity` or task count to determine structure:
|
||||
## Key Reminders
|
||||
|
||||
**ALWAYS:**
|
||||
- **Apply Quantification Requirements**: All requirements, acceptance criteria, and modification points MUST include explicit counts and enumerations
|
||||
- **Use provided context package**: Extract all information from structured context
|
||||
- **Respect memory-first rule**: Use provided content (already loaded from memory/file)
|
||||
- **Follow 5-field schema**: All task JSONs must have id, title, status, meta, context, flow_control
|
||||
@@ -313,6 +378,7 @@ Use `analysis_results.complexity` or task count to determine structure:
|
||||
- **Validate task count**: Maximum 10 tasks hard limit, request re-scope if exceeded
|
||||
- **Use session paths**: Construct all paths using provided session_id
|
||||
- **Link documents properly**: Use correct linking format (📋 for JSON, ✅ for summaries)
|
||||
- **Run validation checklist**: Verify all quantification requirements before finalizing task JSONs
|
||||
|
||||
**NEVER:**
|
||||
- Load files directly (use provided context package instead)
|
||||
|
||||
@@ -16,89 +16,131 @@ description: |
|
||||
color: orange
|
||||
---
|
||||
|
||||
You are a specialized **UI Design Agent** that executes design generation tasks autonomously. You are invoked by orchestrator commands (e.g., `consolidate.md`, `generate.md`) to produce production-ready design systems and prototypes.
|
||||
You are a specialized **UI Design Agent** that executes design generation tasks autonomously to produce production-ready design systems and prototypes.
|
||||
|
||||
## Core Capabilities
|
||||
## Task Patterns
|
||||
|
||||
### 1. Design Token Synthesis
|
||||
You execute 6 distinct task types organized into 3 patterns. Each task includes `[TASK_TYPE_IDENTIFIER]` in its prompt.
|
||||
|
||||
**Invoked by**: `consolidate.md`
|
||||
**Input**: Style variants with proposed_tokens from extraction phase
|
||||
**Task**: Generate production-ready design token systems
|
||||
### Pattern 1: Option Generation
|
||||
|
||||
**Deliverables**:
|
||||
- `design-tokens.json`: W3C-compliant token definitions using OKLCH colors
|
||||
- `style-guide.md`: Comprehensive design system documentation
|
||||
- `layout-strategies.json`: MCP-researched layout variant definitions
|
||||
- `tokens.css`: CSS custom properties with Google Fonts imports
|
||||
**Purpose**: Generate multiple design/layout options for user selection (exploration phase)
|
||||
|
||||
### 2. Layout Strategy Generation
|
||||
**Task Types**:
|
||||
- `[DESIGN_DIRECTION_GENERATION_TASK]` - Generate design direction options
|
||||
- `[LAYOUT_CONCEPT_GENERATION_TASK]` - Generate layout concept options
|
||||
|
||||
**Invoked by**: `consolidate.md` Phase 2.5
|
||||
**Input**: Project context from role analysis documents
|
||||
**Task**: Research and generate adaptive layout strategies via Exa MCP (2024-2025 trends)
|
||||
**Common Process**:
|
||||
1. **Analyze Input**: User prompt, visual references, project context
|
||||
2. **Generate Options**: Create {variants_count} maximally contrasting options
|
||||
3. **Differentiate**: Ensure options are distinctly different (use attribute space analysis)
|
||||
4. **Write File**: Single JSON file `analysis-options.json` with all options
|
||||
|
||||
**Output**: layout-strategies.json with strategy definitions and rationale
|
||||
**Design Direction Generation**:
|
||||
- **Input**: Prompt guidance, visual references (images/URLs), project context
|
||||
- **Output**: `{base_path}/.intermediates/style-analysis/analysis-options.json`
|
||||
- **Content**: Design philosophies with 6D attributes (color saturation, visual weight, formality, organic/geometric, innovation, density), search keywords, visual previews (colors, fonts, border radius)
|
||||
- **Goal**: Maximum contrast between options for clear user choice
|
||||
|
||||
### 3. UI Prototype Generation
|
||||
**Layout Concept Generation**:
|
||||
- **Input**: Target specifications, device type, layout inspirations, visual references, DOM structure (if available)
|
||||
- **Output**: `{base_path}/.intermediates/layout-analysis/analysis-options.json`
|
||||
- **Content**: Layout concepts with structural patterns (grid-3col, flex-row, etc.), component arrangements, ASCII wireframes
|
||||
- **Goal**: Structurally different layouts for same target
|
||||
|
||||
**Invoked by**: `generate.md` Phase 2a
|
||||
**Input**: Design tokens, layout strategies, target specifications
|
||||
**Task**: Generate style-agnostic HTML/CSS templates
|
||||
**Key Principles**:
|
||||
- ✅ Creative exploration with high autonomy
|
||||
- ✅ Generate diverse, contrasting options
|
||||
- ✅ Include visual/structural previews for user understanding
|
||||
- ❌ NO user interaction during generation
|
||||
|
||||
### Pattern 2: System Generation
|
||||
|
||||
**Purpose**: Generate complete design system components (execution phase)
|
||||
|
||||
**Task Types**:
|
||||
- `[DESIGN_SYSTEM_GENERATION_TASK]` - Generate design tokens + style guide
|
||||
- `[LAYOUT_TEMPLATE_GENERATION_TASK]` - Generate layout templates with DOM structure
|
||||
- `[ANIMATION_TOKEN_GENERATION_TASK]` - Generate animation tokens + guide
|
||||
|
||||
**Common Process**:
|
||||
1. **Load Context**: User selections (from Pattern 1) OR reference materials OR computed styles
|
||||
2. **Apply Standards**: WCAG AA, OKLCH, semantic naming, accessibility
|
||||
3. **MCP Research**: Query Exa for modern patterns and best practices (when applicable)
|
||||
4. **Generate System**: Complete token/template system following specifications
|
||||
5. **Write Files Immediately**: JSON + Markdown documentation
|
||||
|
||||
**Design System Generation**:
|
||||
- **Input**: Selected design direction OR visual references, computed styles (if available), user refinements
|
||||
- **Output**:
|
||||
- `{base_path}/style-extraction/style-{id}/design-tokens.json` (W3C format, OKLCH colors)
|
||||
- `{base_path}/style-extraction/style-{id}/style-guide.md`
|
||||
- **Content**: Complete token system (colors, typography, spacing, opacity, shadows, border_radius, breakpoints, component_styles, typography.combinations)
|
||||
- **MCP Use**: Research modern color palettes, typography trends, design system patterns
|
||||
|
||||
**Layout Template Generation**:
|
||||
- **Input**: Selected layout concepts OR visual references, device type, DOM structure data (if available)
|
||||
- **Output**: `{base_path}/layout-extraction/layout-templates.json`
|
||||
- **Content**: For each target - semantic DOM structure (HTML5 + ARIA), CSS layout rules using var() placeholders, device optimizations, responsive breakpoints
|
||||
- **Focus**: Structure ONLY - no visual styling (colors, fonts belong in design tokens)
|
||||
|
||||
**Animation Token Generation**:
|
||||
- **Input**: Extracted CSS animations, user specification (if available), design tokens context
|
||||
- **Output**:
|
||||
- `{base_path}/animation-extraction/animation-tokens.json`
|
||||
- `{base_path}/animation-extraction/animation-guide.md`
|
||||
- **Content**: Duration scales, easing functions, keyframes, interaction patterns, transition utilities
|
||||
- **Synthesis**: Normalize CSS extractions into semantic token system
|
||||
|
||||
**Key Principles**:
|
||||
- ✅ Follow user selections from Pattern 1 (when in explore mode)
|
||||
- ✅ Apply all design standards automatically
|
||||
- ✅ Use MCP research to inform decisions
|
||||
- ✅ Generate complete, production-ready systems
|
||||
- ❌ NO user interaction during generation
|
||||
|
||||
### Pattern 3: Assembly
|
||||
|
||||
**Purpose**: Combine pre-defined components into final prototypes (pure assembly, no design decisions)
|
||||
|
||||
**Task Type**:
|
||||
- `[LAYOUT_STYLE_ASSEMBLY]` - Combine layout template + design tokens → HTML/CSS prototype
|
||||
|
||||
**Process**:
|
||||
- Research implementation patterns via Exa MCP (components, responsive design, accessibility, HTML semantics, CSS architecture)
|
||||
- Extract exact token variable names from design-tokens.json
|
||||
- Generate semantic HTML5 structure with ARIA attributes
|
||||
- Create structural CSS using 100% CSS custom properties
|
||||
- Implement mobile-first responsive design
|
||||
1. **Load Inputs** (Read-Only):
|
||||
- Layout template from `layout-templates.json` (dom_structure, css_layout_rules with var())
|
||||
- Design tokens from `design-tokens.json` (complete token system)
|
||||
- Animation tokens from `animation-tokens.json` (optional)
|
||||
- Reference image (optional, for placeholder content context)
|
||||
|
||||
**Deliverables**:
|
||||
- `{target}-layout-{id}.html`: Style-agnostic HTML structure
|
||||
- `{target}-layout-{id}.css`: Token-driven structural CSS
|
||||
2. **Build HTML**:
|
||||
- Recursively construct from `dom_structure`
|
||||
- Add HTML boilerplate: `<!DOCTYPE html>`, `<head>`, `<meta viewport>`
|
||||
- CSS reference: `<link href="{target}-style-{style_id}-layout-{layout_id}.css">`
|
||||
- Inject placeholder content (Lorem ipsum OR contextually appropriate if reference image available)
|
||||
- Preserve all attributes from dom_structure
|
||||
|
||||
**⚠️ CRITICAL: CSS Placeholder Links**
|
||||
3. **Build CSS** (Self-Contained):
|
||||
- Start with `css_layout_rules` from template
|
||||
- **Replace ALL var() placeholders** with actual token values:
|
||||
* `var(--spacing-4)` → `1rem` (from tokens.spacing.4)
|
||||
* `var(--breakpoint-md)` → `768px` (from tokens.breakpoints.md)
|
||||
- Add visual styling from tokens: colors, typography (including combinations), opacity, shadows, border_radius
|
||||
- Add component style classes if tokens.component_styles exists
|
||||
- Add animation CSS if animation tokens provided (keyframes, interactions, transitions, prefers-reduced-motion)
|
||||
- Device-optimized for template.device_type
|
||||
|
||||
When generating HTML templates, you MUST include these EXACT placeholder links in the `<head>` section:
|
||||
4. **Write Files Immediately**:
|
||||
- `{base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html`
|
||||
- `{base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.css`
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{{STRUCTURAL_CSS}}">
|
||||
<link rel="stylesheet" href="{{TOKEN_CSS}}">
|
||||
```
|
||||
|
||||
**Placeholder Rules**:
|
||||
1. Use EXACTLY `{{STRUCTURAL_CSS}}` and `{{TOKEN_CSS}}` with double curly braces
|
||||
2. Place in `<head>` AFTER `<meta>` tags, BEFORE `</head>` closing tag
|
||||
3. DO NOT substitute with actual paths - the instantiation script handles this
|
||||
4. DO NOT add any other CSS `<link>` tags
|
||||
5. These enable runtime style switching for all variants
|
||||
|
||||
**Example HTML Template Structure**:
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{target} - Layout {id}</title>
|
||||
<link rel="stylesheet" href="{{STRUCTURAL_CSS}}">
|
||||
<link rel="stylesheet" href="{{TOKEN_CSS}}">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Content here -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Quality Gates**: 🎯 ADAPTIVE (multi-device), 🔄 STYLE-SWITCHABLE (runtime theme switching), 🏗️ SEMANTIC (HTML5), ♿ ACCESSIBLE (WCAG AA), 📱 MOBILE-FIRST, 🎨 TOKEN-DRIVEN (zero hardcoded values)
|
||||
|
||||
### 4. Consistency Validation
|
||||
|
||||
**Invoked by**: `generate.md` Phase 3.5
|
||||
**Input**: Multiple target prototypes for same style/layout combination
|
||||
**Task**: Validate cross-target design consistency
|
||||
|
||||
**Deliverables**: Consistency reports, token usage verification, accessibility compliance checks, layout strategy adherence validation
|
||||
**Key Principles**:
|
||||
- ✅ Pure assembly: Combine existing structure + existing tokens
|
||||
- ✅ Self-contained CSS: All var() resolved to actual values
|
||||
- ❌ NO layout design decisions (structure pre-defined)
|
||||
- ❌ NO style design decisions (tokens pre-defined)
|
||||
- ❌ NO CSS placeholders - use direct CSS file reference
|
||||
- ✅ Low autonomy: follow specifications exactly
|
||||
|
||||
## Design Standards
|
||||
|
||||
@@ -276,135 +318,84 @@ h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
## Agent Operation
|
||||
|
||||
### Execution Process
|
||||
### Execution Flow
|
||||
|
||||
When invoked by orchestrator command (e.g., `[DESIGN_TOKEN_GENERATION_TASK]`):
|
||||
All tasks follow this standard flow with pattern-specific variations:
|
||||
|
||||
```
|
||||
STEP 1: Parse Task Identifier
|
||||
→ Identify task type from [TASK_TYPE_IDENTIFIER]
|
||||
→ Load task-specific execution template
|
||||
→ Validate required parameters present
|
||||
STEP 1: Identify Task Pattern
|
||||
→ Parse [TASK_TYPE_IDENTIFIER] from prompt
|
||||
→ Determine pattern: Option Generation | System Generation | Assembly
|
||||
→ Load pattern-specific execution rules
|
||||
|
||||
STEP 2: Load Input Context
|
||||
→ Read variant data from orchestrator prompt
|
||||
→ Parse proposed_tokens, design_space_analysis
|
||||
→ Extract MCP research keywords if provided
|
||||
→ Verify BASE_PATH and output directory structure
|
||||
STEP 2: Load Context
|
||||
→ Read input data specified in task prompt
|
||||
→ Validate BASE_PATH and output directory structure
|
||||
→ Extract parameters: targets, variants_count, device_type, etc.
|
||||
|
||||
STEP 3: Execute MCP Research (if applicable)
|
||||
FOR each variant:
|
||||
→ Build variant-specific queries
|
||||
→ Execute mcp__exa__web_search_exa() calls
|
||||
→ Accumulate research results in memory
|
||||
→ (DO NOT write research results to files)
|
||||
STEP 3: Execute Pattern-Specific Generation
|
||||
→ Pattern 1 (Option Generation):
|
||||
• Generate {variants_count} contrasting options
|
||||
• Apply differentiation algorithms
|
||||
• Create visual/structural previews
|
||||
• Output: Single analysis-options.json
|
||||
|
||||
STEP 4: Generate Content
|
||||
FOR each variant:
|
||||
→ Refine tokens using proposed_tokens + MCP research
|
||||
→ Generate design-tokens.json content
|
||||
→ Generate style-guide.md content
|
||||
→ Keep content in memory (DO NOT accumulate in text)
|
||||
→ Pattern 2 (System Generation):
|
||||
• Execute MCP research if design_space_analysis provided
|
||||
• Apply design standards (WCAG AA, OKLCH, semantic naming)
|
||||
• Generate complete system (tokens/templates/animations)
|
||||
• Output: JSON + Markdown documentation
|
||||
|
||||
STEP 5: WRITE FILES (CRITICAL)
|
||||
FOR each variant:
|
||||
→ EXECUTE: Write("{path}/design-tokens.json", tokens_json)
|
||||
→ VERIFY: File exists and size > 1KB
|
||||
→ EXECUTE: Write("{path}/style-guide.md", guide_content)
|
||||
→ VERIFY: File exists and size > 1KB
|
||||
→ Report completion for this variant
|
||||
→ (DO NOT wait to write all variants at once)
|
||||
→ Pattern 3 (Assembly):
|
||||
• Load pre-defined inputs (templates + tokens)
|
||||
• Combine components without design decisions
|
||||
• Resolve all var() placeholders to actual values
|
||||
• Output: Self-contained HTML + CSS
|
||||
|
||||
STEP 6: Final Verification
|
||||
→ Verify all {variants_count} × 2 files written
|
||||
→ Report total files written with sizes
|
||||
STEP 4: WRITE FILES IMMEDIATELY
|
||||
→ Use Write() tool for each output file
|
||||
→ Verify file creation (size > 1KB for substantial files)
|
||||
→ Report file path and size
|
||||
→ DO NOT accumulate content - write incrementally
|
||||
|
||||
STEP 5: Final Verification
|
||||
→ Verify all expected files written
|
||||
→ Report completion with file count and sizes
|
||||
→ Report MCP query count if research performed
|
||||
```
|
||||
|
||||
**Key Execution Principle**: **WRITE FILES IMMEDIATELY** after generating content for each variant. DO NOT accumulate all content and try to output at the end.
|
||||
**Critical Execution Principles**:
|
||||
- ✅ **Pattern Recognition**: Identify pattern from task identifier first
|
||||
- ✅ **Immediate File Writing**: Write files as soon as content is generated
|
||||
- ✅ **No Content Accumulation**: Never batch all content before writing
|
||||
- ✅ **Incremental Progress**: Process variants/targets one at a time
|
||||
- ❌ **No User Interaction**: Execute autonomously without questions
|
||||
|
||||
### Invocation Model
|
||||
### Core Execution Principles
|
||||
|
||||
You are invoked by orchestrator commands to execute specific generation tasks:
|
||||
|
||||
**Token Generation** (by `consolidate.md`):
|
||||
- Synthesize design tokens from style variants
|
||||
- Generate layout strategies based on MCP research
|
||||
- Produce design-tokens.json, style-guide.md, layout-strategies.json
|
||||
|
||||
**Prototype Generation** (by `generate.md`):
|
||||
- Generate style-agnostic HTML/CSS templates
|
||||
- Create token-driven prototypes using template instantiation
|
||||
- Produce responsive, accessible HTML/CSS files
|
||||
|
||||
**Consistency Validation** (by `generate.md` Phase 3.5):
|
||||
- Validate cross-target design consistency
|
||||
- Generate consistency reports for multi-page workflows
|
||||
|
||||
### Execution Principles
|
||||
|
||||
**Autonomous Operation**:
|
||||
- Receive all parameters from orchestrator command
|
||||
- Execute task without user interaction
|
||||
**Autonomous & Complete**:
|
||||
- Execute task fully without user interaction
|
||||
- Receive all parameters from task prompt
|
||||
- Return results through file system outputs
|
||||
- Generate all required files and documentation
|
||||
|
||||
**Target Independence** (CRITICAL):
|
||||
- Each invocation processes EXACTLY ONE target (page or component)
|
||||
- Do NOT combine multiple targets into a single template
|
||||
- Even if targets will coexist in final application, generate them independently
|
||||
- **Example Scenario**:
|
||||
- Task: Generate template for "login" (workflow has: ["login", "sidebar"])
|
||||
- ❌ WRONG: Generate login page WITH sidebar included
|
||||
- ✅ CORRECT: Generate login page WITHOUT sidebar (sidebar is separate target)
|
||||
- **Verification Before Output**:
|
||||
- Confirm template includes ONLY the specified target
|
||||
- Check no cross-contamination from other targets in workflow
|
||||
- Each target must be standalone and reusable
|
||||
- Each task processes EXACTLY ONE target (page or component) at a time
|
||||
- Do NOT combine multiple targets into a single output
|
||||
- Even if targets coexist in final application, generate them independently
|
||||
- **Example**: Task for "login" page should NOT include "sidebar" (separate target)
|
||||
- **Verification**: Confirm output includes ONLY the specified target
|
||||
|
||||
**Quality-First**:
|
||||
- Apply all design standards automatically
|
||||
- Apply all design standards automatically (WCAG AA, OKLCH, semantic naming)
|
||||
- Validate outputs against quality gates before completion
|
||||
- Use MCP research for modern patterns and best practices (Pattern 1 & 2)
|
||||
- Document any deviations or warnings in output files
|
||||
|
||||
**Research-Informed**:
|
||||
- Use MCP tools for trend research and pattern discovery
|
||||
- Integrate modern best practices into generation decisions
|
||||
- Cache research results for session reuse
|
||||
|
||||
**Complete Outputs**:
|
||||
- Generate all required files and documentation
|
||||
- Include metadata and implementation notes
|
||||
- Validate file format and completeness
|
||||
|
||||
### Performance Optimization
|
||||
|
||||
**Two-Layer Generation Architecture**:
|
||||
- **Layer 1 (Your Responsibility)**: Generate style-agnostic layout templates (creative work)
|
||||
- HTML structure with semantic markup
|
||||
- Structural CSS with CSS custom property references
|
||||
- One template per layout variant per target
|
||||
- **Layer 2 (Orchestrator Responsibility)**: Instantiate style-specific prototypes
|
||||
- Token conversion (JSON → CSS)
|
||||
- Template instantiation (L×T templates → S×L×T prototypes)
|
||||
- Performance: S× faster than generating all combinations individually
|
||||
|
||||
**Your Focus**: Generate high-quality, reusable templates. Orchestrator handles file operations and instantiation.
|
||||
|
||||
### Scope & Boundaries
|
||||
|
||||
**Your Responsibilities**:
|
||||
- Execute assigned generation task completely
|
||||
- Apply all quality standards automatically
|
||||
- Research when parameters require trend-informed decisions
|
||||
- Validate outputs against quality gates
|
||||
- Generate complete documentation
|
||||
|
||||
**NOT Your Responsibilities**:
|
||||
- User interaction or confirmation
|
||||
- Workflow orchestration or sequencing
|
||||
- Parameter collection or validation
|
||||
- Strategic design decisions (provided by brainstorming phase)
|
||||
- Task scheduling or dependency management
|
||||
**Pattern-Specific Autonomy Levels**:
|
||||
- **Pattern 1** (Option Generation): High autonomy - creative exploration
|
||||
- **Pattern 2** (System Generation): Medium autonomy - follow selections + standards
|
||||
- **Pattern 3** (Assembly): Low autonomy - pure combination, no design decisions
|
||||
|
||||
## Technical Integration
|
||||
|
||||
@@ -457,10 +448,10 @@ layout_results = mcp__exa__web_search_exa(
|
||||
- **Edit**: Update token definitions, refine layout strategies when files already exist
|
||||
|
||||
**Path Handling**:
|
||||
- Orchestrator provides complete absolute paths in prompts
|
||||
- Agent uses provided paths exactly as given without modification
|
||||
- If path contains variables (e.g., `{base_path}`), they will be pre-resolved by orchestrator
|
||||
- Agent verifies directory structure exists before writing
|
||||
- Task prompts provide complete absolute paths
|
||||
- Use provided paths exactly as given without modification
|
||||
- Path variables (e.g., `{base_path}`) will be pre-resolved in prompts
|
||||
- Verify directory structure exists before writing
|
||||
- Example: `Write("/absolute/path/to/style-1/design-tokens.json", content)`
|
||||
|
||||
**File Write Verification**:
|
||||
@@ -543,46 +534,50 @@ layout_results = mcp__exa__web_search_exa(
|
||||
|
||||
### ALWAYS:
|
||||
|
||||
**File Writing**:
|
||||
- ✅ Use Write() tool for EVERY output file - this is your PRIMARY responsibility
|
||||
- ✅ Write files IMMEDIATELY after generating content for each variant/target
|
||||
- ✅ Verify each Write() operation succeeds before proceeding to next file
|
||||
- ✅ Use EXACT paths provided by orchestrator without modification
|
||||
- ✅ Report completion with file paths and sizes after each write
|
||||
**Pattern Recognition & Execution**:
|
||||
- ✅ Identify task pattern from [TASK_TYPE_IDENTIFIER] first
|
||||
- ✅ Apply pattern-specific execution rules (Option Gen | System Gen | Assembly)
|
||||
- ✅ Follow appropriate autonomy level for the pattern
|
||||
- ✅ Validate outputs against pattern-specific quality gates
|
||||
|
||||
**Task Execution**:
|
||||
- ✅ Parse task identifier ([DESIGN_TOKEN_GENERATION_TASK], etc.) first
|
||||
- ✅ Execute MCP research when design_space_analysis is provided
|
||||
- ✅ Follow the 6-step execution process sequentially
|
||||
- ✅ Maintain variant independence - research and write separately for each
|
||||
- ✅ Validate outputs against quality gates (WCAG AA, token completeness, OKLCH format)
|
||||
**File Writing** (PRIMARY RESPONSIBILITY):
|
||||
- ✅ Use Write() tool for EVERY output file immediately after generation
|
||||
- ✅ Write files incrementally - one variant/target at a time
|
||||
- ✅ Verify each Write() operation succeeds before proceeding
|
||||
- ✅ Use EXACT paths from task prompt without modification
|
||||
- ✅ Report completion with file paths and sizes
|
||||
|
||||
**Quality Standards**:
|
||||
- ✅ Apply all design standards automatically (WCAG AA, OKLCH, semantic naming)
|
||||
- ✅ Include Google Fonts imports in CSS with fallback stacks
|
||||
- ✅ Generate complete token coverage (colors, typography, spacing, radius, shadows, breakpoints)
|
||||
**Quality Standards** (All Patterns):
|
||||
- ✅ Apply design standards automatically (WCAG AA, OKLCH colors, semantic naming)
|
||||
- ✅ Include Google Fonts imports with fallback stacks (Pattern 2 & 3)
|
||||
- ✅ Use mobile-first responsive design with token-based breakpoints
|
||||
- ✅ Implement semantic HTML5 with ARIA attributes
|
||||
- ✅ Implement semantic HTML5 with ARIA attributes (Pattern 2 & 3)
|
||||
- ✅ Execute MCP research for modern patterns (Pattern 1 & 2 when applicable)
|
||||
|
||||
**Target Independence**:
|
||||
- ✅ Process EXACTLY ONE target per task
|
||||
- ✅ Keep targets standalone and reusable
|
||||
- ✅ Verify no cross-contamination between targets
|
||||
|
||||
### NEVER:
|
||||
|
||||
**File Writing**:
|
||||
- ❌ Return file contents as text with labeled sections (e.g., "## File 1: design-tokens.json\n{content}")
|
||||
- ❌ Accumulate all variant content and try to output at once
|
||||
- ❌ Skip Write() operations and expect orchestrator to write files
|
||||
- ❌ Return file contents as text (e.g., "## File: design-tokens.json\n{content}")
|
||||
- ❌ Accumulate all content before writing (write incrementally)
|
||||
- ❌ Skip Write() operations expecting external writes
|
||||
- ❌ Modify provided paths or use relative paths
|
||||
- ❌ Continue to next variant before completing current variant's file writes
|
||||
- ❌ Continue to next item before completing current item's writes
|
||||
|
||||
**Task Execution**:
|
||||
- ❌ Mix multiple targets into a single template (respect target independence)
|
||||
- ❌ Skip MCP research when design_space_analysis is provided
|
||||
- ❌ Generate variant N+1 before variant N's files are written
|
||||
- ❌ Return research results as files (keep in memory for token refinement)
|
||||
- ❌ Assume default values without checking orchestrator prompt
|
||||
- ❌ Mix multiple targets into single output (violates target independence)
|
||||
- ❌ Make design decisions in Pattern 3 (Assembly is pure combination)
|
||||
- ❌ Skip pattern identification step
|
||||
- ❌ Interact with user during execution
|
||||
- ❌ Return MCP research as files (keep in memory for generation)
|
||||
|
||||
**Quality Violations**:
|
||||
- ❌ Use hardcoded colors/fonts/spacing instead of tokens
|
||||
- ❌ Generate tokens without OKLCH format for colors
|
||||
- ❌ Skip WCAG AA contrast validation
|
||||
- ❌ Omit Google Fonts imports or fallback stacks
|
||||
- ❌ Create incomplete token categories
|
||||
- ❌ Use hardcoded values instead of tokens (Pattern 2 & 3)
|
||||
- ❌ Generate colors without OKLCH format (Pattern 2)
|
||||
- ❌ Skip WCAG AA contrast validation (Pattern 2)
|
||||
- ❌ Omit Google Fonts imports or fallback stacks (Pattern 2 & 3)
|
||||
- ❌ Create incomplete token/template systems (Pattern 2)
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: plan
|
||||
description: 5-phase planning workflow with Gemini analysis and action-planning-agent task generation, outputs IMPL_PLAN.md and task JSONs with optional CLI auto-execution
|
||||
argument-hint: "[--agent] [--cli-execute] \"text description\"|file.md"
|
||||
description: 5-phase planning workflow with action-planning-agent task generation, outputs IMPL_PLAN.md and task JSONs with optional CLI auto-execution
|
||||
argument-hint: "[--cli-execute] \"text description\"|file.md"
|
||||
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*)
|
||||
---
|
||||
|
||||
@@ -20,7 +20,7 @@ This workflow runs **fully autonomously** once triggered. Phase 3 (conflict reso
|
||||
2. **Phase 1 executes** → Session discovery → Auto-continues
|
||||
3. **Phase 2 executes** → Context gathering → Auto-continues
|
||||
4. **Phase 3 executes** (optional, if conflict_risk ≥ medium) → Conflict resolution → Auto-continues
|
||||
5. **Phase 4 executes** (task-generate-agent if --agent) → Task generation → Reports final summary
|
||||
5. **Phase 4 executes** → Task generation (task-generate-agent) → Reports final summary
|
||||
|
||||
**Auto-Continue Mechanism**:
|
||||
- TodoList tracks current phase status
|
||||
@@ -28,11 +28,6 @@ This workflow runs **fully autonomously** once triggered. Phase 3 (conflict reso
|
||||
- All phases run autonomously without user interaction (clarification handled in brainstorm phase)
|
||||
- Progress updates shown at each phase for visibility
|
||||
|
||||
**Execution Modes**:
|
||||
- **Manual Mode** (default): Use `/workflow:tools:task-generate`
|
||||
- **Agent Mode** (`--agent`): Use `/workflow:tools:task-generate-agent`
|
||||
- **CLI Execute Mode** (`--cli-execute`): Generate tasks with Codex execution commands
|
||||
|
||||
## Core Rules
|
||||
|
||||
1. **Start Immediately**: First action is TodoWrite initialization, second action is Phase 1 command execution
|
||||
@@ -159,24 +154,18 @@ CONTEXT: Existing user database schema, REST API endpoints
|
||||
- Task generation translates high-level role analyses into concrete, actionable work items
|
||||
- **Intent priority**: Current user prompt > role analysis.md files > guidance-specification.md
|
||||
|
||||
**Command Selection**:
|
||||
- Manual: `SlashCommand(command="/workflow:tools:task-generate --session [sessionId]")`
|
||||
- Agent: `SlashCommand(command="/workflow:tools:task-generate-agent --session [sessionId]")`
|
||||
- CLI Execute: Add `--cli-execute` flag to either command
|
||||
|
||||
**Flag Combination**:
|
||||
- `--cli-execute` alone: Manual task generation with CLI execution
|
||||
- `--agent --cli-execute`: Agent task generation with CLI execution
|
||||
|
||||
**Command Examples**:
|
||||
**Command**:
|
||||
```bash
|
||||
# Manual with CLI execution
|
||||
/workflow:tools:task-generate --session WFS-auth --cli-execute
|
||||
# Default (agent mode)
|
||||
SlashCommand(command="/workflow:tools:task-generate-agent --session [sessionId]")
|
||||
|
||||
# Agent with CLI execution
|
||||
/workflow:tools:task-generate-agent --session WFS-auth --cli-execute
|
||||
# With CLI execution
|
||||
SlashCommand(command="/workflow:tools:task-generate-agent --session [sessionId] --cli-execute")
|
||||
```
|
||||
|
||||
**Flag**:
|
||||
- `--cli-execute`: Generate tasks with Codex execution commands
|
||||
|
||||
**Input**: `sessionId` from Phase 1
|
||||
|
||||
**Validation**:
|
||||
@@ -296,7 +285,7 @@ Phase 3: conflict-resolution [AUTO-TRIGGERED if conflict_risk ≥ medium]
|
||||
↓ Output: Modified brainstorm artifacts (NO report file)
|
||||
↓ Skip if conflict_risk is none/low → proceed directly to Phase 4
|
||||
↓
|
||||
Phase 4: task-generate[--agent] --session sessionId
|
||||
Phase 4: task-generate-agent --session sessionId [--cli-execute]
|
||||
↓ Input: sessionId + resolved brainstorm artifacts + session memory
|
||||
↓ Output: IMPL_PLAN.md, task JSONs, TODO_LIST.md
|
||||
↓
|
||||
@@ -333,9 +322,8 @@ Return summary to user
|
||||
- **If conflict_risk ≥ medium**: Launch Phase 3 conflict-resolution with sessionId and contextPath
|
||||
- Wait for Phase 3 completion (if executed), verify CONFLICT_RESOLUTION.md created
|
||||
- **If conflict_risk is none/low**: Skip Phase 3, proceed directly to Phase 4
|
||||
- **Build Phase 4 command** based on flags:
|
||||
- Base command: `/workflow:tools:task-generate` (or `-agent` if `--agent` flag)
|
||||
- Add `--session [sessionId]`
|
||||
- **Build Phase 4 command**:
|
||||
- Base command: `/workflow:tools:task-generate-agent --session [sessionId]`
|
||||
- Add `--cli-execute` if flag present
|
||||
- Pass session ID to Phase 4 command
|
||||
- Verify all Phase 4 outputs
|
||||
@@ -380,8 +368,7 @@ CONSTRAINTS: [Limitations or boundaries]
|
||||
- `/workflow:tools:context-gather` - Phase 2: Gather project context and analyze codebase
|
||||
- `/workflow:tools:conflict-resolution` - Phase 3: Detect and resolve conflicts (auto-triggered if conflict_risk ≥ medium)
|
||||
- `/compact` - Phase 3: Memory optimization (if context approaching limits)
|
||||
- `/workflow:tools:task-generate` - Phase 4: Generate task JSON files with manual approach
|
||||
- `/workflow:tools:task-generate-agent` - Phase 4: Generate task JSON files with agent-driven approach (when `--agent` flag used)
|
||||
- `/workflow:tools:task-generate-agent` - Phase 4: Generate task JSON files with agent-driven approach
|
||||
|
||||
**Follow-up Commands**:
|
||||
- `/workflow:action-plan-verify` - Recommended: Verify plan quality and catch issues before execution
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: tdd-plan
|
||||
description: TDD workflow planning with Red-Green-Refactor task chain generation, test-first development structure, and cycle tracking
|
||||
argument-hint: "[--agent] \"feature description\"|file.md"
|
||||
argument-hint: "[--cli-execute] \"feature description\"|file.md"
|
||||
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*)
|
||||
---
|
||||
|
||||
@@ -12,8 +12,8 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*)
|
||||
**This command is a pure orchestrator**: Execute 5 slash commands in sequence, parse outputs, pass context, and ensure complete TDD workflow creation.
|
||||
|
||||
**Execution Modes**:
|
||||
- **Manual Mode** (default): Use `/workflow:tools:task-generate-tdd`
|
||||
- **Agent Mode** (`--agent`): Use `/workflow:tools:task-generate-tdd --agent`
|
||||
- **Agent Mode** (default): Use `/workflow:tools:task-generate-tdd` (autonomous agent-driven)
|
||||
- **CLI Mode** (`--cli-execute`): Use `/workflow:tools:task-generate-tdd --cli-execute` (Gemini/Qwen)
|
||||
|
||||
## Core Rules
|
||||
|
||||
@@ -129,8 +129,8 @@ TEST_FOCUS: [Test scenarios]
|
||||
|
||||
### Phase 5: TDD Task Generation
|
||||
**Command**:
|
||||
- Manual: `/workflow:tools:task-generate-tdd --session [sessionId]`
|
||||
- Agent: `/workflow:tools:task-generate-tdd --session [sessionId] --agent`
|
||||
- Agent Mode (default): `/workflow:tools:task-generate-tdd --session [sessionId]`
|
||||
- CLI Mode (`--cli-execute`): `/workflow:tools:task-generate-tdd --session [sessionId] --cli-execute`
|
||||
|
||||
**Parse**: Extract feature count, task count (not chain count - tasks now contain internal TDD cycles)
|
||||
|
||||
@@ -373,8 +373,8 @@ Supports action-planning-agent for more autonomous TDD planning with:
|
||||
- `/workflow:tools:test-context-gather` - Phase 3: Analyze existing test patterns and coverage
|
||||
- `/workflow:tools:conflict-resolution` - Phase 4: Detect and resolve conflicts (auto-triggered if conflict_risk ≥ medium)
|
||||
- `/compact` - Phase 4: Memory optimization (if context approaching limits)
|
||||
- `/workflow:tools:task-generate-tdd` - Phase 5: Generate TDD task chains with Red-Green-Refactor cycles
|
||||
- `/workflow:tools:task-generate-tdd --agent` - Phase 5: Generate TDD tasks with agent-driven approach (when `--agent` flag used)
|
||||
- `/workflow:tools:task-generate-tdd` - Phase 5: Generate TDD tasks with agent-driven approach (default, autonomous)
|
||||
- `/workflow:tools:task-generate-tdd --cli-execute` - Phase 5: Generate TDD tasks with CLI tools (Gemini/Qwen, when `--cli-execute` flag used)
|
||||
|
||||
**Follow-up Commands**:
|
||||
- `/workflow:action-plan-verify` - Recommended: Verify TDD plan quality and structure before execution
|
||||
|
||||
@@ -473,9 +473,9 @@ WFS-test-[session]/
|
||||
- `/workflow:tools:test-context-gather` - Phase 2 (Session Mode): Gather source session context
|
||||
- `/workflow:tools:context-gather` - Phase 2 (Prompt Mode): Analyze codebase directly
|
||||
- `/workflow:tools:test-concept-enhanced` - Phase 3: Generate test requirements using Gemini
|
||||
- `/workflow:tools:test-task-generate` - Phase 4: Generate test task JSONs with fix cycle specification
|
||||
- `/workflow:tools:test-task-generate --use-codex` - Phase 4: With automated Codex fixes (when `--use-codex` flag used)
|
||||
- `/workflow:tools:test-task-generate --cli-execute` - Phase 4: With CLI execution mode (when `--cli-execute` flag used)
|
||||
- `/workflow:tools:test-task-generate` - Phase 4: Generate test task JSONs using action-planning-agent (autonomous, default)
|
||||
- `/workflow:tools:test-task-generate --use-codex` - Phase 4: With automated Codex fixes for IMPL-002 (when `--use-codex` flag used)
|
||||
- `/workflow:tools:test-task-generate --cli-execute` - Phase 4: With CLI execution mode for IMPL-001 test generation (when `--cli-execute` flag used)
|
||||
|
||||
**Follow-up Commands**:
|
||||
- `/workflow:status` - Review generated test tasks
|
||||
|
||||
@@ -337,9 +337,9 @@ See `/workflow:tools:test-task-generate` for complete JSON schemas.
|
||||
- `/workflow:session:start` - Phase 1: Create independent test workflow session
|
||||
- `/workflow:tools:test-context-gather` - Phase 2: Analyze test coverage and gather source session context
|
||||
- `/workflow:tools:test-concept-enhanced` - Phase 3: Generate test requirements and strategy using Gemini
|
||||
- `/workflow:tools:test-task-generate` - Phase 4: Generate test generation and execution task JSONs
|
||||
- `/workflow:tools:test-task-generate --use-codex` - Phase 4: With automated Codex fixes (when `--use-codex` flag used)
|
||||
- `/workflow:tools:test-task-generate --cli-execute` - Phase 4: With CLI execution mode (when `--cli-execute` flag used)
|
||||
- `/workflow:tools:test-task-generate` - Phase 4: Generate test task JSONs using action-planning-agent (autonomous, default)
|
||||
- `/workflow:tools:test-task-generate --use-codex` - Phase 4: With automated Codex fixes for IMPL-002 (when `--use-codex` flag used)
|
||||
- `/workflow:tools:test-task-generate --cli-execute` - Phase 4: With CLI execution mode for IMPL-001 test generation (when `--cli-execute` flag used)
|
||||
|
||||
**Follow-up Commands**:
|
||||
- `/workflow:status` - Review generated test tasks
|
||||
|
||||
@@ -24,6 +24,7 @@ Analyzes conflicts between implementation plans and existing codebase, generatin
|
||||
| **Generate Strategies** | Provide 2-4 resolution options per conflict |
|
||||
| **CLI Analysis** | Use Gemini/Qwen (Claude fallback) |
|
||||
| **User Decision** | Present options, never auto-apply |
|
||||
| **Direct Text Output** | Output questions via text directly, NEVER use bash echo/printf |
|
||||
| **Single Output** | `CONFLICT_RESOLUTION.md` with findings |
|
||||
|
||||
## Conflict Categories
|
||||
@@ -462,10 +463,3 @@ If Edit tool fails mid-application:
|
||||
✓ Error handling robust (validate/retry/degrade)
|
||||
```
|
||||
|
||||
## Related Commands
|
||||
| Command | Relationship |
|
||||
|---------|--------------|
|
||||
| `/workflow:tools:context-gather` | Generates input conflict_detection data |
|
||||
| `/workflow:plan` | Auto-triggers this when risk ≥ medium |
|
||||
| `/workflow:tools:task-generate` | Uses resolved conflicts from updated brainstorm files |
|
||||
| `/workflow:brainstorm:artifacts` | Generates guidance-specification.md (modified by this command) |
|
||||
|
||||
@@ -163,155 +163,50 @@ If conflict_risk was medium/high, modifications have been applied to:
|
||||
|
||||
## Phase 2: Document Generation Task
|
||||
|
||||
### Task Decomposition Standards
|
||||
**Core Principle**: Task Merging Over Decomposition
|
||||
- **Merge Rule**: Execute together when possible
|
||||
- **Decompose Only When**:
|
||||
- Excessive workload (>2500 lines or >6 files)
|
||||
- Different tech stacks or domains
|
||||
- Sequential dependency blocking
|
||||
- Parallel execution needed
|
||||
**Agent Configuration Reference**: All task generation rules, quantification requirements, quality standards, and execution details are defined in action-planning-agent.
|
||||
|
||||
**Task Limits**:
|
||||
- **Maximum 10 tasks** (hard limit)
|
||||
- **Function-based**: Complete units (logic + UI + tests + config)
|
||||
- **Hierarchy**: Flat (≤5) | Two-level (6-10) | Re-scope (>10)
|
||||
Refer to: @.claude/agents/action-planning-agent.md for:
|
||||
- Task Decomposition Standards
|
||||
- Quantification Requirements (MANDATORY)
|
||||
- 5-Field Task JSON Schema
|
||||
- IMPL_PLAN.md Structure
|
||||
- TODO_LIST.md Format
|
||||
- Execution Flow & Quality Validation
|
||||
|
||||
### Required Outputs
|
||||
### Required Outputs Summary
|
||||
|
||||
#### 1. Task JSON Files (.task/IMPL-*.json)
|
||||
**Location**: .workflow/{session-id}/.task/
|
||||
**Template**: Read from the template path provided above
|
||||
|
||||
**Task JSON Template Loading**:
|
||||
\`\`\`
|
||||
Read({template_path})
|
||||
\`\`\`
|
||||
|
||||
**Important**:
|
||||
- Read the template from the path provided in context
|
||||
- Use the template structure exactly as written
|
||||
- Replace placeholder variables ({synthesis_spec_path}, {role_analysis_path}, etc.) with actual session-specific paths
|
||||
- Include MCP tool integration in pre_analysis steps
|
||||
- Map artifacts based on task domain (UI → ui-designer, Backend → system-architect)
|
||||
- **Location**: `.workflow/{session-id}/.task/`
|
||||
- **Template**: Read from `{template_path}` (pre-selected by command based on `--cli-execute` flag)
|
||||
- **Schema**: 5-field structure (id, title, status, meta, context, flow_control) with artifacts integration
|
||||
- **Details**: See action-planning-agent.md § Task JSON Generation
|
||||
|
||||
#### 2. IMPL_PLAN.md
|
||||
**Location**: .workflow/{session-id}/IMPL_PLAN.md
|
||||
|
||||
**IMPL_PLAN Template**:
|
||||
\`\`\`
|
||||
$(cat ~/.claude/workflows/cli-templates/prompts/workflow/impl-plan-template.txt)
|
||||
\`\`\`
|
||||
|
||||
**Important**:
|
||||
- Use the template above for IMPL_PLAN.md generation
|
||||
- Replace all {placeholder} variables with actual session-specific values
|
||||
- Populate CCW Workflow Context based on actual phase progression
|
||||
- Extract content from role analyses and context-package.json
|
||||
- List all detected brainstorming artifacts with correct paths (role analyses, guidance-specification.md)
|
||||
- Include conflict resolution status if CONFLICT_RESOLUTION.md exists
|
||||
- **Location**: `.workflow/{session-id}/IMPL_PLAN.md`
|
||||
- **Template**: `~/.claude/workflows/cli-templates/prompts/workflow/impl-plan-template.txt`
|
||||
- **Details**: See action-planning-agent.md § Implementation Plan Creation
|
||||
|
||||
#### 3. TODO_LIST.md
|
||||
**Location**: .workflow/{session-id}/TODO_LIST.md
|
||||
**Structure**:
|
||||
\`\`\`markdown
|
||||
# Tasks: {Session Topic}
|
||||
- **Location**: `.workflow/{session-id}/TODO_LIST.md`
|
||||
- **Format**: Hierarchical task list with status indicators (▸, [ ], [x]) and JSON links
|
||||
- **Details**: See action-planning-agent.md § TODO List Generation
|
||||
|
||||
## Task Progress
|
||||
▸ **IMPL-001**: [Main Task Group] → [📋](./.task/IMPL-001.json)
|
||||
- [ ] **IMPL-001.1**: [Subtask] → [📋](./.task/IMPL-001.1.json)
|
||||
- [ ] **IMPL-001.2**: [Subtask] → [📋](./.task/IMPL-001.2.json)
|
||||
### Agent Execution Summary
|
||||
|
||||
- [ ] **IMPL-002**: [Simple Task] → [📋](./.task/IMPL-002.json)
|
||||
**Key Steps** (Detailed instructions in action-planning-agent.md):
|
||||
1. Load task JSON template from provided path
|
||||
2. Extract and decompose tasks with quantification
|
||||
3. Generate task JSON files enforcing quantification requirements
|
||||
4. Create IMPL_PLAN.md using template
|
||||
5. Generate TODO_LIST.md matching task JSONs
|
||||
6. Update session state
|
||||
|
||||
## Status Legend
|
||||
- \`▸\` = Container task (has subtasks)
|
||||
- \`- [ ]\` = Pending leaf task
|
||||
- \`- [x]\` = Completed leaf task
|
||||
\`\`\`
|
||||
|
||||
### Execution Instructions for Agent
|
||||
|
||||
**Agent Task**: Generate task JSON files, IMPL_PLAN.md, and TODO_LIST.md based on analysis results
|
||||
|
||||
**Note**: The correct task JSON template path has been pre-selected by the command based on the `--cli-execute` flag and is provided in the context as `{template_path}`.
|
||||
|
||||
**Step 1: Load Task JSON Template**
|
||||
- Read template from the provided path: `Read({template_path})`
|
||||
- This template is already the correct one based on execution mode
|
||||
|
||||
**Step 2: Extract and Decompose Tasks**
|
||||
- Parse role analysis.md files for requirements, design specs, and task recommendations
|
||||
- Review synthesis enhancements and clarifications in role analyses
|
||||
- Apply conflict resolution strategies (if CONFLICT_RESOLUTION.md exists)
|
||||
- Apply task merging rules (merge when possible, decompose only when necessary)
|
||||
- Map artifacts to tasks based on domain (UI → ui-designer, Backend → system-architect, Data → data-architect)
|
||||
- Ensure task count ≤10
|
||||
|
||||
**Step 3: Generate Task JSON Files**
|
||||
- Use the template structure from Step 1
|
||||
- Create .task/IMPL-*.json files with proper structure
|
||||
- Replace all {placeholder} variables with actual session paths
|
||||
- Embed artifacts array with brainstorming outputs
|
||||
- Include MCP tool integration in pre_analysis steps
|
||||
|
||||
**Step 4: Create IMPL_PLAN.md**
|
||||
- Use IMPL_PLAN template
|
||||
- Populate all sections with session-specific content
|
||||
- List artifacts with priorities and usage guidelines
|
||||
- Document execution strategy and dependencies
|
||||
|
||||
**Step 5: Generate TODO_LIST.md**
|
||||
- Create task progress checklist matching generated JSONs
|
||||
- Use proper status indicators (▸, [ ], [x])
|
||||
- Link to task JSON files
|
||||
|
||||
**Step 6: Update Session State**
|
||||
- Update workflow-session.json with task count and artifact inventory
|
||||
- Mark session ready for execution
|
||||
|
||||
### MCP Enhancement Examples
|
||||
|
||||
**Code Index Usage**:
|
||||
\`\`\`javascript
|
||||
// Discover authentication-related files
|
||||
bash(find . -name "*auth*" -type f)
|
||||
|
||||
// Search for OAuth patterns
|
||||
bash(rg "oauth|jwt|authentication" -g "*.{ts,js}")
|
||||
|
||||
// Get file summary for key components
|
||||
bash(rg "^(class|function|export|interface)" src/auth/index.ts)
|
||||
\`\`\`
|
||||
|
||||
**Exa Research Usage**:
|
||||
\`\`\`javascript
|
||||
// Get best practices for task implementation
|
||||
mcp__exa__get_code_context_exa(
|
||||
query="TypeScript OAuth2 implementation patterns",
|
||||
tokensNum="dynamic"
|
||||
)
|
||||
|
||||
// Research specific API usage
|
||||
mcp__exa__get_code_context_exa(
|
||||
query="Express.js JWT middleware examples",
|
||||
tokensNum=5000
|
||||
)
|
||||
\`\`\`
|
||||
|
||||
### Quality Validation
|
||||
|
||||
Before completion, verify:
|
||||
- [ ] All task JSON files created in .task/ directory
|
||||
- [ ] Each task JSON has 5 required fields
|
||||
- [ ] Artifact references correctly mapped
|
||||
- [ ] Flow control includes artifact loading steps
|
||||
- [ ] MCP tool integration added where appropriate
|
||||
- [ ] IMPL_PLAN.md follows required structure
|
||||
- [ ] TODO_LIST.md matches task JSONs
|
||||
- [ ] Dependency graph is acyclic
|
||||
- [ ] Task count within limits (≤10)
|
||||
- [ ] Session state updated
|
||||
**Quality Gates** (Full checklist in action-planning-agent.md):
|
||||
- ✓ Quantification requirements enforced (explicit counts, measurable acceptance, exact targets)
|
||||
- ✓ Task count ≤10 (hard limit)
|
||||
- ✓ Artifact references mapped correctly
|
||||
- ✓ MCP tool integration added
|
||||
- ✓ Documents follow template structure
|
||||
|
||||
## Output
|
||||
|
||||
|
||||
@@ -1,14 +1,28 @@
|
||||
---
|
||||
name: task-generate-tdd
|
||||
description: Generate TDD task chains with Red-Green-Refactor dependencies, test-first structure, and cycle validation
|
||||
argument-hint: "--session WFS-session-id [--agent]"
|
||||
allowed-tools: Read(*), Write(*), Bash(gemini:*), TodoWrite(*)
|
||||
description: Autonomous TDD task generation using action-planning-agent with Red-Green-Refactor cycles, test-first structure, and cycle validation
|
||||
argument-hint: "--session WFS-session-id [--cli-execute]"
|
||||
examples:
|
||||
- /workflow:tools:task-generate-tdd --session WFS-auth
|
||||
- /workflow:tools:task-generate-tdd --session WFS-auth --cli-execute
|
||||
---
|
||||
|
||||
# TDD Task Generation Command
|
||||
# Autonomous TDD Task Generation Command
|
||||
|
||||
## Overview
|
||||
Generate TDD-specific tasks from analysis results with complete Red-Green-Refactor cycles contained within each task.
|
||||
Autonomous TDD task JSON and IMPL_PLAN.md generation using action-planning-agent with two-phase execution: discovery and document generation. Supports both agent-driven execution (default) and CLI tool execution modes. Generates complete Red-Green-Refactor cycles contained within each task.
|
||||
|
||||
## Core Philosophy
|
||||
- **Agent-Driven**: Delegate execution to action-planning-agent for autonomous operation
|
||||
- **Two-Phase Flow**: Discovery (context gathering) → Output (document generation)
|
||||
- **Memory-First**: Reuse loaded documents from conversation memory
|
||||
- **MCP-Enhanced**: Use MCP tools for advanced code analysis and research
|
||||
- **Pre-Selected Templates**: Command selects correct TDD template based on `--cli-execute` flag **before** invoking agent
|
||||
- **Agent Simplicity**: Agent receives pre-selected template and focuses only on content generation
|
||||
- **Path Clarity**: All `focus_paths` prefer absolute paths (e.g., `D:\\project\\src\\module`), or clear relative paths from project root (e.g., `./src/module`)
|
||||
- **TDD-First**: Every feature starts with a failing test (Red phase)
|
||||
- **Feature-Complete Tasks**: Each task contains complete Red-Green-Refactor cycle
|
||||
- **Quantification-Enforced**: All test cases, coverage requirements, and implementation scope MUST include explicit counts and enumerations
|
||||
|
||||
## Task Strategy & Philosophy
|
||||
|
||||
@@ -44,359 +58,329 @@ Generate TDD-specific tasks from analysis results with complete Red-Green-Refact
|
||||
- **Current approach**: 1 feature = 1 task (IMPL-N with internal Red-Green-Refactor phases)
|
||||
- **Complex features**: 1 container (IMPL-N) + subtasks (IMPL-N.M) when necessary
|
||||
|
||||
### Core Principles
|
||||
- **TDD-First**: Every feature starts with a failing test (Red phase)
|
||||
- **Feature-Complete Tasks**: Each task contains complete Red-Green-Refactor cycle
|
||||
- **Phase-Explicit**: Internal phases clearly marked in flow_control.implementation_approach
|
||||
- **Task Merging**: Prefer single task per feature over decomposition
|
||||
- **Path Clarity**: All `focus_paths` prefer absolute paths (e.g., `D:\\project\\src\\module`), or clear relative paths from project root (e.g., `./src/module`)
|
||||
- **Artifact-Aware**: Integrates brainstorming outputs
|
||||
- **Memory-First**: Reuse loaded documents from memory
|
||||
- **Context-Aware**: Analyzes existing codebase and test patterns
|
||||
- **Iterative Green Phase**: Auto-diagnose and fix test failures with Gemini + optional Codex
|
||||
- **Safety-First**: Auto-revert on max iterations to prevent broken state
|
||||
|
||||
## Core Responsibilities
|
||||
- Parse analysis results and identify testable features
|
||||
- Generate feature-complete tasks with internal TDD cycles (1 task per simple feature)
|
||||
- Apply task merging strategy by default, create subtasks only when complexity requires
|
||||
- Generate IMPL_PLAN.md with TDD Implementation Tasks section
|
||||
- Generate TODO_LIST.md with internal TDD phase indicators
|
||||
- Update session state for TDD execution with task count compliance
|
||||
|
||||
## Execution Lifecycle
|
||||
|
||||
### Phase 1: Input Validation & Discovery
|
||||
**Memory-First Rule**: Skip file loading if documents already in conversation memory
|
||||
### Phase 1: Discovery & Context Loading
|
||||
**⚡ Memory-First Rule**: Skip file loading if documents already in conversation memory
|
||||
|
||||
1. **Session Validation**
|
||||
- If session metadata in memory → Skip loading
|
||||
- Else: Load `.workflow/{session_id}/workflow-session.json`
|
||||
|
||||
2. **Conflict Resolution Check** (NEW - Priority Input)
|
||||
- If CONFLICT_RESOLUTION.md exists → Load selected strategies
|
||||
- Else: Skip to brainstorming artifacts
|
||||
- Path: `.workflow/{session_id}/.process/CONFLICT_RESOLUTION.md`
|
||||
|
||||
3. **Artifact Discovery**
|
||||
- If artifact inventory in memory → Skip scanning
|
||||
- Else: Scan `.workflow/{session_id}/.brainstorming/` directory
|
||||
- Detect: role analysis documents, guidance-specification.md, role analyses
|
||||
|
||||
4. **Context Package Loading**
|
||||
- Load `.workflow/{session_id}/.process/context-package.json`
|
||||
- Load `.workflow/{session_id}/.process/test-context-package.json` (if exists)
|
||||
|
||||
### Phase 2: TDD Task JSON Generation
|
||||
|
||||
**Input Sources** (priority order):
|
||||
1. **Conflict Resolution** (if exists): `.process/CONFLICT_RESOLUTION.md` - Selected resolution strategies
|
||||
2. **Brainstorming Artifacts**: Role analysis documents (system-architect, product-owner, etc.)
|
||||
3. **Context Package**: `.process/context-package.json` - Project structure and requirements
|
||||
4. **Test Context**: `.process/test-context-package.json` - Existing test patterns
|
||||
|
||||
**TDD Task Structure includes**:
|
||||
- Feature list with testable requirements
|
||||
- Test cases for Red phase
|
||||
- Implementation requirements for Green phase (with test-fix cycle)
|
||||
- Refactoring opportunities
|
||||
- Task dependencies and execution order
|
||||
- Conflict resolution decisions (if applicable)
|
||||
|
||||
### Phase 3: Task JSON & IMPL_PLAN.md Generation
|
||||
|
||||
#### Task Structure (Feature-Complete with Internal TDD)
|
||||
For each feature, generate task(s) with ID format:
|
||||
- **IMPL-N** - Single task containing complete TDD cycle (Red-Green-Refactor)
|
||||
- **IMPL-N.M** - Sub-tasks only when feature is complex (>2500 lines or technical blocking)
|
||||
|
||||
**Task Dependency Rules**:
|
||||
- **Sequential features**: IMPL-2 depends_on ["IMPL-1"] if Feature 2 needs Feature 1
|
||||
- **Independent features**: No dependencies, can execute in parallel
|
||||
- **Complex features**: IMPL-N.2 depends_on ["IMPL-N.1"] for subtask ordering
|
||||
|
||||
**Agent Assignment**:
|
||||
- **All IMPL tasks** → `@code-developer` (handles full TDD cycle)
|
||||
- Agent executes Red, Green, Refactor phases sequentially within task
|
||||
|
||||
**Meta Fields**:
|
||||
- `meta.type`: "feature" (TDD-driven feature implementation)
|
||||
- `meta.agent`: "@code-developer"
|
||||
- `meta.tdd_workflow`: true (enables TDD-specific flow)
|
||||
- `meta.tdd_phase`: Not used (phases are in flow_control.implementation_approach)
|
||||
- `meta.max_iterations`: 3 (for Green phase test-fix cycle)
|
||||
- `meta.use_codex`: false (manual fixes by default)
|
||||
|
||||
#### Task JSON Structure Reference
|
||||
|
||||
**Simple Feature Task (IMPL-N.json)** - Recommended for most features:
|
||||
```json
|
||||
**Agent Context Package**:
|
||||
```javascript
|
||||
{
|
||||
"id": "IMPL-N", // Task identifier
|
||||
"title": "Feature description with TDD", // Human-readable title
|
||||
"status": "pending", // pending | in_progress | completed | container
|
||||
"context_package_path": ".workflow/{session-id}/.process/context-package.json", // Path to smart context package
|
||||
"meta": {
|
||||
"type": "feature", // Task type
|
||||
"agent": "@code-developer", // Assigned agent
|
||||
"tdd_workflow": true, // REQUIRED: Enables TDD flow
|
||||
"max_iterations": 3, // Green phase test-fix cycle limit
|
||||
"use_codex": false // false=manual fixes, true=Codex automated fixes
|
||||
"session_id": "WFS-[session-id]",
|
||||
"execution_mode": "agent-mode" | "cli-execute-mode", // Determined by flag
|
||||
"task_json_template_path": "~/.claude/workflows/cli-templates/prompts/workflow/task-json-agent-mode.txt"
|
||||
| "~/.claude/workflows/cli-templates/prompts/workflow/task-json-cli-mode.txt",
|
||||
// Path selected by command based on --cli-execute flag, agent reads it
|
||||
"workflow_type": "tdd",
|
||||
"session_metadata": {
|
||||
// If in memory: use cached content
|
||||
// Else: Load from .workflow/{session-id}/workflow-session.json
|
||||
},
|
||||
"context": {
|
||||
"requirements": [ // Feature requirements with TDD phases
|
||||
"Feature description",
|
||||
"Red: Test scenarios to write",
|
||||
"Green: Implementation approach with test-fix cycle",
|
||||
"Refactor: Code quality improvements"
|
||||
],
|
||||
"tdd_cycles": [ // OPTIONAL: Detailed test cycles
|
||||
"brainstorm_artifacts": {
|
||||
// Loaded from context-package.json → brainstorm_artifacts section
|
||||
"role_analyses": [
|
||||
{
|
||||
"cycle": 1,
|
||||
"feature": "Specific functionality",
|
||||
"test_focus": "What to test",
|
||||
"expected_failure": "Why test should fail initially"
|
||||
"role": "system-architect",
|
||||
"files": [{"path": "...", "type": "primary|supplementary"}]
|
||||
}
|
||||
],
|
||||
"focus_paths": ["D:\\project\\src\\path", "./tests/path"], // Absolute or clear relative paths from project root
|
||||
"acceptance": [ // Success criteria
|
||||
"All tests pass (Red → Green)",
|
||||
"Code refactored (Refactor complete)",
|
||||
"Test coverage ≥80%"
|
||||
],
|
||||
"depends_on": [] // Task dependencies
|
||||
"guidance_specification": {"path": "...", "exists": true},
|
||||
"synthesis_output": {"path": "...", "exists": true},
|
||||
"conflict_resolution": {"path": "...", "exists": true} // if conflict_risk >= medium
|
||||
},
|
||||
"flow_control": {
|
||||
"pre_analysis": [ // OPTIONAL: Pre-execution checks
|
||||
{
|
||||
"step": "check_test_framework",
|
||||
"action": "Verify test framework",
|
||||
"command": "bash(npm list jest)",
|
||||
"output_to": "test_framework_info",
|
||||
"on_error": "warn"
|
||||
}
|
||||
],
|
||||
"implementation_approach": [ // REQUIRED: 3 TDD phases
|
||||
{
|
||||
"step": 1,
|
||||
"title": "RED Phase: Write failing tests",
|
||||
"tdd_phase": "red", // REQUIRED: Phase identifier
|
||||
"description": "Write comprehensive failing tests",
|
||||
"modification_points": ["Files/changes to make"],
|
||||
"logic_flow": ["Step-by-step process"],
|
||||
"acceptance": ["Phase success criteria"],
|
||||
"depends_on": [],
|
||||
"output": "failing_tests"
|
||||
},
|
||||
{
|
||||
"step": 2,
|
||||
"title": "GREEN Phase: Implement to pass tests",
|
||||
"tdd_phase": "green", // REQUIRED: Phase identifier
|
||||
"description": "Minimal implementation with test-fix cycle",
|
||||
"modification_points": ["Implementation files"],
|
||||
"logic_flow": [
|
||||
"Implement minimal code",
|
||||
"Run tests",
|
||||
"If fail → Enter iteration loop (max 3):",
|
||||
" 1. Extract failure messages",
|
||||
" 2. Gemini bug-fix diagnosis",
|
||||
" 3. Apply fixes",
|
||||
" 4. Rerun tests",
|
||||
"If max_iterations → Auto-revert"
|
||||
],
|
||||
"acceptance": ["All tests pass"],
|
||||
"command": "bash(npm test -- tests/path/)",
|
||||
"depends_on": [1],
|
||||
"output": "passing_implementation"
|
||||
},
|
||||
{
|
||||
"step": 3,
|
||||
"title": "REFACTOR Phase: Improve code quality",
|
||||
"tdd_phase": "refactor", // REQUIRED: Phase identifier
|
||||
"description": "Refactor while keeping tests green",
|
||||
"modification_points": ["Quality improvements"],
|
||||
"logic_flow": ["Incremental refactoring with test verification"],
|
||||
"acceptance": ["Tests still pass", "Code quality improved"],
|
||||
"command": "bash(npm run lint && npm test)",
|
||||
"depends_on": [2],
|
||||
"output": "refactored_implementation"
|
||||
}
|
||||
],
|
||||
"post_completion": [ // OPTIONAL: Final verification
|
||||
{
|
||||
"step": "verify_full_tdd_cycle",
|
||||
"action": "Confirm complete TDD cycle",
|
||||
"command": "bash(npm test && echo 'TDD complete')",
|
||||
"output_to": "final_validation",
|
||||
"on_error": "fail"
|
||||
}
|
||||
],
|
||||
"error_handling": { // OPTIONAL: Error recovery
|
||||
"green_phase_max_iterations": {
|
||||
"action": "revert_all_changes",
|
||||
"commands": ["bash(git reset --hard HEAD)"],
|
||||
"report": "Generate failure report"
|
||||
}
|
||||
}
|
||||
"context_package_path": ".workflow/{session-id}/.process/context-package.json",
|
||||
"context_package": {
|
||||
// If in memory: use cached content
|
||||
// Else: Load from .workflow/{session-id}/.process/context-package.json
|
||||
},
|
||||
"test_context_package_path": ".workflow/{session-id}/.process/test-context-package.json",
|
||||
"test_context_package": {
|
||||
// Existing test patterns and coverage analysis
|
||||
},
|
||||
"mcp_capabilities": {
|
||||
"code_index": true,
|
||||
"exa_code": true,
|
||||
"exa_web": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Key JSON Fields Summary**:
|
||||
- `meta.tdd_workflow`: Must be `true`
|
||||
- `meta.max_iterations`: Green phase fix cycle limit (default: 3)
|
||||
- `meta.use_codex`: Automated fixes (false=manual, true=Codex)
|
||||
- `flow_control.implementation_approach`: Exactly 3 steps with `tdd_phase`: "red", "green", "refactor"
|
||||
- `context.tdd_cycles`: Optional detailed test cycle specifications
|
||||
- `context.parent`: Required for subtasks (IMPL-N.M)
|
||||
**Discovery Actions**:
|
||||
1. **Load Session Context** (if not in memory)
|
||||
```javascript
|
||||
if (!memory.has("workflow-session.json")) {
|
||||
Read(.workflow/{session-id}/workflow-session.json)
|
||||
}
|
||||
```
|
||||
|
||||
#### IMPL_PLAN.md Structure
|
||||
2. **Load Context Package** (if not in memory)
|
||||
```javascript
|
||||
if (!memory.has("context-package.json")) {
|
||||
Read(.workflow/{session-id}/.process/context-package.json)
|
||||
}
|
||||
```
|
||||
|
||||
Generate IMPL_PLAN.md with 8-section structure:
|
||||
3. **Load Test Context Package** (if not in memory)
|
||||
```javascript
|
||||
if (!memory.has("test-context-package.json")) {
|
||||
Read(.workflow/{session-id}/.process/test-context-package.json)
|
||||
}
|
||||
```
|
||||
|
||||
**Frontmatter** (required fields):
|
||||
```yaml
|
||||
---
|
||||
identifier: WFS-{session-id}
|
||||
source: "User requirements" | "File: path"
|
||||
conflict_resolution: .workflow/{session-id}/.process/CONFLICT_RESOLUTION.md # if exists
|
||||
context_package: .workflow/{session-id}/.process/context-package.json
|
||||
context_package_path: .workflow/{session-id}/.process/context-package.json
|
||||
test_context: .workflow/{session-id}/.process/test-context-package.json # if exists
|
||||
workflow_type: "tdd"
|
||||
verification_history:
|
||||
conflict_resolution: "executed | skipped" # based on conflict_risk
|
||||
action_plan_verify: "pending"
|
||||
phase_progression: "brainstorm → context → test_context → conflict_resolution → tdd_planning"
|
||||
feature_count: N
|
||||
task_count: N # ≤10 total
|
||||
task_breakdown:
|
||||
simple_features: K
|
||||
complex_features: L
|
||||
total_subtasks: M
|
||||
tdd_workflow: true
|
||||
---
|
||||
4. **Extract & Load Role Analyses** (from context-package.json)
|
||||
```javascript
|
||||
// Extract role analysis paths from context package
|
||||
const roleAnalysisPaths = contextPackage.brainstorm_artifacts.role_analyses
|
||||
.flatMap(role => role.files.map(f => f.path));
|
||||
|
||||
// Load each role analysis file
|
||||
roleAnalysisPaths.forEach(path => Read(path));
|
||||
```
|
||||
|
||||
5. **Load Conflict Resolution** (from context-package.json, if exists)
|
||||
```javascript
|
||||
if (contextPackage.brainstorm_artifacts.conflict_resolution?.exists) {
|
||||
Read(contextPackage.brainstorm_artifacts.conflict_resolution.path)
|
||||
}
|
||||
```
|
||||
|
||||
6. **Code Analysis with Native Tools** (optional - enhance understanding)
|
||||
```bash
|
||||
# Find relevant test files and patterns
|
||||
find . -name "*test*" -type f
|
||||
rg "describe|it\(|test\(" -g "*.ts"
|
||||
```
|
||||
|
||||
7. **MCP External Research** (optional - gather TDD best practices)
|
||||
```javascript
|
||||
// Get external TDD examples and patterns
|
||||
mcp__exa__get_code_context_exa(
|
||||
query="TypeScript TDD best practices Red-Green-Refactor",
|
||||
tokensNum="dynamic"
|
||||
)
|
||||
```
|
||||
|
||||
### Phase 2: Agent Execution (Document Generation)
|
||||
|
||||
**Pre-Agent Template Selection** (Command decides path before invoking agent):
|
||||
```javascript
|
||||
// Command checks flag and selects template PATH (not content)
|
||||
const templatePath = hasCliExecuteFlag
|
||||
? "~/.claude/workflows/cli-templates/prompts/workflow/task-json-cli-mode.txt"
|
||||
: "~/.claude/workflows/cli-templates/prompts/workflow/task-json-agent-mode.txt";
|
||||
```
|
||||
|
||||
**8 Sections Structure**:
|
||||
**Agent Invocation**:
|
||||
```javascript
|
||||
Task(
|
||||
subagent_type="action-planning-agent",
|
||||
description="Generate TDD task JSON and implementation plan",
|
||||
prompt=`
|
||||
## Execution Context
|
||||
|
||||
```markdown
|
||||
# Implementation Plan: {Project Title}
|
||||
**Session ID**: WFS-{session-id}
|
||||
**Workflow Type**: TDD
|
||||
**Execution Mode**: {agent-mode | cli-execute-mode}
|
||||
**Task JSON Template Path**: {template_path}
|
||||
|
||||
## 1. Summary
|
||||
- Core requirements and objectives (2-3 paragraphs)
|
||||
- TDD-specific technical approach
|
||||
## Phase 1: Discovery Results (Provided Context)
|
||||
|
||||
## 2. Context Analysis
|
||||
- CCW Workflow Context (Phase progression, Quality gates)
|
||||
- Context Package Summary (Focus paths, Test context)
|
||||
- Project Profile (Type, Scale, Tech Stack, Timeline)
|
||||
- Module Structure (Directory tree)
|
||||
- Dependencies (Primary, Testing, Development)
|
||||
- Patterns & Conventions
|
||||
### Session Metadata
|
||||
{session_metadata_content}
|
||||
|
||||
## 3. Brainstorming Artifacts Reference
|
||||
- Artifact Usage Strategy
|
||||
- CONFLICT_RESOLUTION.md (if exists - selected resolution strategies)
|
||||
- role analysis documents (primary reference)
|
||||
- test-context-package.json (test patterns)
|
||||
- context-package.json (smart context)
|
||||
- Artifact Priority in Development
|
||||
### Role Analyses (Enhanced by Synthesis)
|
||||
{role_analyses_content}
|
||||
- Includes requirements, design specs, enhancements, and clarifications from synthesis phase
|
||||
|
||||
## 4. Implementation Strategy
|
||||
- Execution Strategy (TDD Cycles: Red-Green-Refactor)
|
||||
- Architectural Approach
|
||||
- Key Dependencies (Task dependency graph)
|
||||
- Testing Strategy (Coverage targets, Quality gates)
|
||||
### Artifacts Inventory
|
||||
- **Guidance Specification**: {guidance_spec_path}
|
||||
- **Role Analyses**: {role_analyses_list}
|
||||
|
||||
## 5. TDD Implementation Tasks
|
||||
- Feature-by-Feature TDD Tasks
|
||||
- Each task: IMPL-N with internal Red → Green → Refactor
|
||||
- Dependencies and complexity metrics
|
||||
- Complex Feature Examples (when subtasks needed)
|
||||
- TDD Task Breakdown Summary
|
||||
### Context Package
|
||||
{context_package_summary}
|
||||
- Includes conflict_risk assessment
|
||||
|
||||
## 6. Implementation Plan (Detailed Phased Breakdown)
|
||||
- Execution Strategy (feature-by-feature sequential)
|
||||
- Phase breakdown (Phase 1, Phase 2, etc.)
|
||||
- Resource Requirements (Team, Dependencies, Infrastructure)
|
||||
### Test Context Package
|
||||
{test_context_package_summary}
|
||||
- Existing test patterns, framework config, coverage analysis
|
||||
|
||||
## 7. Risk Assessment & Mitigation
|
||||
- Risk table (Risk, Impact, Probability, Mitigation, Owner)
|
||||
- Critical Risks (TDD-specific)
|
||||
- Monitoring Strategy
|
||||
### Conflict Resolution (Conditional)
|
||||
If conflict_risk was medium/high, modifications have been applied to:
|
||||
- **guidance-specification.md**: Design decisions updated to resolve conflicts
|
||||
- **Role analyses (*.md)**: Recommendations adjusted for compatibility
|
||||
- **context-package.json**: Marked as "resolved" with conflict IDs
|
||||
- NO separate CONFLICT_RESOLUTION.md file (conflicts resolved in-place)
|
||||
|
||||
## 8. Success Criteria
|
||||
- Functional Completeness
|
||||
- Technical Quality (Test coverage ≥80%)
|
||||
- Operational Readiness
|
||||
- TDD Compliance
|
||||
### MCP Analysis Results (Optional)
|
||||
**Code Structure**: {mcp_code_index_results}
|
||||
**External Research**: {mcp_exa_research_results}
|
||||
|
||||
## Phase 2: TDD Document Generation Task
|
||||
|
||||
**Agent Configuration Reference**: All TDD task generation rules, quantification requirements, Red-Green-Refactor cycle structure, quality standards, and execution details are defined in action-planning-agent.
|
||||
|
||||
Refer to: @.claude/agents/action-planning-agent.md for:
|
||||
- TDD Task Decomposition Standards
|
||||
- Red-Green-Refactor Cycle Requirements
|
||||
- Quantification Requirements (MANDATORY)
|
||||
- 5-Field Task JSON Schema
|
||||
- IMPL_PLAN.md Structure (TDD variant)
|
||||
- TODO_LIST.md Format
|
||||
- TDD Execution Flow & Quality Validation
|
||||
|
||||
### TDD-Specific Requirements Summary
|
||||
|
||||
#### Task Structure Philosophy
|
||||
- **1 feature = 1 task** containing complete TDD cycle internally
|
||||
- Each task executes Red-Green-Refactor phases sequentially
|
||||
- Task count = Feature count (typically 5 features = 5 tasks)
|
||||
- Subtasks only when complexity >2500 lines or >6 files per cycle
|
||||
- **Maximum 10 tasks** (hard limit for TDD workflows)
|
||||
|
||||
#### TDD Cycle Mapping
|
||||
- **Simple features**: IMPL-N with internal Red-Green-Refactor phases
|
||||
- **Complex features**: IMPL-N (container) + IMPL-N.M (subtasks)
|
||||
- Each cycle includes: test_count, test_cases array, implementation_scope, expected_coverage
|
||||
|
||||
#### Required Outputs Summary
|
||||
|
||||
##### 1. TDD Task JSON Files (.task/IMPL-*.json)
|
||||
- **Location**: `.workflow/{session-id}/.task/`
|
||||
- **Template**: Read from `{template_path}` (pre-selected by command based on `--cli-execute` flag)
|
||||
- **Schema**: 5-field structure with TDD-specific metadata
|
||||
- `meta.tdd_workflow`: true (REQUIRED)
|
||||
- `meta.max_iterations`: 3 (Green phase test-fix cycle limit)
|
||||
- `meta.use_codex`: false (manual fixes by default)
|
||||
- `context.tdd_cycles`: Array with quantified test cases and coverage
|
||||
- `flow_control.implementation_approach`: Exactly 3 steps with `tdd_phase` field
|
||||
1. Red Phase (`tdd_phase: "red"`): Write failing tests
|
||||
2. Green Phase (`tdd_phase: "green"`): Implement to pass tests
|
||||
3. Refactor Phase (`tdd_phase: "refactor"`): Improve code quality
|
||||
- **Details**: See action-planning-agent.md § TDD Task JSON Generation
|
||||
|
||||
##### 2. IMPL_PLAN.md (TDD Variant)
|
||||
- **Location**: `.workflow/{session-id}/IMPL_PLAN.md`
|
||||
- **Template**: `~/.claude/workflows/cli-templates/prompts/workflow/impl-plan-template.txt`
|
||||
- **TDD-Specific Frontmatter**: workflow_type="tdd", tdd_workflow=true, feature_count, task_breakdown
|
||||
- **TDD Implementation Tasks Section**: Feature-by-feature with internal Red-Green-Refactor cycles
|
||||
- **Details**: See action-planning-agent.md § TDD Implementation Plan Creation
|
||||
|
||||
##### 3. TODO_LIST.md
|
||||
- **Location**: `.workflow/{session-id}/TODO_LIST.md`
|
||||
- **Format**: Hierarchical task list with internal TDD phase indicators (Red → Green → Refactor)
|
||||
- **Status**: ▸ (container), [ ] (pending), [x] (completed)
|
||||
- **Details**: See action-planning-agent.md § TODO List Generation
|
||||
|
||||
### Quantification Requirements (MANDATORY)
|
||||
|
||||
**Core Rules**:
|
||||
1. **Explicit Test Case Counts**: Red phase specifies exact number with enumerated list
|
||||
2. **Quantified Coverage**: Acceptance includes measurable percentage (e.g., ">=85%")
|
||||
3. **Detailed Implementation Scope**: Green phase enumerates files, functions, line counts
|
||||
4. **Enumerated Refactoring Targets**: Refactor phase lists specific improvements with counts
|
||||
|
||||
**TDD Phase Formats**:
|
||||
- **Red Phase**: "Write N test cases: [test1, test2, ...]"
|
||||
- **Green Phase**: "Implement N functions in file lines X-Y: [func1() X1-Y1, func2() X2-Y2, ...]"
|
||||
- **Refactor Phase**: "Apply N refactorings: [improvement1 (details), improvement2 (details), ...]"
|
||||
- **Acceptance**: "All N tests pass with >=X% coverage: verify by [test command]"
|
||||
|
||||
**Validation Checklist**:
|
||||
- [ ] Every Red phase specifies exact test case count with enumerated list
|
||||
- [ ] Every Green phase enumerates files, functions, and estimated line counts
|
||||
- [ ] Every Refactor phase lists specific improvements with counts
|
||||
- [ ] Every acceptance criterion includes measurable coverage percentage
|
||||
- [ ] tdd_cycles array contains test_count and test_cases for each cycle
|
||||
- [ ] No vague language ("comprehensive", "complete", "thorough")
|
||||
|
||||
### Agent Execution Summary
|
||||
|
||||
**Key Steps** (Detailed instructions in action-planning-agent.md):
|
||||
1. Load task JSON template from provided path
|
||||
2. Extract and decompose features with TDD cycles
|
||||
3. Generate TDD task JSON files enforcing quantification requirements
|
||||
4. Create IMPL_PLAN.md using TDD template variant
|
||||
5. Generate TODO_LIST.md with TDD phase indicators
|
||||
6. Update session state with TDD metadata
|
||||
|
||||
**Quality Gates** (Full checklist in action-planning-agent.md):
|
||||
- ✓ Quantification requirements enforced (explicit counts, measurable acceptance, exact targets)
|
||||
- ✓ Task count ≤10 (hard limit)
|
||||
- ✓ Each task has meta.tdd_workflow: true
|
||||
- ✓ Each task has exactly 3 implementation steps with tdd_phase field
|
||||
- ✓ Green phase includes test-fix cycle logic
|
||||
- ✓ Artifact references mapped correctly
|
||||
- ✓ MCP tool integration added
|
||||
- ✓ Documents follow TDD template structure
|
||||
|
||||
## Output
|
||||
|
||||
Generate all three documents and report completion status:
|
||||
- TDD task JSON files created: N files (IMPL-*.json)
|
||||
- TDD cycles configured: N cycles with quantified test cases
|
||||
- Artifacts integrated: synthesis-spec, guidance-specification, N role analyses
|
||||
- Test context integrated: existing patterns and coverage
|
||||
- MCP enhancements: code-index, exa-research
|
||||
- Session ready for TDD execution: /workflow:execute
|
||||
`
|
||||
)
|
||||
```
|
||||
|
||||
### Phase 4: TODO_LIST.md Generation
|
||||
### Agent Context Passing
|
||||
|
||||
Generate task list with internal TDD phase indicators:
|
||||
**Memory-Aware Context Assembly**:
|
||||
```javascript
|
||||
// Assemble context package for agent
|
||||
const agentContext = {
|
||||
session_id: "WFS-[id]",
|
||||
workflow_type: "tdd",
|
||||
|
||||
**For Simple Features (1 task per feature)**:
|
||||
```markdown
|
||||
## TDD Implementation Tasks
|
||||
// Use memory if available, else load
|
||||
session_metadata: memory.has("workflow-session.json")
|
||||
? memory.get("workflow-session.json")
|
||||
: Read(.workflow/WFS-[id]/workflow-session.json),
|
||||
|
||||
### Feature 1: {Feature Name}
|
||||
- [ ] **IMPL-1**: Implement {feature} with TDD → [Task](./.task/IMPL-1.json)
|
||||
- Internal phases: Red → Green → Refactor
|
||||
- Dependencies: None
|
||||
context_package_path: ".workflow/WFS-[id]/.process/context-package.json",
|
||||
|
||||
### Feature 2: {Feature Name}
|
||||
- [ ] **IMPL-2**: Implement {feature} with TDD → [Task](./.task/IMPL-2.json)
|
||||
- Internal phases: Red → Green → Refactor
|
||||
- Dependencies: IMPL-1
|
||||
```
|
||||
context_package: memory.has("context-package.json")
|
||||
? memory.get("context-package.json")
|
||||
: Read(".workflow/WFS-[id]/.process/context-package.json"),
|
||||
|
||||
**For Complex Features (with subtasks)**:
|
||||
```markdown
|
||||
### Feature 3: {Complex Feature Name}
|
||||
▸ **IMPL-3**: Implement {complex feature} with TDD → [Task](./.task/IMPL-3.json)
|
||||
- [ ] **IMPL-3.1**: {Sub-feature A} with TDD → [Task](./.task/IMPL-3.1.json)
|
||||
- Internal phases: Red → Green → Refactor
|
||||
- [ ] **IMPL-3.2**: {Sub-feature B} with TDD → [Task](./.task/IMPL-3.2.json)
|
||||
- Internal phases: Red → Green → Refactor
|
||||
- Dependencies: IMPL-3.1
|
||||
```
|
||||
test_context_package_path: ".workflow/WFS-[id]/.process/test-context-package.json",
|
||||
|
||||
**Status Legend**:
|
||||
```markdown
|
||||
## Status Legend
|
||||
- ▸ = Container task (has subtasks)
|
||||
- [ ] = Pending task
|
||||
- [x] = Completed task
|
||||
- Red = Write failing tests
|
||||
- Green = Implement to pass tests (with test-fix cycle)
|
||||
- Refactor = Improve code quality
|
||||
```
|
||||
test_context_package: memory.has("test-context-package.json")
|
||||
? memory.get("test-context-package.json")
|
||||
: Read(".workflow/WFS-[id]/.process/test-context-package.json"),
|
||||
|
||||
### Phase 5: Session State Update
|
||||
// Extract brainstorm artifacts from context package
|
||||
brainstorm_artifacts: extractBrainstormArtifacts(context_package),
|
||||
|
||||
Update workflow-session.json with TDD metadata:
|
||||
```json
|
||||
{
|
||||
"workflow_type": "tdd",
|
||||
"feature_count": 5,
|
||||
"task_count": 5,
|
||||
"task_breakdown": {
|
||||
"simple_features": 4,
|
||||
"complex_features": 1,
|
||||
"total_subtasks": 2
|
||||
},
|
||||
"tdd_workflow": true,
|
||||
"task_limit_compliance": true
|
||||
// Load role analyses using paths from context package
|
||||
role_analyses: brainstorm_artifacts.role_analyses
|
||||
.flatMap(role => role.files)
|
||||
.map(file => Read(file.path)),
|
||||
|
||||
// Load conflict resolution if exists (from context package)
|
||||
conflict_resolution: brainstorm_artifacts.conflict_resolution?.exists
|
||||
? Read(brainstorm_artifacts.conflict_resolution.path)
|
||||
: null,
|
||||
|
||||
// Optional MCP enhancements
|
||||
mcp_analysis: executeMcpDiscovery()
|
||||
}
|
||||
```
|
||||
|
||||
**Task Count Calculation**:
|
||||
- **Simple features**: 1 task each (IMPL-N with internal TDD cycle)
|
||||
- **Complex features**: 1 container + M subtasks (IMPL-N + IMPL-N.M)
|
||||
- **Total**: Simple feature count + Complex feature subtask count
|
||||
- **Example**: 4 simple + 1 complex (with 2 subtasks) = 6 total tasks (not 15)
|
||||
## TDD Task Structure Reference
|
||||
|
||||
This section provides quick reference for TDD task JSON structure. For complete implementation details, see the agent invocation prompt in Phase 2 above.
|
||||
|
||||
**Quick Reference**:
|
||||
- Each TDD task contains complete Red-Green-Refactor cycle
|
||||
- Task ID format: `IMPL-N` (simple) or `IMPL-N.M` (complex subtasks)
|
||||
- Required metadata: `meta.tdd_workflow: true`, `meta.max_iterations: 3`
|
||||
- Flow control: Exactly 3 steps with `tdd_phase` field (red, green, refactor)
|
||||
- Context: `tdd_cycles` array with quantified test cases and coverage
|
||||
- See Phase 2 agent prompt for full schema and requirements
|
||||
|
||||
## Output Files Structure
|
||||
```
|
||||
@@ -465,52 +449,30 @@ Update workflow-session.json with TDD metadata:
|
||||
|
||||
## Integration & Usage
|
||||
|
||||
### Command Chain
|
||||
- **Called By**: `/workflow:tdd-plan` (Phase 4)
|
||||
- **Calls**: Gemini CLI for TDD breakdown
|
||||
- **Followed By**: `/workflow:execute`, `/workflow:tdd-verify`
|
||||
**Command Chain**:
|
||||
- Called by: `/workflow:tdd-plan` (Phase 4)
|
||||
- Invokes: `action-planning-agent` for autonomous task generation
|
||||
- Followed by: `/workflow:execute`, `/workflow:tdd-verify`
|
||||
|
||||
### Basic Usage
|
||||
**Basic Usage**:
|
||||
```bash
|
||||
# Manual mode (default)
|
||||
# Agent mode (default, autonomous execution)
|
||||
/workflow:tools:task-generate-tdd --session WFS-auth
|
||||
|
||||
# Agent mode (autonomous task generation)
|
||||
/workflow:tools:task-generate-tdd --session WFS-auth --agent
|
||||
# CLI tool mode (use Gemini/Qwen for generation)
|
||||
/workflow:tools:task-generate-tdd --session WFS-auth --cli-execute
|
||||
```
|
||||
|
||||
### Expected Output
|
||||
```
|
||||
TDD task generation complete for session: WFS-auth
|
||||
**Execution Modes**:
|
||||
- **Agent mode** (default): Uses `action-planning-agent` with agent-mode task template
|
||||
- **CLI mode** (`--cli-execute`): Uses Gemini/Qwen with cli-mode task template
|
||||
|
||||
Features analyzed: 5
|
||||
Total tasks: 5 (1 task per feature with internal TDD cycles)
|
||||
|
||||
Task breakdown:
|
||||
- Simple features: 4 tasks (IMPL-1 to IMPL-4)
|
||||
- Complex features: 1 task with 2 subtasks (IMPL-5, IMPL-5.1, IMPL-5.2)
|
||||
- Total task count: 6 (within 10-task limit)
|
||||
|
||||
Structure:
|
||||
- IMPL-1: User Authentication (Internal: Red → Green → Refactor)
|
||||
- IMPL-2: Password Reset (Internal: Red → Green → Refactor)
|
||||
- IMPL-3: Email Verification (Internal: Red → Green → Refactor)
|
||||
- IMPL-4: Role Management (Internal: Red → Green → Refactor)
|
||||
- IMPL-5: Payment System (Container)
|
||||
- IMPL-5.1: Gateway Integration (Internal: Red → Green → Refactor)
|
||||
- IMPL-5.2: Transaction Management (Internal: Red → Green → Refactor)
|
||||
|
||||
Plans generated:
|
||||
- Unified Plan: .workflow/WFS-auth/IMPL_PLAN.md (includes TDD Implementation Tasks section)
|
||||
- Task List: .workflow/WFS-auth/TODO_LIST.md (with internal TDD phase indicators)
|
||||
|
||||
TDD Configuration:
|
||||
- Each task contains complete Red-Green-Refactor cycle
|
||||
- Green phase includes test-fix cycle (max 3 iterations)
|
||||
- Auto-revert on max iterations reached
|
||||
|
||||
Next: /workflow:action-plan-verify --session WFS-auth (recommended) or /workflow:execute --session WFS-auth
|
||||
```
|
||||
**Output**:
|
||||
- TDD task JSON files in `.task/` directory (IMPL-N.json format)
|
||||
- IMPL_PLAN.md with TDD Implementation Tasks section
|
||||
- TODO_LIST.md with internal TDD phase indicators
|
||||
- Session state updated with task count and TDD metadata
|
||||
- MCP enhancements integrated (if available)
|
||||
|
||||
## Test Coverage Analysis Integration
|
||||
|
||||
@@ -547,9 +509,3 @@ IMPL (Green phase) tasks include automatic test-fix cycle:
|
||||
- **meta.max_iterations**: Number of fix attempts (default: 3 for TDD, 5 for test-gen)
|
||||
- **meta.use_codex**: Enable Codex automated fixes (default: false, manual)
|
||||
|
||||
## Related Commands
|
||||
- `/workflow:tdd-plan` - Orchestrates TDD workflow planning (6 phases)
|
||||
- `/workflow:tools:test-context-gather` - Analyzes test coverage
|
||||
- `/workflow:execute` - Executes TDD tasks in order
|
||||
- `/workflow:tdd-verify` - Verifies TDD compliance
|
||||
- `/workflow:test-gen` - Post-implementation test generation
|
||||
|
||||
@@ -45,8 +45,33 @@ This command is built on a set of core principles to ensure efficient and reliab
|
||||
- **Memory-First**: Prioritizes using documents already loaded in conversation memory to avoid redundant file operations
|
||||
- **Mode-Flexible**: Supports both agent-driven execution (default) and CLI tool execution (with `--cli-execute` flag)
|
||||
- **Multi-Step Support**: Complex tasks can use multiple sequential steps in `implementation_approach` with codex resume mechanism
|
||||
- **Quantification-Enforced**: **NEW** - All requirements, acceptance criteria, and modification points MUST include explicit counts and enumerations to prevent ambiguity (e.g., "17 commands: [list]" not "implement commands")
|
||||
- **Responsibility**: Parses analysis, detects artifacts, generates enhanced task JSONs, creates `IMPL_PLAN.md` and `TODO_LIST.md`, updates session state
|
||||
|
||||
## 3.5. Quantification Requirements (MANDATORY)
|
||||
|
||||
**Purpose**: Eliminate ambiguity by enforcing explicit counts and enumerations in all task specifications.
|
||||
|
||||
**Core Rules**:
|
||||
1. **Extract Counts from Analysis**: Search for HOW MANY items and list them explicitly
|
||||
2. **Enforce Explicit Lists**: Every deliverable uses format `{count} {type}: [{explicit_list}]`
|
||||
3. **Make Acceptance Measurable**: Include verification commands (e.g., `ls ... | wc -l = N`)
|
||||
4. **Quantify Modification Points**: Specify exact targets (files, functions with line numbers)
|
||||
5. **Avoid Vague Language**: Replace "complete", "comprehensive", "reorganize" with quantified statements
|
||||
|
||||
**Standard Formats**:
|
||||
|
||||
- **Requirements**: `"Implement N items: [item1, item2, ...]"` or `"Modify N files: [file1:func:lines, ...]"`
|
||||
- **Acceptance**: `"N items exist: verify by [command]"` or `"Coverage >= X%: verify by [test command]"`
|
||||
- **Modification Points**: `"Create N files: [list]"` or `"Modify N functions: [func() in file lines X-Y]"`
|
||||
|
||||
**Validation Checklist**:
|
||||
- [ ] Every requirement contains explicit count or enumerated list
|
||||
- [ ] Every acceptance criterion is measurable with verification command
|
||||
- [ ] Every modification_point specifies exact targets (files/functions/lines)
|
||||
- [ ] No vague language ("complete", "comprehensive", "reorganize" without counts)
|
||||
- [ ] Each implementation step has its own acceptance criteria
|
||||
|
||||
## 4. Execution Flow
|
||||
The command follows a streamlined, three-step process to convert analysis into executable tasks.
|
||||
|
||||
@@ -59,13 +84,39 @@ The process begins by gathering all necessary inputs. It follows a **Memory-Firs
|
||||
|
||||
### Step 2: Task Decomposition & Grouping
|
||||
Once all inputs are loaded, the command analyzes the tasks defined in the analysis results and groups them based on shared context.
|
||||
1. **Task Definition Parsing**: Extracts task definitions, requirements, and dependencies.
|
||||
2. **Context Signature Analysis**: Computes a unique hash (`context_signature`) for each task based on its `focus_paths` and referenced `artifacts`.
|
||||
|
||||
**Phase 2.1: Quantification Extraction (NEW - CRITICAL)**
|
||||
1. **Count Extraction**: Scan analysis documents for quantifiable information:
|
||||
- Search for numbers + nouns (e.g., "5 files", "17 commands", "3 features")
|
||||
- Identify enumerated lists (bullet points, numbered lists, comma-separated items)
|
||||
- Extract explicit counts from tables, diagrams, or structured data
|
||||
- Store extracted counts with their context (what is being counted)
|
||||
|
||||
2. **List Enumeration**: Build explicit lists for each deliverable:
|
||||
- If analysis says "implement session commands", enumerate ALL commands: [start, resume, list, complete, archive]
|
||||
- If analysis mentions "create categories", list ALL categories: [literature, experiment, data-analysis, visualization, context]
|
||||
- If analysis describes "modify functions", list ALL functions with line numbers
|
||||
- Maintain full enumerations (no "..." unless list exceeds 20 items)
|
||||
|
||||
3. **Verification Method Assignment**: For each deliverable, determine verification approach:
|
||||
- File count: `ls {path}/*.{ext} | wc -l = {count}`
|
||||
- Directory existence: `ls {parent}/ | grep -E '(name1|name2|...)' | wc -l = {count}`
|
||||
- Test coverage: `pytest --cov={module} --cov-report=term | grep TOTAL | awk '{print $4}' >= {percentage}`
|
||||
- Function existence: `grep -E '(func1|func2|...)' {file} | wc -l = {count}`
|
||||
|
||||
4. **Ambiguity Detection**: Flag vague language for replacement:
|
||||
- Detect words: "complete", "comprehensive", "reorganize", "refactor", "implement", "create" without counts
|
||||
- Require quantification: "implement" → "implement {N} {items}: [{list}]"
|
||||
- Reject unquantified deliverables
|
||||
|
||||
**Phase 2.2: Task Definition & Grouping**
|
||||
1. **Task Definition Parsing**: Extracts task definitions, requirements, and dependencies from quantified analysis
|
||||
2. **Context Signature Analysis**: Computes a unique hash (`context_signature`) for each task based on its `focus_paths` and referenced `artifacts`
|
||||
3. **Task Grouping**:
|
||||
* Tasks with the **same signature** are candidates for merging, as they operate on the same context.
|
||||
* Tasks with **different signatures** and no dependencies are grouped for parallel execution.
|
||||
* Tasks with `depends_on` relationships are marked for sequential execution.
|
||||
4. **Modification Target Determination**: Extracts specific code locations (`file:function:lines`) from the analysis to populate the `target_files` field.
|
||||
* Tasks with the **same signature** are candidates for merging, as they operate on the same context
|
||||
* Tasks with **different signatures** and no dependencies are grouped for parallel execution
|
||||
* Tasks with `depends_on` relationships are marked for sequential execution
|
||||
4. **Modification Target Determination**: Extracts specific code locations (`file:function:lines`) from the analysis to populate the `target_files` field
|
||||
|
||||
### Step 3: Output Generation
|
||||
Finally, the command generates all the necessary output files.
|
||||
@@ -167,38 +218,82 @@ function assignExecutionGroups(tasks) {
|
||||
The command produces three key documents and a directory of task files.
|
||||
|
||||
### 6.1. Task JSON Schema (`.task/IMPL-*.json`)
|
||||
This enhanced 5-field schema embeds all necessary context, artifacts, and execution steps.
|
||||
Each task JSON embeds all necessary context, artifacts, and execution steps using this schema:
|
||||
|
||||
**Top-Level Fields**:
|
||||
- `id`: Task identifier (format: `IMPL-N` or `IMPL-N.M` for subtasks)
|
||||
- `title`: Descriptive task name
|
||||
- `status`: Task state (`pending|active|completed|blocked|container`)
|
||||
- `context_package_path`: Path to context package (`.workflow/WFS-[session]/.process/context-package.json`)
|
||||
- `meta`: Task metadata
|
||||
- `context`: Task-specific context and requirements
|
||||
- `flow_control`: Execution steps and workflow
|
||||
|
||||
**Meta Object**:
|
||||
- `type`: Task category (`feature|bugfix|refactor|test-gen|test-fix|docs`)
|
||||
- `agent`: Assigned agent (`@code-developer|@test-fix-agent|@universal-executor`)
|
||||
- `execution_group`: Parallelization group ID or null
|
||||
- `context_signature`: Hash for context-based grouping
|
||||
|
||||
**Context Object**:
|
||||
- `requirements`: Quantified implementation requirements (with counts and explicit lists)
|
||||
- `focus_paths`: Target directories/files (absolute or relative paths)
|
||||
- `acceptance`: Measurable acceptance criteria (with verification commands)
|
||||
- `parent`: Parent task ID for subtasks
|
||||
- `depends_on`: Prerequisite task IDs
|
||||
- `inherited`: Shared patterns and dependencies from parent
|
||||
- `shared_context`: Tech stack and conventions
|
||||
- `artifacts`: Referenced brainstorm artifacts with paths, priority, and usage
|
||||
|
||||
**Flow Control Object**:
|
||||
- `pre_analysis`: Context loading and preparation steps
|
||||
- `load_context_package`: Load smart context and artifact catalog
|
||||
- `load_role_analysis_artifacts`: Load role analyses dynamically from context package
|
||||
- `load_planning_context`: Load finalized decisions with resolved conflicts
|
||||
- `codebase_exploration`: Discover existing patterns
|
||||
- `analyze_task_patterns`: Identify modification targets
|
||||
- `implementation_approach`: Execution steps
|
||||
- **Agent Mode**: Steps contain `modification_points` and `logic_flow` (agent executes autonomously)
|
||||
- **CLI Mode**: Steps include `command` field with CLI tool invocation
|
||||
- `target_files`: Specific files/functions/lines to modify
|
||||
|
||||
**Key Characteristics**:
|
||||
- **Quantification**: All requirements/acceptance use explicit counts and enumerations
|
||||
- **Mode Flexibility**: Supports both agent execution (default) and CLI tool execution (`--cli-execute`)
|
||||
- **Context Intelligence**: References context-package.json for smart context and artifact paths
|
||||
- **Artifact Integration**: Dynamically loads role analyses and brainstorm artifacts
|
||||
|
||||
**Example Task JSON**:
|
||||
```json
|
||||
{
|
||||
"id": "IMPL-N[.M]",
|
||||
"title": "Descriptive task name",
|
||||
"status": "pending|active|completed|blocked|container",
|
||||
"context_package_path": ".workflow/WFS-[session]/.process/context-package.json",
|
||||
"id": "IMPL-1",
|
||||
"title": "Implement feature X with Y components",
|
||||
"status": "pending",
|
||||
"context_package_path": ".workflow/WFS-session/.process/context-package.json",
|
||||
"meta": {
|
||||
"type": "feature|bugfix|refactor|test-gen|test-fix|docs",
|
||||
"agent": "@code-developer|@test-fix-agent|@universal-executor",
|
||||
"execution_group": "group-id|null",
|
||||
"context_signature": "hash-of-focus_paths-and-artifacts"
|
||||
"type": "feature",
|
||||
"agent": "@code-developer",
|
||||
"execution_group": "parallel-abc123",
|
||||
"context_signature": "hash-value"
|
||||
},
|
||||
"context": {
|
||||
"requirements": ["Clear requirement from analysis"],
|
||||
"focus_paths": ["D:\\project\\src\\module\\path", "./tests/module/path"],
|
||||
"acceptance": ["Measurable acceptance criterion"],
|
||||
"parent": "IMPL-N",
|
||||
"depends_on": ["IMPL-N.M"],
|
||||
"inherited": {"shared_patterns": [], "common_dependencies": []},
|
||||
"shared_context": {"tech_stack": [], "conventions": []},
|
||||
"requirements": [
|
||||
"Implement 5 commands: [cmd1, cmd2, cmd3, cmd4, cmd5]",
|
||||
"Create 3 directories: [dir1/, dir2/, dir3/]",
|
||||
"Modify 2 functions: [funcA() in file1.ts lines 10-25, funcB() in file2.ts lines 40-60]"
|
||||
],
|
||||
"focus_paths": ["D:\\project\\src\\module", "./tests/module"],
|
||||
"acceptance": [
|
||||
"5 command files created: verify by ls .claude/commands/*/*.md | wc -l = 5",
|
||||
"3 directories exist: verify by ls -d dir*/ | wc -l = 3",
|
||||
"All tests pass: pytest tests/ --cov=src/module (>=80% coverage)"
|
||||
],
|
||||
"depends_on": [],
|
||||
"artifacts": [
|
||||
{
|
||||
"path": "{{from context-package.json → brainstorm_artifacts.role_analyses[].files[].path}}",
|
||||
"path": ".workflow/WFS-session/.brainstorming/system-architect/analysis.md",
|
||||
"priority": "highest",
|
||||
"usage": "Role-specific requirements, design specs, enhanced by synthesis. Paths loaded dynamically from context-package.json (supports multiple files per role: analysis.md, analysis-01.md, analysis-api.md, etc.). Common roles: product-manager, system-architect, ui-designer, data-architect, ux-expert."
|
||||
},
|
||||
{
|
||||
"path": ".workflow/WFS-[session]/.brainstorming/guidance-specification.md",
|
||||
"priority": "high",
|
||||
"usage": "Finalized design decisions (potentially modified by conflict resolution if conflict_risk was medium/high). Use for: understanding resolved requirements, design choices, conflict resolutions applied in-place"
|
||||
"usage": "Architecture decisions and API specifications"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -206,18 +301,14 @@ This enhanced 5-field schema embeds all necessary context, artifacts, and execut
|
||||
"pre_analysis": [
|
||||
{
|
||||
"step": "load_context_package",
|
||||
"action": "Load context package for artifact paths",
|
||||
"note": "Context package path is now at top-level field: context_package_path",
|
||||
"commands": [
|
||||
"Read({{context_package_path}})"
|
||||
],
|
||||
"action": "Load context package for artifact paths and smart context",
|
||||
"commands": ["Read({{context_package_path}})"],
|
||||
"output_to": "context_package",
|
||||
"on_error": "fail"
|
||||
},
|
||||
{
|
||||
"step": "load_role_analysis_artifacts",
|
||||
"action": "Load role analyses from context-package.json (supports multiple files per role)",
|
||||
"note": "Paths loaded from context-package.json → brainstorm_artifacts.role_analyses[]. Supports analysis*.md automatically.",
|
||||
"action": "Load role analyses from context-package.json",
|
||||
"commands": [
|
||||
"Read({{context_package_path}})",
|
||||
"Extract(brainstorm_artifacts.role_analyses[].files[].path)",
|
||||
@@ -225,73 +316,36 @@ This enhanced 5-field schema embeds all necessary context, artifacts, and execut
|
||||
],
|
||||
"output_to": "role_analysis_artifacts",
|
||||
"on_error": "skip_optional"
|
||||
},
|
||||
{
|
||||
"step": "load_planning_context",
|
||||
"action": "Load plan-generated context intelligence with resolved conflicts",
|
||||
"note": "CRITICAL: context-package.json (from context_package_path) provides smart context (focus paths, dependencies, patterns) and conflict resolution status. If conflict_risk was medium/high, conflicts have been resolved in guidance-specification.md and role analyses.",
|
||||
"commands": [
|
||||
"Read({{context_package_path}})",
|
||||
"Read(.workflow/WFS-[session]/.brainstorming/guidance-specification.md)"
|
||||
],
|
||||
"output_to": "planning_context",
|
||||
"on_error": "fail",
|
||||
"usage_guidance": {
|
||||
"context-package.json": "Use for focus_paths validation, dependency resolution, existing pattern discovery, module structure understanding, conflict_risk status (resolved/none/low)",
|
||||
"guidance-specification.md": "Use for finalized design decisions (includes applied conflict resolutions if any)"
|
||||
}
|
||||
},
|
||||
{
|
||||
"step": "codebase_exploration",
|
||||
"action": "Explore codebase using native tools",
|
||||
"command": "bash(find . -name \"[patterns]\" -type f && rg \"[patterns]\")",
|
||||
"output_to": "codebase_structure"
|
||||
},
|
||||
{
|
||||
"step": "analyze_task_patterns",
|
||||
"action": "Analyze existing code patterns and identify modification targets",
|
||||
"commands": [
|
||||
"bash(cd \"[focus_paths]\")",
|
||||
"bash(gemini \"PURPOSE: Identify modification targets TASK: Analyze '[title]' and locate specific files/functions/lines to modify CONTEXT: [role_analyses] [individual_artifacts] EXPECTED: Code locations in format 'file:function:lines' RULES: Consult role analyses for requirements, identify exact modification points\")"
|
||||
],
|
||||
"output_to": "task_context_with_targets",
|
||||
"on_error": "fail"
|
||||
}
|
||||
],
|
||||
"implementation_approach": [
|
||||
{
|
||||
"step": 1,
|
||||
"title": "Implement task following role analyses and context",
|
||||
"description": "Implement '[title]' following this priority: 1) role analysis.md files (requirements, design specs, enhancements from synthesis), 2) guidance-specification.md (finalized decisions with resolved conflicts), 3) context-package.json (smart context, focus paths, patterns). Role analyses are enhanced by synthesis phase with concept improvements and clarifications. If conflict_risk was medium/high, conflict resolutions are already applied in-place.",
|
||||
"title": "Implement feature following role analyses",
|
||||
"description": "Implement feature X using requirements from role analyses and context package",
|
||||
"modification_points": [
|
||||
"Apply requirements and design specs from role analysis documents",
|
||||
"Use enhancements and clarifications from synthesis phase",
|
||||
"Use finalized decisions from guidance-specification.md (includes resolved conflicts)",
|
||||
"Use context-package.json for focus paths and dependency resolution",
|
||||
"Consult specific role artifacts for implementation details when needed",
|
||||
"Integrate with existing patterns"
|
||||
"Create 5 command files: [cmd1.md, cmd2.md, cmd3.md, cmd4.md, cmd5.md]",
|
||||
"Modify funcA() in file1.ts lines 10-25: add validation logic",
|
||||
"Modify funcB() in file2.ts lines 40-60: integrate with new API"
|
||||
],
|
||||
"logic_flow": [
|
||||
"Load role analyses (requirements, design, enhancements from synthesis)",
|
||||
"Load guidance-specification.md (finalized decisions with resolved conflicts if any)",
|
||||
"Load context-package.json (smart context: focus paths, dependencies, patterns, conflict_risk status)",
|
||||
"Extract requirements and design decisions from role documents",
|
||||
"Review synthesis enhancements and clarifications",
|
||||
"Use finalized decisions (conflicts already resolved if applicable)",
|
||||
"Identify modification targets using context package",
|
||||
"Implement following role requirements and design specs",
|
||||
"Consult role artifacts for detailed specifications when needed",
|
||||
"Load role analyses and context package",
|
||||
"Extract requirements and design decisions",
|
||||
"Implement commands following existing patterns",
|
||||
"Update functions with new logic",
|
||||
"Validate against acceptance criteria"
|
||||
],
|
||||
"depends_on": [],
|
||||
"output": "implementation"
|
||||
}
|
||||
],
|
||||
"target_files": ["file:function:lines"]
|
||||
"target_files": ["file1.ts:funcA:10-25", "file2.ts:funcB:40-60"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Note**: In CLI Execute Mode (`--cli-execute`), `implementation_approach` steps include a `command` field with the CLI tool invocation (e.g., `bash(codex ...)`).
|
||||
|
||||
### 6.2. IMPL_PLAN.md Structure
|
||||
This document provides a high-level overview of the entire implementation plan.
|
||||
|
||||
@@ -585,194 +639,7 @@ Artifacts are mapped to tasks based on their relevance to the task's domain.
|
||||
|
||||
This ensures that each task has access to the most relevant and detailed specifications from role-specific analyses.
|
||||
|
||||
## 8. CLI Execute Mode Details
|
||||
When using `--cli-execute`, each step in `implementation_approach` includes a `command` field with the execution command.
|
||||
|
||||
**Key Points**:
|
||||
- **Sequential Steps**: Steps execute in order defined in `implementation_approach` array
|
||||
- **Context Delivery**: Each codex command receives context via CONTEXT field: `@{context_package_path}` (role analyses loaded dynamically from context package)- **Multi-Step Tasks**: First step provides full context, subsequent steps use `resume --last` to maintain session continuity
|
||||
- **Step Dependencies**: Later steps reference outputs from earlier steps via `depends_on` field
|
||||
|
||||
### Example 1: Agent Mode - Simple Task (Default, No Command)
|
||||
```json
|
||||
{
|
||||
"id": "IMPL-001",
|
||||
"title": "Implement user authentication module",
|
||||
"context_package_path": ".workflow/WFS-session/.process/context-package.json",
|
||||
"context": {
|
||||
"depends_on": [],
|
||||
"focus_paths": ["src/auth"],
|
||||
"requirements": ["JWT-based authentication", "Login and registration endpoints"],
|
||||
"acceptance": [
|
||||
"JWT token generation working",
|
||||
"Login and registration endpoints implemented",
|
||||
"Tests passing with >70% coverage"
|
||||
]
|
||||
},
|
||||
"flow_control": {
|
||||
"pre_analysis": [
|
||||
{
|
||||
"step": "load_role_analyses",
|
||||
"action": "Load role analyses from context-package.json",
|
||||
"commands": [
|
||||
"Read({{context_package_path}})",
|
||||
"Extract(brainstorm_artifacts.role_analyses[].files[].path)",
|
||||
"Read(each extracted path)"
|
||||
],
|
||||
"output_to": "role_analyses",
|
||||
"on_error": "fail"
|
||||
},
|
||||
{
|
||||
"step": "load_context",
|
||||
"action": "Load context package for project structure",
|
||||
"commands": ["Read({{context_package_path}})"],
|
||||
"output_to": "context_pkg",
|
||||
"on_error": "fail"
|
||||
}
|
||||
],
|
||||
"implementation_approach": [
|
||||
{
|
||||
"step": 1,
|
||||
"title": "Implement JWT-based authentication",
|
||||
"description": "Create authentication module using JWT following [role_analyses] requirements and [context_pkg] patterns",
|
||||
"modification_points": [
|
||||
"Create auth service with JWT generation",
|
||||
"Implement login endpoint with credential validation",
|
||||
"Implement registration endpoint with user creation",
|
||||
"Add JWT middleware for route protection"
|
||||
],
|
||||
"logic_flow": [
|
||||
"User registers → validate input → hash password → create user",
|
||||
"User logs in → validate credentials → generate JWT → return token",
|
||||
"Protected routes → validate JWT → extract user → allow access"
|
||||
],
|
||||
"depends_on": [],
|
||||
"output": "auth_implementation"
|
||||
}
|
||||
],
|
||||
"target_files": ["src/auth/service.ts", "src/auth/middleware.ts", "src/routes/auth.ts"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example 2: CLI Execute Mode - Single Codex Step
|
||||
```json
|
||||
{
|
||||
"id": "IMPL-002",
|
||||
"title": "Implement user authentication module",
|
||||
"context_package_path": ".workflow/WFS-session/.process/context-package.json",
|
||||
"context": {
|
||||
"depends_on": [],
|
||||
"focus_paths": ["src/auth"],
|
||||
"requirements": ["JWT-based authentication", "Login and registration endpoints"],
|
||||
"acceptance": ["JWT generation working", "Endpoints implemented", "Tests passing"]
|
||||
},
|
||||
"flow_control": {
|
||||
"pre_analysis": [
|
||||
{
|
||||
"step": "load_role_analyses",
|
||||
"action": "Load role analyses from context-package.json",
|
||||
"commands": [
|
||||
"Read({{context_package_path}})",
|
||||
"Extract(brainstorm_artifacts.role_analyses[].files[].path)",
|
||||
"Read(each extracted path)"
|
||||
],
|
||||
"output_to": "role_analyses",
|
||||
"on_error": "fail"
|
||||
}
|
||||
],
|
||||
"implementation_approach": [
|
||||
{
|
||||
"step": 1,
|
||||
"title": "Implement authentication with Codex",
|
||||
"description": "Create JWT-based authentication module",
|
||||
"command": "bash(codex -C src/auth --full-auto exec \"PURPOSE: Implement user authentication TASK: JWT-based auth with login/registration MODE: auto CONTEXT: @{{context_package_path}} EXPECTED: Complete auth module with tests RULES: Load role analyses from context-package.json → brainstorm_artifacts\" --skip-git-repo-check -s danger-full-access)",
|
||||
"modification_points": ["Create auth service", "Implement endpoints", "Add JWT middleware"],
|
||||
"logic_flow": ["Validate credentials", "Generate JWT", "Return token"],
|
||||
"depends_on": [],
|
||||
"output": "auth_implementation"
|
||||
}
|
||||
],
|
||||
"target_files": ["src/auth/service.ts", "src/auth/middleware.ts"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example 3: CLI Execute Mode - Multi-Step with Resume
|
||||
```json
|
||||
{
|
||||
"id": "IMPL-003",
|
||||
"title": "Implement role-based access control",
|
||||
"context_package_path": ".workflow/WFS-session/.process/context-package.json",
|
||||
"context": {
|
||||
"depends_on": ["IMPL-002"],
|
||||
"focus_paths": ["src/auth", "src/middleware"],
|
||||
"requirements": ["User roles and permissions", "Route protection middleware"],
|
||||
"acceptance": ["RBAC models created", "Middleware working", "Management API complete"]
|
||||
},
|
||||
"flow_control": {
|
||||
"pre_analysis": [
|
||||
{
|
||||
"step": "load_context",
|
||||
"action": "Load context and role analyses from context-package.json",
|
||||
"commands": [
|
||||
"Read({{context_package_path}})",
|
||||
"Extract(brainstorm_artifacts.role_analyses[].files[].path)",
|
||||
"Read(each extracted path)"
|
||||
],
|
||||
"output_to": "full_context",
|
||||
"on_error": "fail"
|
||||
}
|
||||
],
|
||||
"implementation_approach": [
|
||||
{
|
||||
"step": 1,
|
||||
"title": "Create RBAC models",
|
||||
"description": "Define role and permission data models",
|
||||
"command": "bash(codex -C src/auth --full-auto exec \"PURPOSE: Create RBAC models TASK: Role and permission models MODE: auto CONTEXT: @{{context_package_path}} EXPECTED: Models with migrations RULES: Load role analyses from context-package.json → brainstorm_artifacts\" --skip-git-repo-check -s danger-full-access)",
|
||||
"modification_points": ["Define role model", "Define permission model", "Create migrations"],
|
||||
"logic_flow": ["Design schema", "Implement models", "Generate migrations"],
|
||||
"depends_on": [],
|
||||
"output": "rbac_models"
|
||||
},
|
||||
{
|
||||
"step": 2,
|
||||
"title": "Implement RBAC middleware",
|
||||
"description": "Create route protection middleware using models from step 1",
|
||||
"command": "bash(codex --full-auto exec \"PURPOSE: Create RBAC middleware TASK: Route protection middleware MODE: auto CONTEXT: RBAC models from step 1 EXPECTED: Middleware for route protection RULES: Use session patterns\" resume --last --skip-git-repo-check -s danger-full-access)",
|
||||
"modification_points": ["Create permission checker", "Add route decorators", "Integrate with auth"],
|
||||
"logic_flow": ["Check user role", "Validate permissions", "Allow/deny access"],
|
||||
"depends_on": [1],
|
||||
"output": "rbac_middleware"
|
||||
},
|
||||
{
|
||||
"step": 3,
|
||||
"title": "Add role management API",
|
||||
"description": "Create CRUD endpoints for roles and permissions",
|
||||
"command": "bash(codex --full-auto exec \"PURPOSE: Role management API TASK: CRUD endpoints for roles/permissions MODE: auto CONTEXT: Models and middleware from previous steps EXPECTED: Complete API with validation RULES: Maintain consistency\" resume --last --skip-git-repo-check -s danger-full-access)",
|
||||
"modification_points": ["Create role endpoints", "Create permission endpoints", "Add validation"],
|
||||
"logic_flow": ["Define routes", "Implement controllers", "Add authorization"],
|
||||
"depends_on": [2],
|
||||
"output": "role_management_api"
|
||||
}
|
||||
],
|
||||
"target_files": [
|
||||
"src/models/Role.ts",
|
||||
"src/models/Permission.ts",
|
||||
"src/middleware/rbac.ts",
|
||||
"src/routes/roles.ts"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Pattern Summary**:
|
||||
- **Agent Mode (Example 1)**: No `command` field - agent executes via `modification_points` and `logic_flow`
|
||||
- **CLI Mode Single-Step (Example 2)**: One `command` field with full context package
|
||||
- **CLI Mode Multi-Step (Example 3)**: First step uses full context, subsequent steps use `resume --last`
|
||||
- **Context Delivery**: Context package provided via `@{...}` references in CONTEXT field
|
||||
|
||||
## 9. Error Handling
|
||||
## 8. Error Handling
|
||||
|
||||
### Input Validation Errors
|
||||
| Error | Cause | Resolution |
|
||||
@@ -795,21 +662,19 @@ When using `--cli-execute`, each step in `implementation_approach` includes a `c
|
||||
| Invalid format | Corrupted file | Skip artifact loading |
|
||||
| Path invalid | Moved/deleted | Update references |
|
||||
|
||||
## 10. Integration & Usage
|
||||
## 10. Usage & Related Commands
|
||||
|
||||
### Command Chain
|
||||
- **Called By**: `/workflow:plan` (Phase 4)
|
||||
- **Calls**: None (terminal command)
|
||||
- **Followed By**: `/workflow:execute`, `/workflow:status`
|
||||
|
||||
### Basic Usage
|
||||
**Basic Usage**:
|
||||
```bash
|
||||
/workflow:tools:task-generate --session WFS-auth
|
||||
/workflow:tools:task-generate --session WFS-auth [--cli-execute]
|
||||
```
|
||||
|
||||
## 11. Related Commands
|
||||
- `/workflow:plan` - Orchestrates entire planning
|
||||
- `/workflow:plan --cli-execute` - Planning with CLI execution mode
|
||||
- `/workflow:tools:context-gather` - Provides context package
|
||||
- `/workflow:tools:conflict-resolution` - Provides conflict resolution strategies (optional)
|
||||
**Workflow Integration**:
|
||||
- Called by: `/workflow:plan` (task generation phase)
|
||||
- Followed by: `/workflow:execute`, `/workflow:status`
|
||||
|
||||
**Related Commands**:
|
||||
- `/workflow:plan` - Orchestrates entire planning workflow
|
||||
- `/workflow:tools:context-gather` - Provides context package input
|
||||
- `/workflow:tools:conflict-resolution` - Provides conflict resolution (if needed)
|
||||
- `/workflow:execute` - Executes generated tasks
|
||||
|
||||
@@ -275,7 +275,3 @@ Overall Compliance: 93/100
|
||||
Detailed report: .workflow/WFS-auth/.process/tdd-cycle-report.md
|
||||
```
|
||||
|
||||
## Related Commands
|
||||
- `/workflow:tdd-verify` - Uses this tool for verification
|
||||
- `/workflow:tools:task-generate-tdd` - Generates tasks this tool analyzes
|
||||
- `/workflow:execute` - Executes tasks before analysis
|
||||
|
||||
@@ -460,8 +460,3 @@ Synthesize Gemini analysis into standardized format:
|
||||
- ✅ Execution time < 20 minutes
|
||||
- ✅ Output follows existing test conventions
|
||||
|
||||
## Related Commands
|
||||
|
||||
- `/workflow:tools:test-context-gather` - Provides input context
|
||||
- `/workflow:tools:test-task-generate` - Consumes analysis results
|
||||
- `/workflow:test-gen` - Main test generation workflow
|
||||
|
||||
@@ -203,8 +203,3 @@ Refer to `test-context-search-agent.md` Phase 3.2 for complete `test-context-pac
|
||||
- **Framework agnostic**: Supports Jest, Mocha, pytest, RSpec, Go testing, etc.
|
||||
- **Coverage focus**: Primary goal is identifying implementation files without tests
|
||||
|
||||
## Related Commands
|
||||
|
||||
- `/workflow:test-gen` - Main test generation workflow
|
||||
- `/workflow:tools:test-concept-enhanced` - Test generation analysis
|
||||
- `/workflow:tools:test-task-generate` - Test task JSON generation
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: test-task-generate
|
||||
description: Generate test-fix task JSON with iterative test-fix-retest cycle specification using Gemini/Qwen/Codex
|
||||
description: Autonomous test-fix task generation using action-planning-agent with test-fix-retest cycle specification and discovery phase
|
||||
argument-hint: "[--use-codex] [--cli-execute] --session WFS-test-session-id"
|
||||
examples:
|
||||
- /workflow:tools:test-task-generate --session WFS-test-auth
|
||||
@@ -9,10 +9,23 @@ examples:
|
||||
- /workflow:tools:test-task-generate --cli-execute --use-codex --session WFS-test-auth
|
||||
---
|
||||
|
||||
# Test Task Generation Command
|
||||
# Autonomous Test Task Generation Command
|
||||
|
||||
## Overview
|
||||
Generate specialized test-fix task JSON with comprehensive test-fix-retest cycle specification, including Gemini diagnosis (using bug-fix template) and manual fix workflow (Codex automation only when explicitly requested).
|
||||
Autonomous test-fix task JSON generation using action-planning-agent with two-phase execution: discovery and document generation. Supports both agent-driven execution (default) and CLI tool execution modes. Generates specialized test-fix tasks with comprehensive test-fix-retest cycle specification.
|
||||
|
||||
## Core Philosophy
|
||||
- **Agent-Driven**: Delegate execution to action-planning-agent for autonomous operation
|
||||
- **Two-Phase Flow**: Discovery (context gathering) → Output (document generation)
|
||||
- **Memory-First**: Reuse loaded documents from conversation memory
|
||||
- **MCP-Enhanced**: Use MCP tools for advanced code analysis and test research
|
||||
- **Pre-Selected Templates**: Command selects correct test template based on `--cli-execute` flag **before** invoking agent
|
||||
- **Agent Simplicity**: Agent receives pre-selected template and focuses only on content generation
|
||||
- **Path Clarity**: All `focus_paths` prefer absolute paths (e.g., `D:\\project\\src\\module`), or clear relative paths from project root
|
||||
- **Test-First**: Generate comprehensive test coverage before execution
|
||||
- **Iterative Refinement**: Test-fix-retest cycle until all tests pass
|
||||
- **Surgical Fixes**: Minimal code changes, no refactoring during test fixes
|
||||
- **Auto-Revert**: Rollback all changes if max iterations reached
|
||||
|
||||
## Execution Modes
|
||||
|
||||
@@ -24,583 +37,278 @@ Generate specialized test-fix task JSON with comprehensive test-fix-retest cycle
|
||||
- **Manual Mode (Default)**: Gemini diagnosis → user applies fixes
|
||||
- **Codex Mode (`--use-codex`)**: Gemini diagnosis → Codex applies fixes with resume mechanism
|
||||
|
||||
## Core Philosophy
|
||||
- **Analysis-Driven Test Generation**: Use TEST_ANALYSIS_RESULTS.md from test-concept-enhanced
|
||||
- **Agent-Based Test Creation**: Call @code-developer agent for comprehensive test generation
|
||||
- **Coverage-First**: Generate all missing tests before execution
|
||||
- **Test Execution**: Execute complete test suite after generation
|
||||
- **Gemini Diagnosis**: Use Gemini for root cause analysis and fix suggestions (references bug-fix template)
|
||||
- **Manual Fixes First**: Apply fixes manually by default, codex only when explicitly needed
|
||||
- **Iterative Refinement**: Repeat test-analyze-fix-retest cycle until all tests pass
|
||||
- **Surgical Fixes**: Minimal code changes, no refactoring during test fixes
|
||||
- **Auto-Revert**: Rollback all changes if max iterations reached
|
||||
|
||||
## Core Responsibilities
|
||||
- Parse TEST_ANALYSIS_RESULTS.md from test-concept-enhanced
|
||||
- Extract test requirements and generation strategy
|
||||
- Parse `--use-codex` flag to determine fix mode (manual vs automated)
|
||||
- Generate test generation subtask calling @code-developer
|
||||
- Generate test execution and fix cycle task JSON with appropriate fix mode
|
||||
- Configure Gemini diagnosis workflow (bug-fix template) and manual/Codex fix application
|
||||
- Create test-oriented IMPL_PLAN.md and TODO_LIST.md with test generation phase
|
||||
|
||||
## Execution Lifecycle
|
||||
|
||||
### Phase 1: Input Validation & Discovery
|
||||
### Phase 1: Discovery & Context Loading
|
||||
**⚡ Memory-First Rule**: Skip file loading if documents already in conversation memory
|
||||
|
||||
1. **Parameter Parsing**
|
||||
- Parse `--use-codex` flag from command arguments → Controls IMPL-002 fix mode
|
||||
- Parse `--cli-execute` flag from command arguments → Controls IMPL-001 generation mode
|
||||
- Store flag values for task JSON generation
|
||||
|
||||
2. **Test Session Validation**
|
||||
- Load `.workflow/{test-session-id}/workflow-session.json`
|
||||
- Verify `workflow_type: "test_session"`
|
||||
- Extract `source_session_id` from metadata
|
||||
|
||||
3. **Test Analysis Results Loading**
|
||||
- **REQUIRED**: Load `.workflow/{test-session-id}/.process/TEST_ANALYSIS_RESULTS.md`
|
||||
- Parse test requirements by file
|
||||
- Extract test generation strategy
|
||||
- Identify test files to create with specifications
|
||||
|
||||
4. **Test Context Package Loading**
|
||||
- Load `.workflow/{test-session-id}/.process/test-context-package.json`
|
||||
- Extract test framework configuration
|
||||
- Extract coverage gaps and priorities
|
||||
- Load source session implementation summaries
|
||||
|
||||
### Phase 2: Task JSON Generation
|
||||
|
||||
Generate **TWO task JSON files**:
|
||||
1. **IMPL-001.json** - Test Generation (calls @code-developer)
|
||||
2. **IMPL-002.json** - Test Execution and Fix Cycle (calls @test-fix-agent)
|
||||
|
||||
#### IMPL-001.json - Test Generation Task
|
||||
|
||||
```json
|
||||
**Agent Context Package**:
|
||||
```javascript
|
||||
{
|
||||
"id": "IMPL-001",
|
||||
"title": "Generate comprehensive tests for [sourceSessionId]",
|
||||
"status": "pending",
|
||||
"meta": {
|
||||
"type": "test-gen",
|
||||
"agent": "@code-developer",
|
||||
"source_session": "[sourceSessionId]",
|
||||
"test_framework": "jest|pytest|cargo|detected"
|
||||
"session_id": "WFS-test-[session-id]",
|
||||
"execution_mode": "agent-mode" | "cli-execute-mode", // Determined by flag
|
||||
"task_json_template_path": "~/.claude/workflows/cli-templates/prompts/workflow/task-json-agent-mode.txt"
|
||||
| "~/.claude/workflows/cli-templates/prompts/workflow/task-json-cli-mode.txt",
|
||||
// Path selected by command based on --cli-execute flag, agent reads it
|
||||
"workflow_type": "test_session",
|
||||
"use_codex": true | false, // Determined by --use-codex flag
|
||||
"session_metadata": {
|
||||
// If in memory: use cached content
|
||||
// Else: Load from .workflow/{test-session-id}/workflow-session.json
|
||||
},
|
||||
"context": {
|
||||
"requirements": [
|
||||
"Generate comprehensive test files based on TEST_ANALYSIS_RESULTS.md",
|
||||
"Follow existing test patterns and conventions from test framework",
|
||||
"Create tests for all missing coverage identified in analysis",
|
||||
"Include happy path, error handling, edge cases, and integration tests",
|
||||
"Use test data and mocks as specified in analysis",
|
||||
"Ensure tests follow project coding standards"
|
||||
],
|
||||
"focus_paths": [
|
||||
"tests/**/*",
|
||||
"src/**/*.test.*",
|
||||
"{paths_from_analysis}"
|
||||
],
|
||||
"acceptance": [
|
||||
"All test files from TEST_ANALYSIS_RESULTS.md section 5 are created",
|
||||
"Tests follow existing test patterns and conventions",
|
||||
"Test scenarios cover happy path, errors, edge cases, integration",
|
||||
"All dependencies are properly mocked",
|
||||
"Test files are syntactically valid and can be executed",
|
||||
"Test coverage meets analysis requirements"
|
||||
],
|
||||
"depends_on": [],
|
||||
"source_context": {
|
||||
"session_id": "[sourceSessionId]",
|
||||
"test_analysis": ".workflow/[testSessionId]/.process/TEST_ANALYSIS_RESULTS.md",
|
||||
"test_context": ".workflow/[testSessionId]/.process/test-context-package.json",
|
||||
"implementation_summaries": [
|
||||
".workflow/[sourceSessionId]/.summaries/IMPL-001-summary.md"
|
||||
]
|
||||
}
|
||||
"test_analysis_results_path": ".workflow/{test-session-id}/.process/TEST_ANALYSIS_RESULTS.md",
|
||||
"test_analysis_results": {
|
||||
// If in memory: use cached content
|
||||
// Else: Load from TEST_ANALYSIS_RESULTS.md
|
||||
},
|
||||
"flow_control": {
|
||||
"pre_analysis": [
|
||||
{
|
||||
"step": "load_test_analysis",
|
||||
"action": "Load test generation requirements and strategy",
|
||||
"commands": [
|
||||
"Read(.workflow/[testSessionId]/.process/TEST_ANALYSIS_RESULTS.md)",
|
||||
"Read(.workflow/[testSessionId]/.process/test-context-package.json)"
|
||||
],
|
||||
"output_to": "test_generation_requirements",
|
||||
"on_error": "fail"
|
||||
},
|
||||
{
|
||||
"step": "load_implementation_context",
|
||||
"action": "Load source implementation for test generation context",
|
||||
"commands": [
|
||||
"bash(for f in .workflow/[sourceSessionId]/.summaries/IMPL-*-summary.md; do echo \"=== $(basename $f) ===\"&& cat \"$f\"; done)"
|
||||
],
|
||||
"output_to": "implementation_context",
|
||||
"on_error": "skip_optional"
|
||||
},
|
||||
{
|
||||
"step": "load_existing_test_patterns",
|
||||
"action": "Study existing tests for pattern reference",
|
||||
"commands": [
|
||||
"bash(find . -name \"*.test.*\" -type f)",
|
||||
"bash(# Read first 2 existing test files as examples)",
|
||||
"bash(test_files=$(find . -name \"*.test.*\" -type f | head -2))",
|
||||
"bash(for f in $test_files; do echo \"=== $f ===\"&& cat \"$f\"; done)"
|
||||
],
|
||||
"output_to": "existing_test_patterns",
|
||||
"on_error": "skip_optional"
|
||||
}
|
||||
],
|
||||
// Agent Mode (Default): Agent implements tests
|
||||
"implementation_approach": [
|
||||
{
|
||||
"step": 1,
|
||||
"title": "Generate comprehensive test suite",
|
||||
"description": "Generate comprehensive test suite based on TEST_ANALYSIS_RESULTS.md. Follow test generation strategy and create all test files listed in section 5 (Implementation Targets).",
|
||||
"modification_points": [
|
||||
"Read TEST_ANALYSIS_RESULTS.md sections 3 and 4",
|
||||
"Study existing test patterns",
|
||||
"Create test files with all required scenarios",
|
||||
"Implement happy path, error handling, edge case, and integration tests",
|
||||
"Add required mocks and fixtures"
|
||||
],
|
||||
"logic_flow": [
|
||||
"Read TEST_ANALYSIS_RESULTS.md section 3 (Test Requirements by File)",
|
||||
"Read TEST_ANALYSIS_RESULTS.md section 4 (Test Generation Strategy)",
|
||||
"Study existing test patterns from test_context.test_framework.conventions",
|
||||
"For each test file in section 5 (Implementation Targets): Create test file with specified scenarios, Implement happy path tests, Implement error handling tests, Implement edge case tests, Implement integration tests (if specified), Add required mocks and fixtures",
|
||||
"Follow test framework conventions and project standards",
|
||||
"Ensure all tests are executable and syntactically valid"
|
||||
],
|
||||
"depends_on": [],
|
||||
"output": "test_suite"
|
||||
}
|
||||
],
|
||||
|
||||
// CLI Execute Mode (--cli-execute): Use Codex command (alternative format shown below)
|
||||
"implementation_approach": [{
|
||||
"step": 1,
|
||||
"title": "Generate tests using Codex",
|
||||
"description": "Use Codex CLI to autonomously generate comprehensive test suite based on TEST_ANALYSIS_RESULTS.md",
|
||||
"modification_points": [
|
||||
"Codex loads TEST_ANALYSIS_RESULTS.md and existing test patterns",
|
||||
"Codex generates all test files listed in analysis section 5",
|
||||
"Codex ensures tests follow framework conventions"
|
||||
],
|
||||
"logic_flow": [
|
||||
"Start new Codex session",
|
||||
"Pass TEST_ANALYSIS_RESULTS.md to Codex",
|
||||
"Codex studies existing test patterns",
|
||||
"Codex generates comprehensive test suite",
|
||||
"Codex validates test syntax and executability"
|
||||
],
|
||||
"command": "bash(codex -C [focus_paths] --full-auto exec \"PURPOSE: Generate comprehensive test suite TASK: Create test files based on TEST_ANALYSIS_RESULTS.md section 5 MODE: write CONTEXT: @.workflow/WFS-test-[session]/.process/TEST_ANALYSIS_RESULTS.md @.workflow/WFS-test-[session]/.process/test-context-package.json EXPECTED: All test files with happy path, error handling, edge cases, integration tests RULES: Follow test framework conventions, ensure tests are executable\" --skip-git-repo-check -s danger-full-access)",
|
||||
"depends_on": [],
|
||||
"output": "test_generation"
|
||||
}],
|
||||
"target_files": [
|
||||
"{test_file_1 from TEST_ANALYSIS_RESULTS.md section 5}",
|
||||
"{test_file_2 from TEST_ANALYSIS_RESULTS.md section 5}",
|
||||
"{test_file_N from TEST_ANALYSIS_RESULTS.md section 5}"
|
||||
]
|
||||
"test_context_package_path": ".workflow/{test-session-id}/.process/test-context-package.json",
|
||||
"test_context_package": {
|
||||
// Existing test patterns and coverage analysis
|
||||
},
|
||||
"source_session_id": "[source-session-id]", // if exists
|
||||
"source_session_summaries": {
|
||||
// Implementation context from source session
|
||||
},
|
||||
"mcp_capabilities": {
|
||||
"code_index": true,
|
||||
"exa_code": true,
|
||||
"exa_web": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### IMPL-002.json - Test Execution & Fix Cycle Task
|
||||
**Discovery Actions**:
|
||||
1. **Load Test Session Context** (if not in memory)
|
||||
```javascript
|
||||
if (!memory.has("workflow-session.json")) {
|
||||
Read(.workflow/{test-session-id}/workflow-session.json)
|
||||
}
|
||||
```
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "IMPL-002",
|
||||
"title": "Execute and fix tests for [sourceSessionId]",
|
||||
"status": "pending",
|
||||
"meta": {
|
||||
"type": "test-fix",
|
||||
"agent": "@test-fix-agent",
|
||||
"source_session": "[sourceSessionId]",
|
||||
"test_framework": "jest|pytest|cargo|detected",
|
||||
"max_iterations": 5,
|
||||
"use_codex": false // Set to true if --use-codex flag present
|
||||
},
|
||||
"context": {
|
||||
"requirements": [
|
||||
"Execute complete test suite (generated in IMPL-001)",
|
||||
"Diagnose test failures using Gemini analysis with bug-fix template",
|
||||
"Present fixes to user for manual application (default)",
|
||||
"Use Codex ONLY if user explicitly requests automation",
|
||||
"Iterate until all tests pass or max iterations reached",
|
||||
"Revert changes if unable to fix within iteration limit"
|
||||
],
|
||||
"focus_paths": [
|
||||
"tests/**/*",
|
||||
"src/**/*.test.*",
|
||||
"{implementation_files_from_source_session}"
|
||||
],
|
||||
"acceptance": [
|
||||
"All tests pass successfully (100% pass rate)",
|
||||
"No test failures or errors in final run",
|
||||
"Code changes are minimal and surgical",
|
||||
"All fixes are verified through retest",
|
||||
"Iteration logs document fix progression"
|
||||
],
|
||||
"depends_on": ["IMPL-001"],
|
||||
"source_context": {
|
||||
"session_id": "[sourceSessionId]",
|
||||
"test_generation_summary": ".workflow/[testSessionId]/.summaries/IMPL-001-summary.md",
|
||||
"implementation_summaries": [
|
||||
".workflow/[sourceSessionId]/.summaries/IMPL-001-summary.md"
|
||||
]
|
||||
}
|
||||
},
|
||||
"flow_control": {
|
||||
"pre_analysis": [
|
||||
{
|
||||
"step": "load_source_session_summaries",
|
||||
"action": "Load implementation context from source session",
|
||||
"commands": [
|
||||
"bash(find .workflow/[sourceSessionId]/.summaries/ -name 'IMPL-*-summary.md' 2>/dev/null)",
|
||||
"bash(for f in .workflow/[sourceSessionId]/.summaries/IMPL-*-summary.md; do echo \"=== $(basename $f) ===\"&& cat \"$f\"; done)"
|
||||
],
|
||||
"output_to": "implementation_context",
|
||||
"on_error": "skip_optional"
|
||||
},
|
||||
{
|
||||
"step": "discover_test_framework",
|
||||
"action": "Identify test framework and test command",
|
||||
"commands": [
|
||||
"bash(jq -r '.scripts.test // \"npm test\"' package.json 2>/dev/null || echo 'pytest' || echo 'cargo test')",
|
||||
"bash([ -f 'package.json' ] && echo 'jest/npm' || [ -f 'pytest.ini' ] && echo 'pytest' || [ -f 'Cargo.toml' ] && echo 'cargo' || echo 'unknown')"
|
||||
],
|
||||
"output_to": "test_command",
|
||||
"on_error": "fail"
|
||||
},
|
||||
{
|
||||
"step": "analyze_test_coverage",
|
||||
"action": "Analyze test coverage and identify missing tests",
|
||||
"commands": [
|
||||
"bash(find . -name \"*.test.*\" -type f)",
|
||||
"bash(rg \"test|describe|it|def test_\" -g \"*.test.*\")",
|
||||
"bash(# Count implementation files vs test files)",
|
||||
"bash(impl_count=$(find [changed_files_dirs] -type f \\( -name '*.ts' -o -name '*.js' -o -name '*.py' \\) ! -name '*.test.*' 2>/dev/null | wc -l))",
|
||||
"bash(test_count=$(find . -name \"*.test.*\" -type f | wc -l))",
|
||||
"bash(echo \"Implementation files: $impl_count, Test files: $test_count\")"
|
||||
],
|
||||
"output_to": "test_coverage_analysis",
|
||||
"on_error": "skip_optional"
|
||||
},
|
||||
{
|
||||
"step": "identify_files_without_tests",
|
||||
"action": "List implementation files that lack corresponding test files",
|
||||
"commands": [
|
||||
"bash(# For each changed file from source session, check if test exists)",
|
||||
"bash(for file in [changed_files]; do test_file=$(echo $file | sed 's/\\(.*\\)\\.\\(ts\\|js\\|py\\)$/\\1.test.\\2/'); [ ! -f \"$test_file\" ] && echo \"$file\"; done)"
|
||||
],
|
||||
"output_to": "files_without_tests",
|
||||
"on_error": "skip_optional"
|
||||
},
|
||||
{
|
||||
"step": "prepare_test_environment",
|
||||
"action": "Ensure test environment is ready",
|
||||
"commands": [
|
||||
"bash([ -f 'package.json' ] && npm install 2>/dev/null || true)",
|
||||
"bash([ -f 'requirements.txt' ] && pip install -q -r requirements.txt 2>/dev/null || true)"
|
||||
],
|
||||
"output_to": "environment_status",
|
||||
"on_error": "skip_optional"
|
||||
}
|
||||
],
|
||||
"implementation_approach": [
|
||||
{
|
||||
"step": 1,
|
||||
"title": "Execute iterative test-fix-retest cycle",
|
||||
"description": "Execute iterative test-fix-retest cycle using Gemini diagnosis (bug-fix template) and manual fixes (Codex only if meta.use_codex=true). Max 5 iterations with automatic revert on failure.",
|
||||
"test_fix_cycle": {
|
||||
"max_iterations": 5,
|
||||
"cycle_pattern": "test → gemini_diagnose → manual_fix (or codex if needed) → retest",
|
||||
"tools": {
|
||||
"test_execution": "bash(test_command)",
|
||||
"diagnosis": "gemini (MODE: analysis, uses bug-fix template)",
|
||||
"fix_application": "manual (default) or codex exec resume --last (if explicitly needed)",
|
||||
"verification": "bash(test_command) + regression_check"
|
||||
},
|
||||
"exit_conditions": {
|
||||
"success": "all_tests_pass",
|
||||
"failure": "max_iterations_reached",
|
||||
"error": "test_command_not_found"
|
||||
}
|
||||
},
|
||||
"modification_points": [
|
||||
"PHASE 1: Initial Test Execution",
|
||||
" 1.1. Discover test command from framework detection",
|
||||
" 1.2. Execute initial test run: bash([test_command])",
|
||||
" 1.3. Parse test output and count failures",
|
||||
" 1.4. If all pass → Skip to PHASE 3 (success)",
|
||||
" 1.5. If failures → Store failure output, proceed to PHASE 2",
|
||||
"",
|
||||
"PHASE 2: Iterative Test-Fix-Retest Cycle (max 5 iterations)",
|
||||
" Note: This phase handles test failures, NOT test generation failures",
|
||||
" Initialize: max_iterations=5, current_iteration=0",
|
||||
" ",
|
||||
" WHILE (tests failing AND current_iteration < max_iterations):",
|
||||
" current_iteration++",
|
||||
" ",
|
||||
" STEP 2.1: Gemini Diagnosis (using bug-fix template)",
|
||||
" - Prepare diagnosis context:",
|
||||
" * Test failure output from previous run",
|
||||
" * Source files from focus_paths",
|
||||
" * Implementation summaries from source session",
|
||||
" - Execute Gemini analysis with bug-fix template:",
|
||||
" bash(cd .workflow/WFS-test-[session]/.process && gemini \"",
|
||||
" PURPOSE: Diagnose test failure iteration [N] and propose minimal fix",
|
||||
" TASK: Systematic bug analysis and fix recommendations for test failure",
|
||||
" MODE: analysis",
|
||||
" CONTEXT: @CLAUDE.md,**/*CLAUDE.md",
|
||||
" Test output: [test_failures]",
|
||||
" Source files: [focus_paths]",
|
||||
" Implementation: [implementation_context]",
|
||||
" EXPECTED: Root cause analysis, code path tracing, targeted fixes",
|
||||
" RULES: $(cat ~/.claude/workflows/cli-templates/prompts/analysis/01-diagnose-bug-root-cause.txt) | Bug: [test_failure_description]",
|
||||
" Minimal surgical fixes only - no refactoring",
|
||||
" \" > fix-iteration-[N]-diagnosis.md)",
|
||||
" - Parse diagnosis → extract fix_suggestion and target_files",
|
||||
" - Present fix to user for manual application (default)",
|
||||
" ",
|
||||
" STEP 2.2: Apply Fix (Based on meta.use_codex Flag)",
|
||||
" ",
|
||||
" IF meta.use_codex = false (DEFAULT):",
|
||||
" - Present Gemini diagnosis to user for manual fix",
|
||||
" - User applies fix based on diagnosis recommendations",
|
||||
" - Stage changes: bash(git add -A)",
|
||||
" - Store fix log: .process/fix-iteration-[N]-changes.log",
|
||||
" ",
|
||||
" IF meta.use_codex = true (--use-codex flag present):",
|
||||
" - Stage current changes (if valid git repo): bash(git add -A)",
|
||||
" - First iteration: Start new Codex session",
|
||||
" codex -C [project_root] --full-auto exec \"",
|
||||
" PURPOSE: Fix test failure iteration 1",
|
||||
" TASK: [fix_suggestion from Gemini]",
|
||||
" MODE: write",
|
||||
" CONTEXT: Diagnosis: .workflow/.process/fix-iteration-1-diagnosis.md",
|
||||
" Target files: [target_files]",
|
||||
" Implementation context: [implementation_context]",
|
||||
" EXPECTED: Minimal code changes to resolve test failure",
|
||||
" RULES: Apply ONLY suggested changes, no refactoring",
|
||||
" Preserve existing code style",
|
||||
" \" --skip-git-repo-check -s danger-full-access",
|
||||
" - Subsequent iterations: Resume session for context continuity",
|
||||
" codex exec \"",
|
||||
" CONTINUE TO NEXT FIX:",
|
||||
" Iteration [N] of 5: Fix test failure",
|
||||
" ",
|
||||
" PURPOSE: Fix remaining test failures",
|
||||
" TASK: [fix_suggestion from Gemini iteration N]",
|
||||
" CONTEXT: Previous fixes applied, diagnosis: .process/fix-iteration-[N]-diagnosis.md",
|
||||
" EXPECTED: Surgical fix for current failure",
|
||||
" RULES: Build on previous fixes, maintain consistency",
|
||||
" \" resume --last --skip-git-repo-check -s danger-full-access",
|
||||
" - Store fix log: .process/fix-iteration-[N]-changes.log",
|
||||
" ",
|
||||
" STEP 2.3: Retest and Verification",
|
||||
" - Re-execute test suite: bash([test_command])",
|
||||
" - Capture output: .process/fix-iteration-[N]-retest.log",
|
||||
" - Count failures: bash(grep -c 'FAIL\\|ERROR' .process/fix-iteration-[N]-retest.log)",
|
||||
" - Check for regression:",
|
||||
" IF new_failures > previous_failures:",
|
||||
" WARN: Regression detected",
|
||||
" Include in next Gemini diagnosis context",
|
||||
" - Analyze results:",
|
||||
" IF all_tests_pass:",
|
||||
" BREAK loop → Proceed to PHASE 3",
|
||||
" ELSE:",
|
||||
" Update test_failures context",
|
||||
" CONTINUE loop",
|
||||
" ",
|
||||
" IF max_iterations reached AND tests still failing:",
|
||||
" EXECUTE: git reset --hard HEAD (revert all changes)",
|
||||
" MARK: Task status = blocked",
|
||||
" GENERATE: Detailed failure report with iteration logs",
|
||||
" EXIT: Require manual intervention",
|
||||
"",
|
||||
"PHASE 3: Final Validation and Certification",
|
||||
" 3.1. Execute final confirmation test run",
|
||||
" 3.2. Generate success summary:",
|
||||
" - Iterations required: [current_iteration]",
|
||||
" - Fixes applied: [summary from iteration logs]",
|
||||
" - Test results: All passing ✅",
|
||||
" 3.3. Mark task status: completed",
|
||||
" 3.4. Update TODO_LIST.md: Mark as ✅",
|
||||
" 3.5. Certify code: APPROVED for deployment"
|
||||
],
|
||||
"logic_flow": [
|
||||
"Load source session implementation context",
|
||||
"Discover test framework and command",
|
||||
"PHASE 0: Test Coverage Check",
|
||||
" Analyze existing test files",
|
||||
" Identify files without tests",
|
||||
" IF tests missing:",
|
||||
" Report to user (no automatic generation)",
|
||||
" Wait for user to generate tests or request automation",
|
||||
" ELSE:",
|
||||
" Skip to Phase 1",
|
||||
"PHASE 1: Initial Test Execution",
|
||||
" Execute test suite",
|
||||
" IF all pass → Success (Phase 3)",
|
||||
" ELSE → Store failures, proceed to Phase 2",
|
||||
"PHASE 2: Iterative Fix Cycle (max 5 iterations)",
|
||||
" LOOP (max 5 times):",
|
||||
" 1. Gemini diagnoses failure with bug-fix template → fix suggestion",
|
||||
" 2. Check meta.use_codex flag:",
|
||||
" - IF false (default): Present fix to user for manual application",
|
||||
" - IF true (--use-codex): Codex applies fix with resume for continuity",
|
||||
" 3. Retest and check results",
|
||||
" 4. IF pass → Exit loop to Phase 3",
|
||||
" 5. ELSE → Continue with updated context",
|
||||
" IF max iterations → Revert + report failure",
|
||||
"PHASE 3: Final Validation",
|
||||
" Confirm all tests pass",
|
||||
" Generate summary (include test generation info)",
|
||||
" Certify code APPROVED"
|
||||
],
|
||||
"error_handling": {
|
||||
"max_iterations_reached": {
|
||||
"action": "revert_all_changes",
|
||||
"commands": [
|
||||
"bash(git reset --hard HEAD)",
|
||||
"bash(jq '.status = \"blocked\"' .workflow/[session]/.task/IMPL-001.json > temp.json && mv temp.json .workflow/[session]/.task/IMPL-001.json)"
|
||||
],
|
||||
"report": "Generate failure report with iteration logs in .summaries/IMPL-001-failure-report.md"
|
||||
},
|
||||
"test_command_fails": {
|
||||
"action": "treat_as_test_failure",
|
||||
"context": "Use stderr as failure context for Gemini diagnosis"
|
||||
},
|
||||
"codex_apply_fails": {
|
||||
"action": "retry_once_then_skip",
|
||||
"fallback": "Mark iteration as skipped, continue to next"
|
||||
},
|
||||
"gemini_diagnosis_fails": {
|
||||
"action": "retry_with_simplified_context",
|
||||
"fallback": "Use previous diagnosis, continue"
|
||||
},
|
||||
"regression_detected": {
|
||||
"action": "log_warning_continue",
|
||||
"context": "Include regression info in next Gemini diagnosis"
|
||||
}
|
||||
},
|
||||
"depends_on": [],
|
||||
"output": "test_fix_results"
|
||||
}
|
||||
],
|
||||
"target_files": [
|
||||
"Auto-discovered from test failures",
|
||||
"Extracted from Gemini diagnosis each iteration",
|
||||
"Format: file:function:lines or file (for new files)"
|
||||
],
|
||||
"codex_session": {
|
||||
"strategy": "resume_for_continuity",
|
||||
"first_iteration": "codex exec \"fix iteration 1\" --full-auto",
|
||||
"subsequent_iterations": "codex exec \"fix iteration N\" resume --last",
|
||||
"benefits": [
|
||||
"Maintains conversation context across fixes",
|
||||
"Remembers previous decisions and patterns",
|
||||
"Ensures consistency in fix approach",
|
||||
"Reduces redundant context injection"
|
||||
]
|
||||
}
|
||||
}
|
||||
2. **Load TEST_ANALYSIS_RESULTS.md** (if not in memory, REQUIRED)
|
||||
```javascript
|
||||
if (!memory.has("TEST_ANALYSIS_RESULTS.md")) {
|
||||
Read(.workflow/{test-session-id}/.process/TEST_ANALYSIS_RESULTS.md)
|
||||
}
|
||||
```
|
||||
|
||||
3. **Load Test Context Package** (if not in memory)
|
||||
```javascript
|
||||
if (!memory.has("test-context-package.json")) {
|
||||
Read(.workflow/{test-session-id}/.process/test-context-package.json)
|
||||
}
|
||||
```
|
||||
|
||||
4. **Load Source Session Summaries** (if source_session_id exists)
|
||||
```javascript
|
||||
if (sessionMetadata.source_session_id) {
|
||||
const summaryFiles = Bash("find .workflow/{source-session-id}/.summaries/ -name 'IMPL-*-summary.md'")
|
||||
summaryFiles.forEach(file => Read(file))
|
||||
}
|
||||
```
|
||||
|
||||
5. **Code Analysis with Native Tools** (optional - enhance understanding)
|
||||
```bash
|
||||
# Find test files and patterns
|
||||
find . -name "*test*" -type f
|
||||
rg "describe|it\(|test\(" -g "*.ts"
|
||||
```
|
||||
|
||||
6. **MCP External Research** (optional - gather test best practices)
|
||||
```javascript
|
||||
// Get external test examples and patterns
|
||||
mcp__exa__get_code_context_exa(
|
||||
query="TypeScript test generation best practices jest",
|
||||
tokensNum="dynamic"
|
||||
)
|
||||
```
|
||||
|
||||
### Phase 2: Agent Execution (Document Generation)
|
||||
|
||||
**Pre-Agent Template Selection** (Command decides path before invoking agent):
|
||||
```javascript
|
||||
// Command checks flag and selects template PATH (not content)
|
||||
const templatePath = hasCliExecuteFlag
|
||||
? "~/.claude/workflows/cli-templates/prompts/workflow/task-json-cli-mode.txt"
|
||||
: "~/.claude/workflows/cli-templates/prompts/workflow/task-json-agent-mode.txt";
|
||||
```
|
||||
|
||||
**Agent Invocation**:
|
||||
```javascript
|
||||
Task(
|
||||
subagent_type="action-planning-agent",
|
||||
description="Generate test-fix task JSON and implementation plan",
|
||||
prompt=`
|
||||
## Execution Context
|
||||
|
||||
**Session ID**: WFS-test-{session-id}
|
||||
**Workflow Type**: Test Session
|
||||
**Execution Mode**: {agent-mode | cli-execute-mode}
|
||||
**Task JSON Template Path**: {template_path}
|
||||
**Use Codex**: {true | false}
|
||||
|
||||
## Phase 1: Discovery Results (Provided Context)
|
||||
|
||||
### Test Session Metadata
|
||||
{session_metadata_content}
|
||||
- source_session_id: {source_session_id} (if exists)
|
||||
- workflow_type: "test_session"
|
||||
|
||||
### TEST_ANALYSIS_RESULTS.md (REQUIRED)
|
||||
{test_analysis_results_content}
|
||||
- Coverage Assessment
|
||||
- Test Framework & Conventions
|
||||
- Test Requirements by File
|
||||
- Test Generation Strategy
|
||||
- Implementation Targets
|
||||
- Success Criteria
|
||||
|
||||
### Test Context Package
|
||||
{test_context_package_summary}
|
||||
- Existing test patterns, framework config, coverage analysis
|
||||
|
||||
### Source Session Implementation Context (Optional)
|
||||
{source_session_summaries}
|
||||
- Implementation context from completed session
|
||||
|
||||
### MCP Analysis Results (Optional)
|
||||
**Code Structure**: {mcp_code_index_results}
|
||||
**External Research**: {mcp_exa_research_results}
|
||||
|
||||
## Phase 2: Test Task Document Generation
|
||||
|
||||
**Agent Configuration Reference**: All test task generation rules, test-fix cycle structure, quality standards, and execution details are defined in action-planning-agent.
|
||||
|
||||
Refer to: @.claude/agents/action-planning-agent.md for:
|
||||
- Test Task Decomposition Standards
|
||||
- Test-Fix-Retest Cycle Requirements
|
||||
- 5-Field Task JSON Schema
|
||||
- IMPL_PLAN.md Structure (Test variant)
|
||||
- TODO_LIST.md Format
|
||||
- Test Execution Flow & Quality Validation
|
||||
|
||||
### Test-Specific Requirements Summary
|
||||
|
||||
#### Task Structure Philosophy
|
||||
- **Minimum 2 tasks**: IMPL-001 (test generation) + IMPL-002 (test execution & fix)
|
||||
- **Expandable**: Add IMPL-003+ for complex projects (per-module, integration, etc.)
|
||||
- IMPL-001: Uses @code-developer or CLI execution
|
||||
- IMPL-002: Uses @test-fix-agent with iterative fix cycle
|
||||
|
||||
#### Test-Fix Cycle Configuration
|
||||
- **Max Iterations**: 5 (for IMPL-002)
|
||||
- **Diagnosis Tool**: Gemini with bug-fix template
|
||||
- **Fix Application**: Manual (default) or Codex (if --use-codex flag)
|
||||
- **Cycle Pattern**: test → gemini_diagnose → manual_fix (or codex) → retest
|
||||
- **Exit Conditions**: All tests pass OR max iterations reached (auto-revert)
|
||||
|
||||
#### Required Outputs Summary
|
||||
|
||||
##### 1. Test Task JSON Files (.task/IMPL-*.json)
|
||||
- **Location**: `.workflow/{test-session-id}/.task/`
|
||||
- **Template**: Read from `{template_path}` (pre-selected by command based on `--cli-execute` flag)
|
||||
- **Schema**: 5-field structure with test-specific metadata
|
||||
- IMPL-001: `meta.type: "test-gen"`, `meta.agent: "@code-developer"`
|
||||
- IMPL-002: `meta.type: "test-fix"`, `meta.agent: "@test-fix-agent"`, `meta.use_codex: {use_codex}`
|
||||
- `flow_control`: Test generation approach (IMPL-001) or test-fix cycle (IMPL-002)
|
||||
- **Details**: See action-planning-agent.md § Test Task JSON Generation
|
||||
|
||||
##### 2. IMPL_PLAN.md (Test Variant)
|
||||
- **Location**: `.workflow/{test-session-id}/IMPL_PLAN.md`
|
||||
- **Template**: `~/.claude/workflows/cli-templates/prompts/workflow/impl-plan-template.txt`
|
||||
- **Test-Specific Frontmatter**: workflow_type="test_session", test_framework, source_session_id
|
||||
- **Test-Fix-Retest Cycle Section**: Iterative fix cycle with Gemini diagnosis
|
||||
- **Details**: See action-planning-agent.md § Test Implementation Plan Creation
|
||||
|
||||
##### 3. TODO_LIST.md
|
||||
- **Location**: `.workflow/{test-session-id}/TODO_LIST.md`
|
||||
- **Format**: Task list with test generation and execution phases
|
||||
- **Status**: [ ] (pending), [x] (completed)
|
||||
- **Details**: See action-planning-agent.md § TODO List Generation
|
||||
|
||||
### Agent Execution Summary
|
||||
|
||||
**Key Steps** (Detailed instructions in action-planning-agent.md):
|
||||
1. Load task JSON template from provided path
|
||||
2. Parse TEST_ANALYSIS_RESULTS.md for test requirements
|
||||
3. Generate IMPL-001 (test generation) task JSON
|
||||
4. Generate IMPL-002 (test execution & fix) task JSON with use_codex flag
|
||||
5. Generate additional IMPL-*.json if project complexity requires
|
||||
6. Create IMPL_PLAN.md using test template variant
|
||||
7. Generate TODO_LIST.md with test task indicators
|
||||
8. Update session state with test metadata
|
||||
|
||||
**Quality Gates** (Full checklist in action-planning-agent.md):
|
||||
- ✓ Minimum 2 tasks created (IMPL-001 + IMPL-002)
|
||||
- ✓ IMPL-001 has test generation approach from TEST_ANALYSIS_RESULTS.md
|
||||
- ✓ IMPL-002 has test-fix cycle with correct use_codex flag
|
||||
- ✓ Test framework configuration integrated
|
||||
- ✓ Source session context referenced (if exists)
|
||||
- ✓ MCP tool integration added
|
||||
- ✓ Documents follow test template structure
|
||||
|
||||
## Output
|
||||
|
||||
Generate all three documents and report completion status:
|
||||
- Test task JSON files created: N files (minimum 2)
|
||||
- Test requirements integrated: TEST_ANALYSIS_RESULTS.md
|
||||
- Test context integrated: existing patterns and coverage
|
||||
- Source session context: {source_session_id} summaries (if exists)
|
||||
- MCP enhancements: code-index, exa-research
|
||||
- Session ready for test execution: /workflow:execute or /workflow:test-cycle-execute
|
||||
`
|
||||
)
|
||||
```
|
||||
|
||||
### Agent Context Passing
|
||||
|
||||
**Memory-Aware Context Assembly**:
|
||||
```javascript
|
||||
// Assemble context package for agent
|
||||
const agentContext = {
|
||||
session_id: "WFS-test-[id]",
|
||||
workflow_type: "test_session",
|
||||
use_codex: hasUseCodexFlag,
|
||||
|
||||
// Use memory if available, else load
|
||||
session_metadata: memory.has("workflow-session.json")
|
||||
? memory.get("workflow-session.json")
|
||||
: Read(.workflow/WFS-test-[id]/workflow-session.json),
|
||||
|
||||
test_analysis_results_path: ".workflow/WFS-test-[id]/.process/TEST_ANALYSIS_RESULTS.md",
|
||||
|
||||
test_analysis_results: memory.has("TEST_ANALYSIS_RESULTS.md")
|
||||
? memory.get("TEST_ANALYSIS_RESULTS.md")
|
||||
: Read(".workflow/WFS-test-[id]/.process/TEST_ANALYSIS_RESULTS.md"),
|
||||
|
||||
test_context_package_path: ".workflow/WFS-test-[id]/.process/test-context-package.json",
|
||||
|
||||
test_context_package: memory.has("test-context-package.json")
|
||||
? memory.get("test-context-package.json")
|
||||
: Read(".workflow/WFS-test-[id]/.process/test-context-package.json"),
|
||||
|
||||
// Load source session summaries if exists
|
||||
source_session_id: session_metadata.source_session_id || null,
|
||||
|
||||
source_session_summaries: session_metadata.source_session_id
|
||||
? loadSourceSummaries(session_metadata.source_session_id)
|
||||
: null,
|
||||
|
||||
// Optional MCP enhancements
|
||||
mcp_analysis: executeMcpDiscovery()
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 3: IMPL_PLAN.md Generation
|
||||
## Test Task Structure Reference
|
||||
|
||||
#### Document Structure
|
||||
```markdown
|
||||
---
|
||||
identifier: WFS-test-[session-id]
|
||||
source_session: WFS-[source-session-id]
|
||||
workflow_type: test_session
|
||||
test_framework: jest|pytest|cargo|detected
|
||||
---
|
||||
This section provides quick reference for test task JSON structure. For complete implementation details, see the agent invocation prompt in Phase 2 above.
|
||||
|
||||
# Test Validation Plan: [Source Session Topic]
|
||||
|
||||
## Summary
|
||||
Execute comprehensive test suite for implementation from session WFS-[source-session-id].
|
||||
Diagnose and fix all test failures using iterative Gemini analysis and Codex execution.
|
||||
|
||||
## Source Session Context
|
||||
- **Implementation Session**: WFS-[source-session-id]
|
||||
- **Completed Tasks**: IMPL-001, IMPL-002, ...
|
||||
- **Changed Files**: [list from git log]
|
||||
- **Implementation Summaries**: [references to source session summaries]
|
||||
|
||||
## Test Framework
|
||||
- **Detected Framework**: jest|pytest|cargo|other
|
||||
- **Test Command**: npm test|pytest|cargo test
|
||||
- **Test Files**: [discovered test files]
|
||||
- **Coverage**: [estimated test coverage]
|
||||
|
||||
## Test-Fix-Retest Cycle
|
||||
- **Max Iterations**: 5
|
||||
- **Diagnosis Tool**: Gemini (analysis mode with bug-fix template from bug-index.md)
|
||||
- **Fix Tool**: Manual (default, meta.use_codex=false) or Codex (if --use-codex flag, meta.use_codex=true)
|
||||
- **Verification**: Bash test execution + regression check
|
||||
|
||||
### Cycle Workflow
|
||||
1. **Initial Test**: Execute full suite, capture failures
|
||||
2. **Iterative Fix Loop** (max 5 times):
|
||||
- Gemini diagnoses failure using bug-fix template → surgical fix suggestion
|
||||
- Check meta.use_codex flag:
|
||||
- If false (default): Present fix to user for manual application
|
||||
- If true (--use-codex): Codex applies fix with resume for context continuity
|
||||
- Retest and verify (check for regressions)
|
||||
- Continue until all pass or max iterations reached
|
||||
3. **Final Validation**: Confirm all tests pass, certify code
|
||||
|
||||
### Error Recovery
|
||||
- **Max iterations reached**: Revert all changes, report failure
|
||||
- **Test command fails**: Treat as test failure, diagnose with Gemini
|
||||
- **Codex fails**: Retry once, skip iteration if still failing
|
||||
- **Regression detected**: Log warning, include in next diagnosis
|
||||
|
||||
## Task Breakdown
|
||||
- **IMPL-001**: Execute and validate tests with iterative fix cycle
|
||||
|
||||
## Implementation Strategy
|
||||
- **Phase 1**: Initial test execution and failure capture
|
||||
- **Phase 2**: Iterative Gemini diagnosis + Codex fix + retest
|
||||
- **Phase 3**: Final validation and code certification
|
||||
|
||||
## Success Criteria
|
||||
- All tests pass (100% pass rate)
|
||||
- No test failures or errors in final run
|
||||
- Minimal, surgical code changes
|
||||
- Iteration logs document fix progression
|
||||
- Code certified APPROVED for deployment
|
||||
```
|
||||
|
||||
### Phase 4: TODO_LIST.md Generation
|
||||
|
||||
```markdown
|
||||
# Tasks: Test Validation for [Source Session]
|
||||
|
||||
## Task Progress
|
||||
- [ ] **IMPL-001**: Execute and validate tests with iterative fix cycle → [📋](./.task/IMPL-001.json)
|
||||
|
||||
## Execution Details
|
||||
- **Source Session**: WFS-[source-session-id]
|
||||
- **Test Framework**: jest|pytest|cargo
|
||||
- **Max Iterations**: 5
|
||||
- **Tools**: Gemini diagnosis + Codex resume fixes
|
||||
|
||||
## Status Legend
|
||||
- `- [ ]` = Pending
|
||||
- `- [x]` = Completed
|
||||
```
|
||||
**Quick Reference**:
|
||||
- Minimum 2 tasks: IMPL-001 (test-gen) + IMPL-002 (test-fix)
|
||||
- Expandable for complex projects (IMPL-003+)
|
||||
- IMPL-001: `meta.agent: "@code-developer"`, test generation approach
|
||||
- IMPL-002: `meta.agent: "@test-fix-agent"`, `meta.use_codex: {flag}`, test-fix cycle
|
||||
- See Phase 2 agent prompt for full schema and requirements
|
||||
|
||||
## Output Files Structure
|
||||
```
|
||||
@@ -648,29 +356,42 @@ Diagnose and fix all test failures using iterative Gemini analysis and Codex exe
|
||||
## Integration & Usage
|
||||
|
||||
### Command Chain
|
||||
- **Called By**: `/workflow:test-gen` (Phase 4)
|
||||
- **Calls**: None (terminal command)
|
||||
- **Followed By**: `/workflow:execute` (user-triggered)
|
||||
- **Called By**: `/workflow:test-gen` (Phase 4), `/workflow:test-fix-gen` (Phase 4)
|
||||
- **Invokes**: `action-planning-agent` for autonomous task generation
|
||||
- **Followed By**: `/workflow:execute` or `/workflow:test-cycle-execute` (user-triggered)
|
||||
|
||||
### Basic Usage
|
||||
```bash
|
||||
# Manual fix mode (default)
|
||||
# Agent mode (default, autonomous execution)
|
||||
/workflow:tools:test-task-generate --session WFS-test-auth
|
||||
|
||||
# Automated Codex fix mode
|
||||
# With automated Codex fixes for IMPL-002
|
||||
/workflow:tools:test-task-generate --use-codex --session WFS-test-auth
|
||||
|
||||
# CLI execution mode for IMPL-001 test generation
|
||||
/workflow:tools:test-task-generate --cli-execute --session WFS-test-auth
|
||||
|
||||
# Both flags combined
|
||||
/workflow:tools:test-task-generate --cli-execute --use-codex --session WFS-test-auth
|
||||
```
|
||||
|
||||
### Flag Behavior
|
||||
- **No flag**: `meta.use_codex=false`, manual fixes presented to user
|
||||
- **--use-codex**: `meta.use_codex=true`, Codex automatically applies fixes with resume mechanism
|
||||
### Execution Modes
|
||||
- **Agent mode** (default): Uses `action-planning-agent` with agent-mode task template
|
||||
- **CLI mode** (`--cli-execute`): Uses Gemini/Qwen/Codex with cli-mode task template for IMPL-001
|
||||
- **Codex fixes** (`--use-codex`): Enables automated fixes in IMPL-002 task
|
||||
|
||||
## Related Commands
|
||||
- `/workflow:test-gen` - Creates test session and calls this tool
|
||||
- `/workflow:tools:context-gather` - Provides cross-session context
|
||||
- `/workflow:tools:concept-enhanced` - Provides test strategy analysis
|
||||
- `/workflow:execute` - Executes the generated test-fix task
|
||||
- `@test-fix-agent` - Agent that executes the iterative test-fix cycle
|
||||
### Flag Behavior
|
||||
- **No flags**: `meta.use_codex=false` (manual fixes), agent-mode generation
|
||||
- **--use-codex**: `meta.use_codex=true` (Codex automated fixes with resume mechanism in IMPL-002)
|
||||
- **--cli-execute**: Uses CLI tool execution mode for IMPL-001 test generation
|
||||
- **Both flags**: CLI generation + automated Codex fixes
|
||||
|
||||
### Output
|
||||
- Test task JSON files in `.task/` directory (minimum 2: IMPL-001.json + IMPL-002.json)
|
||||
- IMPL_PLAN.md with test generation and fix cycle strategy
|
||||
- TODO_LIST.md with test task indicators
|
||||
- Session state updated with test metadata
|
||||
- MCP enhancements integrated (if available)
|
||||
|
||||
## Agent Execution Notes
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
name: animation-extract
|
||||
description: Extract animation and transition patterns from URLs, CSS, or interactive questioning for design system documentation
|
||||
argument-hint: "[--base-path <path>] [--session <id>] [--urls "<list>"] [--mode <auto|interactive>] [--focus "<types>"]"
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), Task(ui-design-agent), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*)
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), AskUserQuestion(*), Task(ui-design-agent), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*)
|
||||
---
|
||||
|
||||
# Animation Extraction Command
|
||||
@@ -50,8 +50,10 @@ IF --focus:
|
||||
ELSE:
|
||||
focus_types = ["all"] # Extract all animation types
|
||||
|
||||
# Determine base path
|
||||
bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect
|
||||
# Determine base path (auto-detect and convert to absolute)
|
||||
relative_path=$(find .workflow -type d -name "design-run-*" -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
|
||||
base_path=$(cd "$relative_path" && pwd)
|
||||
bash(test -d "$base_path" && echo "✓ Base path: $base_path" || echo "✗ Path not found")
|
||||
# OR use --base-path / --session parameters
|
||||
```
|
||||
|
||||
@@ -149,7 +151,7 @@ ELSE:
|
||||
|
||||
**Phase 1 Output**: `animations-{target}.json` (intermediate files)
|
||||
|
||||
## Phase 2: Interactive Animation Specification (Interactive/Fallback Mode)
|
||||
## Phase 2: Animation Question Generation (Agent Task 1)
|
||||
|
||||
### Step 1: Check if Extraction Sufficient
|
||||
|
||||
@@ -162,7 +164,7 @@ IF animations_extracted:
|
||||
# If sufficient data found, skip interactive mode
|
||||
IF total_animations >= 3 OR total_transitions >= 5:
|
||||
REPORT: "✅ Sufficient animation data extracted from CSS"
|
||||
SKIP to Phase 3
|
||||
SKIP to Phase 4
|
||||
ELSE:
|
||||
REPORT: "⚠️ Limited animation data found - launching interactive mode"
|
||||
extraction_insufficient = true
|
||||
@@ -170,168 +172,118 @@ ELSE:
|
||||
extraction_insufficient = true
|
||||
```
|
||||
|
||||
### Step 2: Generate Animation Questions (Main Flow)
|
||||
### Step 2: Generate Animation Questions Using Agent
|
||||
|
||||
```bash
|
||||
# If extraction failed or insufficient, use interactive questioning
|
||||
IF extraction_insufficient OR extraction_mode == "interactive":
|
||||
REPORT: "🤔 Interactive animation specification mode"
|
||||
REPORT: " Context: {has_design_context ? 'Aligning with design tokens' : 'Standalone animation system'}"
|
||||
REPORT: " Focus: {focus_types}"
|
||||
**Executor**: `Task(ui-design-agent)`
|
||||
|
||||
# Determine question categories based on focus_types
|
||||
question_categories = []
|
||||
IF "all" IN focus_types OR "transitions" IN focus_types:
|
||||
question_categories.append("timing_scale")
|
||||
question_categories.append("easing_philosophy")
|
||||
Launch agent to generate context-aware animation questions based on project needs:
|
||||
|
||||
IF "all" IN focus_types OR "interactions" IN focus_types OR "hover" IN focus_types:
|
||||
question_categories.append("button_interactions")
|
||||
question_categories.append("card_interactions")
|
||||
question_categories.append("input_interactions")
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[ANIMATION_QUESTION_GENERATION_TASK]
|
||||
Generate contextual animation questions based on project context and focus types
|
||||
|
||||
IF "all" IN focus_types OR "page" IN focus_types:
|
||||
question_categories.append("page_transitions")
|
||||
SESSION: {session_id} | MODE: interactive | BASE_PATH: {base_path}
|
||||
|
||||
IF "all" IN focus_types OR "loading" IN focus_types:
|
||||
question_categories.append("loading_states")
|
||||
## Context Analysis
|
||||
- Focus types: {focus_types}
|
||||
- Design context: {has_design_context}
|
||||
- Extracted animations: {animations_extracted ? "Available" : "None"}
|
||||
|
||||
IF "all" IN focus_types OR "scroll" IN focus_types:
|
||||
question_categories.append("scroll_animations")
|
||||
## Question Categories to Consider
|
||||
Based on focus_types, include relevant categories:
|
||||
- "all" or "transitions": timing_scale, easing_philosophy
|
||||
- "all" or "interactions" or "hover": button_interactions, card_interactions, input_interactions
|
||||
- "all" or "page": page_transitions
|
||||
- "all" or "loading": loading_states
|
||||
- "all" or "scroll": scroll_animations
|
||||
|
||||
## Generate Question Structure
|
||||
For each applicable category, create question with:
|
||||
1. **Category ID** (e.g., "timing_scale", "button_interactions")
|
||||
2. **Question text** (in Chinese, clear and concise)
|
||||
3. **Options** (2-5 options per question):
|
||||
- Option key (a, b, c, d, e)
|
||||
- Option label (brief description)
|
||||
- Option details (detailed explanation with technical specs)
|
||||
- Recommended scenarios (when to use this option)
|
||||
|
||||
## Output
|
||||
Write single JSON file: {base_path}/.intermediates/animation-analysis/question-options.json
|
||||
|
||||
Use schema:
|
||||
{
|
||||
"metadata": {
|
||||
"generated_at": "<timestamp>",
|
||||
"focus_types": ["..."],
|
||||
"total_questions": <count>
|
||||
},
|
||||
"questions": [
|
||||
{
|
||||
"id": 1,
|
||||
"category": "timing_scale",
|
||||
"question": "您的设计需要什么样的过渡速度?",
|
||||
"options": [
|
||||
{
|
||||
"key": "a",
|
||||
"label": "快速敏捷",
|
||||
"details": "100-200ms 过渡,适合工具型应用和即时反馈场景",
|
||||
"duration_range": "100-200ms"
|
||||
},
|
||||
...
|
||||
]
|
||||
},
|
||||
...
|
||||
]
|
||||
}
|
||||
|
||||
CRITICAL: Use Write() tool immediately after generating complete JSON
|
||||
`
|
||||
```
|
||||
|
||||
### Step 3: Output Questions in Text Format (Main Flow)
|
||||
### Step 3: Verify Question File Created
|
||||
|
||||
```bash
|
||||
bash(test -f {base_path}/.intermediates/animation-analysis/question-options.json && echo "created")
|
||||
|
||||
# Quick validation
|
||||
bash(cat {base_path}/.intermediates/animation-analysis/question-options.json | grep -q "questions" && echo "valid")
|
||||
```
|
||||
|
||||
**Output**: `question-options.json` with context-aware questions
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: Interactive Animation Specification (User Interaction)
|
||||
|
||||
### Step 1: Load Generated Questions
|
||||
|
||||
```bash
|
||||
# Read generated questions from JSON file
|
||||
question_data = Read({base_path}/.intermediates/animation-analysis/question-options.json)
|
||||
|
||||
REPORT: "🤔 Interactive animation specification mode"
|
||||
REPORT: " Context: {has_design_context ? 'Aligning with design tokens' : 'Standalone animation system'}"
|
||||
REPORT: " Questions: {question_data.metadata.total_questions} questions loaded"
|
||||
REPORT: " Focus: {question_data.metadata.focus_types}"
|
||||
```
|
||||
|
||||
### Step 2: Present Questions to User
|
||||
|
||||
```markdown
|
||||
# Generate and output structured questions
|
||||
# Display questions from loaded JSON
|
||||
REPORT: ""
|
||||
REPORT: "===== 动画规格交互式配置 ====="
|
||||
REPORT: ""
|
||||
|
||||
question_number = 1
|
||||
questions_output = []
|
||||
FOR each question IN question_data.questions:
|
||||
REPORT: "【问题{question.id} - {question.category}】{question.question}"
|
||||
|
||||
# Q1: Timing Scale (if included)
|
||||
IF "timing_scale" IN question_categories:
|
||||
REPORT: "【问题{question_number} - 时间尺度】您的设计需要什么样的过渡速度?"
|
||||
REPORT: "a) 快速敏捷"
|
||||
REPORT: " 说明:100-200ms 过渡,适合工具型应用和即时反馈场景"
|
||||
REPORT: "b) 平衡适中"
|
||||
REPORT: " 说明:200-400ms 过渡,通用选择,符合多数用户预期"
|
||||
REPORT: "c) 流畅舒缓"
|
||||
REPORT: " 说明:400-600ms 过渡,适合品牌展示和沉浸式体验"
|
||||
REPORT: "d) 自定义"
|
||||
REPORT: " 说明:需要指定具体数值和使用场景"
|
||||
REPORT: ""
|
||||
questions_output.append({id: question_number, category: "timing_scale", options: ["a", "b", "c", "d"]})
|
||||
question_number += 1
|
||||
FOR each option IN question.options:
|
||||
REPORT: "{option.key}) {option.label}"
|
||||
REPORT: " 说明:{option.details}"
|
||||
|
||||
# Q2: Easing Philosophy (if included)
|
||||
IF "easing_philosophy" IN question_categories:
|
||||
REPORT: "【问题{question_number} - 缓动风格】哪种缓动曲线符合您的品牌调性?"
|
||||
REPORT: "a) 线性匀速"
|
||||
REPORT: " 说明:恒定速度,技术感和精确性,适合数据可视化"
|
||||
REPORT: "b) 快入慢出"
|
||||
REPORT: " 说明:快速启动自然减速,最接近物理世界,通用推荐"
|
||||
REPORT: "c) 慢入慢出"
|
||||
REPORT: " 说明:平滑对称,精致优雅,适合高端品牌"
|
||||
REPORT: "d) 弹性效果"
|
||||
REPORT: " 说明:Spring/Bounce 回弹,活泼现代,适合互动性强的应用"
|
||||
REPORT: ""
|
||||
questions_output.append({id: question_number, category: "easing_philosophy", options: ["a", "b", "c", "d"]})
|
||||
question_number += 1
|
||||
|
||||
# Q3-5: Interaction Animations (button, card, input - if included)
|
||||
IF "button_interactions" IN question_categories:
|
||||
REPORT: "【问题{question_number} - 按钮交互】按钮悬停/点击时如何反馈?"
|
||||
REPORT: "a) 微妙变化"
|
||||
REPORT: " 说明:仅颜色/透明度变化,适合简约设计"
|
||||
REPORT: "b) 抬升效果"
|
||||
REPORT: " 说明:轻微缩放+阴影加深,增强物理感知"
|
||||
REPORT: "c) 滑动移位"
|
||||
REPORT: " 说明:Transform translateY,视觉引导明显"
|
||||
REPORT: "d) 无动画"
|
||||
REPORT: " 说明:静态交互,性能优先或特定品牌要求"
|
||||
REPORT: ""
|
||||
questions_output.append({id: question_number, category: "button_interactions", options: ["a", "b", "c", "d"]})
|
||||
question_number += 1
|
||||
|
||||
IF "card_interactions" IN question_categories:
|
||||
REPORT: "【问题{question_number} - 卡片交互】卡片悬停时的动画效果?"
|
||||
REPORT: "a) 阴影加深"
|
||||
REPORT: " 说明:Box-shadow 变化,层次感增强"
|
||||
REPORT: "b) 上浮效果"
|
||||
REPORT: " 说明:Transform translateY(-4px),明显的空间层次"
|
||||
REPORT: "c) 缩放放大"
|
||||
REPORT: " 说明:Scale(1.02),突出焦点内容"
|
||||
REPORT: "d) 无动画"
|
||||
REPORT: " 说明:静态卡片,性能或设计考量"
|
||||
REPORT: ""
|
||||
questions_output.append({id: question_number, category: "card_interactions", options: ["a", "b", "c", "d"]})
|
||||
question_number += 1
|
||||
|
||||
IF "input_interactions" IN question_categories:
|
||||
REPORT: "【问题{question_number} - 表单交互】输入框是否需要微交互反馈?"
|
||||
REPORT: "a) 聚焦动画"
|
||||
REPORT: " 说明:边框/阴影过渡,清晰的状态指示"
|
||||
REPORT: "b) 错误抖动"
|
||||
REPORT: " 说明:水平shake动画,错误提示更明显"
|
||||
REPORT: "c) 成功勾选"
|
||||
REPORT: " 说明:Checkmark 动画,完成反馈"
|
||||
REPORT: "d) 全部包含"
|
||||
REPORT: " 说明:聚焦+错误+成功的完整反馈体系"
|
||||
REPORT: "e) 无微交互"
|
||||
REPORT: " 说明:标准表单,无额外动画"
|
||||
REPORT: ""
|
||||
questions_output.append({id: question_number, category: "input_interactions", options: ["a", "b", "c", "d", "e"]})
|
||||
question_number += 1
|
||||
|
||||
# Q6: Page Transitions (if included)
|
||||
IF "page_transitions" IN question_categories:
|
||||
REPORT: "【问题{question_number} - 页面过渡】页面/路由切换是否需要过渡动画?"
|
||||
REPORT: "a) 淡入淡出"
|
||||
REPORT: " 说明:Crossfade 效果,平滑过渡不突兀"
|
||||
REPORT: "b) 滑动切换"
|
||||
REPORT: " 说明:Swipe left/right,方向性导航"
|
||||
REPORT: "c) 缩放过渡"
|
||||
REPORT: " 说明:Scale in/out,空间层次感"
|
||||
REPORT: "d) 无过渡"
|
||||
REPORT: " 说明:即时切换,性能优先"
|
||||
REPORT: ""
|
||||
questions_output.append({id: question_number, category: "page_transitions", options: ["a", "b", "c", "d"]})
|
||||
question_number += 1
|
||||
|
||||
# Q7: Loading States (if included)
|
||||
IF "loading_states" IN question_categories:
|
||||
REPORT: "【问题{question_number} - 加载状态】加载时使用何种动画风格?"
|
||||
REPORT: "a) 旋转加载器"
|
||||
REPORT: " 说明:Spinner 圆形旋转,通用加载指示"
|
||||
REPORT: "b) 脉冲闪烁"
|
||||
REPORT: " 说明:Opacity pulse,轻量级反馈"
|
||||
REPORT: "c) 骨架屏"
|
||||
REPORT: " 说明:Shimmer effect,内容占位预览"
|
||||
REPORT: "d) 进度条"
|
||||
REPORT: " 说明:Linear fill,进度量化展示"
|
||||
REPORT: ""
|
||||
questions_output.append({id: question_number, category: "loading_states", options: ["a", "b", "c", "d"]})
|
||||
question_number += 1
|
||||
|
||||
# Q8: Scroll Animations (if included)
|
||||
IF "scroll_animations" IN question_categories:
|
||||
REPORT: "【问题{question_number} - 滚动动画】元素是否在滚动时触发动画?"
|
||||
REPORT: "a) 淡入出现"
|
||||
REPORT: " 说明:Opacity 0→1,渐进式内容呈现"
|
||||
REPORT: "b) 上滑出现"
|
||||
REPORT: " 说明:TranslateY + fade,方向性引导"
|
||||
REPORT: "c) 缩放淡入"
|
||||
REPORT: " 说明:Scale 0.9→1 + fade,聚焦效果"
|
||||
REPORT: "d) 交错延迟"
|
||||
REPORT: " 说明:Stagger 序列动画,列表渐次呈现"
|
||||
REPORT: "e) 无滚动动画"
|
||||
REPORT: " 说明:静态内容,性能或可访问性考量"
|
||||
REPORT: ""
|
||||
questions_output.append({id: question_number, category: "scroll_animations", options: ["a", "b", "c", "d", "e"]})
|
||||
question_number += 1
|
||||
|
||||
REPORT: "支持格式:"
|
||||
REPORT: "- 空格分隔:1a 2b 3c"
|
||||
@@ -341,7 +293,7 @@ REPORT: ""
|
||||
REPORT: "请输入您的选择:"
|
||||
```
|
||||
|
||||
### Step 4: Wait for User Input (Main Flow)
|
||||
### Step 3: Wait for User Input (Main Flow)
|
||||
|
||||
```javascript
|
||||
# Wait for user input
|
||||
@@ -351,7 +303,7 @@ user_raw_input = WAIT_FOR_USER_INPUT()
|
||||
REPORT: "收到输入: {user_raw_input}"
|
||||
```
|
||||
|
||||
### Step 5: Parse User Answers (Main Flow)
|
||||
### Step 4: Parse User Answers and Update JSON
|
||||
|
||||
```javascript
|
||||
# Intelligent input parsing (support multiple formats)
|
||||
@@ -359,7 +311,7 @@ answers = {}
|
||||
|
||||
# Parse input using intelligent matching
|
||||
# Support formats: "1a 2b 3c", "1a,2b,3c", "1a 2b,3c"
|
||||
parsed_responses = PARSE_USER_INPUT(user_raw_input, questions_output)
|
||||
parsed_responses = PARSE_USER_INPUT(user_raw_input, question_data.questions)
|
||||
|
||||
# Validate parsing
|
||||
IF parsed_responses.is_valid:
|
||||
@@ -369,7 +321,7 @@ IF parsed_responses.is_valid:
|
||||
selected_option = response.option
|
||||
|
||||
# Find category for this question
|
||||
FOR question IN questions_output:
|
||||
FOR question IN question_data.questions:
|
||||
IF question.id == question_id:
|
||||
category = question.category
|
||||
answers[category] = selected_option
|
||||
@@ -378,105 +330,26 @@ IF parsed_responses.is_valid:
|
||||
ELSE:
|
||||
REPORT: "❌ 输入格式无法识别,请参考格式示例重新输入:"
|
||||
REPORT: " 示例:1a 2b 3c 4d"
|
||||
# Return to Step 3 for re-input
|
||||
GOTO Step 3
|
||||
```
|
||||
# Return to Step 2 for re-input
|
||||
GOTO Step 2
|
||||
|
||||
### Step 6: Write Animation Specification (Main Flow)
|
||||
|
||||
```javascript
|
||||
# Map user choices to specification structure
|
||||
specification = {
|
||||
"metadata": {
|
||||
"source": "interactive",
|
||||
"timestamp": NOW(),
|
||||
"focus_types": focus_types,
|
||||
"has_design_context": has_design_context
|
||||
},
|
||||
"timing_scale": MAP_TIMING_SCALE(answers.timing_scale),
|
||||
"easing_philosophy": MAP_EASING_PHILOSOPHY(answers.easing_philosophy),
|
||||
"interactions": {
|
||||
"button": MAP_BUTTON_INTERACTION(answers.button_interactions),
|
||||
"card": MAP_CARD_INTERACTION(answers.card_interactions),
|
||||
"input": MAP_INPUT_INTERACTION(answers.input_interactions)
|
||||
},
|
||||
"page_transitions": MAP_PAGE_TRANSITIONS(answers.page_transitions),
|
||||
"loading_animations": MAP_LOADING_STATES(answers.loading_states),
|
||||
"scroll_animations": MAP_SCROLL_ANIMATIONS(answers.scroll_animations)
|
||||
// Update question-options.json with user selection
|
||||
question_data.user_selection = {
|
||||
"selected_at": NOW(),
|
||||
"answers": answers
|
||||
}
|
||||
|
||||
# Mapping functions (inline logic)
|
||||
FUNCTION MAP_TIMING_SCALE(option):
|
||||
SWITCH option:
|
||||
CASE "a": RETURN {scale: "fast", base_duration: "150ms", range: "100-200ms"}
|
||||
CASE "b": RETURN {scale: "balanced", base_duration: "300ms", range: "200-400ms"}
|
||||
CASE "c": RETURN {scale: "smooth", base_duration: "500ms", range: "400-600ms"}
|
||||
CASE "d": RETURN {scale: "custom", base_duration: "300ms", note: "User to provide values"}
|
||||
// Write updated file back
|
||||
Write({base_path}/.intermediates/animation-analysis/question-options.json, JSON.stringify(question_data, indent=2))
|
||||
|
||||
FUNCTION MAP_EASING_PHILOSOPHY(option):
|
||||
SWITCH option:
|
||||
CASE "a": RETURN {style: "linear", curve: "linear"}
|
||||
CASE "b": RETURN {style: "ease-out", curve: "cubic-bezier(0, 0, 0.2, 1)"}
|
||||
CASE "c": RETURN {style: "ease-in-out", curve: "cubic-bezier(0.4, 0, 0.2, 1)"}
|
||||
CASE "d": RETURN {style: "spring", curve: "cubic-bezier(0.34, 1.56, 0.64, 1)"}
|
||||
|
||||
FUNCTION MAP_BUTTON_INTERACTION(option):
|
||||
SWITCH option:
|
||||
CASE "a": RETURN {type: "subtle", properties: ["color", "background-color", "opacity"]}
|
||||
CASE "b": RETURN {type: "lift", properties: ["transform", "box-shadow"], transform: "scale(1.02)"}
|
||||
CASE "c": RETURN {type: "slide", properties: ["transform"], transform: "translateY(-2px)"}
|
||||
CASE "d": RETURN {type: "none", properties: []}
|
||||
|
||||
FUNCTION MAP_CARD_INTERACTION(option):
|
||||
SWITCH option:
|
||||
CASE "a": RETURN {type: "shadow", properties: ["box-shadow"]}
|
||||
CASE "b": RETURN {type: "float", properties: ["transform", "box-shadow"], transform: "translateY(-4px)"}
|
||||
CASE "c": RETURN {type: "scale", properties: ["transform"], transform: "scale(1.02)"}
|
||||
CASE "d": RETURN {type: "none", properties: []}
|
||||
|
||||
FUNCTION MAP_INPUT_INTERACTION(option):
|
||||
SWITCH option:
|
||||
CASE "a": RETURN {enabled: ["focus"], focus: {properties: ["border-color", "box-shadow"]}}
|
||||
CASE "b": RETURN {enabled: ["error"], error: {animation: "shake", keyframes: "translateX"}}
|
||||
CASE "c": RETURN {enabled: ["success"], success: {animation: "checkmark", keyframes: "draw"}}
|
||||
CASE "d": RETURN {enabled: ["focus", "error", "success"]}
|
||||
CASE "e": RETURN {enabled: []}
|
||||
|
||||
FUNCTION MAP_PAGE_TRANSITIONS(option):
|
||||
SWITCH option:
|
||||
CASE "a": RETURN {enabled: true, style: "fade", animation: "fadeIn/fadeOut"}
|
||||
CASE "b": RETURN {enabled: true, style: "slide", animation: "slideLeft/slideRight"}
|
||||
CASE "c": RETURN {enabled: true, style: "zoom", animation: "zoomIn/zoomOut"}
|
||||
CASE "d": RETURN {enabled: false}
|
||||
|
||||
FUNCTION MAP_LOADING_STATES(option):
|
||||
SWITCH option:
|
||||
CASE "a": RETURN {style: "spinner", animation: "rotate", keyframes: "360deg"}
|
||||
CASE "b": RETURN {style: "pulse", animation: "pulse", keyframes: "opacity"}
|
||||
CASE "c": RETURN {style: "skeleton", animation: "shimmer", keyframes: "gradient-shift"}
|
||||
CASE "d": RETURN {style: "progress", animation: "fill", keyframes: "width"}
|
||||
|
||||
FUNCTION MAP_SCROLL_ANIMATIONS(option):
|
||||
SWITCH option:
|
||||
CASE "a": RETURN {enabled: true, style: "fade", animation: "fadeIn"}
|
||||
CASE "b": RETURN {enabled: true, style: "slideUp", animation: "slideUp", transform: "translateY(20px)"}
|
||||
CASE "c": RETURN {enabled: true, style: "scaleIn", animation: "scaleIn", transform: "scale(0.9)"}
|
||||
CASE "d": RETURN {enabled: true, style: "stagger", animation: "fadeIn", stagger_delay: "100ms"}
|
||||
CASE "e": RETURN {enabled: false}
|
||||
|
||||
# Write specification file
|
||||
output_path = "{base_path}/.intermediates/animation-analysis/animation-specification.json"
|
||||
Write(output_path, JSON.stringify(specification, indent=2))
|
||||
|
||||
REPORT: "✅ Animation specification saved to {output_path}"
|
||||
REPORT: " Proceeding to token synthesis..."
|
||||
REPORT: "✅ Updated question-options.json with user selection"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Phase 2 Output**: `animation-specification.json` (user preferences)
|
||||
**Phase 3 Output**: Updated `question-options.json` with user answers embedded
|
||||
|
||||
## Phase 3: Animation Token Synthesis (Agent - No User Interaction)
|
||||
## Phase 4: Animation Token Synthesis (Agent - No User Interaction)
|
||||
|
||||
**Executor**: `Task(ui-design-agent)` for token generation
|
||||
|
||||
@@ -492,12 +365,17 @@ IF animations_extracted:
|
||||
IF exists({base_path}/.intermediates/animation-analysis/animations-{target}.json):
|
||||
extracted_animations.append(Read(file))
|
||||
|
||||
user_specification = null
|
||||
IF exists({base_path}/.intermediates/animation-analysis/animation-specification.json):
|
||||
user_specification = Read(file)
|
||||
REPORT: "✅ Loaded user specification from Phase 2"
|
||||
# Read user answers from question-options.json
|
||||
question_data = null
|
||||
IF exists({base_path}/.intermediates/animation-analysis/question-options.json):
|
||||
question_data = Read({base_path}/.intermediates/animation-analysis/question-options.json)
|
||||
IF question_data.user_selection:
|
||||
REPORT: "✅ Loaded user answers from question-options.json"
|
||||
ELSE:
|
||||
REPORT: "⚠️ No user selection found in question-options.json"
|
||||
question_data = null
|
||||
ELSE:
|
||||
REPORT: "⚠️ No user specification found - using extracted CSS only"
|
||||
REPORT: "⚠️ No question-options.json found - using extracted CSS only"
|
||||
|
||||
design_tokens = null
|
||||
IF has_design_context:
|
||||
@@ -522,9 +400,9 @@ Task(ui-design-agent): `
|
||||
1. **Extracted CSS Animations** (if available):
|
||||
${extracted_animations.length > 0 ? JSON.stringify(extracted_animations) : "None - skip CSS data"}
|
||||
|
||||
2. **User Specification** (REQUIRED if Phase 2 ran):
|
||||
File: {base_path}/.intermediates/animation-analysis/animation-specification.json
|
||||
${user_specification ? "Status: ✅ Found - READ this file for user choices" : "Status: ⚠️ Not found - use CSS extraction only"}
|
||||
2. **User Answers** (REQUIRED if Phase 2-3 ran):
|
||||
File: {base_path}/.intermediates/animation-analysis/question-options.json
|
||||
${question_data ? "Status: ✅ Found - READ this file for user choices in user_selection field" : "Status: ⚠️ Not found - use CSS extraction only"}
|
||||
|
||||
3. **Design Tokens Context** (for alignment):
|
||||
${design_tokens ? JSON.stringify(design_tokens) : "None - standalone animation system"}
|
||||
@@ -532,13 +410,13 @@ Task(ui-design-agent): `
|
||||
## Synthesis Rules
|
||||
|
||||
### Priority System
|
||||
1. User specification from animation-specification.json (highest priority)
|
||||
1. User answers from question-options.json user_selection field (highest priority)
|
||||
2. Extracted CSS values from animations-*.json (medium priority)
|
||||
3. Industry best practices (fallback)
|
||||
|
||||
### Duration Normalization
|
||||
- IF user_specification.timing_scale EXISTS:
|
||||
Use user's chosen scale (fast/balanced/smooth/custom)
|
||||
- IF question_data.user_selection.answers.timing_scale EXISTS:
|
||||
Map user's answer to duration scale using question_data.questions definitions
|
||||
- ELSE IF extracted CSS durations available:
|
||||
Cluster extracted durations into 3-5 semantic scales
|
||||
- ELSE:
|
||||
@@ -546,8 +424,8 @@ Task(ui-design-agent): `
|
||||
- Align with design token spacing scale if available
|
||||
|
||||
### Easing Standardization
|
||||
- IF user_specification.easing_philosophy EXISTS:
|
||||
Use user's chosen philosophy (linear/ease-out/ease-in-out/spring)
|
||||
- IF question_data.user_selection.answers.easing_philosophy EXISTS:
|
||||
Map user's answer to easing curve using question_data.questions definitions
|
||||
- ELSE IF extracted CSS easings available:
|
||||
Identify common easing functions from CSS
|
||||
- ELSE:
|
||||
@@ -564,17 +442,17 @@ Task(ui-design-agent): `
|
||||
- **page_transitions**: Route/view change animations (if user enabled)
|
||||
- **scroll_animations**: Scroll-triggered animations (if user enabled)
|
||||
|
||||
### User Specification Integration
|
||||
IF user_specification EXISTS:
|
||||
- Map user choices to token values:
|
||||
* timing_scale → duration values
|
||||
* easing_philosophy → easing curves
|
||||
* interactions.button → interactions.button-hover token
|
||||
* interactions.card → interactions.card-hover token
|
||||
* interactions.input → micro-interaction tokens
|
||||
* page_transitions → page_transitions tokens
|
||||
* loading_animations → loading state tokens
|
||||
* scroll_animations → scroll_animations tokens
|
||||
### User Answers Integration
|
||||
IF question_data.user_selection EXISTS:
|
||||
- Map user answers to token values using question definitions:
|
||||
* answers.timing_scale → duration values (use question options for specs)
|
||||
* answers.easing_philosophy → easing curves (use question options for specs)
|
||||
* answers.button_interactions → interactions.button-hover token
|
||||
* answers.card_interactions → interactions.card-hover token
|
||||
* answers.input_interactions → micro-interaction tokens
|
||||
* answers.page_transitions → page_transitions tokens
|
||||
* answers.loading_states → loading state tokens
|
||||
* answers.scroll_animations → scroll_animations tokens
|
||||
|
||||
## Generate Files
|
||||
|
||||
@@ -676,7 +554,7 @@ Task(ui-design-agent): `
|
||||
- animation-guide.md: {base_path}/animation-extraction/animation-guide.md
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ READ animation-specification.json if it exists (from Phase 2)
|
||||
- ✅ READ question-options.json if it exists (from Phase 2-3)
|
||||
- ✅ Use Write() tool immediately for both files
|
||||
- ✅ All tokens use CSS Custom Property format: var(--duration-fast)
|
||||
- ✅ Include prefers-reduced-motion media query guidance
|
||||
@@ -688,9 +566,9 @@ Task(ui-design-agent): `
|
||||
|
||||
---
|
||||
|
||||
**Phase 3 Output**: `animation-tokens.json` + `animation-guide.md`
|
||||
**Phase 4 Output**: `animation-tokens.json` + `animation-guide.md`
|
||||
|
||||
## Phase 4: Verify Output
|
||||
## Phase 5: Verify Output
|
||||
|
||||
### Step 1: Check Files Created
|
||||
|
||||
@@ -720,7 +598,8 @@ bash(ls -lh {base_path}/animation-extraction/)
|
||||
TodoWrite({todos: [
|
||||
{content: "Setup and input validation", status: "completed", activeForm: "Validating inputs"},
|
||||
{content: "CSS animation extraction (auto mode)", status: "completed", activeForm: "Extracting from CSS"},
|
||||
{content: "Interactive specification (main flow)", status: "completed", activeForm: "Collecting user input in main flow"},
|
||||
{content: "Question generation (agent)", status: "completed", activeForm: "Generating questions"},
|
||||
{content: "Interactive specification (user input)", status: "completed", activeForm: "Collecting user answers"},
|
||||
{content: "Animation token synthesis (agent - no interaction)", status: "completed", activeForm: "Generating tokens via agent"},
|
||||
{content: "Verify output files", status: "completed", activeForm: "Verifying files"}
|
||||
]});
|
||||
@@ -738,8 +617,8 @@ Configuration:
|
||||
{IF animations_extracted:
|
||||
- ✅ CSS extracted from {len(url_list)} URL(s)
|
||||
}
|
||||
{IF user_specification:
|
||||
- ✅ User specification via interactive mode (main flow)
|
||||
{IF question_data AND question_data.user_selection:
|
||||
- ✅ User answers via interactive mode (agent-generated questions)
|
||||
}
|
||||
{IF has_design_context:
|
||||
- ✅ Aligned with existing design tokens
|
||||
@@ -750,13 +629,15 @@ Generated Files:
|
||||
├── animation-tokens.json # Production-ready animation tokens
|
||||
└── animation-guide.md # Usage guidelines and examples
|
||||
|
||||
{IF animations_extracted:
|
||||
{IF animations_extracted OR question_data:
|
||||
Intermediate Analysis:
|
||||
{base_path}/.intermediates/animation-analysis/
|
||||
{IF animations_extracted:
|
||||
├── animations-*.json # Extracted CSS data ({len(url_list)} files)
|
||||
}
|
||||
{IF user_specification:
|
||||
└── animation-specification.json # User preferences
|
||||
{IF question_data:
|
||||
└── question-options.json # Generated questions + user answers
|
||||
}
|
||||
}
|
||||
|
||||
Extracted Data Summary:
|
||||
@@ -777,7 +658,7 @@ Next: Animation tokens ready for integration
|
||||
|
||||
```bash
|
||||
# Find design directory
|
||||
bash(find .workflow -type d -name "design-*" | head -1)
|
||||
bash(find .workflow -type d -name "design-run-*" | head -1)
|
||||
|
||||
# Create output directories
|
||||
bash(mkdir -p {base_path}/animation-extraction)
|
||||
@@ -814,7 +695,7 @@ bash(ls {base_path}/animation-extraction/)
|
||||
├── .intermediates/ # Intermediate analysis files
|
||||
│ └── animation-analysis/
|
||||
│ ├── animations-{target}.json # Extracted CSS (auto mode)
|
||||
│ └── animation-specification.json # User input (interactive mode)
|
||||
│ └── question-options.json # Generated questions + user answers (interactive mode)
|
||||
└── animation-extraction/ # Final animation tokens
|
||||
├── animation-tokens.json # Production-ready animation tokens
|
||||
└── animation-guide.md # Usage guide and examples
|
||||
@@ -885,12 +766,13 @@ ERROR: Invalid cubic-bezier values
|
||||
|
||||
- **Auto-Trigger CSS Extraction** - Automatically extracts animations when --urls provided
|
||||
- **Hybrid Strategy** - Combines CSS extraction with interactive specification
|
||||
- **Main Flow Interaction** - User questions in main flow, agent only for token synthesis
|
||||
- **Agent-Generated Questions** - Context-aware questions generated by agent (Phase 2)
|
||||
- **User Interaction** - User answers questions in main flow (Phase 3)
|
||||
- **Intelligent Fallback** - Gracefully handles extraction failures
|
||||
- **Context-Aware** - Aligns with existing design tokens
|
||||
- **Production-Ready** - CSS var() format, accessibility support
|
||||
- **Comprehensive Coverage** - Transitions, keyframes, interactions, scroll animations
|
||||
- **Separated Concerns** - User decisions (Phase 2 main flow) → Token generation (Phase 3 agent)
|
||||
- **Separated Concerns** - Question generation (Phase 2 agent) → User answers (Phase 3) → Token generation (Phase 4 agent)
|
||||
|
||||
## Integration
|
||||
|
||||
|
||||
@@ -1,480 +0,0 @@
|
||||
---
|
||||
name: batch-generate
|
||||
description: Prompt-driven batch UI generation using target-style-centric parallel execution with design token application
|
||||
argument-hint: [--targets "<list>"] [--target-type "page|component"] [--device-type "desktop|mobile|tablet|responsive"] [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*), mcp__exa__web_search_exa(*)
|
||||
---
|
||||
|
||||
# Batch Generate UI Prototypes (/workflow:ui-design:batch-generate)
|
||||
|
||||
## Overview
|
||||
Prompt-driven UI generation with intelligent target extraction and **target-style-centric batch execution**. Each agent handles all layouts for one target × style combination.
|
||||
|
||||
**Strategy**: Prompt → Targets → Batched Generation
|
||||
- **Prompt-driven**: Describe what to build, command extracts targets
|
||||
- **Agent scope**: Each of `T × S` agents generates `L` layouts
|
||||
- **Parallel batching**: Max 6 concurrent agents for optimal throughput
|
||||
- **Component isolation**: Complete task independence
|
||||
- **Style-aware**: HTML adapts to design_attributes
|
||||
- **Self-contained CSS**: Direct token values (no var() refs)
|
||||
|
||||
**Supports**: Pages (full layouts) and components (isolated elements)
|
||||
|
||||
## Phase 1: Setup & Validation
|
||||
|
||||
### Step 1: Parse Prompt & Resolve Configuration
|
||||
```bash
|
||||
# Parse required parameters
|
||||
prompt_text = --prompt
|
||||
device_type = --device-type OR "responsive"
|
||||
|
||||
# Extract targets from prompt
|
||||
IF --targets:
|
||||
target_list = split_and_clean(--targets)
|
||||
ELSE:
|
||||
target_list = extract_targets_from_prompt(prompt_text) # See helpers
|
||||
IF NOT target_list: target_list = ["home"] # Fallback
|
||||
|
||||
# Detect target type
|
||||
target_type = --target-type OR detect_target_type(target_list)
|
||||
|
||||
# Resolve base path
|
||||
IF --base-path:
|
||||
base_path = --base-path
|
||||
ELSE IF --session:
|
||||
bash(find .workflow/WFS-{session} -type d -name "design-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
|
||||
ELSE:
|
||||
bash(find .workflow -type d -name "design-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
|
||||
|
||||
# Get variant counts
|
||||
style_variants = --style-variants OR bash(ls {base_path}/style-extraction/style-* -d | wc -l)
|
||||
layout_variants = --layout-variants OR 3
|
||||
```
|
||||
|
||||
**Output**: `base_path`, `target_list[]`, `target_type`, `device_type`, `style_variants`, `layout_variants`
|
||||
|
||||
### Step 2: Validate Design Tokens
|
||||
```bash
|
||||
# Check design tokens exist
|
||||
bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
|
||||
|
||||
# Load design space analysis (optional, from intermediates)
|
||||
IF exists({base_path}/.intermediates/style-analysis/design-space-analysis.json):
|
||||
design_space_analysis = Read({base_path}/.intermediates/style-analysis/design-space-analysis.json)
|
||||
```
|
||||
|
||||
**Output**: `design_tokens_valid`, `design_space_analysis`
|
||||
|
||||
### Step 3: Gather Layout Inspiration (Reuse or Create)
|
||||
```bash
|
||||
# Check if layout inspirations already exist from layout-extract phase
|
||||
inspiration_source = "{base_path}/.intermediates/layout-analysis/inspirations"
|
||||
|
||||
FOR target IN target_list:
|
||||
# Priority 1: Reuse existing inspiration from layout-extract
|
||||
IF exists({inspiration_source}/{target}-layout-ideas.txt):
|
||||
# Reuse existing inspiration (no action needed)
|
||||
REPORT: "Using existing layout inspiration for {target}"
|
||||
ELSE:
|
||||
# Priority 2: Generate new inspiration via MCP
|
||||
bash(mkdir -p {inspiration_source})
|
||||
search_query = "{target} {target_type} layout patterns variations"
|
||||
mcp__exa__web_search_exa(query=search_query, numResults=5)
|
||||
|
||||
# Extract context from prompt for this target
|
||||
target_requirements = extract_relevant_context_from_prompt(prompt_text, target)
|
||||
|
||||
# Write inspiration file to centralized location
|
||||
Write({inspiration_source}/{target}-layout-ideas.txt, inspiration_content)
|
||||
REPORT: "Created new layout inspiration for {target}"
|
||||
```
|
||||
|
||||
**Output**: `T` inspiration text files (reused or created in `.intermediates/layout-analysis/inspirations/`)
|
||||
|
||||
## Phase 2: Target-Style-Centric Batch Generation (Agent)
|
||||
|
||||
**Executor**: `Task(ui-design-agent)` × `T × S` tasks in **batched parallel** (max 6 concurrent)
|
||||
|
||||
### Step 1: Calculate Batch Execution Plan
|
||||
```bash
|
||||
bash(mkdir -p {base_path}/prototypes)
|
||||
|
||||
# Build task list: T × S combinations
|
||||
MAX_PARALLEL = 6
|
||||
total_tasks = T × S
|
||||
total_batches = ceil(total_tasks / MAX_PARALLEL)
|
||||
|
||||
# Initialize batch tracking
|
||||
TodoWrite({todos: [
|
||||
{content: "Batch 1/{batches}: Generate 6 tasks", status: "in_progress"},
|
||||
{content: "Batch 2/{batches}: Generate 6 tasks", status: "pending"},
|
||||
...
|
||||
]})
|
||||
```
|
||||
|
||||
### Step 2: Launch Batched Agent Tasks
|
||||
For each batch (up to 6 parallel tasks):
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[TARGET_STYLE_UI_GENERATION_FROM_PROMPT]
|
||||
🎯 ONE component: {target} × Style-{style_id} ({philosophy_name})
|
||||
Generate: {layout_variants} × 2 files (HTML + CSS per layout)
|
||||
|
||||
PROMPT CONTEXT: {target_requirements} # Extracted from original prompt
|
||||
TARGET: {target} | TYPE: {target_type} | STYLE: {style_id}/{style_variants}
|
||||
BASE_PATH: {base_path}
|
||||
DEVICE: {device_type}
|
||||
${design_attributes ? "DESIGN_ATTRIBUTES: " + JSON.stringify(design_attributes) : ""}
|
||||
|
||||
## Reference
|
||||
- Layout inspiration: Read("{base_path}/.intermediates/layout-analysis/inspirations/{target}-layout-ideas.txt")
|
||||
- Design tokens: Read("{base_path}/style-extraction/style-{style_id}/design-tokens.json")
|
||||
Parse ALL token values including:
|
||||
* colors, typography (with combinations), spacing, opacity
|
||||
* border_radius, shadows, breakpoints
|
||||
* component_styles (button, card, input variants)
|
||||
${design_attributes ? "- Adapt DOM to: density, visual_weight, formality, organic_vs_geometric" : ""}
|
||||
|
||||
## Generation
|
||||
For EACH layout (1 to {layout_variants}):
|
||||
|
||||
1. HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-N.html
|
||||
- Complete HTML5: <!DOCTYPE>, <head>, <body>
|
||||
- CSS ref: <link href="{target}-style-{style_id}-layout-N.css">
|
||||
- Semantic: <header>, <nav>, <main>, <footer>
|
||||
- A11y: ARIA labels, landmarks, responsive meta
|
||||
- Viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
- Follow user requirements from prompt
|
||||
${design_attributes ? `
|
||||
- DOM adaptation:
|
||||
* density='spacious' → flatter hierarchy
|
||||
* density='compact' → deeper nesting
|
||||
* visual_weight='heavy' → extra wrappers
|
||||
* visual_weight='minimal' → direct structure` : ""}
|
||||
- Device-specific: Optimize for {device_type}
|
||||
|
||||
2. CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-N.css
|
||||
- Self-contained: Direct token VALUES (no var())
|
||||
- Use tokens: colors, fonts, spacing, opacity, borders, shadows
|
||||
- IF tokens.component_styles exists: Use component presets for buttons, cards, inputs
|
||||
- IF tokens.typography.combinations exists: Use typography presets for headings and body text
|
||||
- Device-optimized: {device_type} styles
|
||||
${device_type === 'responsive' ? '- Responsive: Mobile-first @media' : '- Fixed: ' + device_type}
|
||||
${design_attributes ? `
|
||||
- Token selection: density → spacing, visual_weight → shadows` : ""}
|
||||
|
||||
## Notes
|
||||
- ✅ Token VALUES directly from design-tokens.json (with typography.combinations, opacity, component_styles support)
|
||||
- ✅ Follow prompt requirements for {target}
|
||||
- ✅ Optimize for {device_type}
|
||||
- ❌ NO var() refs, NO external deps
|
||||
- Layouts structurally DISTINCT
|
||||
- Write files IMMEDIATELY (per layout)
|
||||
- CSS filename MUST match HTML <link href>
|
||||
`
|
||||
|
||||
# After each batch completes
|
||||
TodoWrite: Mark batch completed, next batch in_progress
|
||||
```
|
||||
|
||||
## Phase 3: Verify & Generate Previews
|
||||
|
||||
### Step 1: Verify Generated Files
|
||||
```bash
|
||||
# Count expected vs found
|
||||
bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
|
||||
# Expected: S × L × T × 2
|
||||
|
||||
# Validate samples
|
||||
Read({base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html)
|
||||
# Check: <!DOCTYPE html>, correct CSS href, sufficient CSS length
|
||||
```
|
||||
|
||||
**Output**: `S × L × T × 2` files verified
|
||||
|
||||
### Step 2: Run Preview Generation Script
|
||||
```bash
|
||||
bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
|
||||
```
|
||||
|
||||
**Script generates**:
|
||||
- `compare.html` (interactive matrix)
|
||||
- `index.html` (navigation)
|
||||
- `PREVIEW.md` (instructions)
|
||||
|
||||
### Step 3: Verify Preview Files
|
||||
```bash
|
||||
bash(ls {base_path}/prototypes/compare.html {base_path}/prototypes/index.html {base_path}/prototypes/PREVIEW.md)
|
||||
```
|
||||
|
||||
**Output**: 3 preview files
|
||||
|
||||
## Completion
|
||||
|
||||
### Todo Update
|
||||
```javascript
|
||||
TodoWrite({todos: [
|
||||
{content: "Setup and parse prompt", status: "completed", activeForm: "Parsing prompt"},
|
||||
{content: "Detect token sources", status: "completed", activeForm: "Loading design systems"},
|
||||
{content: "Gather layout inspiration", status: "completed", activeForm: "Researching layouts"},
|
||||
{content: "Batch 1/{batches}: Generate 6 tasks", status: "completed", activeForm: "Generating batch 1"},
|
||||
... (all batches completed)
|
||||
{content: "Verify files & generate previews", status: "completed", activeForm: "Creating previews"}
|
||||
]});
|
||||
```
|
||||
|
||||
### Output Message
|
||||
```
|
||||
✅ Prompt-driven batch UI generation complete!
|
||||
|
||||
Prompt: {prompt_text}
|
||||
|
||||
Configuration:
|
||||
- Style Variants: {style_variants}
|
||||
- Layout Variants: {layout_variants}
|
||||
- Target Type: {target_type}
|
||||
- Device Type: {device_type}
|
||||
- Targets: {target_list} ({T} targets)
|
||||
- Total Prototypes: {S × L × T}
|
||||
|
||||
Batch Execution:
|
||||
- Total tasks: {T × S} (targets × styles)
|
||||
- Batches: {batches} (max 6 parallel per batch)
|
||||
- Agent scope: {L} layouts per target×style
|
||||
- Component isolation: Complete task independence
|
||||
- Device-specific: All layouts optimized for {device_type}
|
||||
|
||||
Quality:
|
||||
- Style-aware: {design_space_analysis ? 'HTML adapts to design_attributes' : 'Standard structure'}
|
||||
- CSS: Self-contained (direct token values, no var())
|
||||
- Device-optimized: {device_type} layouts
|
||||
- Tokens: Production-ready (WCAG AA compliant)
|
||||
|
||||
Generated Files:
|
||||
{base_path}/prototypes/
|
||||
├── {target}-style-{s}-layout-{l}.html ({S×L×T} prototypes)
|
||||
├── {target}-style-{s}-layout-{l}.css
|
||||
├── compare.html (interactive matrix)
|
||||
├── index.html (navigation)
|
||||
└── PREVIEW.md (instructions)
|
||||
|
||||
Layout Inspirations:
|
||||
{base_path}/.intermediates/layout-analysis/inspirations/ ({T} text files, reused or created)
|
||||
|
||||
Preview:
|
||||
1. Open compare.html (recommended)
|
||||
2. Open index.html
|
||||
3. Read PREVIEW.md
|
||||
|
||||
Next: /workflow:ui-design:update
|
||||
```
|
||||
|
||||
## Simple Bash Commands
|
||||
|
||||
### Path Operations
|
||||
```bash
|
||||
# Find design directory
|
||||
bash(find .workflow -type d -name "design-*" -printf "%T@ %p\n" | sort -nr | head -1 | cut -d' ' -f2)
|
||||
|
||||
# Count style variants
|
||||
bash(ls {base_path}/style-extraction/style-* -d | wc -l)
|
||||
|
||||
# Check design tokens exist
|
||||
bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
|
||||
```
|
||||
|
||||
### Validation Commands
|
||||
```bash
|
||||
# Count generated files
|
||||
bash(ls {base_path}/prototypes/{target}-style-*-layout-*.html | wc -l)
|
||||
|
||||
# Verify preview
|
||||
bash(test -f {base_path}/prototypes/compare.html && echo "exists")
|
||||
```
|
||||
|
||||
### File Operations
|
||||
```bash
|
||||
# Create prototypes directory
|
||||
bash(mkdir -p {base_path}/prototypes)
|
||||
|
||||
# Create inspirations directory (if needed)
|
||||
bash(mkdir -p {base_path}/.intermediates/layout-analysis/inspirations)
|
||||
|
||||
# Run preview script
|
||||
bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
|
||||
```
|
||||
|
||||
## Output Structure
|
||||
|
||||
```
|
||||
{base_path}/
|
||||
├── .intermediates/
|
||||
│ └── layout-analysis/
|
||||
│ └── inspirations/
|
||||
│ └── {target}-layout-ideas.txt # Layout inspiration (reused or created)
|
||||
├── prototypes/
|
||||
│ ├── {target}-style-{s}-layout-{l}.html # Final prototypes
|
||||
│ ├── {target}-style-{s}-layout-{l}.css
|
||||
│ ├── compare.html
|
||||
│ ├── index.html
|
||||
│ └── PREVIEW.md
|
||||
└── style-extraction/
|
||||
└── style-{s}/
|
||||
├── design-tokens.json
|
||||
└── style-guide.md
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
### Common Errors
|
||||
```
|
||||
ERROR: No design tokens found
|
||||
→ Run /workflow:ui-design:style-extract first
|
||||
|
||||
ERROR: No targets extracted from prompt
|
||||
→ Use --targets explicitly or rephrase prompt
|
||||
|
||||
ERROR: MCP search failed
|
||||
→ Check network, retry
|
||||
|
||||
ERROR: Batch {N} agent tasks failed
|
||||
→ Check agent output, retry specific target×style combinations
|
||||
|
||||
ERROR: Script permission denied
|
||||
→ chmod +x ~/.claude/scripts/ui-generate-preview.sh
|
||||
```
|
||||
|
||||
### Recovery Strategies
|
||||
- **Partial success**: Keep successful target×style combinations
|
||||
- **Missing design_attributes**: Works without (less style-aware)
|
||||
- **Invalid tokens**: Validate design-tokens.json structure
|
||||
- **Failed batch**: Re-run command, only failed combinations will retry
|
||||
|
||||
## Quality Checklist
|
||||
|
||||
- [ ] Prompt clearly describes targets
|
||||
- [ ] CSS uses direct token values (no var())
|
||||
- [ ] HTML adapts to design_attributes (if available)
|
||||
- [ ] Semantic HTML5 structure
|
||||
- [ ] ARIA attributes present
|
||||
- [ ] Device-optimized layouts
|
||||
- [ ] Layouts structurally distinct
|
||||
- [ ] compare.html works
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Prompt-Driven**: Describe what to build, command extracts targets
|
||||
- **Target-Style-Centric**: `T×S` agents, each handles `L` layouts
|
||||
- **Parallel Batching**: Max 6 concurrent agents with progress tracking
|
||||
- **Component Isolation**: Complete task independence
|
||||
- **Style-Aware**: HTML adapts to design_attributes
|
||||
- **Self-Contained CSS**: Direct token values (no var())
|
||||
- **Device-Specific**: Optimized for desktop/mobile/tablet/responsive
|
||||
- **Inspiration-Based**: MCP-powered layout research
|
||||
- **Production-Ready**: Semantic, accessible, responsive
|
||||
|
||||
## Integration
|
||||
|
||||
**Input**:
|
||||
- Required: Prompt, design-tokens.json
|
||||
- Optional: design-space-analysis.json (from `.intermediates/style-analysis/`)
|
||||
- Reuses: Layout inspirations from `.intermediates/layout-analysis/inspirations/` (if available from layout-extract)
|
||||
|
||||
**Output**: S×L×T prototypes for `/workflow:ui-design:update`
|
||||
**Compatible**: style-extract, explore-auto, imitate-auto outputs
|
||||
**Optimization**: Reuses layout inspirations from layout-extract phase, avoiding duplicate MCP searches
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic: Auto-detection
|
||||
```bash
|
||||
/workflow:ui-design:batch-generate \
|
||||
--prompt "Dashboard with metric cards and charts"
|
||||
|
||||
# Auto: latest design run, extracts "dashboard" target
|
||||
# Output: S × L × 1 prototypes
|
||||
```
|
||||
|
||||
### With Session
|
||||
```bash
|
||||
/workflow:ui-design:batch-generate \
|
||||
--prompt "Auth pages: login, signup, password reset" \
|
||||
--session WFS-auth
|
||||
|
||||
# Uses WFS-auth's design run
|
||||
# Extracts: ["login", "signup", "password-reset"]
|
||||
# Batches: 2 (if S=3: 9 tasks = 6+3)
|
||||
# Output: S × L × 3 prototypes
|
||||
```
|
||||
|
||||
### Components with Device Type
|
||||
```bash
|
||||
/workflow:ui-design:batch-generate \
|
||||
--prompt "Mobile UI components: navbar, card, footer" \
|
||||
--target-type component \
|
||||
--device-type mobile
|
||||
|
||||
# Mobile-optimized component generation
|
||||
# Output: S × L × 3 prototypes
|
||||
```
|
||||
|
||||
### Large Scale (Multi-batch)
|
||||
```bash
|
||||
/workflow:ui-design:batch-generate \
|
||||
--prompt "E-commerce site" \
|
||||
--targets "home,shop,product,cart,checkout" \
|
||||
--style-variants 4 \
|
||||
--layout-variants 2
|
||||
|
||||
# Tasks: 5 × 4 = 20 (4 batches: 6+6+6+2)
|
||||
# Output: 4 × 2 × 5 = 40 prototypes
|
||||
```
|
||||
|
||||
## Helper Functions Reference
|
||||
|
||||
### Target Extraction
|
||||
```python
|
||||
# extract_targets_from_prompt(prompt_text)
|
||||
# Patterns: "Create X and Y", "Generate X, Y, Z pages", "Build X"
|
||||
# Returns: ["x", "y", "z"] (normalized lowercase with hyphens)
|
||||
|
||||
# detect_target_type(target_list)
|
||||
# Keywords: page (home, dashboard, login) vs component (navbar, card, button)
|
||||
# Returns: "page" or "component"
|
||||
|
||||
# extract_relevant_context_from_prompt(prompt_text, target)
|
||||
# Extracts sentences mentioning specific target
|
||||
# Returns: Relevant context string
|
||||
```
|
||||
|
||||
## Batch Execution Details
|
||||
|
||||
### Parallel Control
|
||||
- **Max concurrent**: 6 agents per batch
|
||||
- **Task distribution**: T × S tasks = ceil(T×S/6) batches
|
||||
- **Progress tracking**: TodoWrite per-batch status
|
||||
- **Examples**:
|
||||
- 3 tasks → 1 batch
|
||||
- 9 tasks → 2 batches (6+3)
|
||||
- 20 tasks → 4 batches (6+6+6+2)
|
||||
|
||||
### Performance
|
||||
| Tasks | Batches | Est. Time | Efficiency |
|
||||
|-------|---------|-----------|------------|
|
||||
| 1-6 | 1 | 3-5 min | 100% |
|
||||
| 7-12 | 2 | 6-10 min | ~85% |
|
||||
| 13-18 | 3 | 9-15 min | ~80% |
|
||||
| 19-30 | 4-5 | 12-25 min | ~75% |
|
||||
|
||||
### Optimization Tips
|
||||
1. **Reduce tasks**: Fewer targets or styles
|
||||
2. **Adjust layouts**: L=2 instead of L=3 for faster iteration
|
||||
3. **Stage generation**: Core pages first, secondary pages later
|
||||
|
||||
## Notes
|
||||
|
||||
- **Prompt quality**: Clear descriptions improve target extraction
|
||||
- **Token sources**: Consolidated (production) or proposed (fast-track)
|
||||
- **Batch parallelism**: Max 6 concurrent for stability
|
||||
- **Scalability**: Tested up to 30+ tasks (5+ batches)
|
||||
- **Dependencies**: MCP web search, ui-generate-preview.sh script
|
||||
@@ -18,16 +18,18 @@ Batch screenshot tool with MCP-first strategy and multi-tier fallback. Processes
|
||||
### Step 1: Determine Base Path
|
||||
```bash
|
||||
# Priority: --base-path > session > standalone
|
||||
bash(if [ -n "$BASE_PATH" ]; then
|
||||
relative_path=$(if [ -n "$BASE_PATH" ]; then
|
||||
echo "$BASE_PATH"
|
||||
elif [ -n "$SESSION_ID" ]; then
|
||||
find .workflow/WFS-$SESSION_ID/design-* -type d | head -1 || \
|
||||
echo ".workflow/WFS-$SESSION_ID/design-run-$(date +%Y%m%d-%H%M%S)"
|
||||
find .workflow/WFS-$SESSION_ID/design-* -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2 || \
|
||||
echo ".workflow/WFS-$SESSION_ID/design-run-$(date +%Y%m%d)-$RANDOM"
|
||||
else
|
||||
echo ".workflow/.design/run-$(date +%Y%m%d-%H%M%S)"
|
||||
echo ".workflow/.design/design-run-$(date +%Y%m%d)-$RANDOM"
|
||||
fi)
|
||||
|
||||
bash(mkdir -p $BASE_PATH/screenshots)
|
||||
# Create directory and convert to absolute path
|
||||
bash(mkdir -p "$relative_path"/screenshots)
|
||||
base_path=$(cd "$relative_path" && pwd)
|
||||
```
|
||||
|
||||
### Step 2: Parse URL Map
|
||||
@@ -187,7 +189,7 @@ bash($chrome --headless --screenshot="$output_file" --window-size=1920,1080 "$ur
|
||||
|
||||
Failed URLs:
|
||||
home: https://linear.app
|
||||
Save to: .workflow/.design/run-20250110/screenshots/home.png
|
||||
Save to: .workflow/.design/design-run-20250110/screenshots/home.png
|
||||
|
||||
Steps:
|
||||
1. Visit URL in browser
|
||||
@@ -270,7 +272,7 @@ Next: /workflow:ui-design:extract --images "screenshots/*.png"
|
||||
### Path Operations
|
||||
```bash
|
||||
# Find design directory
|
||||
bash(find .workflow -type d -name "design-*" | head -1)
|
||||
bash(find .workflow -type d -name "design-run-*" | head -1)
|
||||
|
||||
# Create screenshot directory
|
||||
bash(mkdir -p $BASE_PATH/screenshots)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: explore-auto
|
||||
description: Exploratory UI design workflow with style-centric batch generation, creates design variants from prompts/images with parallel execution
|
||||
description: Interactive exploratory UI design workflow with style-centric batch generation, creates design variants from prompts/images with parallel execution and user selection
|
||||
argument-hint: "[--prompt "<desc>"] [--images "<glob>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--batch-plan]""
|
||||
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*), Task(conceptual-planning-agent)
|
||||
---
|
||||
@@ -154,6 +154,9 @@ ELSE:
|
||||
layout_variants = --layout-variants OR 3
|
||||
|
||||
VALIDATE: 1 <= style_variants <= 5, 1 <= layout_variants <= 5
|
||||
|
||||
# Interactive mode (always enabled)
|
||||
interactive_mode = true # Always use interactive mode
|
||||
```
|
||||
|
||||
### Phase 0a-2: Device Type Inference
|
||||
@@ -203,10 +206,13 @@ STORE: device_type, device_source
|
||||
|
||||
### Phase 0b: Run Initialization & Directory Setup
|
||||
```bash
|
||||
run_id = "run-$(date +%Y%m%d-%H%M%S)"
|
||||
base_path = --session ? ".workflow/WFS-{session}/design-${run_id}" : ".workflow/.design/${run_id}"
|
||||
run_id = "run-$(date +%Y%m%d)-$RANDOM"
|
||||
relative_base_path = --session ? ".workflow/WFS-{session}/design-${run_id}" : ".workflow/.design/design-${run_id}"
|
||||
|
||||
Bash(mkdir -p "${base_path}/{style-extraction,style-consolidation,prototypes}")
|
||||
# Create directory and convert to absolute path
|
||||
Bash(mkdir -p "${relative_base_path}/style-extraction")
|
||||
Bash(mkdir -p "${relative_base_path}/prototypes")
|
||||
base_path=$(cd "${relative_base_path}" && pwd)
|
||||
|
||||
Write({base_path}/.run-metadata.json): {
|
||||
"run_id": "${run_id}", "session_id": "${session_id}", "timestamp": "...",
|
||||
@@ -307,13 +313,14 @@ detect_target_type(target_list):
|
||||
```bash
|
||||
IF design_source IN ["code_only", "hybrid"]:
|
||||
REPORT: "🔍 Phase 0d: Code Import ({design_source})"
|
||||
command = "/workflow:ui-design:import-from-code --base-path \"{base_path}\" --base-path \"{code_base_path}\""
|
||||
command = "/workflow:ui-design:import-from-code --base-path \"{base_path}\" --source \"{code_base_path}\""
|
||||
SlashCommand(command)
|
||||
|
||||
# Check file existence and assess completeness
|
||||
style_exists = exists("{base_path}/style-extraction/style-1/design-tokens.json")
|
||||
animation_exists = exists("{base_path}/animation-extraction/animation-tokens.json")
|
||||
layout_exists = exists("{base_path}/layout-extraction/layout-templates.json")
|
||||
layout_count = bash(ls {base_path}/layout-extraction/layout-*.json 2>/dev/null | wc -l)
|
||||
layout_exists = (layout_count > 0)
|
||||
|
||||
style_complete = false
|
||||
animation_complete = false
|
||||
@@ -349,14 +356,16 @@ IF design_source IN ["code_only", "hybrid"]:
|
||||
|
||||
# Layout completeness check
|
||||
IF layout_exists:
|
||||
layouts = Read("{base_path}/layout-extraction/layout-templates.json")
|
||||
# Read first layout file to verify structure
|
||||
first_layout = bash(ls {base_path}/layout-extraction/layout-*.json 2>/dev/null | head -1)
|
||||
layout_data = Read(first_layout)
|
||||
layout_complete = (
|
||||
layouts.layout_templates?.length >= 3 &&
|
||||
layouts.extraction_metadata?.layout_system?.type &&
|
||||
layouts.extraction_metadata?.responsive?.breakpoints
|
||||
layout_count >= 1 &&
|
||||
layout_data.template?.dom_structure &&
|
||||
layout_data.template?.css_layout_rules
|
||||
)
|
||||
IF NOT layout_complete AND layouts.extraction_metadata?.completeness?.missing_items:
|
||||
missing_categories.extend(layouts.extraction_metadata.completeness.missing_items)
|
||||
IF NOT layout_complete:
|
||||
missing_categories.push("complete layout structure")
|
||||
ELSE:
|
||||
missing_categories.push("layout templates")
|
||||
|
||||
@@ -384,7 +393,7 @@ IF design_source == "visual_only" OR needs_visual_supplement:
|
||||
command = "/workflow:ui-design:style-extract --base-path \"{base_path}\" " +
|
||||
(--images ? "--images \"{images}\" " : "") +
|
||||
(--prompt ? "--prompt \"{prompt}\" " : "") +
|
||||
"--mode explore --variants {style_variants}"
|
||||
"--variants {style_variants} --interactive"
|
||||
SlashCommand(command)
|
||||
ELSE:
|
||||
REPORT: "✅ Phase 1: Style (Using Code Import)"
|
||||
@@ -413,7 +422,7 @@ IF (design_source == "visual_only" OR needs_visual_supplement) OR (NOT layout_co
|
||||
command = "/workflow:ui-design:layout-extract --base-path \"{base_path}\" " +
|
||||
(--images ? "--images \"{images}\" " : "") +
|
||||
(--prompt ? "--prompt \"{prompt}\" " : "") +
|
||||
"--targets \"{targets_string}\" --mode explore --variants {layout_variants} --device-type \"{device_type}\""
|
||||
"--targets \"{targets_string}\" --variants {layout_variants} --device-type \"{device_type}\" --interactive"
|
||||
SlashCommand(command)
|
||||
ELSE:
|
||||
REPORT: "✅ Phase 2.5: Layout (Using Code Import)"
|
||||
@@ -421,8 +430,7 @@ ELSE:
|
||||
|
||||
### Phase 3: UI Assembly
|
||||
```bash
|
||||
command = "/workflow:ui-design:generate --base-path \"{base_path}\" " +
|
||||
"--style-variants {style_variants} --layout-variants {layout_variants}"
|
||||
command = "/workflow:ui-design:generate --base-path \"{base_path}\""
|
||||
|
||||
total = style_variants × layout_variants × len(inferred_target_list)
|
||||
|
||||
@@ -547,10 +555,11 @@ Architecture: Style-Centric Batch Generation
|
||||
Run ID: {run_id} | Session: {session_id or "standalone"}
|
||||
Type: {icon} {target_type} | Device: {device_type} | Matrix: {s}×{l}×{n} = {total} prototypes
|
||||
|
||||
Phase 1: {s} complete design systems (style-extract)
|
||||
Phase 2: {n×l} layout templates (layout-extract explore mode)
|
||||
Phase 1: {s} complete design systems (style-extract with multi-select)
|
||||
Phase 2: {n×l} layout templates (layout-extract with multi-select)
|
||||
- Device: {device_type} layouts
|
||||
- {n} targets × {l} layout variants = {n×l} structural templates
|
||||
- User-selected concepts generated in parallel
|
||||
Phase 3: UI Assembly (generate)
|
||||
- Pure assembly: layout templates + design tokens
|
||||
- {s}×{l}×{n} = {total} final prototypes
|
||||
@@ -560,21 +569,22 @@ Phase 4: Brainstorming artifacts updated
|
||||
Assembly Process:
|
||||
✅ Separation of Concerns: Layout (structure) + Style (tokens) kept separate
|
||||
✅ Layout Extraction: {n×l} reusable structural templates
|
||||
✅ Multi-Selection Workflow: User selects multiple variants from generated options
|
||||
✅ Pure Assembly: No design decisions in generate phase
|
||||
✅ Device-Optimized: Layouts designed for {device_type}
|
||||
|
||||
Design Quality:
|
||||
✅ Token-Driven Styling: 100% var() usage
|
||||
✅ Structural Variety: {l} distinct layouts per target
|
||||
✅ Style Variety: {s} independent design systems
|
||||
✅ Structural Variety: {l} distinct layouts per target (user-selected)
|
||||
✅ Style Variety: {s} independent design systems (user-selected)
|
||||
✅ Device-Optimized: Layouts designed for {device_type}
|
||||
|
||||
📂 {base_path}/
|
||||
├── .intermediates/ (Intermediate analysis files)
|
||||
│ ├── style-analysis/ (computed-styles.json, design-space-analysis.json)
|
||||
│ └── layout-analysis/ (dom-structure-*.json, inspirations/*.txt)
|
||||
│ └── layout-analysis/ (analysis-options.json, user-selection.json, dom-structure-*.json)
|
||||
├── style-extraction/ ({s} complete design systems)
|
||||
├── layout-extraction/ ({n×l} layout templates + layout-space-analysis.json)
|
||||
├── layout-extraction/ ({n×l} layout template files: layout-{target}-{variant}.json)
|
||||
├── prototypes/ ({total} assembled prototypes)
|
||||
└── .run-metadata.json (includes device type)
|
||||
|
||||
|
||||
@@ -38,17 +38,21 @@ IF depth NOT IN [1, 2, 3, 4, 5]:
|
||||
|
||||
### Step 2: Determine Base Path
|
||||
```bash
|
||||
bash(if [ -n "$BASE_PATH" ]; then
|
||||
relative_path=$(if [ -n "$BASE_PATH" ]; then
|
||||
echo "$BASE_PATH"
|
||||
elif [ -n "$SESSION_ID" ]; then
|
||||
find .workflow/WFS-$SESSION_ID/design-* -type d | head -1 || \
|
||||
echo ".workflow/WFS-$SESSION_ID/design-layers-$(date +%Y%m%d-%H%M%S)"
|
||||
find .workflow/WFS-$SESSION_ID/design-* -type d -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2 || \
|
||||
echo ".workflow/WFS-$SESSION_ID/design-run-$(date +%Y%m%d)-$RANDOM"
|
||||
else
|
||||
echo ".workflow/.design/layers-$(date +%Y%m%d-%H%M%S)"
|
||||
echo ".workflow/.design/design-run-$(date +%Y%m%d)-$RANDOM"
|
||||
fi)
|
||||
|
||||
# Create directory structure and convert to absolute path
|
||||
bash(mkdir -p "$relative_path")
|
||||
base_path=$(cd "$relative_path" && pwd)
|
||||
|
||||
# Create depth directories
|
||||
bash(for i in $(seq 1 $depth); do mkdir -p $BASE_PATH/screenshots/depth-$i; done)
|
||||
bash(for i in $(seq 1 $depth); do mkdir -p "$base_path"/screenshots/depth-$i; done)
|
||||
```
|
||||
|
||||
**Output**: `url`, `depth`, `base_path`
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: generate
|
||||
description: Assemble UI prototypes by combining layout templates with design tokens, pure assembler without new content generation
|
||||
argument-hint: [--base-path <path>] [--session <id>] [--style-variants <count>] [--layout-variants <count>]
|
||||
argument-hint: [--base-path <path>] [--session <id>]
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
|
||||
---
|
||||
|
||||
@@ -11,7 +11,7 @@ allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
|
||||
Pure assembler that combines pre-extracted layout templates with design tokens to generate UI prototypes (`style × layout × targets`). No layout design logic - purely combines existing components.
|
||||
|
||||
**Strategy**: Pure Assembly
|
||||
- **Input**: `layout-templates.json` + `design-tokens.json` (+ reference images if available)
|
||||
- **Input**: `layout-*.json` files + `design-tokens.json` (+ reference images if available)
|
||||
- **Process**: Combine structure (DOM) with style (tokens)
|
||||
- **Output**: Complete HTML/CSS prototypes
|
||||
- **No Design Logic**: All layout and style decisions already made
|
||||
@@ -25,23 +25,35 @@ Pure assembler that combines pre-extracted layout templates with design tokens t
|
||||
|
||||
### Step 1: Resolve Base Path & Parse Configuration
|
||||
```bash
|
||||
# Determine working directory
|
||||
bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect
|
||||
# Determine working directory (relative path - finds latest)
|
||||
relative_path=$(find .workflow -type d -name "design-run-*" -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
|
||||
|
||||
# Convert to absolute path
|
||||
base_path=$(cd "$relative_path" && pwd)
|
||||
|
||||
# Verify absolute path
|
||||
bash(test -d "$base_path" && echo "✓ Base path: $base_path" || echo "✗ Path not found")
|
||||
|
||||
# Get style count
|
||||
bash(ls {base_path}/style-extraction/style-* -d | wc -l)
|
||||
bash(ls "$base_path"/style-extraction/style-* -d | wc -l)
|
||||
|
||||
# Image reference auto-detected from layout template source_image_path
|
||||
```
|
||||
|
||||
### Step 2: Load Layout Templates
|
||||
```bash
|
||||
# Check layout templates exist
|
||||
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
|
||||
# Check layout templates exist (multi-file pattern)
|
||||
bash(find {base_path}/layout-extraction -name "layout-*.json" -print -quit | grep -q . && echo "exists")
|
||||
|
||||
# Load layout templates
|
||||
Read({base_path}/layout-extraction/layout-templates.json)
|
||||
# Extract: targets, layout_variants count, device_type, template structures
|
||||
# Get list of all layout files
|
||||
bash(ls {base_path}/layout-extraction/layout-*.json 2>/dev/null)
|
||||
|
||||
# Load each layout template file
|
||||
FOR each layout_file in layout_files:
|
||||
template_data = Read(layout_file)
|
||||
# Extract: target, variant_id, device_type, dom_structure, css_layout_rules
|
||||
|
||||
# Aggregate: targets[], layout_variants count, device_type, all template structures
|
||||
```
|
||||
|
||||
**Output**: `base_path`, `style_variants`, `layout_templates[]`, `targets[]`, `device_type`
|
||||
@@ -93,9 +105,9 @@ Task(ui-design-agent): `
|
||||
|
||||
## Inputs (READ ONLY - NO DESIGN DECISIONS)
|
||||
1. Layout Template:
|
||||
Read("{base_path}/layout-extraction/layout-templates.json")
|
||||
Find template where: target={target} AND variant_id="layout-{layout_id}"
|
||||
Extract: dom_structure, css_layout_rules, device_type, source_image_path
|
||||
Read("{base_path}/layout-extraction/layout-{target}-{layout_id}.json")
|
||||
This file contains the specific layout template for this target and variant.
|
||||
Extract: dom_structure, css_layout_rules, device_type, source_image_path (from template field)
|
||||
|
||||
2. Design Tokens:
|
||||
Read("{base_path}/style-extraction/style-{style_id}/design-tokens.json")
|
||||
@@ -223,7 +235,7 @@ TodoWrite({todos: [
|
||||
|
||||
Configuration:
|
||||
- Style Variants: {style_variants}
|
||||
- Layout Variants: {layout_variants} (from layout-templates.json)
|
||||
- Layout Variants: {layout_variants} (from layout-*.json files)
|
||||
- Device Type: {device_type}
|
||||
- Targets: {targets}
|
||||
- Total Prototypes: {S × L × T}
|
||||
@@ -242,14 +254,15 @@ Quality:
|
||||
|
||||
Generated Files:
|
||||
{base_path}/prototypes/
|
||||
├── _templates/
|
||||
│ └── layout-templates.json (input, pre-extracted)
|
||||
├── {target}-style-{s}-layout-{l}.html ({S×L×T} prototypes)
|
||||
├── {target}-style-{s}-layout-{l}.css
|
||||
├── compare.html (interactive matrix)
|
||||
├── index.html (navigation)
|
||||
└── PREVIEW.md (instructions)
|
||||
|
||||
Input Files (from layout-extraction/):
|
||||
├── layout-{target}-{variant}.json (multiple files, one per target-variant combination)
|
||||
|
||||
Preview:
|
||||
1. Open compare.html (recommended)
|
||||
2. Open index.html
|
||||
@@ -263,7 +276,7 @@ Next: /workflow:ui-design:update
|
||||
### Path Operations
|
||||
```bash
|
||||
# Find design directory
|
||||
bash(find .workflow -type d -name "design-*" | head -1)
|
||||
bash(find .workflow -type d -name "design-run-*" | head -1)
|
||||
|
||||
# Count style variants
|
||||
bash(ls {base_path}/style-extraction/style-* -d | wc -l)
|
||||
@@ -271,8 +284,11 @@ bash(ls {base_path}/style-extraction/style-* -d | wc -l)
|
||||
|
||||
### Validation Commands
|
||||
```bash
|
||||
# Check layout templates exist
|
||||
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
|
||||
# Check layout templates exist (multi-file pattern)
|
||||
bash(find {base_path}/layout-extraction -name "layout-*.json" -print -quit | grep -q . && echo "exists")
|
||||
|
||||
# Count layout files
|
||||
bash(ls {base_path}/layout-extraction/layout-*.json 2>/dev/null | wc -l)
|
||||
|
||||
# Check design tokens exist
|
||||
bash(test -f {base_path}/style-extraction/style-1/design-tokens.json && echo "valid")
|
||||
@@ -298,10 +314,10 @@ bash(~/.claude/scripts/ui-generate-preview.sh "{base_path}/prototypes")
|
||||
```
|
||||
{base_path}/
|
||||
├── layout-extraction/
|
||||
│ └── layout-templates.json # Input (from layout-extract)
|
||||
│ └── layout-{target}-{variant}.json # Input (multiple files from layout-extract)
|
||||
├── style-extraction/
|
||||
│ └── style-{s}/
|
||||
│ ├── design-tokens.json # Input (from style-extract)
|
||||
│ ├── design-tokens.json # Input (from style-extract)
|
||||
│ └── style-guide.md
|
||||
└── prototypes/
|
||||
├── {target}-style-{s}-layout-{l}.html # Assembled prototypes
|
||||
@@ -330,7 +346,7 @@ ERROR: Script permission denied
|
||||
|
||||
### Recovery Strategies
|
||||
- **Partial success**: Keep successful assembly combinations
|
||||
- **Invalid template structure**: Validate layout-templates.json
|
||||
- **Invalid template structure**: Validate layout-*.json files
|
||||
- **Invalid tokens**: Validate design-tokens.json structure
|
||||
|
||||
## Quality Checklist
|
||||
@@ -356,8 +372,8 @@ ERROR: Script permission denied
|
||||
|
||||
**Prerequisites**:
|
||||
- `/workflow:ui-design:style-extract` → `design-tokens.json` + `style-guide.md`
|
||||
- `/workflow:ui-design:layout-extract` → `layout-templates.json`
|
||||
- `/workflow:ui-design:layout-extract` → `layout-{target}-{variant}.json` files
|
||||
|
||||
**Input**: `layout-templates.json` + `design-tokens.json`
|
||||
**Input**: `layout-*.json` files + `design-tokens.json`
|
||||
**Output**: S×L×T prototypes for `/workflow:ui-design:update`
|
||||
**Called by**: `/workflow:ui-design:explore-auto`, `/workflow:ui-design:imitate-auto`
|
||||
|
||||
@@ -100,20 +100,21 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Write(*), Bash(*)
|
||||
|
||||
```bash
|
||||
# Generate run ID
|
||||
run_id = "run-$(date +%Y%m%d-%H%M%S)"
|
||||
run_id = "run-$(date +%Y%m%d)-$RANDOM"
|
||||
|
||||
# Determine base path and session mode
|
||||
IF --session:
|
||||
session_id = {provided_session}
|
||||
base_path = ".workflow/WFS-{session_id}/design-{run_id}"
|
||||
relative_base_path = ".workflow/WFS-{session_id}/design-{run_id}"
|
||||
session_mode = "integrated"
|
||||
ELSE:
|
||||
session_id = null
|
||||
base_path = ".workflow/.design/{run_id}"
|
||||
relative_base_path = ".workflow/.design/design-{run_id}"
|
||||
session_mode = "standalone"
|
||||
|
||||
# Create base directory
|
||||
Bash(mkdir -p "{base_path}")
|
||||
# Create base directory and convert to absolute path
|
||||
Bash(mkdir -p "{relative_base_path}")
|
||||
base_path=$(cd "{relative_base_path}" && pwd)
|
||||
|
||||
# Step 0.1: Intelligent Path Detection
|
||||
code_files_detected = false
|
||||
@@ -225,7 +226,7 @@ IF design_source == "hybrid":
|
||||
REPORT: " → Mode: Hybrid (Web + Code)"
|
||||
|
||||
command = "/workflow:ui-design:import-from-code --base-path \"{base_path}\" " +
|
||||
"--base-path \"{code_base_path}\""
|
||||
"--source \"{code_base_path}\""
|
||||
|
||||
TRY:
|
||||
SlashCommand(command)
|
||||
@@ -238,7 +239,8 @@ IF design_source == "hybrid":
|
||||
# Check file existence and assess completeness
|
||||
style_exists = exists("{base_path}/style-extraction/style-1/design-tokens.json")
|
||||
animation_exists = exists("{base_path}/animation-extraction/animation-tokens.json")
|
||||
layout_exists = exists("{base_path}/layout-extraction/layout-templates.json")
|
||||
layout_count = bash(ls {base_path}/layout-extraction/layout-*.json 2>/dev/null | wc -l)
|
||||
layout_exists = (layout_count > 0)
|
||||
|
||||
style_complete = false
|
||||
animation_complete = false
|
||||
@@ -274,14 +276,16 @@ IF design_source == "hybrid":
|
||||
|
||||
# Layout completeness check
|
||||
IF layout_exists:
|
||||
layouts = Read("{base_path}/layout-extraction/layout-templates.json")
|
||||
# Read first layout file to verify structure
|
||||
first_layout = bash(ls {base_path}/layout-extraction/layout-*.json 2>/dev/null | head -1)
|
||||
layout_data = Read(first_layout)
|
||||
layout_complete = (
|
||||
layouts.layout_templates?.length >= 3 &&
|
||||
layouts.extraction_metadata?.layout_system?.type &&
|
||||
layouts.extraction_metadata?.responsive?.breakpoints
|
||||
layout_count >= 1 &&
|
||||
layout_data.template?.dom_structure &&
|
||||
layout_data.template?.css_layout_rules
|
||||
)
|
||||
IF NOT layout_complete AND layouts.extraction_metadata?.completeness?.missing_items:
|
||||
missing_categories.extend(layouts.extraction_metadata.completeness.missing_items)
|
||||
IF NOT layout_complete:
|
||||
missing_categories.push("complete layout structure")
|
||||
ELSE:
|
||||
missing_categories.push("layout templates")
|
||||
|
||||
@@ -404,7 +408,7 @@ ELSE:
|
||||
extraction_prompt = f"Extract visual style tokens from '{primary_target}' with consistency across all pages."
|
||||
|
||||
url_map_for_extract = ",".join([f"{name}:{url}" for name, url in url_map.items()])
|
||||
extract_command = f"/workflow:ui-design:style-extract --base-path \"{base_path}\" --images \"{images_glob}\" --urls \"{url_map_for_extract}\" --prompt \"{extraction_prompt}\" --mode imitate"
|
||||
extract_command = f"/workflow:ui-design:style-extract --base-path \"{base_path}\" --images \"{images_glob}\" --urls \"{url_map_for_extract}\" --prompt \"{extraction_prompt}\" --variants 1 --interactive"
|
||||
SlashCommand(extract_command)
|
||||
|
||||
TodoWrite(mark_completed: "Extract style", mark_in_progress: "Extract animation")
|
||||
@@ -435,7 +439,7 @@ IF skip_layout:
|
||||
ELSE:
|
||||
REPORT: "🚀 Phase 2.5: Layout Extraction"
|
||||
url_map_for_layout = ",".join([f"{target}:{url}" for target, url in url_map.items()])
|
||||
layout_extract_command = f"/workflow:ui-design:layout-extract --base-path \"{base_path}\" --images \"{images_glob}\" --urls \"{url_map_for_layout}\" --targets \"{','.join(target_names)}\" --mode imitate"
|
||||
layout_extract_command = f"/workflow:ui-design:layout-extract --base-path \"{base_path}\" --images \"{images_glob}\" --urls \"{url_map_for_layout}\" --targets \"{','.join(target_names)}\" --variants 1 --interactive"
|
||||
SlashCommand(layout_extract_command)
|
||||
|
||||
TodoWrite(mark_completed: "Extract layout", mark_in_progress: "Assemble UI")
|
||||
@@ -545,7 +549,7 @@ ELSE:
|
||||
│ ├── animation-tokens.json
|
||||
│ └── animation-guide.md
|
||||
├── layout-extraction/ # Structure templates
|
||||
│ └── layout-templates.json
|
||||
│ └── layout-{target}-1.json # One file per target
|
||||
└── prototypes/ # {generated_count} HTML/CSS files
|
||||
├── {target1}-style-1-layout-1.html + .css
|
||||
├── {target2}-style-1-layout-1.html + .css
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: workflow:ui-design:import-from-code
|
||||
description: Import design system from code files (CSS/JS/HTML/SCSS) using parallel agent analysis with final synthesis
|
||||
argument-hint: "[--base-path <path>] [--css \"<glob>\"] [--js \"<glob>\"] [--scss \"<glob>\"] [--html \"<glob>\"] [--style-files \"<glob>\"] [--session <id>]"
|
||||
argument-hint: "[--base-path <path>] [--source <path>] [--css \"<glob>\"] [--js \"<glob>\"] [--scss \"<glob>\"] [--html \"<glob>\"] [--style-files \"<glob>\"] [--session <id>]"
|
||||
allowed-tools: Read,Write,Bash,Glob,Grep,Task,TodoWrite
|
||||
auto-continue: true
|
||||
---
|
||||
@@ -34,7 +34,8 @@ Extract design system tokens from source code files (CSS/SCSS/JS/TS/HTML) using
|
||||
/workflow:ui-design:import-from-code [FLAGS]
|
||||
|
||||
# Flags
|
||||
--base-path <path> Base directory for analysis (default: current directory)
|
||||
--base-path <path> Output directory for extracted design tokens (default: current directory)
|
||||
--source <path> Source code directory to analyze (default: base-path)
|
||||
--css "<glob>" CSS file glob pattern (e.g., "theme/*.css")
|
||||
--scss "<glob>" SCSS file glob pattern (e.g., "styles/*.scss")
|
||||
--js "<glob>" JavaScript file glob pattern (e.g., "theme/*.js")
|
||||
@@ -47,19 +48,19 @@ Extract design system tokens from source code files (CSS/SCSS/JS/TS/HTML) using
|
||||
|
||||
```bash
|
||||
# Basic usage - auto-discover all files
|
||||
/workflow:ui-design:import-from-code --base-path ./
|
||||
/workflow:ui-design:import-from-code --base-path ./design-system --source ./src
|
||||
|
||||
# Target specific directories
|
||||
/workflow:ui-design:import-from-code --base-path ./src --css "theme/*.css" --js "theme/*.js"
|
||||
/workflow:ui-design:import-from-code --base-path ./design-system --source ./src --css "theme/*.css" --js "theme/*.js"
|
||||
|
||||
# Tailwind config only
|
||||
/workflow:ui-design:import-from-code --js "tailwind.config.js"
|
||||
# Tailwind config only (output to current directory)
|
||||
/workflow:ui-design:import-from-code --source ./ --js "tailwind.config.js"
|
||||
|
||||
# CSS framework import
|
||||
/workflow:ui-design:import-from-code --css "styles/**/*.scss" --html "components/**/*.html"
|
||||
/workflow:ui-design:import-from-code --base-path ./design-system --source ./src --css "styles/**/*.scss" --html "components/**/*.html"
|
||||
|
||||
# Universal style files
|
||||
/workflow:ui-design:import-from-code --style-files "**/theme.*"
|
||||
/workflow:ui-design:import-from-code --base-path ./design-system --source ./src --style-files "**/theme.*"
|
||||
```
|
||||
|
||||
---
|
||||
@@ -75,10 +76,11 @@ Extract design system tokens from source code files (CSS/SCSS/JS/TS/HTML) using
|
||||
```bash
|
||||
# 1. Initialize directories
|
||||
base_path="${base_path:-.}"
|
||||
source="${source:-$base_path}"
|
||||
intermediates_dir="${base_path}/.intermediates/import-analysis"
|
||||
mkdir -p "$intermediates_dir"
|
||||
|
||||
echo "[Phase 0] File Discovery Started"
|
||||
echo "[Phase 0] File Discovery Started (source: $source, output: $base_path)"
|
||||
```
|
||||
|
||||
<!-- TodoWrite: Initialize todo list -->
|
||||
@@ -95,7 +97,7 @@ echo "[Phase 0] File Discovery Started"
|
||||
|
||||
```bash
|
||||
# 2. Discover files by type
|
||||
cd "$base_path" || exit 1
|
||||
cd "$source" || exit 1
|
||||
|
||||
# CSS files
|
||||
if [ -n "$css" ]; then
|
||||
@@ -181,7 +183,7 @@ Task(ui-design-agent): `
|
||||
[STYLE_TOKENS_EXTRACTION]
|
||||
Extract visual design tokens (colors, typography, spacing, shadows, borders) from ALL file types
|
||||
|
||||
MODE: style-extraction | BASE_PATH: ${base_path}
|
||||
MODE: style-extraction | SOURCE: ${source} | BASE_PATH: ${base_path}
|
||||
|
||||
## Input Files (Can reference ANY file type)
|
||||
|
||||
@@ -357,7 +359,7 @@ Task(ui-design-agent): `
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML) - not restricted to CSS only
|
||||
- ✅ Use Read() tool for each file you want to analyze
|
||||
- ✅ Use Read() tool for each file you want to analyze (files are in SOURCE: ${source})
|
||||
- ✅ Cross-reference between file types for better extraction
|
||||
- ✅ Extract all visual token types systematically
|
||||
- ✅ Create style-extraction/style-1/ directory first: Bash(mkdir -p "${base_path}/style-extraction/style-1")
|
||||
@@ -378,7 +380,7 @@ Task(ui-design-agent): `
|
||||
[ANIMATION_TOKENS_EXTRACTION]
|
||||
Extract animation/transition tokens from ALL file types
|
||||
|
||||
MODE: animation-extraction | BASE_PATH: ${base_path}
|
||||
MODE: animation-extraction | SOURCE: ${source} | BASE_PATH: ${base_path}
|
||||
|
||||
## Input Files (Can reference ANY file type)
|
||||
|
||||
@@ -530,7 +532,7 @@ Task(ui-design-agent): `
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML)
|
||||
- ✅ Use Read() tool for each file you want to analyze
|
||||
- ✅ Use Read() tool for each file you want to analyze (files are in SOURCE: ${source})
|
||||
- ✅ Detect animation framework if used
|
||||
- ✅ Extract all animation-related tokens
|
||||
- ✅ Create animation-extraction/ directory first: Bash(mkdir -p "${base_path}/animation-extraction")
|
||||
@@ -551,7 +553,7 @@ Task(ui-design-agent): `
|
||||
[LAYOUT_PATTERNS_EXTRACTION]
|
||||
Extract layout patterns and component structures from ALL file types
|
||||
|
||||
MODE: layout-extraction | BASE_PATH: ${base_path}
|
||||
MODE: layout-extraction | SOURCE: ${source} | BASE_PATH: ${base_path}
|
||||
|
||||
## Input Files (Can reference ANY file type)
|
||||
|
||||
@@ -675,7 +677,7 @@ Task(ui-design-agent): `
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML)
|
||||
- ✅ Use Read() tool for each file you want to analyze
|
||||
- ✅ Use Read() tool for each file you want to analyze (files are in SOURCE: ${source})
|
||||
- ✅ Identify naming conventions and layout systems
|
||||
- ✅ Extract component patterns with variants and states
|
||||
- ✅ Create layout-extraction/ directory first: Bash(mkdir -p "${base_path}/layout-extraction")
|
||||
@@ -769,7 +771,7 @@ ${base_path}/
|
||||
|
||||
| Error | Cause | Resolution |
|
||||
|-------|-------|------------|
|
||||
| No files discovered | Glob patterns too restrictive or wrong base-path | Check glob patterns and base-path, verify file locations |
|
||||
| No files discovered | Glob patterns too restrictive or wrong --source path | Check glob patterns and --source parameter, verify file locations |
|
||||
| Agent reports "failed" status | No tokens found in any file | Review file content, check if files contain design tokens |
|
||||
| Empty completeness reports | Files exist but contain no extractable tokens | Manually verify token definitions in source files |
|
||||
| Missing file type | Specific file type not discovered | Use explicit glob flags (--css, --js, --html, --scss) |
|
||||
@@ -779,7 +781,8 @@ ${base_path}/
|
||||
## Best Practices
|
||||
|
||||
1. **Use auto-discovery for full projects**: Omit glob flags to discover all files automatically
|
||||
2. **Target specific directories for speed**: Use `--base-path` + specific globs for focused analysis
|
||||
3. **Cross-reference agent reports**: Compare all three completeness reports to identify gaps
|
||||
4. **Review missing content**: Check `missing` field in reports for actionable improvements
|
||||
5. **Verify file discovery**: Check `.intermediates/import-analysis/*-files.txt` if agents report no data
|
||||
2. **Target specific directories for speed**: Use `--source` to specify source code location and `--base-path` for extracted tokens output, combined with specific globs for focused analysis
|
||||
3. **Separate source and output**: When analyzing external codebases, use `--source` to point to source code and `--base-path` for design tokens output directory (default: --source uses --base-path if not specified)
|
||||
4. **Cross-reference agent reports**: Compare all three completeness reports to identify gaps
|
||||
5. **Review missing content**: Check `missing` field in reports for actionable improvements
|
||||
6. **Verify file discovery**: Check `${base_path}/.intermediates/import-analysis/*-files.txt` if agents report no data
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
name: layout-extract
|
||||
description: Extract structural layout information from reference images, URLs, or text prompts using Claude analysis
|
||||
argument-hint: [--base-path <path>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--targets "<list>"] [--mode <imitate|explore>] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>]
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), Task(ui-design-agent), mcp__exa__web_search_exa(*)
|
||||
argument-hint: [--base-path <path>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--targets "<list>"] [--variants <count>] [--device-type <desktop|mobile|tablet|responsive>] [--interactive]
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), Bash(*), AskUserQuestion(*), Task(ui-design-agent), mcp__exa__web_search_exa(*)
|
||||
---
|
||||
|
||||
# Layout Extraction Command
|
||||
@@ -14,10 +14,8 @@ Extract structural layout information from reference images, URLs, or text promp
|
||||
**Strategy**: AI-Driven Structural Analysis
|
||||
|
||||
- **Agent-Powered**: Uses `ui-design-agent` for deep structural analysis
|
||||
- **Dual-Mode**:
|
||||
- `imitate`: High-fidelity replication of single layout structure
|
||||
- `explore`: Multiple structurally distinct layout variations
|
||||
- **Single Output**: `layout-templates.json` with DOM structure, component hierarchy, and CSS layout rules
|
||||
- **Behavior**: Generate N layout concepts → User multi-select → Generate selected templates
|
||||
- **Output**: `layout-templates.json` with DOM structure, component hierarchy, and CSS layout rules
|
||||
- **Device-Aware**: Optimized for specific device types (desktop, mobile, tablet, responsive)
|
||||
- **Token-Based**: CSS uses `var()` placeholders for spacing and breakpoints
|
||||
|
||||
@@ -45,15 +43,10 @@ ELSE:
|
||||
has_urls = false
|
||||
url_list = []
|
||||
|
||||
# Determine extraction mode
|
||||
extraction_mode = --mode OR "imitate" # "imitate" or "explore"
|
||||
|
||||
# Set variants count based on mode
|
||||
IF extraction_mode == "imitate":
|
||||
variants_count = 1 # Force single variant (ignore --variants)
|
||||
ELSE IF extraction_mode == "explore":
|
||||
variants_count = --variants OR 3 # Default to 3
|
||||
VALIDATE: 1 <= variants_count <= 5
|
||||
# Set variants count (default: 3, range: 1-5)
|
||||
# Behavior: Generate N layout concepts per target → User multi-select → Generate selected templates
|
||||
variants_count = --variants OR 3
|
||||
VALIDATE: 1 <= variants_count <= 5
|
||||
|
||||
# Resolve targets
|
||||
# Priority: --targets → url_list targets → prompt analysis → default ["page"]
|
||||
@@ -62,6 +55,9 @@ IF --targets:
|
||||
ELSE IF has_urls:
|
||||
targets = [url_info.target for url_info in url_list]
|
||||
ELSE IF --prompt:
|
||||
# Extract targets from prompt using pattern matching
|
||||
# Looks for keywords: "page names", target descriptors (login, dashboard, etc.)
|
||||
# Returns lowercase, hyphenated strings (e.g., ["login", "dashboard"])
|
||||
targets = extract_from_prompt(--prompt)
|
||||
ELSE:
|
||||
targets = ["page"]
|
||||
@@ -69,8 +65,10 @@ ELSE:
|
||||
# Resolve device type
|
||||
device_type = --device-type OR "responsive" # desktop|mobile|tablet|responsive
|
||||
|
||||
# Determine base path
|
||||
bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect
|
||||
# Determine base path (auto-detect and convert to absolute)
|
||||
relative_path=$(find .workflow -type d -name "design-run-*" -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
|
||||
base_path=$(cd "$relative_path" && pwd)
|
||||
bash(test -d "$base_path" && echo "✓ Base path: $base_path" || echo "✗ Path not found")
|
||||
# OR use --base-path / --session parameters
|
||||
```
|
||||
|
||||
@@ -188,36 +186,17 @@ IF result.exploration?.triggered:
|
||||
IF session_has_inputs: SKIP Step 2 file reading
|
||||
|
||||
# 2. Check if output already exists
|
||||
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
|
||||
bash(find {base_path}/layout-extraction -name "layout-*.json" -print -quit | grep -q . && echo "exists")
|
||||
IF exists: SKIP to completion
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Phase 0 Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `targets[]`, `device_type`, loaded inputs
|
||||
**Phase 0 Output**: `input_mode`, `base_path`, `variants_count`, `targets[]`, `device_type`, loaded inputs
|
||||
|
||||
## Phase 1: Layout Concept Generation (Explore Mode Only)
|
||||
## Phase 1: Layout Concept Generation
|
||||
|
||||
### Step 1: Check Extraction Mode
|
||||
```bash
|
||||
# extraction_mode == "imitate" → skip this phase
|
||||
# extraction_mode == "explore" → execute this phase
|
||||
```
|
||||
|
||||
**If imitate mode**: Skip to Phase 2
|
||||
|
||||
### Step 2: Gather Layout Inspiration (Explore Mode)
|
||||
```bash
|
||||
bash(mkdir -p {base_path}/.intermediates/layout-analysis/inspirations)
|
||||
|
||||
# For each target: Research via MCP
|
||||
# mcp__exa__web_search_exa(query="{target} layout patterns {device_type}", numResults=5)
|
||||
|
||||
# Write inspiration file
|
||||
Write({base_path}/.intermediates/layout-analysis/inspirations/{target}-layout-ideas.txt, inspiration_content)
|
||||
```
|
||||
|
||||
### Step 3: Generate Layout Concept Options (Agent Task 1)
|
||||
### Step 1: Generate Layout Concept Options (Agent Task 1)
|
||||
**Executor**: `Task(ui-design-agent)`
|
||||
|
||||
Launch agent to generate `variants_count` layout concept options for each target:
|
||||
@@ -233,7 +212,6 @@ Task(ui-design-agent): `
|
||||
## Input Analysis
|
||||
- Targets: {targets.join(", ")}
|
||||
- Device type: {device_type}
|
||||
- Layout inspiration: Read inspirations from {base_path}/.intermediates/layout-analysis/inspirations/
|
||||
- Visual references: {loaded_images if available}
|
||||
${dom_structure_available ? "- DOM Structure: Read from .intermediates/layout-analysis/dom-structure-*.json" : ""}
|
||||
|
||||
@@ -270,7 +248,7 @@ Task(ui-design-agent): `
|
||||
`
|
||||
```
|
||||
|
||||
### Step 4: Verify Options File Created
|
||||
### Step 2: Verify Options File Created
|
||||
```bash
|
||||
bash(test -f {base_path}/.intermediates/layout-analysis/analysis-options.json && echo "created")
|
||||
|
||||
@@ -282,11 +260,23 @@ bash(cat {base_path}/.intermediates/layout-analysis/analysis-options.json | grep
|
||||
|
||||
---
|
||||
|
||||
## Phase 1.5: User Confirmation (Explore Mode Only - INTERACTIVE)
|
||||
## Phase 1.5: User Confirmation (Optional - Triggered by --interactive)
|
||||
|
||||
**Purpose**: Allow user to select preferred layout concept(s) for each target before generating detailed templates
|
||||
|
||||
### Step 1: Load and Present Options
|
||||
**Trigger Condition**: Execute this phase ONLY if `--interactive` flag is present
|
||||
|
||||
### Step 1: Check Interactive Flag
|
||||
```bash
|
||||
# Skip this entire phase if --interactive flag is not present
|
||||
IF NOT --interactive:
|
||||
SKIP to Phase 2
|
||||
|
||||
# Interactive mode enabled
|
||||
REPORT: "🎯 Interactive mode: User selection required for {targets.length} target(s)"
|
||||
```
|
||||
|
||||
### Step 2: Load and Present Options
|
||||
```bash
|
||||
# Read options file
|
||||
options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
|
||||
@@ -329,15 +319,15 @@ Please select your preferred concept for this target.
|
||||
}
|
||||
```
|
||||
|
||||
### Step 3: Capture User Selection (Per Target)
|
||||
### Step 3: Capture User Selection and Update Options File (Per Target)
|
||||
```javascript
|
||||
// Use AskUserQuestion tool for each target
|
||||
// Use AskUserQuestion tool for each target (multi-select enabled)
|
||||
FOR each target:
|
||||
AskUserQuestion({
|
||||
questions: [{
|
||||
question: "Which layout concept do you prefer for '{target}'?",
|
||||
question: "Which layout concept(s) do you prefer for '{target}'?",
|
||||
header: "Layout for " + target,
|
||||
multiSelect: false,
|
||||
multiSelect: true, // Multi-selection enabled (default behavior)
|
||||
options: [
|
||||
{FOR each concept in layout_concepts[target]:
|
||||
label: "Concept {concept.index}: {concept.concept_name}",
|
||||
@@ -347,193 +337,213 @@ FOR each target:
|
||||
}]
|
||||
})
|
||||
|
||||
// Parse user response
|
||||
selected_option_text = user_answer
|
||||
// Parse user response (array of selections)
|
||||
selected_options = user_answer
|
||||
|
||||
// Check for user cancellation
|
||||
IF selected_option_text == null OR selected_option_text == "":
|
||||
IF selected_options == null OR selected_options.length == 0:
|
||||
REPORT: "⚠️ User canceled selection. Workflow terminated."
|
||||
EXIT workflow
|
||||
|
||||
// Extract concept index from response format "Concept N: Name"
|
||||
match = selected_option_text.match(/Concept (\d+):/)
|
||||
IF match:
|
||||
selected_index = parseInt(match[1])
|
||||
ELSE:
|
||||
ERROR: "Invalid selection format. Expected 'Concept N: ...' format"
|
||||
EXIT workflow
|
||||
// Extract concept indices from array
|
||||
selected_indices = []
|
||||
FOR each selected_option_text IN selected_options:
|
||||
match = selected_option_text.match(/Concept (\d+):/)
|
||||
IF match:
|
||||
selected_indices.push(parseInt(match[1]))
|
||||
ELSE:
|
||||
ERROR: "Invalid selection format. Expected 'Concept N: ...' format"
|
||||
EXIT workflow
|
||||
|
||||
// Store selection for this target
|
||||
// Store selections for this target (array of indices)
|
||||
selections[target] = {
|
||||
selected_index: selected_index,
|
||||
concept_name: layout_concepts[target][selected_index-1].concept_name
|
||||
selected_indices: selected_indices, // Array of selected indices
|
||||
concept_names: selected_indices.map(i => layout_concepts[target][i-1].concept_name)
|
||||
}
|
||||
```
|
||||
|
||||
### Step 4: Write User Selection File
|
||||
```bash
|
||||
# Create user selection JSON
|
||||
selection_data = {
|
||||
"metadata": {
|
||||
"selected_at": "{current_timestamp}",
|
||||
"selection_type": "per_target",
|
||||
"session_id": "{session_id}"
|
||||
},
|
||||
"selections": selections // {target: {selected_index, concept_name}}
|
||||
REPORT: "✅ Selected {selected_indices.length} layout(s) for {target}"
|
||||
|
||||
// Calculate total selections across all targets
|
||||
total_selections = sum([len(selections[t].selected_indices) for t in targets])
|
||||
|
||||
// Update analysis-options.json with user selection (embedded in same file)
|
||||
options_file = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
|
||||
options_file.user_selection = {
|
||||
"selected_at": "{current_timestamp}",
|
||||
"selection_type": "per_target_multi",
|
||||
"session_id": "{session_id}",
|
||||
"total_selections": total_selections,
|
||||
"selected_variants": selections // {target: {selected_indices: [...], concept_names: [...]}}
|
||||
}
|
||||
|
||||
# Write to file
|
||||
bash(echo '{selection_data}' > {base_path}/.intermediates/layout-analysis/user-selection.json)
|
||||
|
||||
# Verify
|
||||
bash(test -f {base_path}/.intermediates/layout-analysis/user-selection.json && echo "saved")
|
||||
// Write updated file back
|
||||
Write({base_path}/.intermediates/layout-analysis/analysis-options.json, JSON.stringify(options_file, indent=2))
|
||||
```
|
||||
|
||||
### Step 5: Confirmation Message
|
||||
### Step 4: Confirmation Message
|
||||
```
|
||||
✅ Selections recorded!
|
||||
✅ Selections recorded! Total: {total_selections} layout(s)
|
||||
|
||||
{FOR each target, selection in selections:
|
||||
• {target}: Concept {selection.selected_index} - {selection.concept_name}
|
||||
• {target}: {selection.selected_indices.length} layout(s) selected
|
||||
{FOR each index IN selection.selected_indices:
|
||||
- Concept {index}: {layout_concepts[target][index-1].concept_name}
|
||||
}
|
||||
}
|
||||
|
||||
Proceeding to generate detailed layout templates based on your selections...
|
||||
Proceeding to generate {total_selections} detailed layout template(s)...
|
||||
```
|
||||
|
||||
**Output**: `user-selection.json` with user's choices for all targets
|
||||
**Output**: `analysis-options.json` updated with embedded `user_selection` field
|
||||
|
||||
## Phase 2: Layout Template Generation (Agent Task 2)
|
||||
|
||||
**Executor**: `Task(ui-design-agent)` for selected concept(s)
|
||||
**Executor**: `Task(ui-design-agent)` × `Total_Selected_Templates` in **parallel**
|
||||
|
||||
### Step 1: Load User Selection (Explore Mode)
|
||||
### Step 1: Load User Selections or Default to All
|
||||
```bash
|
||||
# For explore mode, read user selection
|
||||
IF extraction_mode == "explore":
|
||||
selection = Read({base_path}/.intermediates/layout-analysis/user-selection.json)
|
||||
selections_per_target = selection.selections
|
||||
# Read analysis-options.json which may contain user_selection
|
||||
options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
|
||||
layout_concepts = options.layout_concepts
|
||||
|
||||
# Also read the selected concept details from options
|
||||
options = Read({base_path}/.intermediates/layout-analysis/analysis-options.json)
|
||||
layout_concepts = options.layout_concepts
|
||||
|
||||
# Build selected concepts map
|
||||
selected_concepts = {}
|
||||
FOR each target in targets:
|
||||
selected_index = selections_per_target[target].selected_index
|
||||
selected_concepts[target] = layout_concepts[target][selected_index-1] # 0-indexed
|
||||
# Check if user_selection field exists (interactive mode)
|
||||
IF options.user_selection AND options.user_selection.selected_variants:
|
||||
# Interactive mode: Use user-selected variants
|
||||
selections_per_target = options.user_selection.selected_variants
|
||||
total_selections = options.user_selection.total_selections
|
||||
ELSE:
|
||||
# Imitate mode - no selection needed
|
||||
selected_concepts = null
|
||||
# Non-interactive mode: Generate ALL variants for ALL targets (default behavior)
|
||||
selections_per_target = {}
|
||||
total_selections = 0
|
||||
|
||||
FOR each target in targets:
|
||||
selections_per_target[target] = {
|
||||
"selected_indices": [1, 2, ..., variants_count], # All indices
|
||||
"concept_names": [] # Will be filled from options
|
||||
}
|
||||
total_selections += variants_count
|
||||
|
||||
# Build task list for all selected concepts across all targets
|
||||
task_list = []
|
||||
FOR each target in targets:
|
||||
selected_indices = selections_per_target[target].selected_indices # Array
|
||||
concept_names = selections_per_target[target].concept_names # Array
|
||||
|
||||
FOR i in range(len(selected_indices)):
|
||||
idx = selected_indices[i]
|
||||
concept = layout_concepts[target][idx - 1] # 0-indexed array
|
||||
variant_id = i + 1 # 1-based variant numbering
|
||||
|
||||
task_list.push({
|
||||
target: target,
|
||||
variant_id: variant_id,
|
||||
concept: concept,
|
||||
output_file: "{base_path}/layout-extraction/layout-{target}-{variant_id}.json"
|
||||
})
|
||||
|
||||
total_tasks = task_list.length
|
||||
REPORT: "Generating {total_tasks} layout templates across {targets.length} targets"
|
||||
```
|
||||
|
||||
### Step 2: Launch Agent Task
|
||||
Generate layout templates for selected concepts:
|
||||
### Step 2: Launch Parallel Agent Tasks
|
||||
Generate layout templates for ALL selected concepts in parallel:
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[LAYOUT_TEMPLATE_GENERATION_TASK]
|
||||
Generate detailed layout templates based on user-selected concepts.
|
||||
Focus ONLY on structure and layout. DO NOT concern with visual style (colors, fonts, etc.).
|
||||
FOR each task in task_list:
|
||||
Task(ui-design-agent): `
|
||||
[LAYOUT_TEMPLATE_GENERATION_TASK #{task.variant_id} for {task.target}]
|
||||
Generate detailed layout template based on user-selected concept.
|
||||
Focus ONLY on structure and layout. DO NOT concern with visual style (colors, fonts, etc.).
|
||||
|
||||
SESSION: {session_id} | MODE: {extraction_mode} | BASE_PATH: {base_path}
|
||||
DEVICE_TYPE: {device_type}
|
||||
SESSION: {session_id} | BASE_PATH: {base_path}
|
||||
TARGET: {task.target} | VARIANT: {task.variant_id}
|
||||
DEVICE_TYPE: {device_type}
|
||||
|
||||
${extraction_mode == "explore" ? `
|
||||
USER SELECTIONS:
|
||||
${targets.map(target => `
|
||||
Target: ${target}
|
||||
- Selected Concept: ${selected_concepts[target].concept_name}
|
||||
- Philosophy: ${selected_concepts[target].design_philosophy}
|
||||
- Pattern: ${selected_concepts[target].layout_pattern}
|
||||
- Key Components: ${selected_concepts[target].key_components.join(", ")}
|
||||
- Structural Features: ${selected_concepts[target].structural_features.join(", ")}
|
||||
`).join("\n")}
|
||||
` : `
|
||||
MODE: Imitate - High-fidelity replication of reference layout structure
|
||||
TARGETS: ${targets.join(", ")}
|
||||
`}
|
||||
USER SELECTION:
|
||||
- Selected Concept: {task.concept.concept_name}
|
||||
- Philosophy: {task.concept.design_philosophy}
|
||||
- Pattern: {task.concept.layout_pattern}
|
||||
- Key Components: {task.concept.key_components.join(", ")}
|
||||
- Structural Features: {task.concept.structural_features.join(", ")}
|
||||
|
||||
## Input Analysis
|
||||
- Targets: {targets.join(", ")}
|
||||
- Device type: {device_type}
|
||||
- Visual references: {loaded_images if available}
|
||||
${dom_structure_available ? "- DOM Structure Data: Read from .intermediates/layout-analysis/dom-structure-*.json - USE THIS for accurate layout properties" : ""}
|
||||
## Input Analysis
|
||||
- Target: {task.target}
|
||||
- Device type: {device_type}
|
||||
- Visual references: {loaded_images if available}
|
||||
${dom_structure_available ? "- DOM Structure Data: Read from .intermediates/layout-analysis/dom-structure-{task.target}.json - USE THIS for accurate layout properties" : ""}
|
||||
|
||||
## Generation Rules
|
||||
${extraction_mode == "explore" ? `
|
||||
- **Explore Mode**: Develop each user-selected layout concept into a detailed template
|
||||
- Use the selected concept's key_components as foundation
|
||||
- Apply the selected layout_pattern (grid-3col, flex-row, etc.)
|
||||
- Honor the structural_features defined in the concept
|
||||
- Expand the concept with complete DOM structure and CSS layout rules
|
||||
` : `
|
||||
- **Imitate Mode**: High-fidelity replication of reference layout structure
|
||||
${dom_structure_available ? "- Use DOM structure data as ground truth" : "- Use visual inference"}
|
||||
`}
|
||||
${dom_structure_available ? `
|
||||
- IMPORTANT: You have access to real DOM structure data with accurate flex/grid properties
|
||||
- Use DOM data as primary source for layout properties
|
||||
- Extract real flex/grid configurations (display, flexDirection, justifyContent, alignItems, gap)
|
||||
- Use actual element bounds for responsive breakpoint decisions
|
||||
- Preserve identified patterns from DOM structure
|
||||
` : ""}
|
||||
## Generation Rules
|
||||
- Develop the user-selected layout concept into a detailed template
|
||||
- Use the selected concept's key_components as foundation
|
||||
- Apply the selected layout_pattern (grid-3col, flex-row, etc.)
|
||||
- Honor the structural_features defined in the concept
|
||||
- Expand the concept with complete DOM structure and CSS layout rules
|
||||
${dom_structure_available ? `
|
||||
- IMPORTANT: You have access to real DOM structure data with accurate flex/grid properties
|
||||
- Use DOM data as primary source for layout properties
|
||||
- Extract real flex/grid configurations (display, flexDirection, justifyContent, alignItems, gap)
|
||||
- Use actual element bounds for responsive breakpoint decisions
|
||||
- Preserve identified patterns from DOM structure
|
||||
` : ""}
|
||||
|
||||
## Generate for EACH Target
|
||||
For target in {targets}:
|
||||
${extraction_mode == "explore" ? "Based on user-selected concept:" : "Based on reference:"}
|
||||
## Template Generation
|
||||
|
||||
1. **DOM Structure**:
|
||||
- Semantic HTML5 tags: <header>, <nav>, <main>, <aside>, <section>, <footer>
|
||||
- ARIA roles and accessibility attributes
|
||||
${extraction_mode == "explore" ? "- Use key_components from selected concept" : ""}
|
||||
${dom_structure_available ? "- Base on extracted DOM tree from .intermediates" : "- Infer from visual analysis"}
|
||||
- Device-specific optimizations for {device_type}
|
||||
1. **DOM Structure**:
|
||||
- Semantic HTML5 tags: <header>, <nav>, <main>, <aside>, <section>, <footer>
|
||||
- ARIA roles and accessibility attributes
|
||||
- Use key_components from selected concept
|
||||
${dom_structure_available ? "- Base on extracted DOM tree from .intermediates" : "- Infer from visual analysis"}
|
||||
- Device-specific optimizations for {device_type}
|
||||
|
||||
2. **Component Hierarchy**:
|
||||
- Array of main layout regions
|
||||
${extraction_mode == "explore" ? "- Derived from selected concept's key_components" : ""}
|
||||
2. **Component Hierarchy**:
|
||||
- Array of main layout regions
|
||||
- Derived from selected concept's key_components
|
||||
|
||||
3. **CSS Layout Rules**:
|
||||
${extraction_mode == "explore" ? "- Implement selected layout_pattern" : ""}
|
||||
${dom_structure_available ? "- Use real layout properties from DOM structure data" : "- Focus on Grid, Flexbox, position, alignment"}
|
||||
- Use CSS Custom Properties: var(--spacing-*), var(--breakpoint-*)
|
||||
- Device-specific styles (mobile-first @media for responsive)
|
||||
- NO colors, NO fonts, NO shadows - layout structure only
|
||||
3. **CSS Layout Rules**:
|
||||
- Implement selected layout_pattern
|
||||
${dom_structure_available ? "- Use real layout properties from DOM structure data" : "- Focus on Grid, Flexbox, position, alignment"}
|
||||
- Use CSS Custom Properties: var(--spacing-*), var(--breakpoint-*)
|
||||
- Device-specific styles (mobile-first @media for responsive)
|
||||
- NO colors, NO fonts, NO shadows - layout structure only
|
||||
|
||||
## Output Format
|
||||
Write complete layout-templates.json with layout_templates array.
|
||||
Each template must include:
|
||||
- target (string)
|
||||
- variant_id: "layout-1" (always 1 since only selected concept is generated)
|
||||
- source_image_path (string): Reference image path
|
||||
- device_type (string)
|
||||
- design_philosophy (string ${extraction_mode == "explore" ? "- from selected concept" : ""})
|
||||
- dom_structure (JSON object)
|
||||
- component_hierarchy (array of strings)
|
||||
- css_layout_rules (string)
|
||||
## Output Format
|
||||
Write single-template JSON object with:
|
||||
- target: "{task.target}"
|
||||
- variant_id: "layout-{task.variant_id}"
|
||||
- source_image_path (string): Reference image path
|
||||
- device_type: "{device_type}"
|
||||
- design_philosophy (string from selected concept)
|
||||
- dom_structure (JSON object)
|
||||
- component_hierarchy (array of strings)
|
||||
- css_layout_rules (string)
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Use Write() tool for layout-templates.json
|
||||
- ✅ One template per target (only selected concept)
|
||||
- ✅ Structure only, no visual styling
|
||||
- ✅ Token-based CSS (var())
|
||||
${extraction_mode == "explore" ? "- ✅ Maintain consistency with selected concepts" : ""}
|
||||
`
|
||||
## Critical Requirements
|
||||
- ✅ Use Write() tool for {task.output_file}
|
||||
- ✅ Single template for {task.target} variant {task.variant_id}
|
||||
- ✅ Structure only, no visual styling
|
||||
- ✅ Token-based CSS (var())
|
||||
- ✅ Maintain consistency with selected concept
|
||||
`
|
||||
```
|
||||
|
||||
**Output**: Agent generates `layout-templates.json` with one template per target
|
||||
**Output**: Agent generates multiple layout template files (one per selected concept)
|
||||
|
||||
### Step 2: Write Output File
|
||||
### Step 3: Verify Output Files
|
||||
```bash
|
||||
# Take JSON output from agent
|
||||
bash(echo '{agent_json_output}' > {base_path}/layout-extraction/layout-templates.json)
|
||||
# Count generated files
|
||||
expected_count = total_tasks
|
||||
actual_count = bash(ls {base_path}/layout-extraction/layout-*.json | wc -l)
|
||||
|
||||
# Verify output
|
||||
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
|
||||
bash(cat {base_path}/layout-extraction/layout-templates.json | grep -q "layout_templates" && echo "valid")
|
||||
# Verify all files were created
|
||||
IF actual_count == expected_count:
|
||||
REPORT: "✓ All {expected_count} layout template files generated"
|
||||
ELSE:
|
||||
ERROR: "Expected {expected_count} files, found {actual_count}"
|
||||
|
||||
# Verify file structure (sample check)
|
||||
bash(cat {base_path}/layout-extraction/layout-{first_target}-1.json | grep -q "variant_id" && echo "valid structure")
|
||||
```
|
||||
|
||||
**Output**: `layout-templates.json` created and verified
|
||||
**Output**: All layout template files created and verified (one file per selected concept)
|
||||
|
||||
## Completion
|
||||
|
||||
@@ -541,9 +551,10 @@ bash(cat {base_path}/layout-extraction/layout-templates.json | grep -q "layout_t
|
||||
```javascript
|
||||
TodoWrite({todos: [
|
||||
{content: "Setup and input validation", status: "completed", activeForm: "Validating inputs"},
|
||||
{content: "Layout research (explore mode)", status: "completed", activeForm: "Researching layout patterns"},
|
||||
{content: "Layout analysis and synthesis (agent)", status: "completed", activeForm: "Generating layout templates"},
|
||||
{content: "Write layout-templates.json", status: "completed", activeForm: "Saving templates"}
|
||||
{content: "Layout concept analysis (agent)", status: "completed", activeForm: "Analyzing layout patterns"},
|
||||
{content: "User selection confirmation", status: "completed", activeForm: "Confirming selections"},
|
||||
{content: "Generate layout templates (parallel)", status: "completed", activeForm: "Generating templates"},
|
||||
{content: "Verify output files", status: "completed", activeForm: "Verifying files"}
|
||||
]});
|
||||
```
|
||||
|
||||
@@ -553,11 +564,9 @@ TodoWrite({todos: [
|
||||
|
||||
Configuration:
|
||||
- Session: {session_id}
|
||||
- Extraction Mode: {extraction_mode} (imitate/explore)
|
||||
- Device Type: {device_type}
|
||||
- Targets: {targets}
|
||||
- Variants per Target: {variants_count}
|
||||
- Total Templates: {targets.length × variants_count}
|
||||
- Targets: {targets.join(", ")}
|
||||
- Total Templates: {total_tasks} ({targets.length} targets with multi-selection)
|
||||
{IF has_urls AND dom_structure_available:
|
||||
- 🔍 URL Mode: DOM structure extracted from {len(url_list)} URL(s)
|
||||
- Accuracy: Real flex/grid properties from live pages
|
||||
@@ -566,22 +575,27 @@ Configuration:
|
||||
- ⚠️ URL Mode: Chrome DevTools unavailable, used visual analysis fallback
|
||||
}
|
||||
|
||||
{IF extraction_mode == "explore":
|
||||
Layout Research:
|
||||
- {targets.length} inspiration files generated
|
||||
- Pattern search focused on {device_type} layouts
|
||||
User Selections:
|
||||
{FOR each target in targets:
|
||||
- {target}: {selections_per_target[target].concept_names.join(", ")} ({selections_per_target[target].selected_indices.length} variants)
|
||||
}
|
||||
|
||||
Generated Templates:
|
||||
{FOR each template: - Target: {template.target} | Variant: {template.variant_id} | Philosophy: {template.design_philosophy}}
|
||||
|
||||
Output File:
|
||||
- {base_path}/layout-extraction/layout-templates.json
|
||||
{IF dom_structure_available:
|
||||
- {base_path}/.intermediates/layout-analysis/dom-structure-*.json ({len(url_list)} files)
|
||||
{base_path}/layout-extraction/
|
||||
{FOR each target in targets:
|
||||
{FOR each variant_id in range(1, selections_per_target[target].selected_indices.length + 1):
|
||||
├── layout-{target}-{variant_id}.json
|
||||
}
|
||||
}
|
||||
|
||||
Next: /workflow:ui-design:generate will combine these structural templates with style systems to produce final prototypes.
|
||||
Intermediate Files:
|
||||
- {base_path}/.intermediates/layout-analysis/
|
||||
├── analysis-options.json (concept proposals + user selections embedded)
|
||||
{IF dom_structure_available:
|
||||
├── dom-structure-*.json ({len(url_list)} DOM extracts)
|
||||
}
|
||||
|
||||
Next: /workflow:ui-design:generate will combine these structural templates with design systems to produce final prototypes.
|
||||
```
|
||||
|
||||
## Simple Bash Commands
|
||||
@@ -589,23 +603,22 @@ Next: /workflow:ui-design:generate will combine these structural templates with
|
||||
### Path Operations
|
||||
```bash
|
||||
# Find design directory
|
||||
bash(find .workflow -type d -name "design-*" | head -1)
|
||||
bash(find .workflow -type d -name "design-run-*" | head -1)
|
||||
|
||||
# Create output directories
|
||||
bash(mkdir -p {base_path}/layout-extraction)
|
||||
bash(mkdir -p {base_path}/.intermediates/layout-analysis/inspirations) # explore mode only
|
||||
```
|
||||
|
||||
### Validation Commands
|
||||
```bash
|
||||
# Check if already extracted
|
||||
bash(test -f {base_path}/layout-extraction/layout-templates.json && echo "exists")
|
||||
bash(find {base_path}/layout-extraction -name "layout-*.json" -print -quit | grep -q . && echo "exists")
|
||||
|
||||
# Validate JSON structure
|
||||
bash(cat layout-templates.json | grep -q "layout_templates" && echo "valid")
|
||||
# Count generated files
|
||||
bash(ls {base_path}/layout-extraction/layout-*.json | wc -l)
|
||||
|
||||
# Count templates
|
||||
bash(cat layout-templates.json | grep -c "\"target\":")
|
||||
# Validate JSON structure (sample check)
|
||||
bash(cat {base_path}/layout-extraction/layout-{first_target}-1.json | grep -q "variant_id" && echo "valid")
|
||||
```
|
||||
|
||||
### File Operations
|
||||
@@ -614,9 +627,6 @@ bash(cat layout-templates.json | grep -c "\"target\":")
|
||||
bash(ls {images_pattern})
|
||||
Read({image_path})
|
||||
|
||||
# Write inspiration files (explore mode)
|
||||
Write({base_path}/.intermediates/layout-analysis/inspirations/{target}-layout-ideas.txt, content)
|
||||
|
||||
# Write layout templates
|
||||
bash(echo '{json}' > {base_path}/layout-extraction/layout-templates.json)
|
||||
```
|
||||
@@ -627,28 +637,27 @@ bash(echo '{json}' > {base_path}/layout-extraction/layout-templates.json)
|
||||
{base_path}/
|
||||
├── .intermediates/ # Intermediate analysis files
|
||||
│ └── layout-analysis/
|
||||
│ ├── dom-structure-{target}.json # Extracted DOM structure (URL mode only)
|
||||
│ └── inspirations/ # Explore mode only
|
||||
│ └── {target}-layout-ideas.txt # Layout inspiration research
|
||||
│ ├── analysis-options.json # Generated layout concepts + user selections (embedded)
|
||||
│ └── dom-structure-{target}.json # Extracted DOM structure (URL mode only)
|
||||
└── layout-extraction/ # Final layout templates
|
||||
├── layout-templates.json # Structural layout templates
|
||||
└── layout-space-analysis.json # Layout directions (explore mode only)
|
||||
└── layout-{target}-{variant}.json # Structural layout templates (one per selected concept)
|
||||
```
|
||||
|
||||
## layout-templates.json Format
|
||||
## Layout Template File Format
|
||||
|
||||
Each `layout-{target}-{variant}.json` file contains a single template:
|
||||
|
||||
```json
|
||||
{
|
||||
"extraction_metadata": {
|
||||
"session_id": "...",
|
||||
"input_mode": "image|url|prompt|hybrid",
|
||||
"extraction_mode": "imitate|explore",
|
||||
"device_type": "desktop|mobile|tablet|responsive",
|
||||
"timestamp": "...",
|
||||
"variants_count": 3,
|
||||
"targets": ["home", "dashboard"]
|
||||
"target": "home",
|
||||
"variant_id": "layout-1"
|
||||
},
|
||||
"layout_templates": [
|
||||
"template":
|
||||
{
|
||||
"target": "home",
|
||||
"variant_id": "layout-1",
|
||||
@@ -703,8 +712,8 @@ ERROR: Invalid target name
|
||||
ERROR: Agent task failed
|
||||
→ Check agent output, retry with simplified prompt
|
||||
|
||||
ERROR: MCP search failed (explore mode)
|
||||
→ Check network, retry
|
||||
ERROR: MCP search failed
|
||||
→ Check network connection, retry command
|
||||
```
|
||||
|
||||
### Recovery Strategies
|
||||
@@ -718,11 +727,12 @@ ERROR: MCP search failed (explore mode)
|
||||
- **Hybrid Extraction Strategy** - Combines real DOM structure data with AI visual analysis
|
||||
- **Accurate Layout Properties** - Chrome DevTools extracts real flex/grid configurations, bounds, and hierarchy
|
||||
- **Separation of Concerns** - Decouples layout (structure) from style (visuals)
|
||||
- **Structural Exploration** - Explore mode enables A/B testing of different layouts
|
||||
- **Multi-Selection Workflow** - Generate N concepts → User selects multiple → Parallel template generation
|
||||
- **Structural Exploration** - Enables A/B testing of different layouts through multi-selection
|
||||
- **Token-Based Layout** - CSS uses `var()` placeholders for instant design system adaptation
|
||||
- **Device-Specific** - Tailored structures for different screen sizes
|
||||
- **Graceful Fallback** - Falls back to visual analysis if Chrome DevTools unavailable
|
||||
- **Foundation for Assembly** - Provides structural blueprint for refactored `generate` command
|
||||
- **Foundation for Assembly** - Provides structural blueprint for prototype generation
|
||||
- **Agent-Powered** - Deep structural analysis with AI
|
||||
|
||||
## Integration
|
||||
@@ -730,17 +740,17 @@ ERROR: MCP search failed (explore mode)
|
||||
**Workflow Position**: Between style extraction and prototype generation
|
||||
|
||||
**New Workflow**:
|
||||
1. `/workflow:ui-design:style-extract` → `design-tokens.json` + `style-guide.md` (Complete design systems)
|
||||
2. `/workflow:ui-design:layout-extract` → `layout-templates.json` (Structural templates)
|
||||
3. `/workflow:ui-design:generate` (Pure assembler):
|
||||
- **Reads**: `design-tokens.json` + `layout-templates.json`
|
||||
1. `/workflow:ui-design:style-extract` → Multiple `style-N/design-tokens.json` files (Complete design systems)
|
||||
2. `/workflow:ui-design:layout-extract` → Multiple `layout-{target}-{variant}.json` files (Structural templates)
|
||||
3. `/workflow:ui-design:generate` (Assembler):
|
||||
- **Reads**: All `design-tokens.json` files + all `layout-{target}-{variant}.json` files
|
||||
- **Action**: For each style × layout combination:
|
||||
1. Build HTML from `dom_structure`
|
||||
2. Create layout CSS from `css_layout_rules`
|
||||
3. Link design tokens CSS
|
||||
4. Inject placeholder content
|
||||
3. Apply design tokens to CSS
|
||||
4. Generate complete prototypes
|
||||
- **Output**: Complete token-driven HTML/CSS prototypes
|
||||
|
||||
**Input**: Reference images, URLs, or text prompts
|
||||
**Output**: `layout-templates.json` for `/workflow:ui-design:generate`
|
||||
**Next**: `/workflow:ui-design:generate --session {session_id}`
|
||||
**Output**: `layout-{target}-{variant}.json` files for downstream generation commands
|
||||
**Next**: `/workflow:ui-design:generate`
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
name: style-extract
|
||||
description: Extract design style from reference images or text prompts using Claude analysis with variant generation
|
||||
argument-hint: "[--base-path <path>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--mode <imitate|explore>] [--variants <count>]"
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*)
|
||||
argument-hint: "[--base-path <path>] [--session <id>] [--images "<glob>"] [--urls "<list>"] [--prompt "<desc>"] [--variants <count>] [--interactive]"
|
||||
allowed-tools: TodoWrite(*), Read(*), Write(*), Glob(*), AskUserQuestion(*), mcp__chrome-devtools__navigate_page(*), mcp__chrome-devtools__evaluate_script(*)
|
||||
---
|
||||
|
||||
# Style Extraction Command
|
||||
@@ -40,19 +40,15 @@ IF --urls:
|
||||
ELSE:
|
||||
has_urls = false
|
||||
|
||||
# Determine extraction mode
|
||||
# Priority: --mode parameter → default "imitate"
|
||||
extraction_mode = --mode OR "imitate" # "imitate" or "explore"
|
||||
# Set variants count (default: 3, range: 1-5)
|
||||
# Behavior: Generate N design directions → User multi-select → Generate selected variants
|
||||
variants_count = --variants OR 3
|
||||
VALIDATE: 1 <= variants_count <= 5
|
||||
|
||||
# Set variants count based on mode
|
||||
IF extraction_mode == "imitate":
|
||||
variants_count = 1 # Force single variant for imitate mode (ignore --variants)
|
||||
ELSE IF extraction_mode == "explore":
|
||||
variants_count = --variants OR 3 # Default to 3 for explore mode
|
||||
VALIDATE: 1 <= variants_count <= 5
|
||||
|
||||
# Determine base path
|
||||
bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect
|
||||
# Determine base path (auto-detect and convert to absolute)
|
||||
relative_path=$(find .workflow -type d -name "design-run-*" -printf "%T@ %p\n" 2>/dev/null | sort -nr | head -1 | cut -d' ' -f2)
|
||||
base_path=$(cd "$relative_path" && pwd)
|
||||
bash(test -d "$base_path" && echo "✓ Base path: $base_path" || echo "✗ Path not found")
|
||||
# OR use --base-path / --session parameters
|
||||
```
|
||||
|
||||
@@ -140,24 +136,15 @@ IF exists: SKIP to completion
|
||||
|
||||
**Phase 0 Output**: `input_mode`, `base_path`, `extraction_mode`, `variants_count`, `loaded_images[]` or `prompt_guidance`, `has_urls`, `url_list[]`, `computed_styles_available`
|
||||
|
||||
## Phase 1: Design Direction Generation (Explore Mode Only)
|
||||
## Phase 1: Design Direction Generation
|
||||
|
||||
### Step 1: Check Extraction Mode
|
||||
```bash
|
||||
# Check extraction mode
|
||||
# extraction_mode == "imitate" → skip this phase
|
||||
# extraction_mode == "explore" → execute this phase
|
||||
```
|
||||
|
||||
**If imitate mode**: Skip to Phase 2
|
||||
|
||||
### Step 2: Load Project Context (Explore Mode)
|
||||
### Step 1: Load Project Context
|
||||
```bash
|
||||
# Load brainstorming context if available
|
||||
bash(test -f {base_path}/.brainstorming/role analysis documents && cat it)
|
||||
```
|
||||
|
||||
### Step 3: Generate Design Direction Options (Agent Task 1)
|
||||
### Step 2: Generate Design Direction Options (Agent Task 1)
|
||||
**Executor**: `Task(ui-design-agent)`
|
||||
|
||||
Launch agent to generate `variants_count` design direction options with previews:
|
||||
@@ -205,7 +192,7 @@ Task(ui-design-agent): `
|
||||
`
|
||||
```
|
||||
|
||||
### Step 4: Verify Options File Created
|
||||
### Step 3: Verify Options File Created
|
||||
```bash
|
||||
bash(test -f {base_path}/.intermediates/style-analysis/analysis-options.json && echo "created")
|
||||
|
||||
@@ -217,11 +204,23 @@ bash(cat {base_path}/.intermediates/style-analysis/analysis-options.json | grep
|
||||
|
||||
---
|
||||
|
||||
## Phase 1.5: User Confirmation (Explore Mode Only - INTERACTIVE)
|
||||
## Phase 1.5: User Confirmation (Optional - Triggered by --interactive)
|
||||
|
||||
**Purpose**: Allow user to select preferred design direction(s) before generating full design systems
|
||||
|
||||
### Step 1: Load and Present Options
|
||||
**Trigger Condition**: Execute this phase ONLY if `--interactive` flag is present
|
||||
|
||||
### Step 1: Check Interactive Flag
|
||||
```bash
|
||||
# Skip this entire phase if --interactive flag is not present
|
||||
IF NOT --interactive:
|
||||
SKIP to Phase 2
|
||||
REPORT: "ℹ️ Non-interactive mode: Will generate all {variants_count} variants"
|
||||
|
||||
REPORT: "🎯 Interactive mode enabled: User selection required"
|
||||
```
|
||||
|
||||
### Step 2: Load and Present Options
|
||||
```bash
|
||||
# Read options file
|
||||
options = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
|
||||
@@ -263,14 +262,14 @@ Please select the direction(s) you'd like to develop into complete design system
|
||||
═══════════════════════════════════════════════════
|
||||
```
|
||||
|
||||
### Step 3: Capture User Selection
|
||||
### Step 3: Capture User Selection and Update Analysis JSON
|
||||
```javascript
|
||||
// Use AskUserQuestion tool for selection
|
||||
// Use AskUserQuestion tool for multi-selection
|
||||
AskUserQuestion({
|
||||
questions: [{
|
||||
question: "Which design direction would you like to develop into a complete design system?",
|
||||
question: "Which design direction(s) would you like to develop into complete design systems?",
|
||||
header: "Style Choice",
|
||||
multiSelect: false, // Single selection for Phase 1
|
||||
multiSelect: true, // Multi-selection enabled (default behavior)
|
||||
options: [
|
||||
{FOR each direction:
|
||||
label: "Option {direction.index}: {direction.philosophy_name}",
|
||||
@@ -280,142 +279,135 @@ AskUserQuestion({
|
||||
}]
|
||||
})
|
||||
|
||||
// Parse user response (e.g., "Option 1: Minimalist & Airy")
|
||||
selected_option_text = user_answer
|
||||
// Parse user response (array of selections, e.g., ["Option 1: ...", "Option 3: ..."])
|
||||
selected_options = user_answer
|
||||
|
||||
// Check for user cancellation
|
||||
IF selected_option_text == null OR selected_option_text == "":
|
||||
IF selected_options == null OR selected_options.length == 0:
|
||||
REPORT: "⚠️ User canceled selection. Workflow terminated."
|
||||
EXIT workflow
|
||||
|
||||
// Extract option index from response format "Option N: Name"
|
||||
match = selected_option_text.match(/Option (\d+):/)
|
||||
IF match:
|
||||
selected_index = parseInt(match[1])
|
||||
ELSE:
|
||||
ERROR: "Invalid selection format. Expected 'Option N: ...' format"
|
||||
EXIT workflow
|
||||
```
|
||||
// Extract option indices from array
|
||||
selected_indices = []
|
||||
FOR each selected_option_text IN selected_options:
|
||||
match = selected_option_text.match(/Option (\d+):/)
|
||||
IF match:
|
||||
selected_indices.push(parseInt(match[1]))
|
||||
ELSE:
|
||||
ERROR: "Invalid selection format. Expected 'Option N: ...' format"
|
||||
EXIT workflow
|
||||
|
||||
### Step 4: Write User Selection File
|
||||
```bash
|
||||
# Create user selection JSON
|
||||
selection_data = {
|
||||
"metadata": {
|
||||
"selected_at": "{current_timestamp}",
|
||||
"selection_type": "single",
|
||||
"session_id": "{session_id}"
|
||||
},
|
||||
"selected_indices": [selected_index],
|
||||
"refinements": {
|
||||
"enabled": false
|
||||
}
|
||||
REPORT: "✅ Selected {selected_indices.length} design direction(s)"
|
||||
|
||||
// Update analysis-options.json with user selection
|
||||
options_file = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
|
||||
options_file.user_selection = {
|
||||
"selected_at": NOW(),
|
||||
"selected_indices": selected_indices,
|
||||
"selection_count": selected_indices.length
|
||||
}
|
||||
|
||||
# Write to file
|
||||
bash(echo '{selection_data}' > {base_path}/.intermediates/style-analysis/user-selection.json)
|
||||
// Write updated file back
|
||||
Write({base_path}/.intermediates/style-analysis/analysis-options.json, JSON.stringify(options_file, indent=2))
|
||||
|
||||
# Verify
|
||||
bash(test -f {base_path}/.intermediates/style-analysis/user-selection.json && echo "saved")
|
||||
REPORT: "✅ Updated analysis-options.json with user selection"
|
||||
```
|
||||
|
||||
### Step 5: Confirmation Message
|
||||
### Step 4: Confirmation Message
|
||||
```
|
||||
✅ Selection recorded!
|
||||
|
||||
You selected: Option {selected_index} - {selected_direction.philosophy_name}
|
||||
You selected {selected_indices.length} design direction(s):
|
||||
{FOR each index IN selected_indices:
|
||||
• Option {index} - {design_directions[index-1].philosophy_name}
|
||||
}
|
||||
|
||||
Proceeding to generate complete design system based on your selection...
|
||||
Proceeding to generate {selected_indices.length} complete design system(s)...
|
||||
```
|
||||
|
||||
**Output**: `user-selection.json` with user's choice
|
||||
**Output**: Updated `analysis-options.json` with user's multi-selection embedded
|
||||
|
||||
## Phase 2: Design System Generation (Agent Task 2)
|
||||
|
||||
**Executor**: `Task(ui-design-agent)` for selected variant(s)
|
||||
|
||||
### Step 1: Load User Selection (Explore Mode)
|
||||
### Step 1: Load User Selection or Default to All
|
||||
```bash
|
||||
# For explore mode, read user selection
|
||||
IF extraction_mode == "explore":
|
||||
selection = Read({base_path}/.intermediates/style-analysis/user-selection.json)
|
||||
selected_indices = selection.selected_indices
|
||||
refinements = selection.refinements
|
||||
# Read analysis-options.json which may contain user_selection
|
||||
options = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
|
||||
|
||||
# Also read the selected direction details from options
|
||||
options = Read({base_path}/.intermediates/style-analysis/analysis-options.json)
|
||||
selected_directions = [options.design_directions[i-1] for i in selected_indices] # 0-indexed
|
||||
# Check if user_selection field exists (interactive mode)
|
||||
IF options.user_selection AND options.user_selection.selected_indices:
|
||||
# Interactive mode: Use user-selected variants
|
||||
selected_indices = options.user_selection.selected_indices # Array of selected indices (e.g., [1, 3])
|
||||
|
||||
# For Phase 1, we only allow single selection
|
||||
selected_direction = selected_directions[0]
|
||||
actual_variants_count = 1
|
||||
REPORT: "🎯 Interactive mode: Using {selected_indices.length} user-selected variant(s)"
|
||||
ELSE:
|
||||
# Imitate mode - generate single variant without selection
|
||||
selected_direction = null
|
||||
actual_variants_count = 1
|
||||
# Non-interactive mode: Generate ALL variants (default behavior)
|
||||
selected_indices = [1, 2, ..., variants_count] # All indices from 1 to variants_count
|
||||
|
||||
REPORT: "ℹ️ Non-interactive mode: Generating all {variants_count} variant(s)"
|
||||
|
||||
# Extract the selected direction details from options
|
||||
selected_directions = [options.design_directions[i-1] for i in selected_indices] # 0-indexed array
|
||||
|
||||
actual_variants_count = selected_indices.length
|
||||
REPORT: "📦 Generating {actual_variants_count} design system(s)..."
|
||||
```
|
||||
|
||||
### Step 2: Create Output Directory
|
||||
### Step 2: Create Output Directories
|
||||
```bash
|
||||
# Create directory for selected variant only
|
||||
bash(mkdir -p {base_path}/style-extraction/style-1)
|
||||
# Create directories for each selected variant
|
||||
FOR index IN 1..actual_variants_count:
|
||||
bash(mkdir -p {base_path}/style-extraction/style-{index})
|
||||
```
|
||||
|
||||
### Step 3: Launch Agent Task
|
||||
Generate design system for selected direction:
|
||||
### Step 3: Launch Agent Tasks (Parallel)
|
||||
Generate design systems for ALL selected directions in parallel (max 5 concurrent):
|
||||
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[DESIGN_SYSTEM_GENERATION_TASK]
|
||||
Generate production-ready design system based on user-selected direction
|
||||
// Launch parallel tasks, one for each selected direction
|
||||
FOR variant_index IN 1..actual_variants_count:
|
||||
selected_direction = selected_directions[variant_index - 1] // 0-indexed
|
||||
|
||||
SESSION: {session_id} | MODE: {extraction_mode} | BASE_PATH: {base_path}
|
||||
Task(ui-design-agent): `
|
||||
[DESIGN_SYSTEM_GENERATION_TASK #{variant_index}/{actual_variants_count}]
|
||||
Generate production-ready design system based on user-selected direction
|
||||
|
||||
${extraction_mode == "explore" ? `
|
||||
USER SELECTION:
|
||||
- Selected Direction: ${selected_direction.philosophy_name}
|
||||
- Design Attributes: ${JSON.stringify(selected_direction.design_attributes)}
|
||||
- Search Keywords: ${selected_direction.search_keywords.join(", ")}
|
||||
- Anti-keywords: ${selected_direction.anti_keywords.join(", ")}
|
||||
- Rationale: ${selected_direction.rationale}
|
||||
- Preview Colors: Primary=${selected_direction.preview.primary_color}, Accent=${selected_direction.preview.accent_color}
|
||||
- Preview Typography: Heading=${selected_direction.preview.font_family_heading}, Body=${selected_direction.preview.font_family_body}
|
||||
- Preview Border Radius: ${selected_direction.preview.border_radius_base}
|
||||
SESSION: {session_id} | VARIANT: {variant_index}/{actual_variants_count} | BASE_PATH: {base_path}
|
||||
|
||||
${refinements.enabled ? `
|
||||
USER REFINEMENTS:
|
||||
${refinements.primary_color ? "- Primary Color Override: " + refinements.primary_color : ""}
|
||||
${refinements.font_family_heading ? "- Heading Font Override: " + refinements.font_family_heading : ""}
|
||||
${refinements.font_family_body ? "- Body Font Override: " + refinements.font_family_body : ""}
|
||||
` : ""}
|
||||
` : ""}
|
||||
USER SELECTION:
|
||||
- Selected Direction: ${selected_direction.philosophy_name}
|
||||
- Design Attributes: ${JSON.stringify(selected_direction.design_attributes)}
|
||||
- Search Keywords: ${selected_direction.search_keywords.join(", ")}
|
||||
- Anti-keywords: ${selected_direction.anti_keywords.join(", ")}
|
||||
- Rationale: ${selected_direction.rationale}
|
||||
- Preview Colors: Primary=${selected_direction.preview.primary_color}, Accent=${selected_direction.preview.accent_color}
|
||||
- Preview Typography: Heading=${selected_direction.preview.font_family_heading}, Body=${selected_direction.preview.font_family_body}
|
||||
- Preview Border Radius: ${selected_direction.preview.border_radius_base}
|
||||
|
||||
## Input Analysis
|
||||
- Input mode: {input_mode} (image/text/hybrid${has_urls ? "/url" : ""})
|
||||
- Visual references: {loaded_images OR prompt_guidance}
|
||||
${computed_styles_available ? "- Computed styles: Use as ground truth (Read from .intermediates/style-analysis/computed-styles.json)" : ""}
|
||||
## Input Analysis
|
||||
- Input mode: {input_mode} (image/text/hybrid${has_urls ? "/url" : ""})
|
||||
- Visual references: {loaded_images OR prompt_guidance}
|
||||
${computed_styles_available ? "- Computed styles: Use as ground truth (Read from .intermediates/style-analysis/computed-styles.json)" : ""}
|
||||
|
||||
## Generation Rules
|
||||
${extraction_mode == "explore" ? `
|
||||
- **Explore Mode**: Develop the selected design direction into a complete design system
|
||||
- Use preview elements as foundation and expand with full token coverage
|
||||
- Apply design_attributes to all token values:
|
||||
* color_saturation → OKLCH chroma values
|
||||
* visual_weight → font weights, shadow depths
|
||||
* density → spacing scale compression/expansion
|
||||
* formality → typography choices, border radius
|
||||
* organic_geometric → border radius, shape patterns
|
||||
* innovation → token naming, experimental values
|
||||
- Honor search_keywords for design inspiration
|
||||
- Avoid anti_keywords patterns
|
||||
` : `
|
||||
- **Imitate Mode**: High-fidelity replication of reference design
|
||||
${computed_styles_available ? "- Use computed styles as ground truth for all measurements" : "- Use visual inference for measurements"}
|
||||
`}
|
||||
- All colors in OKLCH format ${computed_styles_available ? "(convert from computed RGB)" : ""}
|
||||
- WCAG AA compliance: 4.5:1 text contrast, 3:1 UI contrast
|
||||
## Generation Rules
|
||||
- Develop the selected design direction into a complete design system
|
||||
- Use preview elements as foundation and expand with full token coverage
|
||||
- Apply design_attributes to all token values:
|
||||
* color_saturation → OKLCH chroma values
|
||||
* visual_weight → font weights, shadow depths
|
||||
* density → spacing scale compression/expansion
|
||||
* formality → typography choices, border radius
|
||||
* organic_geometric → border radius, shape patterns
|
||||
* innovation → token naming, experimental values
|
||||
- Honor search_keywords for design inspiration
|
||||
- Avoid anti_keywords patterns
|
||||
- All colors in OKLCH format ${computed_styles_available ? "(convert from computed RGB)" : ""}
|
||||
- WCAG AA compliance: 4.5:1 text contrast, 3:1 UI contrast
|
||||
|
||||
## Generate
|
||||
Create complete design system in {base_path}/style-extraction/style-1/
|
||||
## Generate
|
||||
Create complete design system in {base_path}/style-extraction/style-{variant_index}/
|
||||
|
||||
1. **design-tokens.json**:
|
||||
- Complete token structure with ALL fields:
|
||||
@@ -448,14 +440,13 @@ Task(ui-design-agent): `
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Use Write() tool immediately for each file
|
||||
- ✅ Write to style-1/ directory (single output)
|
||||
- ✅ Write to style-{variant_index}/ directory
|
||||
- ❌ NO external research or MCP calls (pure AI generation)
|
||||
- ✅ Maintain consistency with user-selected direction
|
||||
${refinements.enabled ? "- ✅ Apply user refinements precisely" : ""}
|
||||
`
|
||||
`
|
||||
```
|
||||
|
||||
**Output**: Agent generates 2 files (design-tokens.json, style-guide.md) for selected direction
|
||||
**Output**: {actual_variants_count} parallel agent tasks generate 2 files each (design-tokens.json, style-guide.md)
|
||||
|
||||
## Phase 3: Verify Output
|
||||
|
||||
@@ -520,8 +511,7 @@ Intermediate Analysis:
|
||||
{base_path}/.intermediates/style-analysis/computed-styles.json (extracted from {primary_url})
|
||||
}
|
||||
{IF extraction_mode == "explore":
|
||||
{base_path}/.intermediates/style-analysis/analysis-options.json (design direction options)
|
||||
{base_path}/.intermediates/style-analysis/user-selection.json (your selection)
|
||||
{base_path}/.intermediates/style-analysis/analysis-options.json (design direction options + user selection)
|
||||
}
|
||||
|
||||
Next: /workflow:ui-design:layout-extract --session {session_id} --targets "..."
|
||||
@@ -533,7 +523,7 @@ Next: /workflow:ui-design:layout-extract --session {session_id} --targets "..."
|
||||
### Path Operations
|
||||
```bash
|
||||
# Find design directory
|
||||
bash(find .workflow -type d -name "design-*" | head -1)
|
||||
bash(find .workflow -type d -name "design-run-*" | head -1)
|
||||
|
||||
# Expand image pattern
|
||||
bash(ls {images_pattern})
|
||||
@@ -559,8 +549,10 @@ bash(cat {base_path}/style-extraction/style-1/design-tokens.json | grep -q "colo
|
||||
# Load brainstorming context
|
||||
bash(test -f .brainstorming/role analysis documents && cat it)
|
||||
|
||||
# Create directories
|
||||
bash(mkdir -p {base_path}/style-extraction/style-{{1..3}})
|
||||
# Create directories (example for multiple variants)
|
||||
bash(mkdir -p {base_path}/style-extraction/style-1)
|
||||
bash(mkdir -p {base_path}/style-extraction/style-2)
|
||||
bash(mkdir -p {base_path}/style-extraction/style-3)
|
||||
|
||||
# Verify output
|
||||
bash(ls {base_path}/style-extraction/style-1/)
|
||||
@@ -574,8 +566,7 @@ bash(test -f {base_path}/.intermediates/style-analysis/analysis-options.json &&
|
||||
├── .intermediates/ # Intermediate analysis files
|
||||
│ └── style-analysis/
|
||||
│ ├── computed-styles.json # Extracted CSS values from DOM (if URL available)
|
||||
│ ├── analysis-options.json # Design direction options (explore mode only)
|
||||
│ └── user-selection.json # User's selected direction (explore mode only)
|
||||
│ └── analysis-options.json # Design direction options + user selection (explore mode only)
|
||||
└── style-extraction/ # Final design system
|
||||
└── style-1/
|
||||
├── design-tokens.json # Production-ready design tokens
|
||||
|
||||
@@ -28,7 +28,7 @@ Synchronize finalized design system references to brainstorming artifacts, prepa
|
||||
CHECK: .workflow/.active-* marker files; VALIDATE: session_id matches active session
|
||||
|
||||
# Verify design artifacts in latest design run
|
||||
latest_design = find_latest_path_matching(".workflow/WFS-{session}/design-*")
|
||||
latest_design = find_latest_path_matching(".workflow/WFS-{session}/design-run-*")
|
||||
|
||||
# Detect design system structure
|
||||
IF exists({latest_design}/style-extraction/style-1/design-tokens.json):
|
||||
|
||||
@@ -87,7 +87,6 @@ These commands orchestrate complex, multi-phase development processes, from plan
|
||||
|---|---|
|
||||
| `/workflow:ui-design:explore-auto` | Exploratory UI design workflow with style-centric batch generation. |
|
||||
| `/workflow:ui-design:imitate-auto` | High-speed multi-page UI replication with batch screenshot capture. |
|
||||
| `/workflow:ui-design:batch-generate` | Prompt-driven batch UI generation using target-style-centric parallel execution. |
|
||||
| `/workflow:ui-design:capture` | Batch screenshot capture for UI design workflows using MCP or local fallback. |
|
||||
| `/workflow:ui-design:explore-layers` | Interactive deep UI capture with depth-controlled layer exploration. |
|
||||
| `/workflow:ui-design:style-extract` | Extract design style from reference images or text prompts using Claude's analysis. |
|
||||
|
||||
@@ -375,15 +375,6 @@ Specialized workflow for UI/UX design, from style extraction to prototype genera
|
||||
/workflow:ui-design:imitate-auto --url-map "home:https://linear.app, features:https://linear.app/features"
|
||||
```
|
||||
|
||||
### **/workflow:ui-design:batch-generate**
|
||||
- **Syntax**: `/workflow:ui-design:batch-generate [--prompt "..."] [--targets "..."] ...`
|
||||
- **Responsibilities**: Prompt-driven batch UI generation with parallel execution for multiple targets and styles.
|
||||
- **Agent Calls**: `@ui-design-agent`.
|
||||
- **Example**:
|
||||
```bash
|
||||
/workflow:ui-design:batch-generate --prompt "Dashboard with metric cards and charts"
|
||||
```
|
||||
|
||||
### **/workflow:ui-design:capture**
|
||||
- **Syntax**: `/workflow:ui-design:capture --url-map "target:url,..." ...`
|
||||
- **Responsibilities**: Batch screenshot capture tool using MCP Chrome DevTools with multi-tier fallback strategy (MCP → Playwright → Chrome → Manual).
|
||||
|
||||
Reference in New Issue
Block a user