Compare commits

...

31 Commits

Author SHA1 Message Date
catlog22
78e7e7663b refactor(ui-design): shift from automatic capture to user-driven input model
Major Changes:
- Remove MCP-based automatic screenshot capture dependency
- Remove automatic code extraction mechanisms
- Shift to user-provided images and prompts as primary input

animation-extract.md:
- Remove MCP chrome-devtools integration
- Change from URL-based to image-based inference
- Use AI analysis of images instead of CSS extraction
- Update parameters: --urls → --images (glob pattern)

explore-auto.md:
- Fix critical parameter passing bug in animation-extract phase
- Add --images and --prompt parameter passing to animation-extract
- Ensure consistent context propagation across all extraction phases

imitate-auto.md:
- Add --refine parameter to all extraction commands (style, animation, layout)
- Add --images parameter passing to animation-extract phase
- Add --prompt parameter passing to animation-extract phase
- Align with refinement-focused design intent

Parameter Transmission Matrix (Fixed):
- style-extract: --images ✓ --prompt ✓ --refine ✓ (imitate only)
- animation-extract: --images ✓ --prompt ✓ --refine ✓ (imitate only)
- layout-extract: --images ✓ --prompt ✓ --refine ✓ (imitate only)

Deprecation Notice:
- capture.md and explore-layers.md will be removed in future versions
- Workflows now rely on user-provided inputs instead of automated capture

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-10 10:29:15 +08:00
catlog22
6a50b714d0 Enhance layout and style extraction commands with dual mode support for exploration and refinement.
- Updated `layout-extract` command to include a refinement mode (`--refine`) for generating single refined layouts, alongside exploration mode for multiple contrasting variants.
- Added detailed reporting and validation for variants count based on the selected mode.
- Implemented logic to load existing layouts for refinement and generate specific refinement options categorized by density, responsiveness, grid specifics, and component arrangement.
- Updated `style-extract` command similarly to support refinement mode, allowing for detailed adjustments to existing design systems.
- Enhanced user interaction phases to accommodate selection of refinements or design directions based on the active mode.
2025-11-10 09:49:10 +08:00
catlog22
b471e881a9 refactor(ui-design): clarify agent distribution and animation extraction logic
- **generate.md**: Eliminate ambiguity in agent task allocation
  - Add explicit "one agent per style" principle with warnings
  - Fix distribution strategy: balanced split (12→6+6) instead of fill-first (12→10+2)
  - Add distribution formula and concrete examples table
  - Simplify redundant constraints and consolidate documentation
  - Remove verbose descriptions per minimal information principle

- **explore-auto.md**: Optimize animation extraction conditional logic
  - Add user confirmation for animation reuse in code import scenarios
  - Implement should_extract_animation flag with comprehensive conditions
  - Add skip_animation_extraction for explicit user preference handling
  - Update autonomous flow description with conditional animation phase
  - Add animation extraction task to TodoWrite tracking

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 22:53:37 +08:00
catlog22
22b2cecd1f refactor(ui-design): unify ID architecture with design-id parameter
Replace --base-path with --design-id/--session across all UI design commands to eliminate ambiguity and improve consistency.

Key changes:
- New command: list.md for viewing available design runs
- Unified ID format: design_id = directory_name = "design-run-YYYYMMDD-RANDOM"
- Consistent path resolution: --design-id > --session > auto-detect/create
- Updated 11 commands: explore-auto, imitate-auto, capture, style/layout/animation-extract, generate, update, explore-layers, import-from-code
- Enhanced error handling with /workflow:ui-design:list hints
- Fixed import race condition with cleanup logic in explore-auto

Verified by Gemini: 5.0/5.0 consistency score

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 21:14:54 +08:00
catlog22
f88beb9a49 refactor(workflow): eliminate ambiguous wait/completion terminology
Remove ambiguous "wait for completion" expressions that could be misinterpreted as waiting for an external command. Replace with clear execution-blocking language.

Changes:
- "WAIT for completion" → "Execute phase (blocks until finished)"
- "Upon each phase completion" → "When each phase finishes executing"
- "execution pauses until completion" → "execution pauses until the command finishes"

Affected files (6):
- brainstorm/auto-parallel.md: 3 changes
- plan.md: 3 changes
- tdd-plan.md: 1 change
- test-gen.md: 1 change
- ui-design/explore-auto.md: 12 changes
- ui-design/imitate-auto.md: 10 changes

Impact: Clarifies that SlashCommand is blocking execution, not waiting for separate completion task

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 19:35:31 +08:00
catlog22
ac799872c3 refactor(ui-design): optimize agent task allocation strategy for generate command
Optimized agent grouping to process multiple layouts per agent:
- Changed from one-layout-per-agent to max-10-layouts-per-agent
- Grouped by target × style for better efficiency
- Reduced agent count from O(T×S×L) to O(T×S×⌈L/10⌉)
- Shared token loading within agent (read once, use for all layouts)
- Enforced target isolation (different targets use different agents)

Benefits:
- Reduced agent overhead by ~83% in typical scenarios
- Minimized redundant token reads
- Maintained parallel execution capability (max 6 concurrent agents)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 17:30:13 +08:00
catlog22
a2862090e1 docs(ui-design): remove key features and examples sections from explore-auto and imitate-auto documentation 2025-11-09 15:23:53 +08:00
catlog22
fb65e8f90f docs(ui-design-agent): add remote assets reference guidelines
Add comprehensive remote assets reference section:
- Image CDN services (Unsplash, Picsum, Placeholder.com)
- Icon libraries (Lucide, Font Awesome, Material Icons)
- Usage patterns with HTML examples
- Best practices for external resource loading

Guidelines include:
- HTTPS URLs mandatory
- Width/height attributes for layout stability
- Lazy loading for below-fold images
- Accessibility requirements (alt attributes)
- Prohibit local file paths and base64 embedding

Position: Between Typography System and Visual Effects System

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:05:47 +08:00
catlog22
0d11a29577 docs(explore-auto): add animation-extraction folder structure
Add missing animation-extraction output structure:
- .intermediates/animation-analysis/: analysis-options.json (with embedded user_selection), animations-*.json (URL mode)
- animation-extraction/: animation-tokens.json, animation-guide.md

Complete file structure now includes all three extraction phases:
- style-extraction
- animation-extraction
- layout-extraction

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:04:07 +08:00
catlog22
e488352f15 fix(explore-auto): correct intermediate file structure references
Fix file structure documentation to reflect actual implementation:
- user_selection is embedded in analysis-options.json, not separate file
- computed-styles.json only exists in URL mode
- dom-structure-*.json only exists in URL mode
- Remove obsolete design-space-analysis.json reference

Updated:
- .intermediates/style-analysis/: analysis-options.json (with embedded user_selection), computed-styles.json (URL mode)
- .intermediates/layout-analysis/: analysis-options.json (with embedded user_selection), dom-structure-*.json (URL mode)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:02:29 +08:00
catlog22
dd0348c3eb docs(ui-design): add batch text format interaction strategy for user questions
Add universal question interaction rules to UI design commands:
- Use batch text format (1a 2b) when questions > 4 OR options > 3
- Otherwise use AskUserQuestion tool
- Support multi-selection: [N][key1,key2] format for layout/style commands
- Variable-based templates with option descriptions for clarity

Updated commands:
- animation-extract.md: Single selection per question
- layout-extract.md: Multi-selection per target support
- style-extract.md: Multi-selection for variants

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 14:59:27 +08:00
catlog22
3be5663ab0 Remove batch-generate command documentation and related references; update explore-auto and layout-extract commands to enable interactive mode by default and embed user selections in analysis-options.json; enhance style-extract command to capture user selections and update analysis JSON; revise command reference and specification documents accordingly. 2025-11-09 14:35:30 +08:00
catlog22
d410ed20d6 docs(command-guide): add standardized update guideline and enhance documentation
- Add UPDATE-GUIDELINE.md: version-agnostic update process (6 phases)
- Update SKILL.md: remove version info, reference update guideline
- Update ui-design-workflow-guide.md: document explore-auto default non-interactive mode
- Sync reference docs: latest UI design command changes (9 files)
- Rebuild indexes: reflect explore-auto --interactive parameter addition

Refs: 47e05f2 (explore-auto default mode change)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 13:38:34 +08:00
catlog22
47e05f2142 fix: change explore-auto default to non-interactive mode
- Update default interactive_mode from true to false
- Add --interactive parameter documentation
- Non-interactive batch generation is now the default behavior

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 13:30:06 +08:00
catlog22
6caf5eed49 Merge branch 'main' of https://github.com/catlog22/Claude-Code-Workflow 2025-11-09 13:29:02 +08:00
catlog22
084f7b7254 docs(command-guide): sync reference docs and rebuild indexes
- Sync latest agent files (action-planning-agent, ui-design-agent)
- Sync latest UI design workflow commands (11 files)
- Sync latest test workflow commands (8 files)
- Rebuild all 5 index files with updated metadata

Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 13:24:49 +08:00
catlog22
c647787b86 feat: add interactive multi-selection mechanism for UI design workflow
- Add --interactive flag to style-extract and layout-extract commands
- Enhance animation-extract --mode interactive with selection storage
- Implement unified user-selections storage in .intermediates/user-selections/
- Add parameter passthrough in explore-auto (default: enabled) and imitate-auto (always enabled)
- Support fallback to generate all variants when no selection file exists
- Fix explore-auto.md bug: duplicate --base-path in import-from-code call (line 313)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 23:53:27 +08:00
catlog22
d213885f52 Refactor layout and style extraction workflows for multi-selection capabilities
- Updated `layout-extract` command to support user multi-selection of layout concepts, allowing for multiple layout templates to be generated based on user preferences.
- Revised argument hints and output structures to reflect changes in selection handling and output file formats.
- Enhanced user interaction by enabling multi-select options in both layout and style extraction phases.
- Streamlined the generation of layout templates and design systems to accommodate multiple selected variants, improving flexibility and user experience.
- Adjusted validation and output verification processes to ensure consistency with new multi-selection features.
2025-11-08 23:23:06 +08:00
catlog22
7269f20f57 refactor: reorganize ui-design-agent with 3 task patterns covering 6 task types
Restructure agent documentation to avoid confusion and clarify responsibilities.
All 6 task types now organized into 3 clear patterns with shared standards.

## New Structure

**Task Patterns** (replaces Core Capabilities):
- Pattern 1: Option Generation (2 tasks)
  * DESIGN_DIRECTION_GENERATION_TASK
  * LAYOUT_CONCEPT_GENERATION_TASK

- Pattern 2: System Generation (3 tasks)
  * DESIGN_SYSTEM_GENERATION_TASK
  * LAYOUT_TEMPLATE_GENERATION_TASK
  * ANIMATION_TOKEN_GENERATION_TASK

- Pattern 3: Assembly (1 task)
  * LAYOUT_STYLE_ASSEMBLY

Each pattern documents:
- Purpose and autonomy level
- Task types covered
- Common process flow
- Task-specific inputs/outputs
- Key principles

## Benefits

1. **Complete Coverage**: All 6 task types explicitly documented
2. **Clear Organization**: Tasks grouped by similar characteristics
3. **Reduced Duplication**: Shared design standards and execution principles
4. **Pattern Recognition**: Agent knows which rules apply per task type
5. **Maintainability**: Single agent easier to maintain than multiple agents

## Updated Sections

- **Task Patterns**: New section replacing fragmented Core Capabilities
- **Execution Flow**: Generic pattern-based flow (was task-specific)
- **Core Execution Principles**: Simplified with pattern-specific autonomy levels
- **Key Reminders**: Updated to reference patterns, removed external invocation terms

## Verification

 Pattern 1 covers: DESIGN_DIRECTION_GENERATION, LAYOUT_CONCEPT_GENERATION
 Pattern 2 covers: DESIGN_SYSTEM_GENERATION, LAYOUT_TEMPLATE_GENERATION, ANIMATION_TOKEN_GENERATION
 Pattern 3 covers: LAYOUT_STYLE_ASSEMBLY

All commands (style-extract, layout-extract, animation-extract, generate) now properly supported.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 21:20:23 +08:00
catlog22
3199b91255 refactor: remove external invocation references from ui-design-agent
Agent should focus on task execution, not who invokes it. Remove all
references to orchestrator commands and external callers.

Changes:
1. **Agent description** (line 19):
   - Before: "invoked by orchestrator commands (e.g., generate.md)"
   - After: Focus on autonomous execution

2. **Core Capabilities** (line 25):
   - Removed: "Invoked by: generate.md Phase 2"
   - Agent doesn't need to know its caller

3. **Execution Process** (line 250):
   - Before: "When invoked by orchestrator command"
   - After: "Standard execution flow for design generation tasks"

4. **Task prompt terminology** (line 259):
   - Changed: "orchestrator prompt" → "task prompt"

5. **Invocation Model → Task Responsibilities** (lines 295-305):
   - Before: "You are invoked by orchestrator commands..."
   - After: Focus on task responsibilities and expected output

6. **Execution Principles** (lines 310, 315):
   - Changed: "orchestrator command" → "task prompt"
   - Changed: "Each invocation" → "Each task"

7. **Performance Optimization → Generation Approach** (lines 342-348):
   - Removed: Two-layer architecture with orchestrator responsibility
   - Added: Single-pass assembly focus (matches current implementation)

8. **Scope & Boundaries** (line 359):
   - Simplified "NOT Your Responsibilities" to "Out of Scope"
   - Removed: workflow orchestration, task scheduling references
   - Focus on what agent does, not external workflow

9. **Path Handling** (lines 423-426):
   - Changed: "Orchestrator provides" → "Task prompts provide"
   - Changed: "Agent uses" → "Use" (more direct)

Result: Agent documentation now focuses on task execution without
references to external callers or orchestration.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 21:12:06 +08:00
catlog22
e20604bb21 refactor: align ui-design-agent.md with current generate.md implementation
Remove obsolete content and update documentation to match actual workflow:

1. **Remove consolidate.md references**:
   - Updated agent invocation description (line 19)
   - Replaced "Invocation Model" section (lines 296-308)
   - consolidate.md doesn't exist in current workflow

2. **Replace obsolete Core Capabilities section** (lines 21-101):
   - Removed outdated task definitions:
     * Design Token Synthesis (referenced consolidate.md)
     * Layout Strategy Generation (referenced consolidate.md)
     * Obsolete UI Prototype Generation with CSS placeholders
     * Consistency Validation (no longer used)
   - Added correct "Layout & Style Assembly" documentation matching generate.md:
     * Task type: [LAYOUT_STYLE_ASSEMBLY]
     * Direct CSS reference: <link href="{target}-style-{style_id}-layout-{layout_id}.css">
     * Self-contained CSS architecture (no placeholders)
     * Assembly process matching generate.md lines 130-174

3. **Remove CSS placeholder instructions**:
   - Removed {{STRUCTURAL_CSS}} and {{TOKEN_CSS}} placeholder pattern
   - These placeholders are NOT used in current implementation
   - Current system uses direct CSS file references with resolved var() values

Key improvements:
- Accurate documentation of current [LAYOUT_STYLE_ASSEMBLY] task
- Correct CSS reference pattern matching generate.md:134
- Removed all references to non-existent consolidate.md
- Self-contained CSS architecture properly documented

Verified consistency with generate.md implementation (lines 130-174).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 21:07:21 +08:00
catlog22
1fb5b3cbe9 refactor: standardize UI design workflow folder naming and add absolute path conversion
Unified folder naming format across all UI design commands:
- Session mode: .workflow/WFS-{session}/design-run-YYYYMMDD-RANDOM
- Standalone mode: .workflow/.design/design-run-YYYYMMDD-RANDOM

Key changes:
- Standardized run directory naming to design-run-* format
- Added absolute path conversion for all base_path variables
- Updated path discovery patterns from design-* to design-run-*
- Maintained backward compatibility for existing directory discovery

Modified commands (10 files):
- explore-auto.md, imitate-auto.md: Unified standalone path format
- explore-layers.md: Changed from design-layers-* to design-run-*
- capture.md: Added design- prefix to standalone mode
- animation-extract.md, style-extract.md, layout-extract.md,
  generate.md, batch-generate.md: Added absolute path conversion
- update.md: Updated path discovery pattern

Technical improvements:
- Eliminates path ambiguity between command and agent execution contexts
- Ensures all file operations use absolute paths for reliability
- Provides consistent directory structure across workflows

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 20:52:10 +08:00
catlog22
a8ab192c72 refactor: remove Related Commands section from workflow tool commands
Only orchestrator commands (plan, execute, resume, test-gen, test-fix-gen,
tdd-plan) retain Related Commands section to document workflow phases.
Tool commands (conflict-resolution, task-generate-tdd, test-task-generate,
test-concept-enhanced, test-context-gather, tdd-coverage-analysis) have
Related Commands removed to reduce documentation redundancy.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 17:55:55 +08:00
catlog22
b62b42e9f4 feat: migrate test-task-generate to agent-driven architecture
- Refactor test-task-generate.md to use action-planning-agent
- Add two-phase execution flow (Discovery → Agent Execution)
- Integrate Memory-First principle and MCP tool enhancements
- Support both agent-mode (default) and cli-execute-mode
- Add test-specific context package with TEST_ANALYSIS_RESULTS.md
- Align with task-generate-agent.md architecture
- Remove 556 lines of redundant old content (Phase 1-4 old structure)
- Update test-gen.md and test-fix-gen.md to reflect agent-driven changes

Changes include:
- Core Philosophy with agent-driven principles
- Agent Context Package structure for test sessions
- Discovery Actions for test context loading
- Agent Invocation with test-specific requirements
- Test Task Structure Reference
- Updated Integration & Usage sections
- Enhanced Related Commands documentation

Now test task generation uses autonomous agent planning with MCP enhancements for better test coverage analysis and generation.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 17:23:55 +08:00
catlog22
52fce757f8 refactor: update tdd-plan to use --cli-execute parameter
- Change --agent flag to --cli-execute for consistency
- Make Agent Mode the default execution mode
- Update CLI Mode to use --cli-execute flag
- Align with agent-driven task generation architecture
- Update Phase 5 command documentation
- Update Related Commands section

This completes the migration to agent-driven architecture for both /workflow:plan and /workflow:tdd-plan commands.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 17:17:09 +08:00
catlog22
c12f6b888a feat: migrate task-generate-tdd to agent-driven architecture
- Refactor task-generate-tdd.md to use action-planning-agent
- Add two-phase execution flow (Discovery → Agent Execution)
- Integrate Memory-First principle and MCP tool enhancements
- Support both agent-mode (default) and cli-execute-mode
- Change --agent flag to --cli-execute for consistency
- Add TDD-specific context package with test coverage integration
- Align with task-generate-agent.md architecture

Now both /workflow:plan and /workflow:tdd-plan use agent-driven task generation for autonomous planning and execution.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 17:11:17 +08:00
catlog22
47667b8360 refactor: streamline task generation workflow architecture
- Remove 150+ lines of duplicate content from task-generate-agent.md
- Implement reference-based design following Content Uniqueness Rules
- Simplify plan.md to use task-generate-agent exclusively
- Remove --agent parameter (agent mode is now default)
- Improve separation of concerns between command and agent layers

Changes:
- task-generate-agent.md: Replace detailed specs with references to action-planning-agent.md
- plan.md: Remove task-generate command, unify on agent-driven approach

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 17:03:18 +08:00
catlog22
915eb396e7 feat: enhance quantification requirements across workflow tools
Enhanced task generation with mandatory quantification standards to eliminate ambiguity:

- Add Quantification Requirements section to all task generation commands
- Enforce explicit counts and enumerations in requirements, acceptance criteria, and modification points
- Standardize formats: "Implement N items: [list]" vs vague "implement features"
- Include verification commands for measurable acceptance criteria
- Simplify documentation by removing verbose examples while preserving all key information

Changes:
- task-generate.md: Add quantification section, streamline Task JSON schema, remove CLI examples
- task-generate-agent.md: Add quantification rules, improve template selection clarity
- task-generate-tdd.md: Add TDD-specific quantification formats for Red-Green-Refactor phases
- action-planning-agent.md: Add quantification requirements with validation checklist and updated examples

Impact:
- Reduces task documentation from ~900 lines to ~600 lines (33% reduction)
- All requirements now require explicit counts: "5 files", "15 test cases", ">=85% coverage"
- Acceptance criteria must include verification commands
- Modification points must specify exact targets with line numbers

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 15:02:07 +08:00
catlog22
1cb83c07e0 feat: 强化任务生成命令,新增量化要求以消除模糊性 2025-11-08 14:39:45 +08:00
catlog22
0404a7eb7c docs: 增强 conflict-resolution 核心规则,禁止使用 bash 命令输出
添加核心职责规则:直接文本输出,禁止使用 bash echo/printf 命令

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 12:07:45 +08:00
catlog22
b98d28df3d docs(command-guide): add Pattern 0 brainstorming workflow for 0-to-1 development
- Add Pattern 0: 头脑风暴 (Brainstorming) as first workflow pattern
- Distinguish FROM-ZERO-TO-ONE vs FEATURE-ADDITION scenarios
- Update decision tree to require brainstorming for new projects
- Enhance SKILL.md Mode 4 with project stage identification
- Remove duplicate Pattern 7 UI design workflow
- Add warning in best practices about not skipping brainstorming

Fixes issue where system incorrectly guided users to start with /workflow:plan
for new projects instead of /workflow:brainstorm:artifacts
2025-11-06 22:14:14 +08:00
62 changed files with 6229 additions and 6831 deletions

View File

@@ -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)

View File

@@ -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)

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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) |

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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)

View File

@@ -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)

View File

@@ -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`

View File

@@ -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`

View File

@@ -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]
```

View File

@@ -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

View File

@@ -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}`

View 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>"
```

View File

@@ -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`.

View File

@@ -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"]
}
}
}

View File

@@ -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

View 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.

View File

@@ -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

View File

@@ -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分钟上手

View File

@@ -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",

View File

@@ -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",

View File

@@ -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",

View File

@@ -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",

View File

@@ -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)

View File

@@ -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)

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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) |

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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)

View File

@@ -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)

View File

@@ -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`

View File

@@ -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`

View File

@@ -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

View File

@@ -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

View File

@@ -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`

View File

@@ -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

View File

@@ -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):

View File

@@ -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. |

View File

@@ -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).