claude-code-workflow 6.0.0

package/.claude/skills/command-guide/reference/commands/memory/style-skill-memory.md

@@ -0,0 +1,396 @@
+---
+name: 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.
+
+**Key Features**:
+- Extracts primary design references (colors, typography, spacing, etc.)
+- Provides dynamic adjustment guidelines for design tokens
+- Includes prerequisites and tooling requirements (browsers, PostCSS, dark mode)
+- Progressive loading structure for efficient token usage
+- Complete implementation examples with React components
+- Interactive preview showcase
+
+---
+
+## Quick Reference
+
+### 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
+```
+
+### Key Variables
+
+**Input 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
+
+**Data Sources** (Phase 2):
+- `DESIGN_TOKENS_DATA`: Complete design-tokens.json content (from Read)
+- `LAYOUT_TEMPLATES_DATA`: Complete layout-templates.json content (from Read)
+- `ANIMATION_TOKENS_DATA`: Complete animation-tokens.json content (from Read, if exists)
+
+**Metadata** (Phase 2):
+- `COMPONENT_COUNT`: Total components
+- `UNIVERSAL_COUNT`: Universal components count
+- `SPECIALIZED_COUNT`: Specialized components count
+- `UNIVERSAL_COMPONENTS`: Universal component names (first 5)
+- `HAS_ANIMATIONS`: Whether animation-tokens.json exists
+
+**Analysis Output** (`DESIGN_ANALYSIS` - Phase 2):
+- `has_colors`: Colors exist
+- `color_semantic`: Has semantic naming (primary/secondary/accent)
+- `uses_oklch`: Uses modern color spaces (oklch, lab, etc.)
+- `has_dark_mode`: Has separate light/dark mode color tokens
+- `spacing_pattern`: Pattern type ("linear", "geometric", "custom")
+- `spacing_scale`: Actual scale values (e.g., [4, 8, 16, 32, 64])
+- `has_typography`: Typography system exists
+- `typography_hierarchy`: Has size scale for hierarchy
+- `uses_calc`: Uses calc() expressions in token values
+- `has_radius`: Border radius exists
+- `radius_style`: Style characteristic ("sharp" <4px, "moderate" 4-8px, "rounded" >8px)
+- `has_shadows`: Shadow system exists
+- `shadow_pattern`: Elevation naming pattern
+- `has_animations`: Animation tokens exist
+- `animation_range`: Duration range (fast to slow)
+- `easing_variety`: Types of easing functions
+
+### Common Errors
+
+| Error | Cause | Resolution |
+|-------|-------|------------|
+| Package not found | Invalid package name or doesn't exist | Run `/workflow:ui-design:codify-style` first |
+| SKILL already exists | SKILL.md already generated | Use `--regenerate` flag |
+| Missing layout-templates.json | Incomplete package | Verify package integrity, re-run codify-style |
+| Invalid JSON format | Corrupted package files | Regenerate package with codify-style |
+
+---
+
+## Execution Process
+
+### Phase 1: Validate Package
+
+**TodoWrite** (First Action):
+```json
+[
+  {
+    "content": "Validate package exists and check SKILL status",
+    "activeForm": "Validating package and SKILL status",
+    "status": "in_progress"
+  },
+  {
+    "content": "Read package data and analyze design system",
+    "activeForm": "Reading package data and analyzing design system",
+    "status": "pending"
+  },
+  {
+    "content": "Generate SKILL.md with design principles and token values",
+    "activeForm": "Generating SKILL.md with design principles and token values",
+    "status": "pending"
+  }
+]
+```
+
+**Step 1: Parse Package Name**
+
+```bash
+# Get package name from argument or auto-detect
+bash(echo "${package_name}" || basename "$(pwd)" | sed 's/^style-//')
+```
+
+**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}")
+}
+```
+
+**TodoWrite Update**: Mark "Validate" as completed, "Read package data" as in_progress
+
+---
+
+### Phase 2: Read Package Data & Analyze Design System
+
+**Step 1: Read All JSON Files**
+
+```bash
+# Read layout templates
+Read(file_path=".workflow/reference_style/${package_name}/layout-templates.json")
+
+# Read design tokens
+Read(file_path=".workflow/reference_style/${package_name}/design-tokens.json")
+
+# Read animation tokens (if exists)
+bash(test -f .workflow/reference_style/${package_name}/animation-tokens.json && echo "exists" || echo "missing")
+Read(file_path=".workflow/reference_style/${package_name}/animation-tokens.json")  # if exists
+```
+
+**Step 2: Extract Metadata for Description**
+
+```bash
+# Count components and classify by type
+bash(jq '.layout_templates | length' layout-templates.json)
+bash(jq '[.layout_templates[] | select(.component_type == "universal")] | length' layout-templates.json)
+bash(jq '[.layout_templates[] | select(.component_type == "specialized")] | length' layout-templates.json)
+bash(jq -r '.layout_templates | to_entries[] | select(.value.component_type == "universal") | .key' layout-templates.json | head -5)
+```
+
+Store results in metadata variables (see [Key Variables](#key-variables))
+
+**Step 3: Analyze Design System for Dynamic Principles**
+
+Analyze design-tokens.json to extract characteristics and patterns:
+
+```bash
+# Color system characteristics
+bash(jq '.colors | keys' design-tokens.json)
+bash(jq '.colors | to_entries[0:2] | map(.value)' design-tokens.json)
+# Check for modern color spaces
+bash(jq '.colors | to_entries[] | .value | test("oklch|lab|lch")' design-tokens.json)
+# Check for dark mode variants
+bash(jq '.colors | keys | map(select(contains("dark") or contains("light")))' design-tokens.json)
+# → Store: has_colors, color_semantic, uses_oklch, has_dark_mode
+
+# Spacing pattern detection
+bash(jq '.spacing | to_entries | map(.value) | map(gsub("[^0-9.]"; "") | tonumber)' design-tokens.json)
+# Analyze pattern: linear (4-8-12-16) vs geometric (4-8-16-32) vs custom
+# → Store: spacing_pattern, spacing_scale
+
+# Typography characteristics
+bash(jq '.typography | keys | map(select(contains("family") or contains("weight")))' design-tokens.json)
+bash(jq '.typography | to_entries | map(select(.key | contains("size"))) | .[].value' design-tokens.json)
+# Check for calc() usage
+bash(jq '. | tostring | test("calc\\(")' design-tokens.json)
+# → Store: has_typography, typography_hierarchy, uses_calc
+
+# Border radius style
+bash(jq '.border_radius | to_entries | map(.value)' design-tokens.json)
+# Check range: small (sharp <4px) vs moderate (4-8px) vs large (rounded >8px)
+# → Store: has_radius, radius_style
+
+# Shadow characteristics
+bash(jq '.shadows | keys' design-tokens.json)
+bash(jq '.shadows | to_entries[0].value' design-tokens.json)
+# → Store: has_shadows, shadow_pattern
+
+# Animations (if available)
+bash(jq '.duration | to_entries | map(.value)' animation-tokens.json)
+bash(jq '.easing | keys' animation-tokens.json)
+# → Store: has_animations, animation_range, easing_variety
+```
+
+Store analysis results in `DESIGN_ANALYSIS` (see [Key Variables](#key-variables))
+
+**Note**: Analysis focuses on characteristics and patterns, not counts. Include technical feature detection (oklch, calc, dark mode) for Prerequisites section.
+
+**TodoWrite Update**: Mark "Read package data" as completed, "Generate SKILL.md" as in_progress
+
+---
+
+### Phase 3: Generate SKILL.md
+
+**Step 1: Create SKILL Directory**
+
+```bash
+bash(mkdir -p .claude/skills/style-${package_name})
+```
+
+**Step 2: Generate Intelligent Description**
+
+**Format**:
+```
+{package_name} project-independent design system with {universal_count} universal layout templates and interactive preview (located at .workflow/reference_style/{package_name}). Load when working with reusable UI components, design tokens, layout patterns, or implementing visual consistency. Excludes {specialized_count} project-specific components.
+```
+
+**Step 3: Load and Process SKILL.md Template**
+
+**⚠️ CRITICAL - Execute First**:
+```bash
+bash(cat ~/.claude/workflows/cli-templates/memory/style-skill-memory/skill-md-template.md)
+```
+
+**Template Processing**:
+1. **Replace variables**: Substitute all `{variable}` placeholders with actual values from Phase 2
+2. **Generate dynamic sections**:
+   - **Prerequisites & Tooling**: Generate based on `DESIGN_ANALYSIS` technical features (oklch, calc, dark mode)
+   - **Design Principles**: Generate based on `DESIGN_ANALYSIS` characteristics
+   - **Complete Implementation Example**: Include React component example with token adaptation
+   - **Design Token Values**: Iterate `DESIGN_TOKENS_DATA`, `ANIMATION_TOKENS_DATA` and display all key-value pairs with DEFAULT annotations
+3. **Write to file**: Use Write tool to save to `.claude/skills/style-{package_name}/SKILL.md`
+
+**Variable Replacement Map**:
+- `{package_name}` → PACKAGE_NAME
+- `{intelligent_description}` → Generated description from Step 2
+- `{component_count}` → COMPONENT_COUNT
+- `{universal_count}` → UNIVERSAL_COUNT
+- `{specialized_count}` → SPECIALIZED_COUNT
+- `{universal_components_list}` → UNIVERSAL_COMPONENTS (comma-separated)
+- `{has_animations}` → HAS_ANIMATIONS
+
+**Dynamic Content Generation**:
+
+See template file for complete structure. Key dynamic sections:
+
+1. **Prerequisites & Tooling** (based on DESIGN_ANALYSIS technical features):
+   - IF uses_oklch → Include PostCSS plugin requirement (`postcss-oklab-function`)
+   - IF uses_calc → Include preprocessor requirement for calc() expressions
+   - IF has_dark_mode → Include dark mode implementation mechanism (class or media query)
+   - ALWAYS include browser support, jq installation, and local server setup
+
+2. **Design Principles** (based on DESIGN_ANALYSIS):
+   - IF has_colors → Include "Color System" principle with semantic pattern
+   - IF spacing_pattern detected → Include "Spatial Rhythm" with unified scale description (actual token values)
+   - IF has_typography_hierarchy → Include "Typographic System" with scale examples
+   - IF has_radius → Include "Shape Language" with style characteristic
+   - IF has_shadows → Include "Depth & Elevation" with elevation pattern
+   - IF has_animations → Include "Motion & Timing" with duration range
+   - ALWAYS include "Accessibility First" principle
+
+3. **Design Token Values** (iterate from read data):
+   - Colors: Iterate `DESIGN_TOKENS_DATA.colors`
+   - Typography: Iterate `DESIGN_TOKENS_DATA.typography`
+   - Spacing: Iterate `DESIGN_TOKENS_DATA.spacing`
+   - Border Radius: Iterate `DESIGN_TOKENS_DATA.border_radius` with calc() explanations
+   - Shadows: Iterate `DESIGN_TOKENS_DATA.shadows` with DEFAULT token annotations
+   - Animations (if available): Iterate `ANIMATION_TOKENS_DATA.duration` and `ANIMATION_TOKENS_DATA.easing`
+
+**Step 4: Verify SKILL.md Created**
+
+```bash
+bash(test -f .claude/skills/style-${package_name}/SKILL.md && echo "success" || echo "failed")
+```
+
+**TodoWrite Update**: Mark all todos as completed
+
+---
+
+### Completion Message
+
+Display a simple completion message with key information:
+
+```
+✅ SKILL memory generated for style package: {package_name}
+
+📁 Location: .claude/skills/style-{package_name}/SKILL.md
+
+📊 Package Summary:
+   - {component_count} components ({universal_count} universal, {specialized_count} specialized)
+   - Design tokens: colors, typography, spacing, shadows{animations_note}
+
+💡 Usage: /memory:load-skill-memory style-{package_name} "your task description"
+```
+
+Variables: `{package_name}`, `{component_count}`, `{universal_count}`, `{specialized_count}`, `{animations_note}` (", animations" if exists)
+
+---
+
+## 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. **Load Templates via cat**: Use `cat ~/.claude/workflows/cli-templates/memory/style-skill-memory/{template}` to load templates
+4. **Variable Substitution**: Replace all `{variable}` placeholders with actual values
+5. **Technical Feature Detection**: Analyze tokens for modern features (oklch, calc, dark mode) and generate appropriate Prerequisites section
+6. **Dynamic Content Generation**: Generate sections based on DESIGN_ANALYSIS characteristics
+7. **Unified Spacing Scale**: Use actual token values as primary scale reference, avoid contradictory pattern descriptions
+8. **Direct Iteration**: Iterate data structures (DESIGN_TOKENS_DATA, etc.) for token values
+9. **Annotate Special Tokens**: Add comments for DEFAULT tokens and calc() expressions
+10. **Embed jq Commands**: Include bash/jq commands in SKILL.md for dynamic loading
+11. **Progressive Loading**: Include all 3 levels (0-2) with specific jq commands
+12. **Complete Examples**: Include end-to-end implementation examples (React components)
+13. **Intelligent Description**: Extract component count and key features from metadata
+14. **Emphasize Flexibility**: Strongly warn against rigid copying - values are references for creative adaptation
+
+### Template Files Location
+
+
+```
+Phase 1: Validate
+  ├─ Parse package_name
+  ├─ Check PACKAGE_DIR exists
+  └─ Check SKILL_DIR exists (skip if exists and no --regenerate)
+
+Phase 2: Read & Analyze
+  ├─ Read design-tokens.json → DESIGN_TOKENS_DATA
+  ├─ Read layout-templates.json → LAYOUT_TEMPLATES_DATA
+  ├─ Read animation-tokens.json → ANIMATION_TOKENS_DATA (if exists)
+  ├─ Extract Metadata → COMPONENT_COUNT, UNIVERSAL_COUNT, etc.
+  └─ Analyze Design System → DESIGN_ANALYSIS (characteristics)
+
+Phase 3: Generate
+  ├─ Create SKILL directory
+  ├─ Generate intelligent description
+  ├─ Load SKILL.md template (cat command)
+  ├─ Replace variables and generate dynamic content
+  ├─ Write SKILL.md
+  ├─ Verify creation
+  ├─ Load completion message template (cat command)
+  └─ Display completion message
+```