- fix(discover-design-files.sh): Fix script errors and expand framework support
* Fix variable quoting and conditional checks
* Remove keyword restrictions for JS file discovery
* Add support for .mjs, .cjs, .vue, .svelte files
* Now correctly discovers all JS/TS framework files recursively
- feat(import-from-code): Add optional gemini/qwen CLI analysis for agents
* Add CLI-Assisted Analysis step to Style/Animation/Layout agents
* Optional usage for large codebases (>20 files) or complex frameworks
* All CLI calls use analysis mode (READ-ONLY)
* Agent can use CLI output to guide file reading and token extraction
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Updated `explore-auto.md`, `imitate-auto.md`, and `import-from-code.md` to replace legacy parameters with a unified `--input` parameter for better clarity and functionality.
- Enhanced input detection logic to support glob patterns, file paths, and text descriptions, allowing for more flexible input combinations.
- Deprecated old parameters (`--images`, `--prompt`, etc.) with warnings and provided clear migration paths.
- Improved error handling for missing inputs and validation of existing directories in `reference-page-generator.md`.
- Streamlined command execution phases to utilize new input structures across workflows.
Refactor style codification workflow into orchestrator pattern with three specialized commands:
Changes:
- Refactor codify-style.md as pure orchestrator coordinating sub-commands
• Delegates to import-from-code for style extraction
• Calls reference-page-generator for packaging
• Creates temporary design run as intermediate storage
• Added --overwrite flag with package protection logic
• Improved component counting using jq with grep fallback
- Create reference-page-generator.md for multi-component reference pages
• Generates interactive preview with all components
• Creates design tokens, style guide, and component patterns
• Package validation to prevent invalid directory overwrites
• Outputs to .workflow/reference_style/{package-name}/
- Create style-skill-memory.md for SKILL memory generation
• Converts style reference packages to SKILL memory
• Progressive loading levels (0-3) for efficient token usage
• Intelligent description generation from metadata
• --regenerate flag support
Improvements based on Gemini analysis:
- Overwrite protection in codify-style prevents accidental data loss
- Reliable component counting via jq JSON parsing (grep fallback)
- Package validation in reference-page-generator ensures data integrity
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- 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.
- **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>
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>
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>
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>
- 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>
- 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>
- 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.
- Updated explore-auto.md to include a new phase for intelligent path detection and source selection, allowing the system to identify existing file paths from prompts and images.
- Introduced conditional code import and completeness assessment based on detected design sources (code only, visual only, hybrid).
- Modified phase execution flow to accommodate new checks for style, animation, and layout completeness based on the design source.
- Added error handling for missing design elements and user prompts for visual supplementation.
- Enhanced imitate-auto.md with intelligent path detection and a new phase for code import and completeness assessment, ensuring a hybrid approach when applicable.
- Implemented detailed reporting for each phase, including missing elements and recommendations for improvement.
- Created a comprehensive import-from-code.md file outlining the workflow for importing design systems from code files, detailing the execution process and error handling.
- Revised TDD workflow to reduce phases from 7 to 6, integrating conflict resolution as an optional phase.
- Updated phase descriptions and execution logic to ensure automatic progression through phases based on TodoList status.
- Removed the concept-enhanced command and its associated documentation, streamlining the analysis process.
- Enhanced task generation to prioritize conflict resolution strategies and incorporate context package loading.
- Updated UI design documentation to reflect changes in role analysis and design system references.
- Improved error handling and validation checks across various commands to ensure robustness in execution.
- Updated references in various workflow commands to utilize role analysis documents instead of synthesis-specification.md.
- Modified CLI templates and command references to reflect the new architecture and document structure.
- Introduced conflict-resolution command to analyze and resolve conflicts between implementation plans and existing codebase.
- Deprecated synthesis role template and provided migration guidance for transitioning to the new role analysis approach.
Enhanced layout-extract and style-extract workflows with two-phase generation
process, allowing users to preview and select preferred options before full
generation.
Key changes:
- Split generation into two agent tasks:
* Task 1: Generate concept options with previews
* Task 2: Develop selected option into complete output
- Add Phase 1.5 interactive user selection:
* Present concept options with visual previews
* Capture user selection via AskUserQuestion tool
* Save selection to user-selection.json
- Layout workflow improvements:
* Generate layout concept options with ASCII wireframes
* User selects preferred structural approach
* Generate detailed templates only for selected concepts
- Style workflow improvements:
* Generate design direction options with color/typography previews
* User selects preferred design philosophy
* Generate complete design system only for selected direction
- Better user experience:
* Avoid generating unwanted variants
* Allow informed decisions before full generation
* Reduce wasted computation on unused variants
This change improves workflow efficiency and user control over design output.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixes critical P0 issue where animation-tokens.json wasn't consumed by the
generate command, breaking the value chain. The animation extraction system
now properly flows through: animation-extract → tokens → generate → prototypes.
Changes:
- Added animation-extract command with hybrid CSS extraction + interactive
fallback strategy
- Updated generate.md to load and inject animation tokens into prototypes
- Added CSS animation support (custom properties, keyframes, interactions,
accessibility)
- Integrated animation extraction into explore-auto and imitate-auto workflows
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add --urls parameter support to style-extract and layout-extract
- Auto-trigger computed styles extraction when URLs provided (no manual flag)
- Auto-trigger DOM structure extraction for layout analysis
- Streamline imitate-auto workflow by removing redundant REPORT statements
- Maintain clear phase headers while reducing verbose output
- Enable graceful fallback to visual analysis if Chrome DevTools unavailable
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
**Summary:**
Updated all 62 command files in `.claude/commands` directory to improve parameter documentation clarity by replacing `examples` field with descriptive `argument-hint` field.
**Changes:**
- Added/improved `argument-hint` for all commands based on usage patterns
- Removed `examples` field and all example items from YAML headers
- Maintained all other YAML fields (name, description, usage, allowed-tools)
- Deleted obsolete commands: workflow/issue/*, workflow/session/pause.md, workflow/session/switch.md
- Cleaned up temporary analysis files
**Rationale:**
The `argument-hint` field provides clearer, more concise parameter documentation than example lists, improving command discoverability and usability in the Claude Code interface.
**Files Modified:** 62 command files
**Lines Changed:** -1570 insertions, +192 deletions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implemented the `/workflow:ui-design:explore-layers` command for depth-controlled UI capture.
- Defined depth levels from full-page screenshots to Shadow DOM exploration.
- Included setup, validation, and navigation phases with error handling.
- Captured screenshots at various depths and generated a comprehensive layer map.
- Added examples and usage instructions for ease of use.
- Introduced a new workflow named `imitate-auto-v3` that allows for batch screenshot capture and optional token refinement.
- Implemented a comprehensive 5-phase execution protocol to handle initialization, screenshot capture, style extraction, token processing, and UI generation.
- Added support for multiple target URLs through a `--url-map` parameter, enhancing flexibility in design replication.
- Included optional parameters for session management and token refinement, allowing users to customize their workflow experience.
- Enhanced error handling and reporting throughout the workflow to ensure clarity and ease of debugging.
- Deprecated the previous `imitate-auto.md` workflow in favor of this more robust version.
- Remove npx playwright to prevent auto-installation triggers
- Add explicit tool availability checks using 'which' command
- Check for playwright-cli, google-chrome, chrome, and chromium executables
- Only attempt screenshot capture if tools are already installed
- Provide clear tool availability reporting to users
- Gracefully fallback to manual mode when no tools available
- Support chromium browser on Linux systems
This ensures the workflow never triggers package installations and works
safely in environments without screenshot tools installed.
Add Phase 0.1/1.1 memory check to all UI design workflow commands to skip
execution when outputs already exist. This optimization dramatically reduces
redundant execution time from minutes to <1 second.
Changes:
- extract.md: Check for style-cards.json, skip Phase 0.5-3 if exists
- consolidate.md: Check for style-1/design-tokens.json, skip Phase 2-6
- generate.md: Check for compare.html, skip Phase 1.5-4
- update.md: Check for current design run in synthesis-spec, skip Phase 2-5
Benefits:
- >99% time reduction for repeated workflow execution
- Automatic cache detection without manual flags
- Clear reporting of skipped phases
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Agent now directly generates HTML with final CSS references (no placeholders)
- Remove tokens.css dependency - agents create self-contained CSS from design-tokens.json
- Simplify ui-generate-preview-v2.sh (no placeholder replacement logic)
- Update Phase 2.5 validation to check actual href attributes
- Remove Phase 1.6 (token conversion step)
- Improve agent instructions with direct CSS value usage from design tokens
Benefits:
- Simpler workflow with fewer intermediate steps
- More flexible CSS generation - agents can adapt token values based on design_attributes
- Better style differentiation across variants
- Reduced dependencies and potential error points
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace exa-code with web-search for diverse layout inspiration
- Simplify from keyword pools to direct "common variations" search
- Add selection strategy for agents to pick different structural patterns
- Support unlimited layout variants with natural diversity
Impact: Prevents layout architecture convergence by leveraging web search
for real-world layout variations instead of code examples.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implemented a new script to generate compare.html and index.html for UI prototypes.
- Auto-detects styles, layouts, and targets from HTML file patterns.
- Generates an interactive comparison matrix and a simple index of prototypes.
- Includes a detailed PREVIEW.md guide with usage instructions and file structure.
