mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-13 02:41:50 +08:00
docs(skill): update command guide for v5.8.0 release
Major updates: - Add UI Design Style Memory workflow documentation - /memory:style-skill-memory command - /workflow:ui-design:codify-style orchestrator - /workflow:ui-design:reference-page-generator - Add /workflow:lite-plan intelligent planning command (testing) - Add /memory:code-map-memory code flow mapping (testing) Agent enhancements: - Add cli-explore-agent for code exploration - Enhance cli-planning-agent task generation - Major ui-design-agent refactoring Statistics: - Commands: 69 → 75 (+6) - Agents: 11 → 13 (+2) - Reference docs: 80 → 88 files Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
@@ -286,17 +286,16 @@ CATCH error:
|
||||
[
|
||||
{"content": "Phase 0: Validate parameters and prepare session", "status": "completed", "activeForm": "Validating parameters"},
|
||||
{"content": "Phase 1: Style extraction from source code (import-from-code)", "status": "completed", "activeForm": "Extracting styles"},
|
||||
{"content": "Phase 2.1: Validation and preparation (reference-page-generator)", "status": "in_progress", "activeForm": "Validating parameters"},
|
||||
{"content": "Phase 2.2: Component pattern extraction (reference-page-generator)", "status": "pending", "activeForm": "Extracting component patterns"},
|
||||
{"content": "Phase 2.3: Generate preview pages (reference-page-generator)", "status": "pending", "activeForm": "Generating preview"},
|
||||
{"content": "Phase 2.4: Generate metadata and documentation (reference-page-generator)", "status": "pending", "activeForm": "Generating documentation"},
|
||||
{"content": "Phase 2.0: Setup and validation (reference-page-generator)", "status": "in_progress", "activeForm": "Validating parameters"},
|
||||
{"content": "Phase 2.1: Prepare component data (reference-page-generator)", "status": "pending", "activeForm": "Copying layout templates"},
|
||||
{"content": "Phase 2.2: Generate preview pages (reference-page-generator)", "status": "pending", "activeForm": "Generating preview"},
|
||||
{"content": "Phase 3: Cleanup and verify package", "status": "pending", "activeForm": "Cleanup and verification"}
|
||||
]
|
||||
```
|
||||
|
||||
**Note**: Phase 1 tasks completed and collapsed. SlashCommand invocation **attaches** reference-page-generator's 4 tasks. Orchestrator **executes** these tasks itself.
|
||||
**Note**: Phase 1 tasks completed and collapsed. SlashCommand invocation **attaches** reference-page-generator's 3 tasks. Orchestrator **executes** these tasks itself.
|
||||
|
||||
**Next Action**: Tasks attached → **Execute Phase 2.1-2.4** sequentially
|
||||
**Next Action**: Tasks attached → **Execute Phase 2.0-2.2** sequentially
|
||||
|
||||
---
|
||||
|
||||
@@ -317,22 +316,19 @@ command = "/workflow:ui-design:reference-page-generator " +
|
||||
|
||||
```bash
|
||||
TRY:
|
||||
# SlashCommand invocation ATTACHES reference-page-generator's 4 tasks to current workflow
|
||||
# SlashCommand invocation ATTACHES reference-page-generator's 3 tasks to current workflow
|
||||
# Orchestrator will EXECUTE these attached tasks itself:
|
||||
# 1. Phase 2.1: Validation and preparation
|
||||
# 2. Phase 2.2: Component pattern extraction
|
||||
# 3. Phase 2.3: Generate preview pages
|
||||
# 4. Phase 2.4: Generate metadata and documentation
|
||||
# 1. Phase 2.0: Setup and validation
|
||||
# 2. Phase 2.1: Prepare component data
|
||||
# 3. Phase 2.2: Generate preview pages
|
||||
SlashCommand(command)
|
||||
|
||||
# After executing all attached tasks, verify package outputs
|
||||
required_files = [
|
||||
"layout-templates.json",
|
||||
"design-tokens.json",
|
||||
"component-patterns.json",
|
||||
"preview.html",
|
||||
"preview.css",
|
||||
"metadata.json",
|
||||
"README.md"
|
||||
"preview.css"
|
||||
]
|
||||
|
||||
missing_files = []
|
||||
@@ -365,16 +361,14 @@ CATCH error:
|
||||
- ✅ `reference-page-generator` executed successfully
|
||||
- ✅ Reference package created at `${package_path}/`
|
||||
- ✅ All required files present:
|
||||
- `layout-templates.json` - Layout templates from design run
|
||||
- `design-tokens.json` - Complete design token system
|
||||
- `component-patterns.json` - Component catalog
|
||||
- `preview.html` - Interactive multi-component showcase
|
||||
- `preview.css` - Showcase styling
|
||||
- `metadata.json` - Package metadata and version info
|
||||
- `README.md` - Package documentation and usage guide
|
||||
- ⭕ Optional files:
|
||||
- `animation-tokens.json` - Animation specifications (if available from extraction)
|
||||
|
||||
<!-- TodoWrite: REMOVE Phase 2.1-2.4 tasks, restore to orchestrator view -->
|
||||
<!-- TodoWrite: REMOVE Phase 2.0-2.2 tasks, restore to orchestrator view -->
|
||||
|
||||
**TodoWrite Update (Phase 2 completed - tasks collapsed)**:
|
||||
```json
|
||||
@@ -414,7 +408,7 @@ IF package_exists != "exists":
|
||||
|
||||
# Get absolute path and component count for final report
|
||||
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")
|
||||
component_count = Bash(jq -r '.layout_templates | length // "unknown"' "${package_path}/layout-templates.json" 2>/dev/null || echo "unknown")
|
||||
anim_exists = Bash(test -f "${package_path}/animation-tokens.json" && echo "✓" || echo "○")
|
||||
```
|
||||
|
||||
@@ -434,7 +428,7 @@ anim_exists = Bash(test -f "${package_path}/animation-tokens.json" && echo "✓"
|
||||
📄 Source: {source}
|
||||
📊 Components: {component_count}
|
||||
|
||||
Files: design-tokens.json, style-guide.md, component-patterns.json, preview.html, preview.css, metadata.json, README.md
|
||||
Files: layout-templates.json, design-tokens.json, animation-tokens.json (optional), preview.html, preview.css
|
||||
|
||||
Preview: file://{absolute_package_path}/preview.html
|
||||
|
||||
@@ -473,12 +467,12 @@ TodoWrite({todos: [
|
||||
// - TodoWrite becomes: Phase 0-1 (completed) + Phase 2 + Phase 3
|
||||
//
|
||||
// 4. PHASE 2 SlashCommand INVOCATION:
|
||||
// - SlashCommand(/workflow:ui-design:reference-page-generator) ATTACHES 4 tasks
|
||||
// - TodoWrite expands to: Phase 0-1 (completed) + 4 reference-page-generator tasks + Phase 3
|
||||
// - Orchestrator EXECUTES these 4 tasks sequentially (Phase 2.1 → 2.2 → 2.3 → 2.4)
|
||||
// - SlashCommand(/workflow:ui-design:reference-page-generator) ATTACHES 3 tasks
|
||||
// - TodoWrite expands to: Phase 0-1 (completed) + 3 reference-page-generator tasks + Phase 3
|
||||
// - Orchestrator EXECUTES these 3 tasks sequentially (Phase 2.0 → 2.1 → 2.2)
|
||||
//
|
||||
// 5. PHASE 2 TASKS COMPLETED:
|
||||
// - All 4 reference-page-generator tasks executed and completed
|
||||
// - All 3 reference-page-generator tasks executed and completed
|
||||
// - COLLAPSE completed tasks into Phase 2 summary
|
||||
// - TodoWrite returns to: Phase 0-2 (completed) + Phase 3 (in_progress)
|
||||
//
|
||||
@@ -533,25 +527,22 @@ User triggers: /workflow:ui-design:codify-style ./src --package-name my-style-v1
|
||||
↓
|
||||
[Phase 1 Complete] → TodoWrite: COLLAPSE Phase 1.0-1.3 into Phase 1 summary
|
||||
↓
|
||||
[Phase 2 Invoke] → SlashCommand(/workflow:ui-design:reference-page-generator) ATTACHES 4 tasks
|
||||
[Phase 2 Invoke] → SlashCommand(/workflow:ui-design:reference-page-generator) ATTACHES 3 tasks
|
||||
├─ Phase 0 (completed)
|
||||
├─ Phase 1: Style extraction from source code (completed) ← COLLAPSED
|
||||
├─ Phase 2.1: Validation and preparation (in_progress) ← ATTACHED
|
||||
├─ Phase 2.2: Component pattern extraction (pending) ← ATTACHED
|
||||
├─ Phase 2.3: Generate preview pages (pending) ← ATTACHED
|
||||
├─ Phase 2.4: Generate metadata and documentation (pending) ← ATTACHED
|
||||
├─ Phase 2.0: Setup and validation (in_progress) ← ATTACHED
|
||||
├─ Phase 2.1: Prepare component data (pending) ← ATTACHED
|
||||
├─ Phase 2.2: Generate preview pages (pending) ← ATTACHED
|
||||
└─ Phase 3: Cleanup and verify package (pending)
|
||||
↓
|
||||
[Execute Phase 2.1] → Validate parameters (orchestrator executes this)
|
||||
[Execute Phase 2.0] → Setup and validation (orchestrator executes this)
|
||||
↓
|
||||
[Execute Phase 2.2] → Extract component patterns (orchestrator executes this)
|
||||
[Execute Phase 2.1] → Prepare component data (orchestrator executes this)
|
||||
↓
|
||||
[Execute Phase 2.3] → Generate preview pages (orchestrator executes this)
|
||||
[Execute Phase 2.2] → Generate preview pages (orchestrator executes this)
|
||||
└─ Outputs: layout-templates.json, design-tokens.json, animation-tokens.json (optional), preview.html, preview.css
|
||||
↓
|
||||
[Execute Phase 2.4] → Generate metadata and docs (orchestrator executes this)
|
||||
└─ Outputs: component-patterns.json, preview.html, preview.css, metadata.json, README.md
|
||||
↓
|
||||
[Phase 2 Complete] → TodoWrite: COLLAPSE Phase 2.1-2.4 into Phase 2 summary
|
||||
[Phase 2 Complete] → TodoWrite: COLLAPSE Phase 2.0-2.2 into Phase 2 summary
|
||||
├─ Phase 0 (completed)
|
||||
├─ Phase 1: Style extraction from source code (completed)
|
||||
├─ Phase 2: Reference package generation (completed) ← COLLAPSED
|
||||
@@ -618,14 +609,11 @@ File discovery is fully automatic - no glob patterns needed.
|
||||
.workflow/
|
||||
├── reference_style/ # Default output directory
|
||||
│ └── {package-name}/
|
||||
│ ├── layout-templates.json
|
||||
│ ├── design-tokens.json
|
||||
│ ├── style-guide.md
|
||||
│ ├── component-patterns.json
|
||||
│ ├── animation-tokens.json (optional)
|
||||
│ ├── preview.html
|
||||
│ ├── preview.css
|
||||
│ ├── metadata.json
|
||||
│ └── README.md
|
||||
│ └── preview.css
|
||||
│
|
||||
└── codify-temp-{timestamp}/ # Temporary workspace (cleaned up after completion)
|
||||
├── style-extraction/
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: explore-auto
|
||||
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: "[--input "<value>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>] [--style-variants <count>] [--layout-variants <count>] [--batch-plan]"
|
||||
argument-hint: "[--input "<value>"] [--targets "<list>"] [--target-type "page|component"] [--session <id>] [--style-variants <count>] [--layout-variants <count>]"
|
||||
allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*), Task(conceptual-planning-agent)
|
||||
---
|
||||
|
||||
@@ -25,18 +25,18 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
- **ELSE**: Skip (use code import) → Auto-continues to Phase 9
|
||||
5. Phase 9 (layout-extract) → **Attach tasks → Execute → Collapse** → Auto-continues to Phase 10
|
||||
6. **Phase 10 (ui-assembly)** → **Attach tasks → Execute → Collapse** → Auto-continues to Phase 11
|
||||
7. Phase 11 (design-update) → **Attach tasks → Execute → Collapse** → Auto-continues to Phase 12 (if --batch-plan)
|
||||
8. Phase 12 (batch-plan, optional) → Reports completion
|
||||
7. **Phase 11 (preview-generation)** → **Execute script → Generate preview files** → Reports completion
|
||||
|
||||
**Phase Transition Mechanism**:
|
||||
- **Phase 5 (User Interaction)**: User confirms targets → IMMEDIATELY triggers Phase 7
|
||||
- **Phase 7-12 (Autonomous)**: `SlashCommand` invocation **ATTACHES** tasks to current workflow
|
||||
- **Phase 7-10 (Autonomous)**: `SlashCommand` invocation **ATTACHES** tasks to current workflow
|
||||
- **Task Execution**: Orchestrator **EXECUTES** these attached tasks itself
|
||||
- **Task Collapse**: After tasks complete, collapse them into phase summary
|
||||
- **Phase Transition**: Automatically execute next phase after collapsing
|
||||
- **Phase 11 (Script Execution)**: Execute preview generation script
|
||||
- No additional user interaction after Phase 5 confirmation
|
||||
|
||||
**Auto-Continue Mechanism**: TodoWrite tracks phase status with dynamic task attachment/collapse. After executing all attached tasks, you MUST immediately collapse them, restore phase summary, and execute the next phase. No user intervention required. The workflow is NOT complete until reaching Phase 11 (or Phase 12 if --batch-plan).
|
||||
**Auto-Continue Mechanism**: TodoWrite tracks phase status with dynamic task attachment/collapse. After executing all attached tasks, you MUST immediately collapse them, restore phase summary, and execute the next phase. No user intervention required. The workflow is NOT complete until reaching Phase 11 (preview generation).
|
||||
|
||||
**Task Attachment Model**: SlashCommand invocation is NOT delegation - it's task expansion. The orchestrator executes these attached tasks itself, not waiting for external completion.
|
||||
|
||||
@@ -50,7 +50,7 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
4. **Default to All**: When selecting variants/prototypes, use ALL generated items
|
||||
5. **Track Progress**: Update TodoWrite dynamically with task attachment/collapse pattern
|
||||
6. **⚠️ CRITICAL: Task Attachment Model** - SlashCommand invocation **ATTACHES** tasks to current workflow. Orchestrator **EXECUTES** these attached tasks itself, not waiting for external completion. This is NOT delegation - it's task expansion.
|
||||
7. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. After executing all attached tasks, you MUST immediately collapse them and execute the next phase. Workflow is NOT complete until Phase 11 (or Phase 12 if --batch-plan).
|
||||
7. **⚠️ CRITICAL: DO NOT STOP** - This is a continuous multi-phase workflow. After executing all attached tasks, you MUST immediately collapse them and execute the next phase. Workflow is NOT complete until Phase 11 (preview generation).
|
||||
|
||||
## Parameter Requirements
|
||||
|
||||
@@ -83,7 +83,6 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
- `--session <id>`: Workflow session ID (standalone mode if omitted)
|
||||
- `--style-variants <count>`: Style variants (default: inferred from prompt or 3, range: 1-5)
|
||||
- `--layout-variants <count>`: Layout variants per style (default: inferred or 3, range: 1-5)
|
||||
- `--batch-plan`: Auto-generate implementation tasks after design-update
|
||||
|
||||
**Legacy Target Parameters** (maintained for backward compatibility):
|
||||
- `--pages "<list>"`: Alias for `--targets` with `--target-type page`
|
||||
@@ -128,7 +127,7 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*), Glob(*), Write(*
|
||||
**Integrated vs. Standalone**:
|
||||
- `--session` flag determines session integration or standalone execution
|
||||
|
||||
## 12-Phase Execution
|
||||
## 11-Phase Execution
|
||||
|
||||
### Phase 1: Parameter Parsing & Input Detection
|
||||
```bash
|
||||
@@ -585,33 +584,48 @@ SlashCommand(command)
|
||||
# Output:
|
||||
# - {target}-style-{s}-layout-{l}.html (assembled prototypes)
|
||||
# - {target}-style-{s}-layout-{l}.css
|
||||
# - compare.html (interactive matrix view)
|
||||
# - PREVIEW.md (usage instructions)
|
||||
# Note: compare.html and PREVIEW.md will be generated in Phase 11
|
||||
```
|
||||
|
||||
### Phase 11: Design System Integration
|
||||
### Phase 11: Generate Preview Files
|
||||
```bash
|
||||
command = "/workflow:ui-design:update" + (--session ? " --session {session_id}" : "")
|
||||
REPORT: "🚀 Phase 11: Generate Preview Files"
|
||||
|
||||
# SlashCommand invocation ATTACHES update's tasks to current workflow
|
||||
# Orchestrator will EXECUTE these attached tasks itself
|
||||
SlashCommand(command)
|
||||
# Update TodoWrite to reflect preview generation phase
|
||||
TodoWrite({todos: [
|
||||
{"content": "Execute style extraction", "status": "completed", "activeForm": "Executing style extraction"},
|
||||
{"content": "Execute animation extraction", "status": "completed", "activeForm": "Executing animation extraction"},
|
||||
{"content": "Execute layout extraction", "status": "completed", "activeForm": "Executing layout extraction"},
|
||||
{"content": "Execute UI assembly", "status": "completed", "activeForm": "Executing UI assembly"},
|
||||
{"content": "Generate preview files", "status": "in_progress", "activeForm": "Generating preview files"}
|
||||
]})
|
||||
|
||||
# After executing all attached tasks, collapse them into phase summary
|
||||
# When phase finishes:
|
||||
# - If --batch-plan flag present: IMMEDIATELY execute Phase 12 (auto-continue)
|
||||
# - If no --batch-plan: Workflow complete, display final report
|
||||
```
|
||||
# Execute preview generation script
|
||||
Bash(~/.claude/scripts/ui-generate-preview.sh "${base_path}/prototypes")
|
||||
|
||||
### Phase 12: Batch Task Generation (Optional)
|
||||
```bash
|
||||
IF --batch-plan:
|
||||
FOR target IN inferred_target_list:
|
||||
task_desc = "Implement {target} {target_type} based on design system"
|
||||
# Verify output files
|
||||
IF NOT exists("${base_path}/prototypes/compare.html"):
|
||||
ERROR: "Preview generation failed: compare.html not found"
|
||||
EXIT 1
|
||||
|
||||
# SlashCommand invocation ATTACHES plan's tasks to current workflow
|
||||
# Orchestrator will EXECUTE these attached tasks itself
|
||||
SlashCommand("/workflow:plan --agent \"{task_desc}\"")
|
||||
IF NOT exists("${base_path}/prototypes/PREVIEW.md"):
|
||||
ERROR: "Preview generation failed: PREVIEW.md not found"
|
||||
EXIT 1
|
||||
|
||||
# Mark preview generation as complete
|
||||
TodoWrite({todos: [
|
||||
{"content": "Execute style extraction", "status": "completed", "activeForm": "Executing style extraction"},
|
||||
{"content": "Execute animation extraction", "status": "completed", "activeForm": "Executing animation extraction"},
|
||||
{"content": "Execute layout extraction", "status": "completed", "activeForm": "Executing layout extraction"},
|
||||
{"content": "Execute UI assembly", "status": "completed", "activeForm": "Executing UI assembly"},
|
||||
{"content": "Generate preview files", "status": "completed", "activeForm": "Generating preview files"}
|
||||
]})
|
||||
|
||||
REPORT: "✅ Preview files generated successfully"
|
||||
REPORT: " → compare.html (interactive matrix view)"
|
||||
REPORT: " → PREVIEW.md (usage instructions)"
|
||||
|
||||
# Workflow complete, display final report
|
||||
```
|
||||
|
||||
## TodoWrite Pattern
|
||||
@@ -622,7 +636,7 @@ TodoWrite({todos: [
|
||||
{"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"}
|
||||
{"content": "Generate preview files", "status": "pending", "activeForm": "Generating preview files"}
|
||||
]})
|
||||
|
||||
// ⚠️ CRITICAL: Dynamic TodoWrite task attachment strategy:
|
||||
@@ -630,18 +644,25 @@ TodoWrite({todos: [
|
||||
// **Key Concept**: SlashCommand invocation ATTACHES tasks to current workflow.
|
||||
// Orchestrator EXECUTES these attached tasks itself, not waiting for external completion.
|
||||
//
|
||||
// Phase 7-12 SlashCommand Invocation Pattern:
|
||||
// Phase 7-10 SlashCommand Invocation Pattern:
|
||||
// 1. SlashCommand invocation ATTACHES sub-command tasks to TodoWrite
|
||||
// 2. TodoWrite expands to include attached tasks
|
||||
// 3. Orchestrator EXECUTES attached tasks sequentially
|
||||
// 4. After all attached tasks complete, COLLAPSE them into phase summary
|
||||
// 5. Update next phase to in_progress
|
||||
// 6. IMMEDIATELY execute next phase SlashCommand (auto-continue)
|
||||
// 6. IMMEDIATELY execute next phase (auto-continue)
|
||||
//
|
||||
// Phase 11 Script Execution Pattern:
|
||||
// 1. Mark "Generate preview files" as in_progress
|
||||
// 2. Execute preview generation script via Bash tool
|
||||
// 3. Verify output files (compare.html, PREVIEW.md)
|
||||
// 4. Mark "Generate preview files" as completed
|
||||
//
|
||||
// Benefits:
|
||||
// ✓ Real-time visibility into sub-command task progress
|
||||
// ✓ Clean orchestrator-level summary after each phase
|
||||
// ✓ Clear mental model: SlashCommand = attach tasks, not delegate work
|
||||
// ✓ Script execution for preview generation (no delegation)
|
||||
// ✓ Dynamic attachment/collapse maintains clarity
|
||||
```
|
||||
|
||||
@@ -661,8 +682,7 @@ Phase 9: {n×l} layout templates (layout-extract with multi-select)
|
||||
Phase 10: UI Assembly (generate)
|
||||
- Pure assembly: layout templates + design tokens
|
||||
- {s}×{l}×{n} = {total} final prototypes
|
||||
Phase 11: Brainstorming artifacts updated
|
||||
[Phase 12: {n} implementation tasks created] # if --batch-plan
|
||||
Phase 11: Preview files generated (compare.html, PREVIEW.md)
|
||||
|
||||
Assembly Process:
|
||||
✅ Separation of Concerns: Layout (structure) + Style (tokens) kept separate
|
||||
@@ -700,6 +720,6 @@ Design Quality:
|
||||
- Layout plans stored as structured JSON
|
||||
- Optimized for {device_type} viewing
|
||||
|
||||
Next: [/workflow:execute] OR [Open compare.html → Select → /workflow:plan]
|
||||
Next: Open compare.html to preview all design variants
|
||||
```
|
||||
|
||||
|
||||
@@ -154,6 +154,23 @@ Task(subagent_type="ui-design-agent",
|
||||
|
||||
## Code Import Extraction Strategy
|
||||
|
||||
**Step 0: Fast Conflict Detection** (Use Bash/Grep for quick global scan)
|
||||
- Quick scan: \`rg --color=never -n "^\\s*--primary:|^\\s*--secondary:|^\\s*--accent:" --type css ${source}\` to find core color definitions with line numbers
|
||||
- Semantic search: \`rg --color=never -B3 -A1 "^\\s*--primary:" --type css ${source}\` to capture surrounding context and comments
|
||||
- Core token scan: Search for --primary, --secondary, --accent, --background patterns to detect all theme-critical definitions
|
||||
- Pattern: rg → Extract values → Compare → If different → Read full context with comments → Record conflict
|
||||
- Alternative (if many files): Execute CLI analysis for comprehensive report:
|
||||
\`\`\`bash
|
||||
cd ${source} && gemini -p \"
|
||||
PURPOSE: Detect color token conflicts across all CSS/SCSS/JS files
|
||||
TASK: • Scan all files for color definitions • Identify conflicting values • Extract semantic comments
|
||||
MODE: analysis
|
||||
CONTEXT: @**/*.css @**/*.scss @**/*.js @**/*.ts
|
||||
EXPECTED: JSON report listing conflicts with file:line, values, semantic context
|
||||
RULES: Focus on core tokens | Report ALL variants | analysis=READ-ONLY
|
||||
\"
|
||||
\`\`\`
|
||||
|
||||
**Step 1: Load file list**
|
||||
- Read(${intermediates_dir}/discovered-files.json)
|
||||
- Extract: file_types.css.files, file_types.js.files, file_types.html.files
|
||||
@@ -163,10 +180,11 @@ Task(subagent_type="ui-design-agent",
|
||||
- JavaScript/TypeScript: Theme configs (Tailwind, styled-components, CSS-in-JS)
|
||||
- HTML: Inline styles, usage patterns
|
||||
|
||||
**Step 3: Smart inference for gaps**
|
||||
- Infer missing tokens from existing patterns
|
||||
- Normalize inconsistent values into systematic scales
|
||||
- Fill missing categories from cross-file references
|
||||
**Step 3: Validation and Conflict Detection**
|
||||
- Report missing tokens WITHOUT inference (mark as "missing" in _metadata.completeness)
|
||||
- Detect and report inconsistent values across files (list ALL variants with file:line sources)
|
||||
- Report missing categories WITHOUT auto-filling (document gaps for manual review)
|
||||
- CRITICAL: Verify core tokens (primary, secondary, accent) against semantic comments in source code
|
||||
|
||||
## Output Files
|
||||
|
||||
@@ -178,7 +196,9 @@ Task(subagent_type="ui-design-agent",
|
||||
- Add \"_metadata.extraction_source\": \"code_import\"
|
||||
- Add \"_metadata.files_analyzed\": {css, js, html file lists}
|
||||
- Add \"_metadata.completeness\": {status, missing_categories, recommendations}
|
||||
- Add \"_metadata.conflicts\": Array of conflicting definitions (MANDATORY if conflicts exist)
|
||||
- Add \"_metadata.code_snippets\": Map of code snippets (see below)
|
||||
- Add \"_metadata.usage_recommendations\": Usage patterns from code (see below)
|
||||
- Include \"source\" field for each token (e.g., \"file.css:23\")
|
||||
|
||||
**Code Snippet Recording**:
|
||||
@@ -198,12 +218,35 @@ Task(subagent_type="ui-design-agent",
|
||||
- Typical ranges: Simple declarations (1-5 lines), Utility classes (5-15 lines), Complete configs (15-50 lines)
|
||||
- Preserve original formatting and indentation
|
||||
|
||||
**Conflict Detection and Reporting**:
|
||||
- When the same token is defined differently across multiple files, record in `_metadata.conflicts`
|
||||
- Follow Agent schema for conflicts array structure (see ui-design-agent.md)
|
||||
- Each conflict MUST include: token_name, category, all definitions with context, selected_value, selection_reason
|
||||
- Selection priority:
|
||||
1. Definitions with semantic comments explaining intent (/* Blue theme */, /* Primary brand color */)
|
||||
2. Definitions that align with overall color scheme described in comments
|
||||
3. When in doubt, report ALL variants and flag for manual review in completeness.recommendations
|
||||
|
||||
**Usage Recommendations Generation**:
|
||||
- Analyze code usage patterns to extract `_metadata.usage_recommendations` (see ui-design-agent.md schema)
|
||||
- **Typography recommendations**:
|
||||
* `common_sizes`: Identify most frequent font size usage (e.g., \"body_text\": \"base (1rem)\")
|
||||
* `common_combinations`: Extract heading+body pairings from actual usage (e.g., h1 with p tags)
|
||||
- **Spacing recommendations**:
|
||||
* `size_guide`: Categorize spacing values into tight/normal/loose based on frequency
|
||||
* `common_patterns`: Extract frequent padding/margin combinations from components
|
||||
- Analysis method: Scan code for class/style usage frequency, extract patterns from component implementations
|
||||
- Optional: If insufficient usage data, mark fields as empty arrays/objects with note in completeness.recommendations
|
||||
|
||||
## Code Import Specific Requirements
|
||||
- ✅ Read discovered-files.json FIRST to get file paths
|
||||
- ✅ Track extraction source for each token (file:line)
|
||||
- ✅ Record complete code snippets in _metadata.code_snippets (complete blocks with dependencies/comments)
|
||||
- ✅ Include completeness assessment in _metadata
|
||||
- ✅ Normalize inconsistent values into systematic scales
|
||||
- ✅ Report inconsistent values with ALL source locations in _metadata.conflicts (DO NOT auto-normalize or choose)
|
||||
- ✅ CRITICAL: Verify core theme tokens (primary, secondary, accent) match source code semantic intent
|
||||
- ✅ When conflicts exist, prefer definitions with semantic comments explaining intent
|
||||
- ❌ NO inference, NO smart filling, NO automatic conflict resolution
|
||||
- ❌ NO external research or web searches (code-only extraction)
|
||||
")
|
||||
```
|
||||
@@ -226,6 +269,23 @@ Task(subagent_type="ui-design-agent",
|
||||
|
||||
## Code Import Extraction Strategy
|
||||
|
||||
**Step 0: Fast Animation Discovery** (Use Bash/Grep for quick pattern detection)
|
||||
- Quick scan: \`rg --color=never -n "@keyframes|animation:|transition:" --type css ${source}\` to find animation definitions with line numbers
|
||||
- Framework detection: \`rg --color=never "framer-motion|gsap|@react-spring|react-spring" --type js --type ts ${source}\` to detect animation frameworks
|
||||
- Pattern categorization: \`rg --color=never -B2 -A5 "@keyframes" --type css ${source}\` to extract keyframe animations with context
|
||||
- Pattern: rg → Identify animation types → Map framework usage → Prioritize extraction targets
|
||||
- Alternative (if complex framework mix): Execute CLI analysis for comprehensive report:
|
||||
\`\`\`bash
|
||||
cd ${source} && gemini -p \"
|
||||
PURPOSE: Detect animation frameworks and patterns
|
||||
TASK: • Identify frameworks • Map animation patterns • Categorize by complexity
|
||||
MODE: analysis
|
||||
CONTEXT: @**/*.css @**/*.scss @**/*.js @**/*.ts
|
||||
EXPECTED: JSON report listing frameworks, animation types, file locations
|
||||
RULES: Focus on framework consistency | Map all animations | analysis=READ-ONLY
|
||||
\"
|
||||
\`\`\`
|
||||
|
||||
**Step 1: Load file list**
|
||||
- Read(${intermediates_dir}/discovered-files.json)
|
||||
- Extract: file_types.css.files, file_types.js.files, file_types.html.files
|
||||
@@ -288,6 +348,23 @@ Task(subagent_type="ui-design-agent",
|
||||
|
||||
## Code Import Extraction Strategy
|
||||
|
||||
**Step 0: Fast Component Discovery** (Use Bash/Grep for quick component scan)
|
||||
- Layout pattern scan: \`rg --color=never -n "display:\\s*(grid|flex)|grid-template" --type css ${source}\` to find layout systems
|
||||
- Component class scan: \`rg --color=never "class.*=.*\\"[^\"]*\\b(btn|button|card|input|modal|dialog|dropdown)" --type html --type js --type ts ${source}\` to identify UI components
|
||||
- Universal component heuristic: Components appearing in 3+ files = universal, <3 files = specialized
|
||||
- Pattern: rg → Count occurrences → Classify by frequency → Prioritize universal components
|
||||
- Alternative (if large codebase): Execute CLI analysis for comprehensive categorization:
|
||||
\`\`\`bash
|
||||
cd ${source} && gemini -p \"
|
||||
PURPOSE: Classify components as universal vs specialized
|
||||
TASK: • Identify UI components • Classify reusability • Map layout systems
|
||||
MODE: analysis
|
||||
CONTEXT: @**/*.css @**/*.scss @**/*.js @**/*.ts @**/*.html
|
||||
EXPECTED: JSON report categorizing components, layout patterns, naming conventions
|
||||
RULES: Focus on component reusability | Identify layout systems | analysis=READ-ONLY
|
||||
\"
|
||||
\`\`\`
|
||||
|
||||
**Step 1: Load file list**
|
||||
- Read(${intermediates_dir}/discovered-files.json)
|
||||
- Extract: file_types.css.files, file_types.js.files, file_types.html.files
|
||||
@@ -327,6 +404,11 @@ Task(subagent_type="ui-design-agent",
|
||||
* dom_structure with semantic HTML5
|
||||
* css_layout_rules using var() placeholders
|
||||
* Add \"description\" field explaining component purpose and classification rationale
|
||||
* **Add \"usage_guide\" field for universal components** (see ui-design-agent.md schema):
|
||||
- common_sizes: Extract size variants (small/medium/large) from code
|
||||
- variant_recommendations: Document when to use each variant (primary/secondary/etc)
|
||||
- usage_context: List typical usage scenarios from actual implementation
|
||||
- accessibility_tips: Extract ARIA patterns and a11y notes from code
|
||||
|
||||
**Code Snippet Recording**:
|
||||
- Record actual layout/component code in `extraction_metadata.code_snippets`
|
||||
@@ -345,6 +427,12 @@ Task(subagent_type="ui-design-agent",
|
||||
* Specialized: Feature-specific or domain-specific (checkout form, dashboard widget)
|
||||
- ✅ Record complete code snippets in extraction_metadata.code_snippets (complete components/structures)
|
||||
- ✅ **Document classification rationale** in component description
|
||||
- ✅ **Generate usage_guide for universal components** (REQUIRED):
|
||||
* Analyze code to extract size variants (scan for size-related classes/props)
|
||||
* Document variant usage from code comments and implementation patterns
|
||||
* List usage contexts from component instances in codebase
|
||||
* Extract accessibility patterns from ARIA attributes and a11y comments
|
||||
* If insufficient data, populate with minimal valid structure and note in completeness
|
||||
- ❌ NO external research or web searches (code-only extraction)
|
||||
")
|
||||
```
|
||||
|
||||
@@ -29,16 +29,6 @@ Converts design run extraction results into shareable reference package with:
|
||||
--output-dir <path> Output directory (default: .workflow/reference_style)
|
||||
```
|
||||
|
||||
### Usage Examples
|
||||
|
||||
```bash
|
||||
# Basic usage
|
||||
/workflow:ui-design:reference-page-generator --design-run .workflow/WFS-123/design-run-456 --package-name main-app-style-v1
|
||||
|
||||
# Custom output directory
|
||||
/workflow:ui-design:reference-page-generator --design-run .workflow/WFS-123/design-run-456 --package-name main-app-style-v1 --output-dir ./style-references
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Execution Process
|
||||
@@ -210,10 +200,18 @@ Task(ui-design-agent): `
|
||||
- Display typography scale (font sizes, weights)
|
||||
- Show typography combinations if available
|
||||
- Include font family examples
|
||||
- **Display usage recommendations** (from design-tokens.json _metadata.usage_recommendations.typography):
|
||||
* Common sizes table (small_text, body_text, heading)
|
||||
* Common combinations with use cases
|
||||
|
||||
### Section 3: Components
|
||||
- Render all components from layout-templates.json (use layout_templates field)
|
||||
- **Universal Components**: Display reusable multi-component showcases (buttons, inputs, cards, etc.)
|
||||
* **Display usage_guide** (from layout-templates.json):
|
||||
- Common sizes table with dimensions and use cases
|
||||
- Variant recommendations (when to use primary/secondary/etc)
|
||||
- Usage context list (typical scenarios)
|
||||
- Accessibility tips checklist
|
||||
- **Specialized Components**: Display module-specific components from code (feature-specific layouts, custom widgets)
|
||||
- Display all variants side-by-side
|
||||
- Show DOM structure with proper styling
|
||||
@@ -224,6 +222,9 @@ Task(ui-design-agent): `
|
||||
- Visual spacing scale
|
||||
- Border radius examples
|
||||
- Shadow depth examples
|
||||
- **Display spacing recommendations** (from design-tokens.json _metadata.usage_recommendations.spacing):
|
||||
* Size guide table (tight/normal/loose categories)
|
||||
* Common patterns with use cases and pixel values
|
||||
|
||||
### Section 5: Animations (if available)
|
||||
- Animation duration examples
|
||||
@@ -259,6 +260,11 @@ Task(ui-design-agent): `
|
||||
- ✅ Display component DOM structures with proper styling
|
||||
- ✅ Include usage code snippets
|
||||
- ✅ Label each component type clearly (Universal / Specialized)
|
||||
- ✅ **Display usage recommendations** when available:
|
||||
- Typography: common_sizes, common_combinations (from _metadata.usage_recommendations)
|
||||
- Components: usage_guide for universal components (from layout-templates)
|
||||
- Spacing: size_guide, common_patterns (from _metadata.usage_recommendations)
|
||||
- ✅ Gracefully handle missing usage data (display sections only if data exists)
|
||||
- ✅ Use Write() to save both files:
|
||||
- ${package_dir}/preview.html
|
||||
- ${package_dir}/preview.css
|
||||
|
||||
Reference in New Issue
Block a user