mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-14 02:42:04 +08:00
refactor(ui-design): convert codify-style to orchestrator pattern with enhanced safety
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>
This commit is contained in:
catlog22
534
.claude/commands/memory/style-skill-memory.md
Normal file
534
.claude/commands/memory/style-skill-memory.md
Normal file
@@ -0,0 +1,534 @@
|
|||||||
|
---
|
||||||
|
name: memory:style-skill-memory
|
||||||
|
description: Generate SKILL memory package from style reference for easy loading and consistent design system usage
|
||||||
|
argument-hint: "[package-name] [--regenerate]"
|
||||||
|
allowed-tools: Bash,Read,Write,TodoWrite
|
||||||
|
auto-continue: true
|
||||||
|
---
|
||||||
|
|
||||||
|
# Memory: Style SKILL Memory Generator
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
**Purpose**: Convert style reference package into SKILL memory for easy loading and context management.
|
||||||
|
|
||||||
|
**Input**: Style reference package at `.workflow/reference_style/{package-name}/`
|
||||||
|
|
||||||
|
**Output**: SKILL memory index at `.claude/skills/style-{package-name}/SKILL.md`
|
||||||
|
|
||||||
|
**Use Case**: Load design system context when working with UI components, analyzing design patterns, or implementing style guidelines.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
### Command Syntax
|
||||||
|
|
||||||
|
```bash
|
||||||
|
/memory:style-skill-memory [package-name] [--regenerate]
|
||||||
|
|
||||||
|
# Arguments
|
||||||
|
package-name Style reference package name (required)
|
||||||
|
--regenerate Force regenerate SKILL.md even if it exists (optional)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Usage Examples
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Generate SKILL memory for package
|
||||||
|
/memory:style-skill-memory main-app-style-v1
|
||||||
|
|
||||||
|
# Regenerate SKILL memory
|
||||||
|
/memory:style-skill-memory main-app-style-v1 --regenerate
|
||||||
|
|
||||||
|
# Package name from current directory or default
|
||||||
|
/memory:style-skill-memory
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Execution Process
|
||||||
|
|
||||||
|
### Phase 1: Validate Package
|
||||||
|
|
||||||
|
**Purpose**: Check if style reference package exists
|
||||||
|
|
||||||
|
**TodoWrite** (First Action):
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{"content": "Validate style reference package", "status": "in_progress", "activeForm": "Validating package"},
|
||||||
|
{"content": "Read package metadata and documentation", "status": "pending", "activeForm": "Reading metadata"},
|
||||||
|
{"content": "Generate SKILL.md with progressive loading", "status": "pending", "activeForm": "Generating SKILL.md"}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 1: Parse Package Name**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Get package name from argument or auto-detect
|
||||||
|
bash(echo "${package_name}" || basename "$(pwd)" | sed 's/^style-//')
|
||||||
|
```
|
||||||
|
|
||||||
|
Store result as `package_name`
|
||||||
|
|
||||||
|
**Step 2: Validate Package Exists**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bash(test -d .workflow/reference_style/${package_name} && echo "exists" || echo "missing")
|
||||||
|
```
|
||||||
|
|
||||||
|
**Error Handling**:
|
||||||
|
```javascript
|
||||||
|
if (package_not_exists) {
|
||||||
|
error("ERROR: Style reference package not found: ${package_name}")
|
||||||
|
error("HINT: Run '/workflow:ui-design:codify-style' first to create package")
|
||||||
|
error("Available packages:")
|
||||||
|
bash(ls -1 .workflow/reference_style/ 2>/dev/null || echo " (none)")
|
||||||
|
exit(1)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 3: Check SKILL Already Exists**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bash(test -f .claude/skills/style-${package_name}/SKILL.md && echo "exists" || echo "missing")
|
||||||
|
```
|
||||||
|
|
||||||
|
**Decision Logic**:
|
||||||
|
```javascript
|
||||||
|
if (skill_exists && !regenerate_flag) {
|
||||||
|
echo("SKILL memory already exists for: ${package_name}")
|
||||||
|
echo("Use --regenerate to force regeneration")
|
||||||
|
exit(0)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (regenerate_flag && skill_exists) {
|
||||||
|
echo("Regenerating SKILL memory for: ${package_name}")
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Summary Variables**:
|
||||||
|
- `PACKAGE_NAME`: Style reference package name
|
||||||
|
- `PACKAGE_DIR`: `.workflow/reference_style/${package_name}`
|
||||||
|
- `SKILL_DIR`: `.claude/skills/style-${package_name}`
|
||||||
|
- `REGENERATE`: `true` if --regenerate flag, `false` otherwise
|
||||||
|
|
||||||
|
**TodoWrite Update**:
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{"content": "Validate style reference package", "status": "completed", "activeForm": "Validating package"},
|
||||||
|
{"content": "Read package metadata and documentation", "status": "in_progress", "activeForm": "Reading metadata"}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
**Next Action**: Continue to Phase 2
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 2: Read Package Metadata
|
||||||
|
|
||||||
|
**Purpose**: Extract metadata and documentation for SKILL description generation
|
||||||
|
|
||||||
|
**Step 1: Read metadata.json**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
Read(file_path=".workflow/reference_style/${package_name}/metadata.json")
|
||||||
|
```
|
||||||
|
|
||||||
|
**Extract Fields**:
|
||||||
|
- `packageName`
|
||||||
|
- `version`
|
||||||
|
- `generatedAt`
|
||||||
|
- `description`
|
||||||
|
- `source.design_run`
|
||||||
|
- `files` (count available files)
|
||||||
|
|
||||||
|
**Step 2: Read README.md**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
Read(file_path=".workflow/reference_style/${package_name}/README.md")
|
||||||
|
```
|
||||||
|
|
||||||
|
**Extract Information**:
|
||||||
|
- Package overview
|
||||||
|
- Component catalog reference
|
||||||
|
- Design token categories
|
||||||
|
|
||||||
|
**Step 3: Count Components**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bash(test -f .workflow/reference_style/${package_name}/component-patterns.json && jq '.extraction_metadata.component_count' .workflow/reference_style/${package_name}/component-patterns.json 2>/dev/null || grep -c '"button"\|"input"\|"card"\|"badge"\|"alert"' .workflow/reference_style/${package_name}/component-patterns.json 2>/dev/null || echo 0)
|
||||||
|
```
|
||||||
|
|
||||||
|
Store result as `component_count`
|
||||||
|
|
||||||
|
**Step 4: Check Available Files**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bash(cd .workflow/reference_style/${package_name} && ls -1 *.json *.md *.html *.css 2>/dev/null | wc -l)
|
||||||
|
```
|
||||||
|
|
||||||
|
Store result as `file_count`
|
||||||
|
|
||||||
|
**Summary Data**:
|
||||||
|
- `COMPONENT_COUNT`: Number of components in catalog
|
||||||
|
- `FILE_COUNT`: Total files in package
|
||||||
|
- `VERSION`: Package version (from metadata.json)
|
||||||
|
- `DESCRIPTION`: Package description (from metadata.json)
|
||||||
|
|
||||||
|
**TodoWrite Update**:
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{"content": "Read package metadata and documentation", "status": "completed", "activeForm": "Reading metadata"},
|
||||||
|
{"content": "Generate SKILL.md with progressive loading", "status": "in_progress", "activeForm": "Generating SKILL.md"}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
**Next Action**: Continue to Phase 3
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 3: Generate SKILL.md
|
||||||
|
|
||||||
|
**Purpose**: Create SKILL memory index with progressive loading structure
|
||||||
|
|
||||||
|
**Step 1: Create SKILL Directory**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bash(mkdir -p .claude/skills/style-${package_name})
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 2: Generate Intelligent Description**
|
||||||
|
|
||||||
|
**Format**:
|
||||||
|
```
|
||||||
|
{Package Name} design system with {component_count} components and interactive preview (located at .workflow/reference_style/{package_name}). Load when working with UI components, design tokens, style guidelines, analyzing design patterns, or implementing visual consistency.
|
||||||
|
```
|
||||||
|
|
||||||
|
**Key Elements**:
|
||||||
|
- **Component Count**: Emphasize available component catalog
|
||||||
|
- **Path Reference**: Precise package location
|
||||||
|
- **Trigger Keywords**: UI components, design tokens, style guidelines, design patterns
|
||||||
|
- **Action Coverage**: working with, analyzing, implementing
|
||||||
|
|
||||||
|
**Example**:
|
||||||
|
```
|
||||||
|
main-app-style-v1 design system with 8 components and interactive preview (located at .workflow/reference_style/main-app-style-v1). Load when working with UI components, design tokens, style guidelines, analyzing design patterns, or implementing visual consistency.
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 3: Write SKILL.md** (Use Write tool)
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
name: style-{package_name}
|
||||||
|
description: {intelligent description from Step 2}
|
||||||
|
version: {version from metadata.json}
|
||||||
|
---
|
||||||
|
|
||||||
|
# {Package Name} Style SKILL Package
|
||||||
|
|
||||||
|
## Documentation: `../../../.workflow/reference_style/{package_name}/`
|
||||||
|
|
||||||
|
## Package Overview
|
||||||
|
|
||||||
|
Style reference package with comprehensive design system documentation and interactive component preview.
|
||||||
|
|
||||||
|
**Package Details**:
|
||||||
|
- Package: {package_name}
|
||||||
|
- Version: {version}
|
||||||
|
- Components: {component_count}
|
||||||
|
- Files: {file_count}
|
||||||
|
- Generated: {generatedAt}
|
||||||
|
|
||||||
|
## Progressive Loading
|
||||||
|
|
||||||
|
### Level 0: Quick Start (~2K tokens)
|
||||||
|
|
||||||
|
Essential overview and package information.
|
||||||
|
|
||||||
|
**Files**:
|
||||||
|
- [README](../../../.workflow/reference_style/{package_name}/README.md) - Package overview and usage
|
||||||
|
- [Metadata](../../../.workflow/reference_style/{package_name}/metadata.json) - Source and package info
|
||||||
|
|
||||||
|
**Use when**: Quick reference, understanding package structure
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Level 1: Design Tokens (~8K tokens)
|
||||||
|
|
||||||
|
Complete design token system with style guidelines.
|
||||||
|
|
||||||
|
**Files**:
|
||||||
|
- [Design Tokens](../../../.workflow/reference_style/{package_name}/design-tokens.json) - Colors, typography, spacing, shadows
|
||||||
|
- [Style Guide](../../../.workflow/reference_style/{package_name}/style-guide.md) - Design philosophy and usage guidelines
|
||||||
|
|
||||||
|
**Use when**: Implementing UI, applying design tokens, style consistency
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Level 2: Components & Patterns (~15K tokens)
|
||||||
|
|
||||||
|
Full component catalog with patterns, variants, and states.
|
||||||
|
|
||||||
|
**Files**:
|
||||||
|
- Level 1 files
|
||||||
|
- [Component Patterns](../../../.workflow/reference_style/{package_name}/component-patterns.json) - Component catalog with DOM structures and CSS classes
|
||||||
|
- [Animation Tokens](../../../.workflow/reference_style/{package_name}/animation-tokens.json) - Animation durations, easing, transitions _(if available)_
|
||||||
|
|
||||||
|
**Use when**: Building components, implementing interactions, animation development
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Level 3: Complete Reference (~25K tokens)
|
||||||
|
|
||||||
|
Everything including interactive preview reference and full documentation.
|
||||||
|
|
||||||
|
**Files**:
|
||||||
|
- All Level 2 files
|
||||||
|
- [Preview HTML](../../../.workflow/reference_style/{package_name}/preview.html) - Interactive component showcase (reference only)
|
||||||
|
- [Preview CSS](../../../.workflow/reference_style/{package_name}/preview.css) - Showcase styling (reference only)
|
||||||
|
|
||||||
|
**Use when**: Comprehensive analysis, complete design system understanding, implementation validation
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Interactive Preview
|
||||||
|
|
||||||
|
**Location**: `.workflow/reference_style/{package_name}/preview.html`
|
||||||
|
|
||||||
|
**View in Browser**:
|
||||||
|
```bash
|
||||||
|
cd .workflow/reference_style/{package_name}
|
||||||
|
python -m http.server 8080
|
||||||
|
# Open http://localhost:8080/preview.html
|
||||||
|
```
|
||||||
|
|
||||||
|
**Features**:
|
||||||
|
- Color palette swatches with values
|
||||||
|
- Typography scale and combinations
|
||||||
|
- All components with variants and states
|
||||||
|
- Spacing, radius, shadow visual examples
|
||||||
|
- Interactive state demonstrations
|
||||||
|
- Usage code snippets
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Usage Guidelines
|
||||||
|
|
||||||
|
### Loading Levels
|
||||||
|
|
||||||
|
**Level 0** (2K): Quick reference when you need basic package info
|
||||||
|
```
|
||||||
|
Load Level 0 for package overview
|
||||||
|
```
|
||||||
|
|
||||||
|
**Level 1** (8K): Design token implementation
|
||||||
|
```
|
||||||
|
Load Level 1 for design tokens and style guide
|
||||||
|
```
|
||||||
|
|
||||||
|
**Level 2** (15K): Component development
|
||||||
|
```
|
||||||
|
Load Level 2 for component patterns and animations
|
||||||
|
```
|
||||||
|
|
||||||
|
**Level 3** (25K): Comprehensive understanding
|
||||||
|
```
|
||||||
|
Load Level 3 for complete design system reference
|
||||||
|
```
|
||||||
|
|
||||||
|
### Common Use Cases
|
||||||
|
|
||||||
|
**Implementing UI Components**:
|
||||||
|
- Load Level 2 for component patterns
|
||||||
|
- Reference component-patterns.json for DOM structure and CSS classes
|
||||||
|
- Apply design tokens from design-tokens.json
|
||||||
|
|
||||||
|
**Ensuring Style Consistency**:
|
||||||
|
- Load Level 1 for design tokens
|
||||||
|
- Use style-guide.md for design philosophy
|
||||||
|
- Check preview.html for visual reference
|
||||||
|
|
||||||
|
**Analyzing Design Patterns**:
|
||||||
|
- Load Level 3 for complete analysis
|
||||||
|
- Review component-patterns.json for architecture
|
||||||
|
- Check preview.html for implementation examples
|
||||||
|
|
||||||
|
**Animation Development**:
|
||||||
|
- Load Level 2 for animation tokens
|
||||||
|
- Reference animation-tokens.json for durations and easing
|
||||||
|
- Apply consistent timing and transitions
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Package Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
.workflow/reference_style/{package_name}/
|
||||||
|
├── README.md # Package overview
|
||||||
|
├── metadata.json # Package metadata
|
||||||
|
├── design-tokens.json # Design token system
|
||||||
|
├── style-guide.md # Style guide documentation
|
||||||
|
├── component-patterns.json # Component catalog
|
||||||
|
├── animation-tokens.json # Animation tokens (optional)
|
||||||
|
├── preview.html # Interactive showcase
|
||||||
|
└── preview.css # Showcase styling
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Regeneration
|
||||||
|
|
||||||
|
To update this SKILL memory after package changes:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
/memory:style-skill-memory {package_name} --regenerate
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Related Commands
|
||||||
|
|
||||||
|
**Generate Package**:
|
||||||
|
```bash
|
||||||
|
/workflow:ui-design:codify-style --source ./src --package-name {package_name}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Update Package**:
|
||||||
|
Re-run codify-style with same package name to update extraction.
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 4: Verify SKILL.md Created**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bash(test -f .claude/skills/style-${package_name}/SKILL.md && echo "success" || echo "failed")
|
||||||
|
```
|
||||||
|
|
||||||
|
**TodoWrite Update**:
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{"content": "Validate style reference package", "status": "completed", "activeForm": "Validating package"},
|
||||||
|
{"content": "Read package metadata and documentation", "status": "completed", "activeForm": "Reading metadata"},
|
||||||
|
{"content": "Generate SKILL.md with progressive loading", "status": "completed", "activeForm": "Generating SKILL.md"}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
**Final Action**: Report completion summary to user
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Completion Message
|
||||||
|
|
||||||
|
```
|
||||||
|
✅ SKILL memory generated successfully!
|
||||||
|
|
||||||
|
Package: {package_name}
|
||||||
|
SKILL Location: .claude/skills/style-{package_name}/SKILL.md
|
||||||
|
|
||||||
|
Package Details:
|
||||||
|
- Components: {component_count}
|
||||||
|
- Files: {file_count}
|
||||||
|
- Version: {version}
|
||||||
|
|
||||||
|
Progressive Loading Levels:
|
||||||
|
- Level 0: Quick Start (~2K tokens)
|
||||||
|
- Level 1: Design Tokens (~8K tokens)
|
||||||
|
- Level 2: Components & Patterns (~15K tokens)
|
||||||
|
- Level 3: Complete Reference (~25K tokens)
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
Load design system context when working with:
|
||||||
|
- UI component implementation
|
||||||
|
- Design token application
|
||||||
|
- Style consistency validation
|
||||||
|
- Design pattern analysis
|
||||||
|
|
||||||
|
Preview:
|
||||||
|
Open interactive showcase:
|
||||||
|
file://{absolute_path}/.workflow/reference_style/{package_name}/preview.html
|
||||||
|
|
||||||
|
Next Steps:
|
||||||
|
1. Load appropriate level based on your task
|
||||||
|
2. Reference component-patterns.json for implementation
|
||||||
|
3. Use design-tokens.json for consistent styling
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Error Handling
|
||||||
|
|
||||||
|
### Common Errors
|
||||||
|
|
||||||
|
| Error | Cause | Resolution |
|
||||||
|
|-------|-------|------------|
|
||||||
|
| Package not found | Invalid package name or package doesn't exist | Run codify-style first to create package |
|
||||||
|
| SKILL already exists | SKILL.md already generated | Use --regenerate to force regeneration |
|
||||||
|
| Missing metadata.json | Incomplete package | Verify package integrity, re-run codify-style |
|
||||||
|
| Invalid metadata format | Corrupted metadata.json | Regenerate package with codify-style |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Implementation Details
|
||||||
|
|
||||||
|
### Critical Rules
|
||||||
|
|
||||||
|
1. **Check Before Generate**: Verify package exists before attempting SKILL generation
|
||||||
|
2. **Respect Existing SKILL**: Don't overwrite unless --regenerate flag provided
|
||||||
|
3. **Progressive Loading**: Always include all 4 levels (0-3) with clear token estimates
|
||||||
|
4. **Intelligent Description**: Extract component count and key features from metadata
|
||||||
|
|
||||||
|
### SKILL Description Format
|
||||||
|
|
||||||
|
**Template**:
|
||||||
|
```
|
||||||
|
{package_name} design system with {component_count} components and interactive preview (located at .workflow/reference_style/{package_name}). Load when working with UI components, design tokens, style guidelines, analyzing design patterns, or implementing visual consistency.
|
||||||
|
```
|
||||||
|
|
||||||
|
**Required Elements**:
|
||||||
|
- Package name
|
||||||
|
- Component count
|
||||||
|
- Location (full path)
|
||||||
|
- Trigger keywords (UI components, design tokens, style guidelines, design patterns)
|
||||||
|
- Action verbs (working with, analyzing, implementing)
|
||||||
|
|
||||||
|
### Progressive Loading Structure
|
||||||
|
|
||||||
|
**Level 0** (~2K tokens):
|
||||||
|
- README.md
|
||||||
|
- metadata.json
|
||||||
|
|
||||||
|
**Level 1** (~8K tokens):
|
||||||
|
- Level 0 files
|
||||||
|
- design-tokens.json
|
||||||
|
- style-guide.md
|
||||||
|
|
||||||
|
**Level 2** (~15K tokens):
|
||||||
|
- Level 1 files
|
||||||
|
- component-patterns.json
|
||||||
|
- animation-tokens.json (if exists)
|
||||||
|
|
||||||
|
**Level 3** (~25K tokens):
|
||||||
|
- All files including preview.html/css
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Benefits
|
||||||
|
|
||||||
|
- **Fast Context Loading**: Progressive levels for efficient token usage
|
||||||
|
- **Intelligent Triggering**: Keywords optimize SKILL activation
|
||||||
|
- **Complete Reference**: All package files accessible through SKILL
|
||||||
|
- **Easy Regeneration**: Simple --regenerate flag for updates
|
||||||
|
- **Clear Structure**: Organized levels by use case
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
```
|
||||||
|
style-skill-memory
|
||||||
|
├─ Phase 1: Validate (check package exists, check SKILL exists)
|
||||||
|
├─ Phase 2: Read Metadata (extract metadata.json, README.md, count components)
|
||||||
|
└─ Phase 3: Generate SKILL.md (write SKILL with progressive loading)
|
||||||
|
|
||||||
|
No external commands called
|
||||||
|
Direct file reading and writing
|
||||||
|
Smart description generation from metadata
|
||||||
|
```
|
||||||
478
.claude/commands/workflow/ui-design/codify-style.md
Normal file
478
.claude/commands/workflow/ui-design/codify-style.md
Normal file
@@ -0,0 +1,478 @@
|
|||||||
|
---
|
||||||
|
name: workflow:ui-design:codify-style
|
||||||
|
description: Orchestrator to extract styles from code and generate shareable reference package with preview
|
||||||
|
argument-hint: "[--source <path>] [--package-name <name>] [--css \"<glob>\"] [--scss \"<glob>\"] [--js \"<glob>\"] [--html \"<glob>\"] [--style-files \"<glob>\"] [--output-dir <path>]"
|
||||||
|
allowed-tools: SlashCommand,Bash,Read,TodoWrite
|
||||||
|
auto-continue: true
|
||||||
|
---
|
||||||
|
|
||||||
|
# UI Design: Codify Style (Orchestrator)
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
**Pure Orchestrator**: Coordinates style extraction and reference package generation workflow.
|
||||||
|
|
||||||
|
**Role**: Does NOT directly execute agent tasks. Delegates to specialized commands:
|
||||||
|
1. `/workflow:ui-design:import-from-code` - Extract styles from code
|
||||||
|
2. `/workflow:ui-design:reference-page-generator` - Generate reference package with preview
|
||||||
|
|
||||||
|
**Output**: Shareable, versioned style reference package at `.workflow/reference_style/{package-name}/`
|
||||||
|
|
||||||
|
## Auto-Continue Workflow
|
||||||
|
|
||||||
|
This command runs **fully autonomously** once triggered. Each phase completes and automatically triggers the next phase without user interaction.
|
||||||
|
|
||||||
|
## Core Rules
|
||||||
|
|
||||||
|
1. **Start Immediately**: First action is TodoWrite initialization, second action is Phase 1 execution
|
||||||
|
2. **No Task JSON**: This command does not create task JSON files - delegates to sub-commands
|
||||||
|
3. **Parse Every Output**: Extract required data from each command output (design run path, session ID)
|
||||||
|
4. **Auto-Continue**: After completing each phase, update TodoWrite and immediately execute next phase
|
||||||
|
5. **Track Progress**: Update TodoWrite after EVERY phase completion before starting next phase
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
### Command Syntax
|
||||||
|
|
||||||
|
```bash
|
||||||
|
/workflow:ui-design:codify-style [FLAGS]
|
||||||
|
|
||||||
|
# Flags
|
||||||
|
--source <path> Source code directory to analyze (required)
|
||||||
|
--package-name <name> Name for the style reference package (required)
|
||||||
|
--css "<glob>" CSS file glob pattern (optional)
|
||||||
|
--scss "<glob>" SCSS file glob pattern (optional)
|
||||||
|
--js "<glob>" JavaScript file glob pattern (optional)
|
||||||
|
--html "<glob>" HTML file glob pattern (optional)
|
||||||
|
--style-files "<glob>" Universal style file glob (optional)
|
||||||
|
--output-dir <path> Output directory (default: .workflow/reference_style)
|
||||||
|
--overwrite Overwrite existing package without prompting (optional)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Usage Examples
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Basic usage - analyze entire src directory
|
||||||
|
/workflow:ui-design:codify-style --source ./src --package-name main-app-style-v1
|
||||||
|
|
||||||
|
# Specific directories
|
||||||
|
/workflow:ui-design:codify-style --source ./app --package-name design-system-v2 --css "styles/**/*.scss" --js "theme/*.js"
|
||||||
|
|
||||||
|
# Tailwind config extraction
|
||||||
|
/workflow:ui-design:codify-style --source ./ --package-name tailwind-theme-v1 --js "tailwind.config.js"
|
||||||
|
|
||||||
|
# Custom output directory
|
||||||
|
/workflow:ui-design:codify-style --source ./src --package-name component-lib-v1 --output-dir ./style-references
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4-Phase Execution
|
||||||
|
|
||||||
|
### Phase 1: Prepare Arguments
|
||||||
|
|
||||||
|
**Goal**: Parse command arguments and prepare session
|
||||||
|
|
||||||
|
**TodoWrite** (First Action):
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{"content": "Parse arguments and prepare session", "status": "in_progress", "activeForm": "Parsing arguments"},
|
||||||
|
{"content": "Call import-from-code to extract styles", "status": "pending", "activeForm": "Extracting styles"},
|
||||||
|
{"content": "Generate reference pages and documentation", "status": "pending", "activeForm": "Generating reference"},
|
||||||
|
{"content": "Cleanup temporary files", "status": "pending", "activeForm": "Cleanup"}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 1: Validate Required Parameters**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bash(test)
|
||||||
|
```
|
||||||
|
|
||||||
|
Operations:
|
||||||
|
```javascript
|
||||||
|
// Validate required parameters
|
||||||
|
if (!source || !package_name) {
|
||||||
|
error("ERROR: --source and --package-name are required")
|
||||||
|
error("USAGE: /workflow:ui-design:codify-style --source <path> --package-name <name>")
|
||||||
|
exit(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate package name format (lowercase, alphanumeric, hyphens only)
|
||||||
|
if (!package_name.match(/^[a-z0-9][a-z0-9-]*$/)) {
|
||||||
|
error("ERROR: Invalid package name. Use lowercase, alphanumeric, and hyphens only.")
|
||||||
|
error("EXAMPLE: main-app-style-v1")
|
||||||
|
exit(1)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 2: Check Package Overwrite Protection**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bash(test -d ${output_dir:-".workflow/reference_style"}/${package_name} && echo "exists" || echo "not_exists")
|
||||||
|
```
|
||||||
|
|
||||||
|
**Overwrite Protection Logic**:
|
||||||
|
```javascript
|
||||||
|
// Check if package already exists
|
||||||
|
if (package_exists && !overwrite_flag) {
|
||||||
|
error("ERROR: Package '${package_name}' already exists at ${output_dir}/${package_name}")
|
||||||
|
error("HINT: To overwrite, use --overwrite flag")
|
||||||
|
error("HINT: Or choose a different package name")
|
||||||
|
error("Existing package contents:")
|
||||||
|
bash(ls -1 ${output_dir}/${package_name}/ 2>/dev/null | head -10)
|
||||||
|
exit(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (overwrite_flag && package_exists) {
|
||||||
|
echo("WARNING: Overwriting existing package: ${package_name}")
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 3: Create Temporary Session**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bash(mkdir -p .workflow && echo "WFS-codify-$(date +%Y%m%d-%H%M%S)")
|
||||||
|
```
|
||||||
|
|
||||||
|
Store result as `temp_session_id`
|
||||||
|
|
||||||
|
**Step 4: Create Temporary Design Run**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bash(mkdir -p .workflow/${temp_session_id} && echo "design-run-$(date +%Y%m%d-%H%M%S)")
|
||||||
|
```
|
||||||
|
|
||||||
|
Store result as `temp_design_run_id`
|
||||||
|
|
||||||
|
**Step 5: Prepare Full Design Run Path**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bash(cd .workflow/${temp_session_id} && mkdir -p ${temp_design_run_id} && pwd)/${temp_design_run_id}
|
||||||
|
```
|
||||||
|
|
||||||
|
Store result as `design_run_path`
|
||||||
|
|
||||||
|
**Summary Variables**:
|
||||||
|
- `SOURCE`: User-provided source path
|
||||||
|
- `PACKAGE_NAME`: User-provided package name
|
||||||
|
- `OUTPUT_DIR`: `.workflow/reference_style` (default) or user-specified
|
||||||
|
- `OVERWRITE`: `true` if --overwrite flag, `false` otherwise
|
||||||
|
- `CSS`: CSS glob pattern (optional)
|
||||||
|
- `SCSS`: SCSS glob pattern (optional)
|
||||||
|
- `JS`: JS glob pattern (optional)
|
||||||
|
- `HTML`: HTML glob pattern (optional)
|
||||||
|
- `STYLE_FILES`: Universal style files glob (optional)
|
||||||
|
- `TEMP_SESSION_ID`: `WFS-codify-{timestamp}`
|
||||||
|
- `TEMP_DESIGN_RUN_ID`: `design-run-{timestamp}`
|
||||||
|
- `DESIGN_RUN_PATH`: `.workflow/{temp_session_id}/{temp_design_run_id}`
|
||||||
|
|
||||||
|
**TodoWrite Update**:
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{"content": "Parse arguments and prepare session", "status": "completed", "activeForm": "Parsing arguments"},
|
||||||
|
{"content": "Call import-from-code to extract styles", "status": "in_progress", "activeForm": "Extracting styles"}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
**Next Action**: Display preparation results → Continue to Phase 2
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 2: Call import-from-code
|
||||||
|
|
||||||
|
**Goal**: Extract styles from source code using import-from-code command
|
||||||
|
|
||||||
|
**Command Construction**:
|
||||||
|
|
||||||
|
Build command string with all parameters:
|
||||||
|
```javascript
|
||||||
|
let cmd = `/workflow:ui-design:import-from-code --design-id ${temp_design_run_id} --source ${source}`;
|
||||||
|
|
||||||
|
// Add optional glob patterns if provided
|
||||||
|
if (css) cmd += ` --css "${css}"`;
|
||||||
|
if (scss) cmd += ` --scss "${scss}"`;
|
||||||
|
if (js) cmd += ` --js "${js}"`;
|
||||||
|
if (html) cmd += ` --html "${html}"`;
|
||||||
|
if (style_files) cmd += ` --style-files "${style_files}"`;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Execute Command**:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
SlashCommand(command="${cmd}")
|
||||||
|
```
|
||||||
|
|
||||||
|
**Example Commands**:
|
||||||
|
```bash
|
||||||
|
# Basic
|
||||||
|
/workflow:ui-design:import-from-code --design-id design-run-20250111-123456 --source ./src
|
||||||
|
|
||||||
|
# With glob patterns
|
||||||
|
/workflow:ui-design:import-from-code --design-id design-run-20250111-123456 --source ./src --css "theme/*.css" --js "theme/*.js"
|
||||||
|
|
||||||
|
# With style-files
|
||||||
|
/workflow:ui-design:import-from-code --design-id design-run-20250111-123456 --source ./src --style-files "**/theme.*"
|
||||||
|
```
|
||||||
|
|
||||||
|
**Parse Output**:
|
||||||
|
|
||||||
|
The import-from-code command will output design run path. Extract it if needed, or use the pre-constructed path from Phase 1.
|
||||||
|
|
||||||
|
**Completion Criteria**:
|
||||||
|
- `import-from-code` command executed successfully
|
||||||
|
- Design run created at `${design_run_path}`
|
||||||
|
- Style extraction files exist:
|
||||||
|
- `${design_run_path}/style-extraction/style-1/design-tokens.json`
|
||||||
|
- `${design_run_path}/style-extraction/style-1/style-guide.md`
|
||||||
|
- `${design_run_path}/animation-extraction/` (optional)
|
||||||
|
|
||||||
|
**TodoWrite Update**:
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{"content": "Call import-from-code to extract styles", "status": "completed", "activeForm": "Extracting styles"},
|
||||||
|
{"content": "Generate reference pages and documentation", "status": "in_progress", "activeForm": "Generating reference"}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
**Next Action**: Display extraction results → Auto-continue to Phase 3
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 3: Generate Reference Package
|
||||||
|
|
||||||
|
**Goal**: Generate reference pages and package documentation
|
||||||
|
|
||||||
|
**Command**:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
SlashCommand(command="/workflow:ui-design:reference-page-generator --design-run ${design_run_path} --package-name ${package_name} --output-dir ${output_dir}")
|
||||||
|
```
|
||||||
|
|
||||||
|
**Example**:
|
||||||
|
```bash
|
||||||
|
/workflow:ui-design:reference-page-generator --design-run .workflow/WFS-codify-20250111-123456/design-run-20250111-123456 --package-name main-app-style-v1 --output-dir .workflow/reference_style
|
||||||
|
```
|
||||||
|
|
||||||
|
**Completion Criteria**:
|
||||||
|
- `reference-page-generator` command executed successfully
|
||||||
|
- Reference package created at `${output_dir}/${package_name}/`
|
||||||
|
- Required files exist:
|
||||||
|
- `design-tokens.json`
|
||||||
|
- `component-patterns.json`
|
||||||
|
- `preview.html`
|
||||||
|
- `preview.css`
|
||||||
|
- `metadata.json`
|
||||||
|
- `README.md`
|
||||||
|
|
||||||
|
**TodoWrite Update**:
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{"content": "Generate reference pages and documentation", "status": "completed", "activeForm": "Generating reference"},
|
||||||
|
{"content": "Cleanup temporary files", "status": "in_progress", "activeForm": "Cleanup"}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
**Next Action**: Display generation results → Auto-continue to Phase 4
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 4: Cleanup & Report
|
||||||
|
|
||||||
|
**Goal**: Clean up temporary design run and report completion
|
||||||
|
|
||||||
|
**Step 1: Cleanup Temporary Design Run** (Optional)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bash(rm -rf .workflow/${temp_session_id})
|
||||||
|
```
|
||||||
|
|
||||||
|
Note: Temporary design run is removed as reference package has all needed files.
|
||||||
|
|
||||||
|
**Step 2: Verify Package**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bash(test -d ${output_dir}/${package_name} && echo "exists" || echo "missing")
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 3: Count Components**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bash(jq -r '.extraction_metadata.component_count // 0' ${output_dir}/${package_name}/component-patterns.json 2>/dev/null || echo 0)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Fallback** (if jq not available):
|
||||||
|
```bash
|
||||||
|
bash(grep -c '"button"\|"input"\|"card"\|"badge"\|"alert"' ${output_dir}/${package_name}/component-patterns.json 2>/dev/null || echo 0)
|
||||||
|
```
|
||||||
|
|
||||||
|
**TodoWrite Update**:
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{"content": "Parse arguments and prepare session", "status": "completed", "activeForm": "Parsing arguments"},
|
||||||
|
{"content": "Call import-from-code to extract styles", "status": "completed", "activeForm": "Extracting styles"},
|
||||||
|
{"content": "Generate reference pages and documentation", "status": "completed", "activeForm": "Generating reference"},
|
||||||
|
{"content": "Cleanup temporary files", "status": "completed", "activeForm": "Cleanup"}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
**Final Action**: Report completion summary to user
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Completion Message
|
||||||
|
|
||||||
|
```
|
||||||
|
✅ Style reference package codified successfully!
|
||||||
|
|
||||||
|
Package: {package_name}
|
||||||
|
Location: {output_dir}/{package_name}/
|
||||||
|
|
||||||
|
Generated Files:
|
||||||
|
✓ design-tokens.json Complete design token system
|
||||||
|
✓ style-guide.md Detailed style guide
|
||||||
|
✓ component-patterns.json Component catalog ({component_count} components)
|
||||||
|
✓ preview.html Interactive multi-component showcase
|
||||||
|
✓ preview.css Showcase styling
|
||||||
|
✓ animation-tokens.json Animation tokens {if exists: "✓" else: "○ (not found)"}
|
||||||
|
✓ metadata.json Package metadata
|
||||||
|
✓ README.md Package documentation
|
||||||
|
|
||||||
|
Source Analysis:
|
||||||
|
- Source path: {source}
|
||||||
|
- Extraction complete via import-from-code
|
||||||
|
|
||||||
|
Preview Package:
|
||||||
|
Open the interactive showcase:
|
||||||
|
file://{absolute_path_to_package}/preview.html
|
||||||
|
|
||||||
|
Or use a local server:
|
||||||
|
cd {output_dir}/{package_name}
|
||||||
|
python -m http.server 8080
|
||||||
|
# Then open http://localhost:8080/preview.html
|
||||||
|
|
||||||
|
Next Steps:
|
||||||
|
1. Review preview.html to verify extracted components
|
||||||
|
2. Generate SKILL memory: /memory:style-skill-memory {package_name}
|
||||||
|
3. Use package as design reference in future workflows
|
||||||
|
|
||||||
|
Cleanup:
|
||||||
|
✓ Temporary design run removed (all files copied to reference package)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Execution Flow Diagram
|
||||||
|
|
||||||
|
```
|
||||||
|
User triggers: /workflow:ui-design:codify-style --source ./src --package-name my-style-v1
|
||||||
|
↓
|
||||||
|
[TodoWrite] Initialize 4 phases (Phase 1 = in_progress)
|
||||||
|
↓
|
||||||
|
[Execute] Phase 1: Parse arguments, create temp session/design run
|
||||||
|
↓
|
||||||
|
[TodoWrite] Phase 1 = completed, Phase 2 = in_progress
|
||||||
|
↓
|
||||||
|
[Execute] Phase 2: SlashCommand(/workflow:ui-design:import-from-code ...)
|
||||||
|
↓
|
||||||
|
[TodoWrite] Phase 2 = completed, Phase 3 = in_progress
|
||||||
|
↓
|
||||||
|
[Execute] Phase 3: SlashCommand(/workflow:ui-design:reference-page-generator ...)
|
||||||
|
↓
|
||||||
|
[TodoWrite] Phase 3 = completed, Phase 4 = in_progress
|
||||||
|
↓
|
||||||
|
[Execute] Phase 4: Cleanup temp files, verify package
|
||||||
|
↓
|
||||||
|
[TodoWrite] Phase 4 = completed
|
||||||
|
↓
|
||||||
|
[Report] Display completion summary
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Error Handling
|
||||||
|
|
||||||
|
### Common Errors
|
||||||
|
|
||||||
|
| Error | Cause | Resolution |
|
||||||
|
|-------|-------|------------|
|
||||||
|
| Missing --source or --package-name | Required parameters not provided | Provide both flags |
|
||||||
|
| Invalid package name | Contains uppercase, special chars | Use lowercase, alphanumeric, hyphens only |
|
||||||
|
| import-from-code failed | Source path invalid or no files found | Verify source path, check glob patterns |
|
||||||
|
| reference-page-generator failed | Design run incomplete | Check import-from-code output, verify extraction files |
|
||||||
|
| Package verification failed | Output directory creation failed | Check file permissions |
|
||||||
|
|
||||||
|
### Error Recovery
|
||||||
|
|
||||||
|
- If Phase 2 fails: Cleanup temporary session and report error
|
||||||
|
- If Phase 3 fails: Keep design run for debugging, report error
|
||||||
|
- User can manually inspect `${design_run_path}` if needed
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Implementation Details
|
||||||
|
|
||||||
|
### Critical Rules
|
||||||
|
|
||||||
|
1. **No User Prompts Between Phases**: Never ask user questions or wait for input between phases
|
||||||
|
2. **Immediate Phase Transition**: After TodoWrite update, immediately execute next phase command
|
||||||
|
3. **Status-Driven Execution**: Check TodoList status after each phase
|
||||||
|
4. **Phase Completion Pattern**:
|
||||||
|
```
|
||||||
|
Phase N completes → Update TodoWrite (N=completed, N+1=in_progress) → Execute Phase N+1
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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
|
||||||
|
|
||||||
|
### Output Directory Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
.workflow/
|
||||||
|
├── reference_style/ # Default output directory
|
||||||
|
│ └── {package-name}/
|
||||||
|
│ ├── design-tokens.json
|
||||||
|
│ ├── style-guide.md
|
||||||
|
│ ├── component-patterns.json
|
||||||
|
│ ├── animation-tokens.json (optional)
|
||||||
|
│ ├── preview.html
|
||||||
|
│ ├── preview.css
|
||||||
|
│ ├── metadata.json
|
||||||
|
│ └── README.md
|
||||||
|
│
|
||||||
|
└── WFS-codify-{timestamp}/ # Temporary session (cleaned up)
|
||||||
|
└── design-run-{timestamp}/ # Temporary design run (cleaned up)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Benefits
|
||||||
|
|
||||||
|
- **Pure Orchestrator**: No direct agent execution, delegates to specialized commands
|
||||||
|
- **Auto-Continue**: Autonomous 4-phase execution without user interaction
|
||||||
|
- **Code Reuse**: Leverages existing `import-from-code` command
|
||||||
|
- **Clean Separation**: Each command has single responsibility
|
||||||
|
- **Easy Maintenance**: Changes to sub-commands automatically apply
|
||||||
|
- **Flexible**: Supports all import-from-code glob parameters
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
```
|
||||||
|
codify-style (orchestrator)
|
||||||
|
├─ Phase 1: Prepare (bash commands, parameter validation)
|
||||||
|
├─ Phase 2: /workflow:ui-design:import-from-code (style extraction)
|
||||||
|
├─ Phase 3: /workflow:ui-design:reference-page-generator (reference package)
|
||||||
|
└─ Phase 4: Cleanup (remove temp files, report)
|
||||||
|
|
||||||
|
No task JSON created by this command
|
||||||
|
All extraction delegated to import-from-code
|
||||||
|
All packaging delegated to reference-page-generator
|
||||||
|
```
|
||||||
657
.claude/commands/workflow/ui-design/reference-page-generator.md
Normal file
657
.claude/commands/workflow/ui-design/reference-page-generator.md
Normal file
@@ -0,0 +1,657 @@
|
|||||||
|
---
|
||||||
|
name: workflow:ui-design:reference-page-generator
|
||||||
|
description: Generate multi-component reference pages and documentation from design run extraction
|
||||||
|
argument-hint: "[--design-run <path>] [--package-name <name>] [--output-dir <path>]"
|
||||||
|
allowed-tools: Read,Write,Bash,Task,TodoWrite
|
||||||
|
auto-continue: true
|
||||||
|
---
|
||||||
|
|
||||||
|
# UI Design: Reference Page Generator
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Converts design run extraction results into shareable, versioned reference package with:
|
||||||
|
- Interactive multi-component preview (preview.html + preview.css)
|
||||||
|
- Component pattern extraction (component-patterns.json)
|
||||||
|
- Package metadata and documentation (metadata.json + README.md)
|
||||||
|
|
||||||
|
**Role**: Takes existing design run (from `import-from-code` or other extraction commands) and enhances it with component analysis, preview generation, and packaging.
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
### Command Syntax
|
||||||
|
|
||||||
|
```bash
|
||||||
|
/workflow:ui-design:reference-page-generator [FLAGS]
|
||||||
|
|
||||||
|
# Flags
|
||||||
|
--design-run <path> Design run directory path (required)
|
||||||
|
--package-name <name> Package name for reference (required)
|
||||||
|
--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
|
||||||
|
|
||||||
|
### Phase 0: Setup & Validation
|
||||||
|
|
||||||
|
**Purpose**: Validate inputs, prepare output directory
|
||||||
|
|
||||||
|
**Operations**:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 1. Validate required parameters
|
||||||
|
if [ -z "$design_run" ] || [ -z "$package_name" ]; then
|
||||||
|
echo "ERROR: --design-run and --package-name are required"
|
||||||
|
echo "USAGE: /workflow:ui-design:reference-page-generator --design-run <path> --package-name <name>"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
# 2. Validate package name format (lowercase, alphanumeric, hyphens only)
|
||||||
|
if ! [[ "$package_name" =~ ^[a-z0-9][a-z0-9-]*$ ]]; then
|
||||||
|
echo "ERROR: Invalid package name. Use lowercase, alphanumeric, and hyphens only."
|
||||||
|
echo "EXAMPLE: main-app-style-v1"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
# 3. Validate design run exists
|
||||||
|
if [ ! -d "$design_run" ]; then
|
||||||
|
echo "ERROR: Design run not found: $design_run"
|
||||||
|
echo "HINT: Run '/workflow:ui-design:import-from-code' first to create design run"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
# 4. Check required extraction files exist
|
||||||
|
required_files=(
|
||||||
|
"$design_run/style-extraction/style-1/design-tokens.json"
|
||||||
|
)
|
||||||
|
|
||||||
|
for file in "${required_files[@]}"; do
|
||||||
|
if [ ! -f "$file" ]; then
|
||||||
|
echo "ERROR: Required file not found: $file"
|
||||||
|
echo "HINT: Ensure design run has style extraction results"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
done
|
||||||
|
|
||||||
|
# 5. Setup output directory
|
||||||
|
output_dir="${output_dir:-.workflow/reference_style}"
|
||||||
|
package_dir="${output_dir}/${package_name}"
|
||||||
|
|
||||||
|
mkdir -p "$package_dir"
|
||||||
|
|
||||||
|
# 6. Validate existing package (if any)
|
||||||
|
if [ -d "$package_dir" ] && [ "$(ls -A $package_dir 2>/dev/null)" ]; then
|
||||||
|
# Directory exists and is not empty
|
||||||
|
if [ -f "$package_dir/metadata.json" ]; then
|
||||||
|
# Valid package - safe to overwrite
|
||||||
|
echo "INFO: Valid package '$package_name' found at $package_dir"
|
||||||
|
echo "This will overwrite existing package contents."
|
||||||
|
|
||||||
|
# Read existing package version for logging
|
||||||
|
existing_version=$(jq -r '.version // "unknown"' "$package_dir/metadata.json" 2>/dev/null || echo "unknown")
|
||||||
|
echo " Existing version: $existing_version"
|
||||||
|
else
|
||||||
|
# Directory exists but not a valid package - risk of data loss
|
||||||
|
echo "ERROR: Directory '$package_dir' exists but is not a valid style package"
|
||||||
|
echo "HINT: Directory exists but missing metadata.json"
|
||||||
|
echo "HINT: This may not be a style reference package"
|
||||||
|
echo "Directory contents:"
|
||||||
|
ls -1 "$package_dir" 2>/dev/null | head -10
|
||||||
|
echo ""
|
||||||
|
echo "To proceed, either:"
|
||||||
|
echo " 1. Remove the directory: rm -rf $package_dir"
|
||||||
|
echo " 2. Choose a different package name"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo "[Phase 0] Setup Complete"
|
||||||
|
echo " Design Run: $design_run"
|
||||||
|
echo " Package: $package_name"
|
||||||
|
echo " Output: $package_dir"
|
||||||
|
```
|
||||||
|
|
||||||
|
<!-- TodoWrite: Initialize todo list -->
|
||||||
|
|
||||||
|
**TodoWrite**:
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{"content": "Phase 0: 验证和准备", "status": "completed", "activeForm": "验证参数"},
|
||||||
|
{"content": "Phase 1: 组件模式提取", "status": "in_progress", "activeForm": "提取组件模式"},
|
||||||
|
{"content": "Phase 2: 生成预览页面", "status": "pending", "activeForm": "生成预览"},
|
||||||
|
{"content": "Phase 3: 生成元数据和文档", "status": "pending", "activeForm": "生成文档"}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 1: Component Pattern Extraction
|
||||||
|
|
||||||
|
**Purpose**: Run Component Agent to extract UI component patterns from design run
|
||||||
|
|
||||||
|
**Agent Task**:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
Task(ui-design-agent): `
|
||||||
|
[COMPONENT_PATTERNS_EXTRACTION]
|
||||||
|
Extract reusable UI component patterns from design run extraction results
|
||||||
|
|
||||||
|
MODE: component-analysis | DESIGN_RUN: ${design_run} | OUTPUT: ${package_dir}
|
||||||
|
|
||||||
|
## Input Files
|
||||||
|
|
||||||
|
**Design Run Path**: ${design_run}
|
||||||
|
|
||||||
|
You can read ALL files in the design run directory:
|
||||||
|
- style-extraction/style-1/design-tokens.json
|
||||||
|
- animation-extraction/animation-tokens.json (if exists)
|
||||||
|
- layout-extraction/layout-templates.json (if exists)
|
||||||
|
- Source code files referenced in extraction metadata
|
||||||
|
|
||||||
|
## Extraction Strategy
|
||||||
|
|
||||||
|
**Component Identification**:
|
||||||
|
1. Scan design tokens for component-level styles (component_styles in design-tokens.json)
|
||||||
|
2. Review layout templates for component structures
|
||||||
|
3. Identify common UI component patterns (button, input, card, modal, badge, alert, etc.)
|
||||||
|
4. Extract DOM structure for each component
|
||||||
|
5. Identify CSS class patterns and variants
|
||||||
|
6. Map component states (default, hover, active, disabled, focus, error, success)
|
||||||
|
|
||||||
|
## Output Requirements
|
||||||
|
|
||||||
|
Generate 1 file: ${package_dir}/component-patterns.json
|
||||||
|
|
||||||
|
### component-patterns.json Structure:
|
||||||
|
{
|
||||||
|
"extraction_metadata": {
|
||||||
|
"package_name": "${package_name}",
|
||||||
|
"source_design_run": "${design_run}",
|
||||||
|
"extraction_time": "ISO8601 timestamp",
|
||||||
|
"files_analyzed": {
|
||||||
|
"design_tokens": "path/to/design-tokens.json",
|
||||||
|
"animation_tokens": "path/to/animation-tokens.json (if exists)",
|
||||||
|
"layout_templates": "path/to/layout-templates.json (if exists)"
|
||||||
|
},
|
||||||
|
"component_count": 8
|
||||||
|
},
|
||||||
|
"components": {
|
||||||
|
"button": {
|
||||||
|
"base_structure": {
|
||||||
|
"tag": "button",
|
||||||
|
"base_classes": ["btn"],
|
||||||
|
"attributes": {
|
||||||
|
"type": "button",
|
||||||
|
"role": "button"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"variants": {
|
||||||
|
"primary": {
|
||||||
|
"classes": ["btn-primary"],
|
||||||
|
"description": "Main call-to-action button",
|
||||||
|
"style_tokens": {
|
||||||
|
"background": "var(--color-brand-primary)",
|
||||||
|
"color": "var(--color-text-inverse)",
|
||||||
|
"padding": "var(--spacing-3) var(--spacing-6)",
|
||||||
|
"border_radius": "var(--border-radius-md)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"secondary": {
|
||||||
|
"classes": ["btn-secondary"],
|
||||||
|
"description": "Secondary action button",
|
||||||
|
"style_tokens": {
|
||||||
|
"background": "var(--color-surface-elevated)",
|
||||||
|
"color": "var(--color-text-primary)",
|
||||||
|
"border": "1px solid var(--color-border-default)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"sizes": {
|
||||||
|
"sm": {"classes": ["btn-sm"]},
|
||||||
|
"base": {"classes": []},
|
||||||
|
"lg": {"classes": ["btn-lg"]}
|
||||||
|
},
|
||||||
|
"states": {
|
||||||
|
"default": {"classes": []},
|
||||||
|
"hover": {"pseudo": ":hover"},
|
||||||
|
"active": {"pseudo": ":active"},
|
||||||
|
"disabled": {"attribute": "disabled", "classes": ["btn-disabled"]}
|
||||||
|
},
|
||||||
|
"usage_examples": [
|
||||||
|
"<button class=\"btn btn-primary\">Primary</button>",
|
||||||
|
"<button class=\"btn btn-secondary btn-lg\">Large Secondary</button>"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"input": {
|
||||||
|
"base_structure": {
|
||||||
|
"tag": "input",
|
||||||
|
"base_classes": ["input"],
|
||||||
|
"attributes": {"type": "text"}
|
||||||
|
},
|
||||||
|
"variants": {
|
||||||
|
"default": {
|
||||||
|
"classes": ["input-default"],
|
||||||
|
"description": "Standard text input",
|
||||||
|
"style_tokens": {
|
||||||
|
"border": "1px solid var(--color-border-default)",
|
||||||
|
"padding": "var(--spacing-3)",
|
||||||
|
"border_radius": "var(--border-radius-md)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"states": {
|
||||||
|
"default": {"classes": []},
|
||||||
|
"focus": {"pseudo": ":focus"},
|
||||||
|
"error": {"classes": ["input-error"]},
|
||||||
|
"disabled": {"attribute": "disabled"}
|
||||||
|
},
|
||||||
|
"usage_examples": [
|
||||||
|
"<input class=\"input input-default\" type=\"text\" placeholder=\"Enter text\">"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"card": {
|
||||||
|
"base_structure": {
|
||||||
|
"tag": "div",
|
||||||
|
"base_classes": ["card"],
|
||||||
|
"children": [
|
||||||
|
{"tag": "div", "classes": ["card-header"], "optional": true},
|
||||||
|
{"tag": "div", "classes": ["card-body"]},
|
||||||
|
{"tag": "div", "classes": ["card-footer"], "optional": true}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"variants": {
|
||||||
|
"default": {
|
||||||
|
"classes": ["card-default"],
|
||||||
|
"description": "Standard elevated card",
|
||||||
|
"style_tokens": {
|
||||||
|
"background": "var(--color-surface-elevated)",
|
||||||
|
"padding": "var(--spacing-6)",
|
||||||
|
"border_radius": "var(--border-radius-lg)",
|
||||||
|
"box_shadow": "var(--shadow-md)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"usage_examples": [
|
||||||
|
"<div class=\"card card-default\"><div class=\"card-body\">Content</div></div>"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
## Completeness Criteria
|
||||||
|
- Extract at least 5 core component types (button, input, card, badge, alert, etc.)
|
||||||
|
- Include all variants and states for each component
|
||||||
|
- Provide usage examples for each component
|
||||||
|
- Map style tokens to component styles
|
||||||
|
|
||||||
|
## Critical Requirements
|
||||||
|
- ✅ Read design run extraction files using Read() tool
|
||||||
|
- ✅ Cross-reference design tokens with component styles
|
||||||
|
- ✅ Generate comprehensive component patterns catalog
|
||||||
|
- ✅ Use Write() to save: ${package_dir}/component-patterns.json
|
||||||
|
- ❌ NO external research or MCP calls
|
||||||
|
`
|
||||||
|
```
|
||||||
|
|
||||||
|
<!-- TodoWrite: Mark Phase 1 complete, start Phase 2 -->
|
||||||
|
|
||||||
|
**TodoWrite**:
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{"content": "Phase 1: 组件模式提取", "status": "completed", "activeForm": "提取组件模式"},
|
||||||
|
{"content": "Phase 2: 生成预览页面", "status": "in_progress", "activeForm": "生成预览"}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 2: Preview Generation
|
||||||
|
|
||||||
|
**Purpose**: Generate interactive multi-component preview (preview.html + preview.css)
|
||||||
|
|
||||||
|
**Agent Task**:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
Task(ui-design-agent): `
|
||||||
|
[PREVIEW_SHOWCASE_GENERATION]
|
||||||
|
Generate interactive multi-component showcase panel for reference package
|
||||||
|
|
||||||
|
PACKAGE_DIR: ${package_dir} | PACKAGE_NAME: ${package_name}
|
||||||
|
|
||||||
|
## Input Files (MUST READ ALL)
|
||||||
|
|
||||||
|
1. ${package_dir}/component-patterns.json (component patterns - REQUIRED)
|
||||||
|
2. ${design_run}/style-extraction/style-1/design-tokens.json (design tokens - REQUIRED)
|
||||||
|
3. ${design_run}/animation-extraction/animation-tokens.json (optional, if exists)
|
||||||
|
|
||||||
|
## Generation Task
|
||||||
|
|
||||||
|
Create interactive showcase with these sections:
|
||||||
|
|
||||||
|
### Section 1: Colors
|
||||||
|
- Display all color categories as color swatches
|
||||||
|
- Show hex/rgb values
|
||||||
|
- Group by: brand, semantic, surface, text, border
|
||||||
|
|
||||||
|
### Section 2: Typography
|
||||||
|
- Display typography scale (font sizes, weights)
|
||||||
|
- Show typography combinations if available
|
||||||
|
- Include font family examples
|
||||||
|
|
||||||
|
### Section 3: Components
|
||||||
|
- Render all components from component-patterns.json
|
||||||
|
- Display all variants side-by-side
|
||||||
|
- Show all states (default, hover, active, disabled, focus, error)
|
||||||
|
- Include usage code snippets in <details> tags
|
||||||
|
|
||||||
|
### Section 4: Spacing & Layout
|
||||||
|
- Visual spacing scale
|
||||||
|
- Border radius examples
|
||||||
|
- Shadow depth examples
|
||||||
|
|
||||||
|
### Section 5: Animations (if available)
|
||||||
|
- Animation duration examples
|
||||||
|
- Easing function demonstrations
|
||||||
|
|
||||||
|
## Output Requirements
|
||||||
|
|
||||||
|
Generate 2 files:
|
||||||
|
1. ${package_dir}/preview.html
|
||||||
|
2. ${package_dir}/preview.css
|
||||||
|
|
||||||
|
### preview.html Structure:
|
||||||
|
- Complete standalone HTML file
|
||||||
|
- Responsive design with mobile-first approach
|
||||||
|
- Sticky navigation for sections
|
||||||
|
- Interactive state demonstrations
|
||||||
|
- Code snippets in collapsible <details> elements
|
||||||
|
- Footer with package metadata
|
||||||
|
|
||||||
|
### preview.css Structure:
|
||||||
|
- CSS Custom Properties from design-tokens.json
|
||||||
|
- Typography combination classes
|
||||||
|
- Component classes from component-patterns.json
|
||||||
|
- Preview page layout styles
|
||||||
|
- Interactive demo styles
|
||||||
|
|
||||||
|
## Critical Requirements
|
||||||
|
- ✅ Read ALL input files (component-patterns.json, design-tokens.json, animation-tokens.json if exists)
|
||||||
|
- ✅ Generate complete, interactive showcase HTML
|
||||||
|
- ✅ All CSS uses var() references to design tokens
|
||||||
|
- ✅ Display ALL components from component-patterns.json
|
||||||
|
- ✅ Display ALL variants and states for each component
|
||||||
|
- ✅ Include usage code snippets
|
||||||
|
- ✅ Use Write() to save both files:
|
||||||
|
- ${package_dir}/preview.html
|
||||||
|
- ${package_dir}/preview.css
|
||||||
|
- ❌ NO external research or MCP calls
|
||||||
|
`
|
||||||
|
```
|
||||||
|
|
||||||
|
<!-- TodoWrite: Mark Phase 2 complete, start Phase 3 -->
|
||||||
|
|
||||||
|
**TodoWrite**:
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{"content": "Phase 2: 生成预览页面", "status": "completed", "activeForm": "生成预览"},
|
||||||
|
{"content": "Phase 3: 生成元数据和文档", "status": "in_progress", "activeForm": "生成文档"}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 3: Metadata & Documentation Generation
|
||||||
|
|
||||||
|
**Purpose**: Create package metadata and documentation
|
||||||
|
|
||||||
|
**Operations**:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
echo "[Phase 3] Generating package metadata and documentation"
|
||||||
|
|
||||||
|
# 1. Copy design tokens to package directory
|
||||||
|
cp "${design_run}/style-extraction/style-1/design-tokens.json" "${package_dir}/design-tokens.json"
|
||||||
|
cp "${design_run}/style-extraction/style-1/style-guide.md" "${package_dir}/style-guide.md" 2>/dev/null || true
|
||||||
|
|
||||||
|
# 2. Copy animation tokens if exists
|
||||||
|
if [ -f "${design_run}/animation-extraction/animation-tokens.json" ]; then
|
||||||
|
cp "${design_run}/animation-extraction/animation-tokens.json" "${package_dir}/animation-tokens.json"
|
||||||
|
fi
|
||||||
|
|
||||||
|
# 3. Get Git information (if in git repo)
|
||||||
|
git_commit=""
|
||||||
|
git_repo=""
|
||||||
|
if git rev-parse --is-inside-work-tree > /dev/null 2>&1; then
|
||||||
|
git_commit=$(git rev-parse HEAD 2>/dev/null || echo "")
|
||||||
|
git_repo=$(git config --get remote.origin.url 2>/dev/null || echo "")
|
||||||
|
fi
|
||||||
|
|
||||||
|
# 4. Get source path from design run metadata
|
||||||
|
source_path=$(grep -Po '"extraction_source":\s*"\K[^"]+' "${design_run}/style-extraction/style-1/design-tokens.json" 2>/dev/null || echo "code_import")
|
||||||
|
|
||||||
|
# 5. Generate metadata.json
|
||||||
|
cat > "${package_dir}/metadata.json" <<EOF
|
||||||
|
{
|
||||||
|
"packageName": "${package_name}",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"generatedAt": "$(date -u +"%Y-%m-%dT%H:%M:%SZ" 2>/dev/null || date)",
|
||||||
|
"source": {
|
||||||
|
"type": "git",
|
||||||
|
"repository": "${git_repo}",
|
||||||
|
"commit": "${git_commit}",
|
||||||
|
"design_run": "${design_run}"
|
||||||
|
},
|
||||||
|
"description": "Style reference package extracted from design run",
|
||||||
|
"files": {
|
||||||
|
"design_tokens": "design-tokens.json",
|
||||||
|
"style_guide": "style-guide.md",
|
||||||
|
"component_patterns": "component-patterns.json",
|
||||||
|
"animation_tokens": "animation-tokens.json",
|
||||||
|
"preview_html": "preview.html",
|
||||||
|
"preview_css": "preview.css"
|
||||||
|
},
|
||||||
|
"usage": {
|
||||||
|
"command": "/workflow:ui-design:codify-style --package-name ${package_name}",
|
||||||
|
"skill_memory": "/memory:style-skill-memory ${package_name}",
|
||||||
|
"description": "Reference this package for consistent design system usage"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
EOF
|
||||||
|
|
||||||
|
echo " ✓ metadata.json created"
|
||||||
|
|
||||||
|
# 6. Generate README.md
|
||||||
|
cat > "${package_dir}/README.md" <<'EOFREADME'
|
||||||
|
# ${package_name}
|
||||||
|
|
||||||
|
Style reference package with interactive component preview.
|
||||||
|
|
||||||
|
## Contents
|
||||||
|
|
||||||
|
- **design-tokens.json**: Complete design token system
|
||||||
|
- **style-guide.md**: Detailed style guide documentation
|
||||||
|
- **component-patterns.json**: Reusable component patterns
|
||||||
|
- **preview.html**: Interactive component showcase
|
||||||
|
- **preview.css**: Showcase styling
|
||||||
|
- **animation-tokens.json**: Animation tokens (if available)
|
||||||
|
- **metadata.json**: Package metadata
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
### Preview Package
|
||||||
|
|
||||||
|
Open `preview.html` in a browser to view the interactive component showcase.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Using local server
|
||||||
|
cd ${package_dir}
|
||||||
|
python -m http.server 8080
|
||||||
|
# Then open http://localhost:8080/preview.html
|
||||||
|
```
|
||||||
|
|
||||||
|
### Use in Workflow
|
||||||
|
|
||||||
|
Reference this package in UI design workflows or generate SKILL memory:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Generate SKILL memory for easy loading
|
||||||
|
/memory:style-skill-memory ${package_name}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Package Information
|
||||||
|
|
||||||
|
- **Generated**: $(date)
|
||||||
|
- **Source**: Design run extraction
|
||||||
|
- **Version**: 1.0.0
|
||||||
|
|
||||||
|
## Component Catalog
|
||||||
|
|
||||||
|
See `component-patterns.json` for complete component catalog with variants, states, and usage examples.
|
||||||
|
|
||||||
|
## Design Tokens
|
||||||
|
|
||||||
|
All design tokens are available as CSS custom properties. See `design-tokens.json` for complete token reference.
|
||||||
|
|
||||||
|
EOFREADME
|
||||||
|
|
||||||
|
echo " ✓ README.md created"
|
||||||
|
|
||||||
|
# 7. Verify all files exist
|
||||||
|
echo "[Phase 3] Verifying package files"
|
||||||
|
|
||||||
|
required_files=(
|
||||||
|
"design-tokens.json"
|
||||||
|
"component-patterns.json"
|
||||||
|
"preview.html"
|
||||||
|
"preview.css"
|
||||||
|
"metadata.json"
|
||||||
|
"README.md"
|
||||||
|
)
|
||||||
|
|
||||||
|
missing_files=()
|
||||||
|
for file in "${required_files[@]}"; do
|
||||||
|
if [ ! -f "${package_dir}/${file}" ]; then
|
||||||
|
missing_files+=("$file")
|
||||||
|
fi
|
||||||
|
done
|
||||||
|
|
||||||
|
if [ ${#missing_files[@]} -gt 0 ]; then
|
||||||
|
echo " ❌ ERROR: Missing required files: ${missing_files[*]}"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo " ✓ All required files present"
|
||||||
|
|
||||||
|
# 8. Count component patterns (use jq for reliable parsing)
|
||||||
|
component_count=$(jq -r '.extraction_metadata.component_count // 0' "${package_dir}/component-patterns.json" 2>/dev/null || grep -c '"button"\|"input"\|"card"\|"badge"\|"alert"' "${package_dir}/component-patterns.json" 2>/dev/null || echo 0)
|
||||||
|
|
||||||
|
echo " ✓ Package complete with ${component_count} components"
|
||||||
|
```
|
||||||
|
|
||||||
|
<!-- TodoWrite: Mark all complete -->
|
||||||
|
|
||||||
|
**TodoWrite**:
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{"content": "Phase 0: 验证和准备", "status": "completed", "activeForm": "验证参数"},
|
||||||
|
{"content": "Phase 1: 组件模式提取", "status": "completed", "activeForm": "提取组件模式"},
|
||||||
|
{"content": "Phase 2: 生成预览页面", "status": "completed", "activeForm": "生成预览"},
|
||||||
|
{"content": "Phase 3: 生成元数据和文档", "status": "completed", "activeForm": "生成文档"}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Output Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
${output_dir}/
|
||||||
|
└── ${package_name}/
|
||||||
|
├── design-tokens.json # Design token system (copied from design run)
|
||||||
|
├── style-guide.md # Style guide (copied from design run)
|
||||||
|
├── component-patterns.json # Component patterns (NEW)
|
||||||
|
├── animation-tokens.json # Animation tokens (optional, copied from design run)
|
||||||
|
├── preview.html # Interactive showcase (NEW)
|
||||||
|
├── preview.css # Showcase styling (NEW)
|
||||||
|
├── metadata.json # Package metadata (NEW)
|
||||||
|
└── README.md # Package documentation (NEW)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Completion Message
|
||||||
|
|
||||||
|
```
|
||||||
|
✅ Reference package generated successfully!
|
||||||
|
|
||||||
|
Package: {package_name}
|
||||||
|
Location: {package_dir}
|
||||||
|
|
||||||
|
Generated Files:
|
||||||
|
✓ design-tokens.json Design token system
|
||||||
|
✓ style-guide.md Style guide documentation
|
||||||
|
✓ component-patterns.json Component catalog ({component_count} components)
|
||||||
|
✓ preview.html Interactive multi-component showcase
|
||||||
|
✓ preview.css Showcase styling
|
||||||
|
✓ animation-tokens.json Animation tokens {if exists: "✓" else: "○ (not found)"}
|
||||||
|
✓ metadata.json Package metadata
|
||||||
|
✓ README.md Package documentation
|
||||||
|
|
||||||
|
Preview Package:
|
||||||
|
Open the interactive showcase:
|
||||||
|
file://{absolute_path_to_package_dir}/preview.html
|
||||||
|
|
||||||
|
Or use a local server:
|
||||||
|
cd {package_dir}
|
||||||
|
python -m http.server 8080
|
||||||
|
# Then open http://localhost:8080/preview.html
|
||||||
|
|
||||||
|
Next Steps:
|
||||||
|
1. Review preview.html to verify components
|
||||||
|
2. Generate SKILL memory: /memory:style-skill-memory {package_name}
|
||||||
|
3. Use package as design reference in future workflows
|
||||||
|
```
|
||||||
|
|
||||||
|
## Error Handling
|
||||||
|
|
||||||
|
### Common Errors
|
||||||
|
|
||||||
|
| Error | Cause | Resolution |
|
||||||
|
|-------|-------|------------|
|
||||||
|
| Missing --design-run or --package-name | Required parameters not provided | Provide both flags |
|
||||||
|
| Invalid package name | Contains uppercase, special chars | Use lowercase, alphanumeric, hyphens only |
|
||||||
|
| Design run not found | Incorrect path or design run doesn't exist | Verify design run path, run import-from-code first |
|
||||||
|
| Missing extraction files | Design run incomplete | Ensure design run has style-extraction results |
|
||||||
|
| Component extraction failed | No components found | Review design tokens for component_styles |
|
||||||
|
| Preview generation failed | Invalid design tokens | Check design-tokens.json format |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Integration with Workflow
|
||||||
|
|
||||||
|
This command is typically called by the `codify-style` orchestrator, but can also be run standalone:
|
||||||
|
|
||||||
|
**Standalone Usage**:
|
||||||
|
```bash
|
||||||
|
# Step 1: Extract styles from code
|
||||||
|
/workflow:ui-design:import-from-code --design-id design-run-123 --source ./src
|
||||||
|
|
||||||
|
# Step 2: Generate reference package
|
||||||
|
/workflow:ui-design:reference-page-generator --design-run .workflow/WFS-xxx/design-run-123 --package-name main-app-style-v1
|
||||||
|
```
|
||||||
|
|
||||||
|
**Orchestrator Usage** (via codify-style):
|
||||||
|
```bash
|
||||||
|
# Orchestrator handles both steps automatically
|
||||||
|
/workflow:ui-design:codify-style --source ./src --package-name main-app-style-v1
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user