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

feat(memory): optimize SKILL.md generation with concise structure and embedded jq commands

Browse Source
This commit is contained in:
catlog22
2025-11-14 15:43:23 +08:00
parent c05dbb2791
commit 3747a7b083
1 changed files with 215 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

525
.claude/commands/memory/style-skill-memory.md
View File

@@ -287,7 +287,7 @@ main-app-style-v1 project-independent design system with 5 universal layout temp
**Step 3: Write SKILL.md** **Step 3: Write SKILL.md**
Use Write tool to generate SKILL.md with the following complete content: Use Write tool to generate SKILL.md with the following optimized content:
```markdown ```markdown
--- ---
@@ -297,169 +297,101 @@ description: {intelligent description from Step 2}
# {Package Name} Style SKILL Package # {Package Name} Style SKILL Package
## Documentation: `../../../.workflow/reference_style/{package_name}/`
## Package Overview ## Package Overview
**Project-independent style reference package** extracted from codebase with reusable design patterns, tokens, and interactive preview. **Location**: `../../../.workflow/reference_style/{package_name}/`
**Package Details**: **Package Details**:
- Package: {package_name} - Package: {package_name}
- Layout Templates: {component_count} total - Layout Templates: {component_count} total
- **Universal Components**: {universal_count} (reusable, project-independent) - **Universal Components**: {universal_count} (reusable, project-independent)
- **Specialized Components**: {specialized_count} (project-specific, excluded from reference) - **Specialized Components**: {specialized_count} (project-specific, excluded)
- Universal Component Types: {comma-separated list of UNIVERSAL_COMPONENTS} - Universal Component Types: {comma-separated list of UNIVERSAL_COMPONENTS}
- Files: {file_count}
- Animation Tokens: {has_animations ? "✓ Available" : "Not available"} - Animation Tokens: {has_animations ? "✓ Available" : "Not available"}
- Preview: `../../../.workflow/reference_style/{package_name}/preview.html`
**⚠️ IMPORTANT - Project Independence**:
This SKILL package represents a **pure style system** independent of any specific project implementation:
- **Universal components** are generic, reusable patterns (buttons, inputs, cards, navigation)
- **Specialized components** are project-specific implementations (excluded from this reference)
- All design tokens and layout patterns are extracted for **reference purposes only**
- Adapt and customize these references based on your project's specific requirements
--- ---
## ⚡ Primary Design References ## ⚡ Core Rules
**IMPORTANT**: These are **reference values** extracted from the codebase. They should be **dynamically adjusted** based on your specific design needs, not treated as fixed constraints. 1. **Project-Independent Reference**: This is a style reference system. All patterns and tokens are adaptable starting points, not fixed constraints.
### 🎨 Colors 2. **Universal Components Only**: When using `layout-templates.json`, **ONLY** reference components where `component_type: "universal"`. **IGNORE** `component_type: "specialized"`.
3. **Token Adaptation**: Adjust design tokens (colors, spacing, typography, shadows, etc.) based on:
- Brand requirements and identity
- Accessibility standards (WCAG compliance, readability)
- Platform conventions (mobile/desktop, iOS/Android/Web)
- Context needs (light/dark mode, responsive breakpoints)
---
## 🎨 Primary Design References
**IMPORTANT**: Reference values extracted from codebase. Dynamically adjust based on specific design needs.
### Colors
{FOR each color in PRIMARY_COLORS: {FOR each color in PRIMARY_COLORS:
- **{color.key}**: `{color.value}` - **{color.key}**: `{color.value}`
} }
**Usage Guidelines**: ### Typography
- These colors establish the foundation of the design system
- Adjust saturation, lightness, or hue based on:
- Brand requirements and accessibility needs
- Context (light/dark mode, high-contrast themes)
- User feedback and A/B testing results
- Use color theory principles to maintain harmony when modifying
### 📝 Typography
{FOR each font in TYPOGRAPHY_FONTS: {FOR each font in TYPOGRAPHY_FONTS:
- **{font.key}**: `{font.value}` - **{font.key}**: `{font.value}`
} }
**Usage Guidelines**: ### Spacing Scale
- Font families can be substituted based on:
- Brand identity and design language
- Performance requirements (web fonts vs. system fonts)
- Accessibility and readability considerations
- Platform-specific availability
- Maintain hierarchy and scale relationships when changing fonts
### 📏 Spacing Scale
{FOR each spacing in SPACING_SCALE: {FOR each spacing in SPACING_SCALE:
- **{spacing.key}**: `{spacing.value}` - **{spacing.key}**: `{spacing.value}`
} }
**Usage Guidelines**: ### Border Radius
- Spacing values form a consistent rhythm system
- Adjust scale based on:
- Target device (mobile vs. desktop vs. tablet)
- Content density requirements
- Component-specific needs (compact vs. comfortable layouts)
- Maintain proportional relationships when scaling
### 🔲 Border Radius
{FOR each radius in BORDER_RADIUS: {FOR each radius in BORDER_RADIUS:
- **{radius.key}**: `{radius.value}` - **{radius.key}**: `{radius.value}`
} }
**Usage Guidelines**: ### Shadows
- Border radius affects visual softness and modernity
- Adjust based on:
- Design aesthetic (sharp vs. rounded vs. pill-shaped)
- Component type (buttons, cards, inputs have different needs)
- Platform conventions (iOS vs. Android vs. Web)
### 🌫️ Shadows
{FOR each shadow in SHADOWS: {FOR each shadow in SHADOWS:
- **{shadow.key}**: `{shadow.value}` - **{shadow.key}**: `{shadow.value}`
} }
**Usage Guidelines**:
- Shadows create elevation and depth perception
- Adjust based on:
- Material design depth levels
- Light/dark mode contexts
- Performance considerations (complex shadows impact rendering)
- Visual hierarchy needs
{IF HAS_ANIMATIONS: {IF HAS_ANIMATIONS:
### ⏱️ Animation & Timing ### Animation & Timing
**Durations**: **Durations**:
{FOR each duration in ANIMATION_DURATIONS: {FOR each duration in ANIMATION_DURATIONS:
- **{duration.key}**: `{duration.value}` - {duration.key}: `{duration.value}`
} }
**Easing Functions**: **Easing Functions**:
{FOR each easing in EASING_FUNCTIONS: {FOR each easing in EASING_FUNCTIONS:
- **{easing.key}**: `{easing.value}` - {easing.key}: `{easing.value}`
} }
**Usage Guidelines**:
- Animation timing affects perceived responsiveness and polish
- Adjust based on:
- User expectations and platform conventions
- Accessibility preferences (reduced motion)
- Animation type (micro-interactions vs. page transitions)
- Performance constraints (mobile vs. desktop)
} }
--- ---
## 🎯 Design Adaptation Strategies
### When to Adjust Design References
**Brand Alignment**:
- Modify colors to match brand identity and guidelines
- Adjust typography to reflect brand personality
- Tune spacing and radius to align with brand aesthetic
**Accessibility Requirements**:
- Increase color contrast ratios for WCAG compliance
- Adjust font sizes and spacing for readability
- Modify animation durations for reduced-motion preferences
**Platform Optimization**:
- Adapt spacing for mobile touch targets (min 44x44px)
- Adjust shadows and radius for platform conventions
- Optimize animation performance for target devices
**Context-Specific Needs**:
- Dark mode: Adjust colors, shadows, and contrasts
- High-density displays: Fine-tune spacing and sizing
- Responsive design: Scale tokens across breakpoints
### How to Apply Adjustments
1. **Identify Need**: Determine which tokens need adjustment based on your specific requirements
2. **Maintain Relationships**: Preserve proportional relationships between related tokens
3. **Test Thoroughly**: Validate changes across components and use cases
4. **Document Changes**: Track modifications and rationale for team alignment
5. **Iterate**: Refine based on user feedback and testing results
---
## Progressive Loading ## Progressive Loading
### Level 0: Design Tokens (~5K tokens) ### Level 0: Design Tokens (~5K tokens)
Essential design token system for consistent styling. Essential design token system for consistent styling.
**Files**: **Load Command**:
- [Design Tokens](../../../.workflow/reference_style/{package_name}/design-tokens.json) - Colors, typography, spacing, shadows, borders ```bash
# Display design tokens
jq '.' .workflow/reference_style/{package_name}/design-tokens.json
# Extract specific categories
jq '.colors' .workflow/reference_style/{package_name}/design-tokens.json
jq '.typography' .workflow/reference_style/{package_name}/design-tokens.json
jq '.spacing' .workflow/reference_style/{package_name}/design-tokens.json
```
**Use when**: Quick token reference, applying consistent styles, color/typography queries **Use when**: Quick token reference, applying consistent styles, color/typography queries
@@ -467,17 +399,26 @@ Essential design token system for consistent styling.
### Level 1: Universal Layout Templates (~12K tokens) ### Level 1: Universal Layout Templates (~12K tokens)
**Project-independent** component layout patterns for reusable UI elements. Project-independent component layout patterns for reusable UI elements.
**Files**: **Load Command**:
- Level 0 files ```bash
- [Layout Templates](../../../.workflow/reference_style/{package_name}/layout-templates.json) - Component structures with HTML/CSS patterns # Load Level 0 + layout templates
jq '.' .workflow/reference_style/{package_name}/design-tokens.json
jq '.' .workflow/reference_style/{package_name}/layout-templates.json
**⚠️ Reference Strategy**: # Filter universal components only
- **Only reference components with `component_type: "universal"`** - these are reusable, project-independent patterns jq '.layout_templates | to_entries[] | select(.value.component_type == "universal")' \
- **Ignore components with `component_type: "specialized"`** - these are project-specific implementations .workflow/reference_style/{package_name}/layout-templates.json
- Universal components include: buttons, inputs, forms, cards, navigation, modals, etc.
- Use universal patterns as **reference templates** to adapt for your specific project needs # List universal component names
jq -r '.layout_templates | to_entries[] | select(.value.component_type == "universal") | .key' \
.workflow/reference_style/{package_name}/layout-templates.json
# Get specific universal component
jq '.layout_templates["button"] | select(.component_type == "universal")' \
.workflow/reference_style/{package_name}/layout-templates.json
```
**Use when**: Building components, understanding component architecture, implementing layouts **Use when**: Building components, understanding component architecture, implementing layouts
@@ -487,85 +428,68 @@ Essential design token system for consistent styling.
Full design system with animations and interactive preview. Full design system with animations and interactive preview.
**Files**: **Load Command**:
- All Level 1 files
- [Animation Tokens](../../../.workflow/reference_style/{package_name}/animation-tokens.json) - Animation durations, easing, transitions _(if available)_
- [Preview HTML](../../../.workflow/reference_style/{package_name}/preview.html) - Interactive showcase (reference only)
- [Preview CSS](../../../.workflow/reference_style/{package_name}/preview.css) - Showcase styling (reference only)
**Use when**: Comprehensive analysis, animation development, complete design system understanding
---
## Interactive Preview
**Location**: `.workflow/reference_style/{package_name}/preview.html`
**View in Browser**:
```bash ```bash
# Load Level 1 + animation tokens + preview
jq '.' .workflow/reference_style/{package_name}/design-tokens.json
jq '.' .workflow/reference_style/{package_name}/layout-templates.json
jq '.' .workflow/reference_style/{package_name}/animation-tokens.json # if available
# View interactive preview
cd .workflow/reference_style/{package_name} cd .workflow/reference_style/{package_name}
python -m http.server 8080 python -m http.server 8080
# Open http://localhost:8080/preview.html # Open http://localhost:8080/preview.html
``` ```
**Features**: **Use when**: Comprehensive analysis, animation development, complete design system understanding
- 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 ## Quick Reference
### Loading Levels ### Common Query Commands
**Level 0** (5K): Design tokens only **Count Components by Type**:
``` ```bash
Load Level 0 for design token reference # Universal components
jq '[.layout_templates[] | select(.component_type == "universal")] | length' \
.workflow/reference_style/{package_name}/layout-templates.json
# Specialized components
jq '[.layout_templates[] | select(.component_type == "specialized")] | length' \
.workflow/reference_style/{package_name}/layout-templates.json
``` ```
**Level 1** (12K): Tokens + layout templates **Extract Color Palette**:
``` ```bash
Load Level 1 for layout templates and design tokens # All colors with values
jq -r '.colors | to_entries[] | "\(.key): \(.value)"' \
.workflow/reference_style/{package_name}/design-tokens.json
# Primary colors only
jq -r '.colors | to_entries[] | select(.key | contains("Primary")) | "\(.key): \(.value)"' \
.workflow/reference_style/{package_name}/design-tokens.json
``` ```
**Level 2** (20K): Complete system with animations and preview **Find Specific Component**:
``` ```bash
Load Level 2 for complete design system with preview reference # Search by component name
jq '.layout_templates | keys[] | select(. | contains("button"))' \
.workflow/reference_style/{package_name}/layout-templates.json
# Get component structure
jq '.layout_templates["card"]' \
.workflow/reference_style/{package_name}/layout-templates.json
``` ```
### Common Use Cases **Animation Tokens** (if available):
```bash
# List all durations
jq '.duration' .workflow/reference_style/{package_name}/animation-tokens.json
**Implementing UI Components**: # List easing functions
- Load Level 1 for universal layout templates jq '.easing' .workflow/reference_style/{package_name}/animation-tokens.json
- **Only reference components with `component_type: "universal"`** in layout-templates.json ```
- Apply design tokens from design-tokens.json
- Adapt patterns to your project's specific requirements
**Ensuring Style Consistency**:
- Load Level 0 for design tokens
- Use design-tokens.json for colors, typography, spacing
- Check preview.html for visual reference (universal components only)
**Analyzing Component Patterns**:
- Load Level 2 for complete analysis
- Review layout-templates.json for component architecture
- **Filter for `component_type: "universal"` to exclude project-specific implementations**
- Check preview.html for implementation examples
**Animation Development**:
- Load Level 2 for animation tokens (if available)
- Reference animation-tokens.json for durations and easing
- Apply consistent timing and transitions
**⚠️ Critical Usage Rule**:
This is a **project-independent style reference system**. When working with layout-templates.json:
- **USE**: Components marked `component_type: "universal"` as reusable reference patterns
- **IGNORE**: Components marked `component_type: "specialized"` (project-specific implementations)
- **ADAPT**: All patterns should be customized for your specific project needs
--- ---
@@ -582,25 +506,11 @@ This is a **project-independent style reference system**. When working with layo
--- ---
## Regeneration ## Regenerate
To update this SKILL memory after package changes:
```bash ```bash
/memory:style-skill-memory {package_name} --regenerate /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** **Step 4: Verify SKILL.md Created**
@@ -624,7 +534,7 @@ bash(test -f .claude/skills/style-${package_name}/SKILL.md && echo "success" ||
## Completion Message ## Completion Message
Display extracted primary design references to user: Display concise completion summary to user:
``` ```
✅ SKILL memory generated successfully! ✅ SKILL memory generated successfully!
@@ -632,78 +542,55 @@ Display extracted primary design references to user:
Package: {package_name} Package: {package_name}
SKILL Location: .claude/skills/style-{package_name}/SKILL.md SKILL Location: .claude/skills/style-{package_name}/SKILL.md
📦 Package Details: 📦 Package Summary:
- Layout Templates: {component_count} total - Layout Templates: {component_count} total ({universal_count} universal, {specialized_count} specialized)
- Universal (reusable): {universal_count} - Universal Components: {show first 5 UNIVERSAL_COMPONENTS, then "+ X more"}
- Specialized (project-specific): {specialized_count}
- Universal Component Types: {show first 5 UNIVERSAL_COMPONENTS, then "+ X more"}
- Files: {file_count}
- Animation Tokens: {has_animations ? "✓ Available" : "Not available"} - Animation Tokens: {has_animations ? "✓ Available" : "Not available"}
🎨 Primary Design References Extracted: 🎨 Primary Design References:
{IF PRIMARY_COLORS exists: {IF PRIMARY_COLORS exists:
Colors: - Colors: {show first 3 PRIMARY_COLORS keys only, then "+ X more"}
{show first 3 PRIMARY_COLORS with key: value}
{if more than 3: + X more colors}
} }
{IF TYPOGRAPHY_FONTS exists: {IF TYPOGRAPHY_FONTS exists:
Typography: - Typography: {show all TYPOGRAPHY_FONTS keys only}
{show all TYPOGRAPHY_FONTS}
} }
{IF SPACING_SCALE exists: {IF SPACING_SCALE exists:
Spacing Scale: - Spacing Scale: {count SPACING_SCALE} tokens
{show first 3 SPACING_SCALE items}
{if more than 3: + X more spacing tokens}
} }
{IF BORDER_RADIUS exists: {IF BORDER_RADIUS exists:
Border Radius: - Border Radius: {count BORDER_RADIUS} tokens
{show all BORDER_RADIUS} }
{IF SHADOWS exists:
- Shadows: {count SHADOWS} tokens
} }
{IF HAS_ANIMATIONS: {IF HAS_ANIMATIONS:
Animation: - Animation: {count ANIMATION_DURATIONS} durations, {count EASING_FUNCTIONS} easing functions
Durations: {count ANIMATION_DURATIONS} tokens
Easing: {count EASING_FUNCTIONS} functions
} }
⚡ Progressive Loading Levels: ⚡ Progressive Loading:
- Level 0: Design Tokens (~5K tokens) - Level 0: Design Tokens (~5K) - Use jq commands for token queries
- Level 1: Tokens + Layout Templates (~12K tokens) - Level 1: + Universal Layouts (~12K) - Filter component_type: "universal"
- Level 2: Complete System (~20K tokens) - Level 2: + Complete System (~20K) - Includes animations and preview
💡 Usage: 💡 Quick Start:
Load design system context when working with: ```bash
- UI component implementation # List universal components
- Layout pattern analysis jq -r '.layout_templates | to_entries[] | select(.value.component_type == "universal") | .key' \
- Design token application .workflow/reference_style/{package_name}/layout-templates.json
- Style consistency validation
⚠️ IMPORTANT - Project Independence: # Extract colors
This is a **project-independent style reference system**: jq '.colors' .workflow/reference_style/{package_name}/design-tokens.json
- Only use universal components (component_type: "universal") as reference patterns
- Ignore specialized components (component_type: "specialized") - they are project-specific
- The extracted design references are REFERENCE VALUES, not fixed constraints
- Dynamically adjust colors, spacing, typography, and other tokens based on:
- Brand requirements and accessibility needs
- Platform-specific conventions and optimizations
- Context (light/dark mode, responsive breakpoints)
- User feedback and testing results
See SKILL.md for detailed adjustment guidelines and component filtering instructions. # View preview
cd .workflow/reference_style/{package_name} && python -m http.server 8080
```
🎯 Preview: 📋 Core Rules:
Open interactive showcase: 1. Project-Independent Reference - Tokens are adaptable starting points
file://{absolute_path}/.workflow/reference_style/{package_name}/preview.html 2. Universal Components Only - Filter component_type: "universal"
3. Token Adaptation - Adjust for brand, accessibility, platform, context
📋 Next Steps: See SKILL.md for detailed commands and usage examples.
1. Load appropriate level based on your task context
2. Review Primary Design References section for key design tokens
3. Apply design tokens with dynamic adjustments as needed
4. Reference layout-templates.json for component structures
5. Use Design Adaptation Strategies when modifying tokens
``` ```
--- ---
@@ -727,10 +614,11 @@ Open interactive showcase:
1. **Check Before Generate**: Verify package exists before attempting SKILL generation 1. **Check Before Generate**: Verify package exists before attempting SKILL generation
2. **Respect Existing SKILL**: Don't overwrite unless --regenerate flag provided 2. **Respect Existing SKILL**: Don't overwrite unless --regenerate flag provided
3. **Extract Primary References**: Always extract and display key design values (colors, typography, spacing, border radius, shadows, animations) 3. **Extract Primary References**: Extract key design values (colors, typography, spacing, border radius, shadows, animations) with values only, no verbose guidelines
4. **Include Adjustment Guidance**: Provide clear guidelines on when and how to dynamically adjust design tokens 4. **Embed jq Commands**: Include bash/jq commands in SKILL.md for dynamic loading, not external scripts
5. **Progressive Loading**: Always include all 3 levels (0-2) with clear token estimates 5. **Progressive Loading**: Include all 3 levels (0-2) with specific jq commands for each level
6. **Intelligent Description**: Extract component count and key features from metadata 6. **Intelligent Description**: Extract component count and key features from metadata
7. **Minimize Redundancy**: Single Core Rules section, no repeated warnings or usage guidelines
### SKILL Description Format ### SKILL Description Format
@@ -751,9 +639,9 @@ Open interactive showcase:
### Primary Design References Extraction ### Primary Design References Extraction
**Required Data Extraction** (from design-tokens.json): **Required Data Extraction** (from design-tokens.json):
- Colors: Primary, secondary, accent colors (top 3-5) - Colors: Primary, secondary, accent colors (top 5)
- Typography: Font families for headings and body text - Typography: Font families for headings and body text
- Spacing Scale: Base spacing values (xs, sm, md, lg, xl) - Spacing Scale: Base spacing values (first 5)
- Border Radius: All radius tokens - Border Radius: All radius tokens
- Shadows: Shadow definitions (top 3 elevation levels) - Shadows: Shadow definitions (top 3 elevation levels)
@@ -764,56 +652,69 @@ Open interactive showcase:
**Optional Data Extraction** (from animation-tokens.json if available): **Optional Data Extraction** (from animation-tokens.json if available):
- Animation Durations: All duration tokens - Animation Durations: All duration tokens
- Easing Functions: Top 3 easing functions - Easing Functions: All easing functions
**Extraction Format**: **Extraction Format**:
Use `jq` to extract tokens from JSON files. Each token should include key and value. Use `jq` to extract tokens from JSON files. Display key and value only, no verbose usage guidelines.
For component classification, filter by `component_type` field. For component classification, filter by `component_type` field.
### Dynamic Adjustment Guidelines ### Progressive Loading Structure with Embedded Commands
**Include in SKILL.md**:
1. **Usage Guidelines per Category**: Specific guidance for each token category
2. **Adjustment Strategies**: When to adjust design references
3. **Practical Examples**: Context-specific adaptation scenarios
4. **Best Practices**: How to maintain design system coherence while adjusting
### Progressive Loading Structure
**Level 0** (~5K tokens): **Level 0** (~5K tokens):
- design-tokens.json - Embed jq commands to query design-tokens.json
- Commands for extracting colors, typography, spacing categories
**Level 1** (~12K tokens): **Level 1** (~12K tokens):
- Level 0 files - Embed jq commands to filter universal components
- layout-templates.json - Commands for listing component names, getting specific components
- Include component_type filtering examples
**Level 2** (~20K tokens): **Level 2** (~20K tokens):
- Level 1 files - Embed jq commands for animation-tokens.json
- animation-tokens.json (if exists) - Include preview server command
- preview.html - Comprehensive query examples
- preview.css
### Optimized SKILL.md Structure
```
Package Overview (concise)
Core Rules (3 rules, consolidated from all previous warnings)
Primary Design References (values only, no usage guidelines)
Progressive Loading (with embedded jq commands per level)
Quick Reference (common query commands)
Package Structure
Regenerate command
```
**Removed Sections** (to eliminate redundancy):
- ❌ Usage Guidelines per token category
- ❌ Design Adaptation Strategies section
- ❌ Interactive Preview section (condensed into Level 2)
- ❌ Usage Guidelines section
- ❌ Related Commands section (condensed into Regenerate)
- ❌ All repeated Project Independence warnings
--- ---
## Benefits ## Benefits
- **Project Independence**: Clear separation between universal (reusable) and specialized (project-specific) components - **60%+ Content Reduction**: Optimized from ~870 to ~250 lines, eliminating all redundant content
- **Component Filtering**: Automatic classification helps identify which patterns are truly reusable - **No Content Overlap**: Single Core Rules section replaces 4+ repeated warnings
- **Fast Context Loading**: Progressive levels for efficient token usage - **Embedded Commands**: jq commands in SKILL.md enable dynamic loading without external scripts
- **Primary Design References**: Extracted key design values (colors, typography, spacing, etc.) displayed prominently - **Package-Specific**: Each SKILL contains exact commands for its package structure
- **Dynamic Adjustment Guidance**: Clear instructions on when and how to adjust design tokens - **Fast Context Loading**: Progressive levels (5K/12K/20K tokens) with precise jq queries
- **Component Filtering**: Clear universal/specialized distinction with filtering commands
- **Primary Design References**: Key design values displayed without verbose usage guidelines
- **Self-Contained**: All loading logic embedded, no dependencies on external scripts
- **Intelligent Triggering**: Keywords optimize SKILL activation - **Intelligent Triggering**: Keywords optimize SKILL activation
- **Complete Reference**: All package files accessible through SKILL
- **Easy Regeneration**: Simple --regenerate flag for updates - **Easy Regeneration**: Simple --regenerate flag for updates
- **Clear Structure**: Organized levels by use case with component type filtering
- **Practical Usage Guidelines**: Context-specific adjustment strategies and component selection criteria
--- ---
## Architecture ## Architecture
``` ```
style-skill-memory style-skill-memory (Optimized)
├─ Phase 1: Validate ├─ Phase 1: Validate
│ ├─ Parse package name from argument or auto-detect │ ├─ Parse package name from argument or auto-detect
│ ├─ Check package exists in .workflow/reference_style/ │ ├─ Check package exists in .workflow/reference_style/
@@ -821,50 +722,54 @@ style-skill-memory
│ │
├─ Phase 2: Read Package Data & Extract Primary References ├─ Phase 2: Read Package Data & Extract Primary References
│ ├─ Count components from layout-templates.json │ ├─ Count components from layout-templates.json
│ ├─ Extract component types list │ ├─ Extract universal/specialized counts (component_type filtering)
│ ├─ Extract primary colors from design-tokens.json (top 3-5) │ ├─ Extract universal component names (first 10)
│ ├─ Extract typography (font families) │ ├─ Extract primary colors (top 5, key:value only)
│ ├─ Extract spacing scale (base values) │ ├─ Extract typography (font families, key:value only)
│ ├─ Extract border radius tokens │ ├─ Extract spacing scale (first 5, key:value only)
│ ├─ Extract shadow definitions (top 3) │ ├─ Extract border radius tokens (all, key:value only)
│ ├─ Extract animation tokens (if available) │ ├─ Extract shadow definitions (top 3, key:value only)
│ ├─ Extract animation tokens (if available, key:value only)
│ └─ Count total files in package │ └─ Count total files in package
│ │
└─ Phase 3: Generate SKILL.md └─ Phase 3: Generate Optimized SKILL.md
├─ Create SKILL directory ├─ Create SKILL directory
├─ Generate intelligent description with keywords ├─ Generate intelligent description with keywords
├─ Write SKILL.md with complete structure: ├─ Write SKILL.md with optimized structure:
│ ├─ Package Overview │ ├─ Package Overview (concise)
│ ├─ Primary Design References │ ├─ Core Rules (3 rules, single consolidated section)
│ │ ├─ Colors with usage guidelines │ ├─ Primary Design References (values only, no usage guidelines)
│ │ ├─ Typography with usage guidelines │ ├─ Progressive Loading (3 levels with embedded jq commands)
│ │ ├─ Spacing with usage guidelines │ │ ├─ Level 0: jq commands for design-tokens.json
│ │ ├─ Border Radius with usage guidelines │ │ ├─ Level 1: jq commands for universal component filtering
│ │ ├─ Shadows with usage guidelines │ │ └─ Level 2: jq commands for animation tokens + preview
│ │ └─ Animation & Timing (if available) │ ├─ Quick Reference (common jq query commands)
│ ├─ Design Adaptation Strategies
│ │ ├─ When to adjust design references
│ │ └─ How to apply adjustments
│ ├─ Progressive Loading (3 levels)
│ ├─ Interactive Preview
│ ├─ Usage Guidelines
│ ├─ Package Structure │ ├─ Package Structure
│ ├─ Regeneration │ └─ Regenerate command
│ └─ Related Commands
├─ Verify SKILL.md created successfully ├─ Verify SKILL.md created successfully
└─ Display completion message with extracted design references └─ Display concise completion message
Data Flow: Data Flow:
design-tokens.json → jq extraction → PRIMARY_COLORS, TYPOGRAPHY_FONTS, design-tokens.json → jq extraction → PRIMARY_COLORS, TYPOGRAPHY_FONTS,
SPACING_SCALE, BORDER_RADIUS, SHADOWS SPACING_SCALE, BORDER_RADIUS, SHADOWS
(values only, no guidelines)
animation-tokens.json → jq extraction → ANIMATION_DURATIONS, EASING_FUNCTIONS animation-tokens.json → jq extraction → ANIMATION_DURATIONS, EASING_FUNCTIONS
(if available)
layout-templates.json → jq extraction → COMPONENT_COUNT, UNIVERSAL_COUNT, layout-templates.json → jq extraction → COMPONENT_COUNT, UNIVERSAL_COUNT,
SPECIALIZED_COUNT, UNIVERSAL_COMPONENTS SPECIALIZED_COUNT, UNIVERSAL_COMPONENTS
→ component_type filtering → Universal vs Specialized classification → component_type filtering → Universal vs Specialized
Extracted data → SKILL.md generation → Primary Design References section Extracted data → SKILL.md generation → Package Overview
→ Component Classification section → Core Rules (consolidated warnings)
→ Dynamic Adjustment Guidelines → Primary Design References (concise)
→ Project Independence warnings → Embedded jq commands (per level)
→ Completion message display → Quick Reference commands
→ Concise completion message
Optimization Impact:
✅ 60%+ content reduction (~870 → ~250 lines)
✅ Zero content overlap (1 Core Rules section vs 4+ repeated warnings)
✅ Embedded commands (no external script dependencies)
✅ Package-specific queries (exact paths in jq commands)
✅ Self-contained loading (all logic in SKILL.md)
``` ```