catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-05 01:50:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui-design): enhance automatic file discovery and simplify command parameters

Browse Source
This commit is contained in:
catlog22
2025-11-11 15:47:16 +08:00
parent 0767d6f2d3
commit 40f3d44ed4
4 changed files with 49 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
.claude/commands/workflow/ui-design/codify-style.md
View File

@@ -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: "<path> [--package-name <name>] [--css \"<glob>\"] [--scss \"<glob>\"] [--js \"<glob>\"] [--html \"<glob>\"] [--style-files \"<glob>\"] [--output-dir <path>]"
description: Orchestrator to extract styles from code and generate shareable reference package with preview (automatic file discovery)
argument-hint: "<path> [--package-name <name>] [--output-dir <path>] [--overwrite]"
allowed-tools: SlashCommand,Bash,Read,TodoWrite
auto-continue: true
---
@@ -53,35 +53,30 @@ auto-continue: true
/workflow:ui-design:codify-style <path> [OPTIONS]
# Required
<path> Source code directory or file to analyze
<path> Source code directory to analyze
# Optional
--package-name <name> Custom name for the style reference package
(default: auto-generated from directory name)
--css "<glob>" CSS file glob pattern
--scss "<glob>" SCSS file glob pattern
--js "<glob>" JavaScript file glob pattern
--html "<glob>" HTML file glob pattern
--style-files "<glob>" Universal style file glob (matches all style files)
--output-dir <path> 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

2
.claude/commands/workflow/ui-design/explore-auto.md
View File

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

2
.claude/commands/workflow/ui-design/imitate-auto.md
View File

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

53
.claude/commands/workflow/ui-design/import-from-code.md
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: "[--design-id <id>] [--session <id>] [--source <path>] [--files \"<glob>\"] [--css \"<glob>\"] [--js \"<glob>\"] [--scss \"<glob>\"] [--html \"<glob>\"] [--style-files \"<glob>\"]"
description: Import design system from code files (CSS/JS/HTML/SCSS) with automatic file discovery and parallel agent analysis
argument-hint: "[--design-id <id>] [--session <id>] [--source <path>]"
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 <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)
--files "<glob>" Universal file glob pattern (recommended, replaces all below)
# Legacy parameters (deprecated, use --files instead)
--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)
```
**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
<!-- TodoWrite: Mark Phase 0 complete, start Phase 1 -->
@@ -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