diff --git a/.claude/commands/workflow/ui-design/codify-style.md b/.claude/commands/workflow/ui-design/codify-style.md index aa29a8b2..07e62824 100644 --- a/.claude/commands/workflow/ui-design/codify-style.md +++ b/.claude/commands/workflow/ui-design/codify-style.md @@ -1,7 +1,7 @@ --- name: workflow:ui-design:codify-style -description: Orchestrator to extract styles from code and generate shareable reference package with preview -argument-hint: " [--package-name ] [--css \"\"] [--scss \"\"] [--js \"\"] [--html \"\"] [--style-files \"\"] [--output-dir ]" +description: Orchestrator to extract styles from code and generate shareable reference package with preview (automatic file discovery) +argument-hint: " [--package-name ] [--output-dir ] [--overwrite]" allowed-tools: SlashCommand,Bash,Read,TodoWrite auto-continue: true --- @@ -53,35 +53,30 @@ auto-continue: true /workflow:ui-design:codify-style [OPTIONS] # Required - Source code directory or file to analyze + Source code directory to analyze # Optional --package-name Custom name for the style reference package (default: auto-generated from directory name) ---css "" CSS file glob pattern ---scss "" SCSS file glob pattern ---js "" JavaScript file glob pattern ---html "" HTML file glob pattern ---style-files "" Universal style file glob (matches all style files) --output-dir Output directory (default: .workflow/reference_style) --overwrite Overwrite existing package without prompting ``` +**Note**: File discovery is fully automatic. The command will scan the source directory and find all style-related files (CSS, SCSS, JS, HTML) automatically. + ### Usage Examples ```bash # Simplest usage - single path parameter /workflow:ui-design:codify-style ./src # Auto-generates package name: "src-style-v1" +# Auto-discovers all style files in ./src # With custom package name /workflow:ui-design:codify-style ./app --package-name design-system-v2 -# Specific file patterns -/workflow:ui-design:codify-style ./app --css "styles/**/*.scss" --js "theme/*.js" - -# Tailwind config extraction -/workflow:ui-design:codify-style ./ --js "tailwind.config.js" --package-name tailwind-theme-v1 +# Root directory analysis (e.g., for Tailwind config) +/workflow:ui-design:codify-style ./ --package-name tailwind-theme-v1 # Custom output directory /workflow:ui-design:codify-style ./src --package-name component-lib-v1 --output-dir ./style-references @@ -145,9 +140,7 @@ IF NOT --package-name: # Add version suffix package_name = "${normalized_name}-style-v1" - REPORT: "๐Ÿ“‹ Auto-generated package name: ${package_name}" - REPORT: " (from directory: ${dir_name})" -ELSE: + ELSE: package_name = --package-name # Validate custom package name format (lowercase, alphanumeric, hyphens only) @@ -198,24 +191,11 @@ TRY: Bash(mkdir -p .workflow/${temp_session_id}/${temp_design_run_id}) design_run_path = Bash(cd .workflow/${temp_session_id}/${temp_design_run_id} && pwd) - REPORT: "๐Ÿ“ฆ Temporary workspace created: ${design_run_path}" - CATCH error: REPORT: "โŒ ERROR: Failed to create temporary workspace: ${error}" EXIT 1 STORE: temp_session_id, temp_design_run_id, design_run_path - -# Display configuration summary (informational only, no user prompt) -REPORT: "" -REPORT: "โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”" -REPORT: "๐Ÿ“‹ Starting Style Codification" -REPORT: "โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”" -REPORT: "Source: ${source}" -REPORT: "Package: ${package_name}" -REPORT: "Output: ${package_path}/" -REPORT: "โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”" -REPORT: "" ``` **Summary Variables**: @@ -248,33 +228,10 @@ REPORT: "" **Command Construction**: ```bash -# Build command with all parameters -command_parts = ["/workflow:ui-design:import-from-code"] -command_parts.append("--design-id \"${temp_design_run_id}\"") -command_parts.append("--source \"${source}\"") - -# Add optional glob patterns -IF --css: - command_parts.append("--css \"${css}\"") -IF --scss: - command_parts.append("--scss \"${scss}\"") -IF --js: - command_parts.append("--js \"${js}\"") -IF --html: - command_parts.append("--html \"${html}\"") -IF --style-files: - command_parts.append("--style-files \"${style_files}\"") - -command = " ".join(command_parts) - -REPORT: "" -REPORT: "๐ŸŽจ Phase 1: Style Extraction" -REPORT: "โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”" -REPORT: "Analyzing source code for design patterns..." -REPORT: "Source: ${source}" -IF glob_patterns: - REPORT: "Patterns: ${', '.join(glob_patterns)}" -REPORT: "โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”" +# Build command with required parameters only +command = "/workflow:ui-design:import-from-code" + + " --design-id \"${temp_design_run_id}\"" + + " --source \"${source}\"" ``` **Execute Command**: @@ -292,44 +249,20 @@ TRY: IF tokens_exists != "exists" OR guide_exists != "exists": REPORT: "โš ๏ธ WARNING: Expected extraction files not found" - REPORT: "Tokens: ${tokens_exists} | Guide: ${guide_exists}" REPORT: "Continuing with available outputs..." - ELSE: - REPORT: "" - REPORT: "โœ… Phase 1 Complete: Style extraction successful" - REPORT: " โ†’ Design tokens: ${tokens_path}" - REPORT: " โ†’ Style guide: ${guide_path}" - - # Optional: Check for animation tokens - anim_path = "${design_run_path}/animation-extraction/animation-tokens.json" - anim_exists = Bash(test -f "${anim_path}" && echo "exists" || echo "missing") - IF anim_exists == "exists": - REPORT: " โ†’ Animation tokens: ${anim_path}" CATCH error: REPORT: "โŒ ERROR: Style extraction failed" REPORT: "Error: ${error}" - REPORT: "" - REPORT: "Possible causes:" - REPORT: " โ€ข Source directory contains no style files" - REPORT: " โ€ข Glob patterns don't match any files" - REPORT: " โ€ข Invalid file formats in source directory" - REPORT: "" - REPORT: "Cleaning up temporary workspace..." + REPORT: "Possible cause: Source directory contains no style files" Bash(rm -rf .workflow/${temp_session_id}) EXIT 1 ``` -**Example Commands**: +**Example Command**: ```bash -# Basic extraction +# Automatic file discovery /workflow:ui-design:import-from-code --design-id design-run-20250111-123456 --source ./src - -# With specific file patterns -/workflow:ui-design:import-from-code --design-id design-run-20250111-123456 --source ./src --css "theme/*.css" --js "theme/*.js" - -# Universal style files -/workflow:ui-design:import-from-code --design-id design-run-20250111-123456 --source ./src --style-files "**/theme.*" ``` **Completion Criteria**: @@ -367,14 +300,6 @@ command = "/workflow:ui-design:reference-page-generator " + "--design-run \"${design_run_path}\" " + "--package-name \"${package_name}\" " + "--output-dir \"${output_dir}\"" - -REPORT: "" -REPORT: "๐Ÿ“ฆ Phase 2: Reference Package Generation" -REPORT: "โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”" -REPORT: "Creating shareable reference package..." -REPORT: "Package: ${package_name}" -REPORT: "Output: ${package_path}/" -REPORT: "โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”" ``` **Execute Command**: @@ -401,30 +326,12 @@ TRY: missing_files.append(file) IF missing_files.length > 0: - REPORT: "โš ๏ธ WARNING: Some expected files are missing:" - FOR file IN missing_files: - REPORT: " โœ— ${file}" - REPORT: "" + REPORT: "โš ๏ธ WARNING: Some expected files are missing" REPORT: "Package may be incomplete. Continuing with cleanup..." - ELSE: - REPORT: "" - REPORT: "โœ… Phase 2 Complete: Reference package generated" - REPORT: " โ†’ Design tokens: design-tokens.json" - REPORT: " โ†’ Component patterns: component-patterns.json" - REPORT: " โ†’ Interactive preview: preview.html" - REPORT: " โ†’ Documentation: README.md" - REPORT: " โ†’ Metadata: metadata.json" CATCH error: REPORT: "โŒ ERROR: Reference package generation failed" REPORT: "Error: ${error}" - REPORT: "" - REPORT: "This may indicate:" - REPORT: " โ€ข Incomplete style extraction in Phase 1" - REPORT: " โ€ข Invalid design-run path" - REPORT: " โ€ข Insufficient permissions for output directory" - REPORT: "" - REPORT: "Cleaning up temporary workspace..." Bash(rm -rf .workflow/${temp_session_id}) EXIT 1 ``` @@ -472,18 +379,13 @@ CATCH error: **Operations**: ```bash -REPORT: "" -REPORT: "๐Ÿงน Phase 3: Cleanup & Verification" -REPORT: "โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”" - # Cleanup temporary workspace TRY: Bash(rm -rf .workflow/${temp_session_id}) - REPORT: "โœ… Temporary workspace cleaned" CATCH error: - REPORT: "โš ๏ธ Warning: Failed to cleanup temporary files: ${error}" + # Silent failure - not critical -# Quick verification (reference-page-generator already validated outputs) +# Quick verification package_exists = Bash(test -d "${package_path}" && echo "exists" || echo "missing") IF package_exists != "exists": @@ -494,9 +396,6 @@ IF package_exists != "exists": absolute_package_path = Bash(cd "${package_path}" && pwd 2>/dev/null || echo "${package_path}") component_count = Bash(jq -r '.extraction_metadata.component_count // "unknown"' "${package_path}/component-patterns.json" 2>/dev/null || echo "unknown") anim_exists = Bash(test -f "${package_path}/animation-tokens.json" && echo "โœ“" || echo "โ—‹") - -REPORT: "โœ… Package verified: ${package_path}/" -REPORT: "โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”" ``` **TodoWrite Update**: @@ -658,12 +557,11 @@ User triggers: /workflow:ui-design:codify-style ./src --package-name my-style-v1 ### Parameter Pass-Through -All glob parameters are passed through to `import-from-code`: -- `--css` โ†’ passed to import-from-code -- `--scss` โ†’ passed to import-from-code -- `--js` โ†’ passed to import-from-code -- `--html` โ†’ passed to import-from-code -- `--style-files` โ†’ passed to import-from-code +Only essential parameters are passed to `import-from-code`: +- `--design-id` โ†’ temporary design run ID (auto-generated) +- `--source` โ†’ user-specified source directory + +File discovery is fully automatic - no glob patterns needed. ### Output Directory Structure @@ -690,13 +588,13 @@ All glob parameters are passed through to `import-from-code`: - **Simplified Interface**: Single path parameter with intelligent defaults - **Auto-Generation**: Package names auto-generated from directory names +- **Automatic Discovery**: No need to specify file patterns - finds all style files automatically - **Pure Orchestrator**: No direct agent execution, delegates to specialized commands - **Auto-Continue**: Autonomous 4-phase execution without user interaction - **Safety First**: Overwrite protection, validation checks, error handling - **Code Reuse**: Leverages existing `import-from-code` and `reference-page-generator` commands - **Clean Separation**: Each command has single responsibility - **Easy Maintenance**: Changes to sub-commands automatically apply -- **Flexible**: Supports all import-from-code glob parameters for custom file patterns ## Architecture diff --git a/.claude/commands/workflow/ui-design/explore-auto.md b/.claude/commands/workflow/ui-design/explore-auto.md index e7cb9bed..00e3de8b 100644 --- a/.claude/commands/workflow/ui-design/explore-auto.md +++ b/.claude/commands/workflow/ui-design/explore-auto.md @@ -544,7 +544,7 @@ ELSE: ### Phase 3: UI Assembly ```bash -command = "/workflow:ui-design:generate --design-id \"{design_id}\"" +command = "/workflow:ui-design:generate --design-id \"{design_id}\"" + (--session ? " --session {session_id}" : "") total = style_variants ร— layout_variants ร— len(inferred_target_list) diff --git a/.claude/commands/workflow/ui-design/imitate-auto.md b/.claude/commands/workflow/ui-design/imitate-auto.md index c5aee27f..62fe583c 100644 --- a/.claude/commands/workflow/ui-design/imitate-auto.md +++ b/.claude/commands/workflow/ui-design/imitate-auto.md @@ -416,7 +416,7 @@ TodoWrite(mark_completed: "Extract layout", mark_in_progress: "Assemble UI") ```bash REPORT: "๐Ÿš€ Phase 3: UI Assembly" -generate_command = f"/workflow:ui-design:generate --design-id \"{design_id}\" --style-variants 1 --layout-variants 1" +generate_command = f"/workflow:ui-design:generate --design-id \"{design_id}\"" SlashCommand(generate_command) TodoWrite(mark_completed: "Assemble UI", mark_in_progress: session_id ? "Integrate design system" : "Completion") diff --git a/.claude/commands/workflow/ui-design/import-from-code.md b/.claude/commands/workflow/ui-design/import-from-code.md index e1866ab9..0db52d23 100644 --- a/.claude/commands/workflow/ui-design/import-from-code.md +++ b/.claude/commands/workflow/ui-design/import-from-code.md @@ -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: "[--design-id ] [--session ] [--source ] [--files \"\"] [--css \"\"] [--js \"\"] [--scss \"\"] [--html \"\"] [--style-files \"\"]" +description: Import design system from code files (CSS/JS/HTML/SCSS) with automatic file discovery and parallel agent analysis +argument-hint: "[--design-id ] [--session ] [--source ]" allowed-tools: Read,Write,Bash,Glob,Grep,Task,TodoWrite auto-continue: true --- @@ -37,33 +37,21 @@ Extract design system tokens from source code files (CSS/SCSS/JS/TS/HTML) using --design-id Design run ID to import into (must exist) --session Session ID (uses latest design run in session) --source Source code directory to analyze (required) ---files "" Universal file glob pattern (recommended, replaces all below) - -# Legacy parameters (deprecated, use --files instead) ---css "" CSS file glob pattern (e.g., "theme/*.css") ---scss "" SCSS file glob pattern (e.g., "styles/*.scss") ---js "" JavaScript file glob pattern (e.g., "theme/*.js") ---html "" HTML file glob pattern (e.g., "pages/*.html") ---style-files "" Universal style file glob (applies to CSS/SCSS/JS) ``` +**Note**: All file discovery is automatic. The command will scan the source directory and find all relevant style files (CSS, SCSS, JS, HTML) automatically. + ### Usage Examples ```bash -# Simple usage - auto-discover all style files +# Basic usage - auto-discover all style files /workflow:ui-design:import-from-code --design-id design-run-20250109-12345 --source ./src -# Recommended: Use --files for custom patterns -/workflow:ui-design:import-from-code --session WFS-20250109-12345 --source ./src --files "**/theme.*" +# With session ID (uses latest design run in session) +/workflow:ui-design:import-from-code --session WFS-20250109-12345 --source ./src -# Target specific file patterns -/workflow:ui-design:import-from-code --design-id design-run-20250109-12345 --source ./src --files "**/{theme,style,color}.*" - -# Tailwind config only -/workflow:ui-design:import-from-code --design-id design-run-20250109-12345 --source ./ --files "tailwind.config.js" - -# Legacy syntax (still supported, but --files recommended) -/workflow:ui-design:import-from-code --session WFS-20250109-12345 --source ./src --css "theme/*.css" --js "theme/*.js" +# Root directory analysis +/workflow:ui-design:import-from-code --design-id design-run-20250109-12345 --source ./ ``` --- @@ -125,11 +113,14 @@ echo " Output: $base_path" **File Discovery Behavior**: -- **With `--files`**: Discovers all files matching the glob pattern, then categorizes by extension -- **With legacy parameters**: Uses individual globs for CSS/SCSS/JS/HTML (shows deprecation warning) -- **Auto-discover (default)**: Finds all CSS/SCSS/HTML files and theme-related JS/TS files -- **Exclusions**: Automatically excludes `node_modules/` and `dist/` directories +- **Automatic discovery**: Intelligently scans source directory for all style-related files +- **Supported file types**: CSS, SCSS, JavaScript, TypeScript, HTML +- **Smart filtering**: Finds theme-related JS/TS files (e.g., tailwind.config.js, theme.js, styled-components) +- **Exclusions**: Automatically excludes `node_modules/`, `dist/`, `.git/`, and build directories - **Output**: Categorized file lists saved to `.intermediates/import-analysis/` + - `css-files.txt` - CSS and SCSS files + - `js-files.txt` - JavaScript and TypeScript files with theme/style content + - `html-files.txt` - HTML files @@ -758,18 +749,18 @@ ${base_path}/ | Error | Cause | Resolution | |-------|-------|------------| -| No files discovered | Glob patterns too restrictive or wrong --source path | Check glob patterns and --source parameter, verify file locations | +| No files discovered | Wrong --source path or no style files in directory | Verify --source parameter points to correct directory with style files | | 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) | +| Missing file type | File extensions not recognized | Check that files use standard extensions (.css, .scss, .js, .ts, .html) | --- ## Best Practices -1. **Use auto-discovery for full projects**: Omit glob flags to discover all files automatically -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 +1. **Point to the right directory**: Use `--source` to specify the directory containing your style files (e.g., `./src`, `./app`, `./styles`) +2. **Let automatic discovery work**: The command will find all relevant files - no need to specify patterns 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 +4. **Cross-reference agent reports**: Compare all three completeness reports (style, animation, layout) to identify gaps +5. **Review missing content**: Check `_metadata.completeness` field in reports for actionable improvements 6. **Verify file discovery**: Check `${base_path}/.intermediates/import-analysis/*-files.txt` if agents report no data