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

refactor(memory): update package data handling and enhance component counting in style SKILL memory generation

Browse Source
This commit is contained in:
catlog22
2025-11-11 21:04:06 +08:00
parent e5349146df
commit 3cd8c18182
1 changed files with 92 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -57,7 +57,7 @@ package-name Style reference package name (required)
```json ```json
[ [
{"content": "Validate style reference package", "status": "in_progress", "activeForm": "Validating package"}, {"content": "Validate style reference package", "status": "in_progress", "activeForm": "Validating package"},
{"content": "Read package metadata and documentation", "status": "pending", "activeForm": "Reading metadata"}, {"content": "Read package data and count components", "status": "pending", "activeForm": "Reading package data"},
{"content": "Generate SKILL.md with progressive loading", "status": "pending", "activeForm": "Generating SKILL.md"} {"content": "Generate SKILL.md with progressive loading", "status": "pending", "activeForm": "Generating SKILL.md"}
] ]
``` ```
@@ -117,7 +117,7 @@ if (regenerate_flag && skill_exists) {
```json ```json
[ [
{"content": "Validate style reference package", "status": "completed", "activeForm": "Validating package"}, {"content": "Validate style reference package", "status": "completed", "activeForm": "Validating package"},
{"content": "Read package metadata and documentation", "status": "in_progress", "activeForm": "Reading metadata"} {"content": "Read package data and count components", "status": "in_progress", "activeForm": "Reading package data"}
] ]
``` ```
@@ -125,61 +125,53 @@ if (regenerate_flag && skill_exists) {
--- ---
### Phase 2: Read Package Metadata ### Phase 2: Read Package Data
**Purpose**: Extract metadata and documentation for SKILL description generation **Purpose**: Extract package information for SKILL description generation
**Step 1: Read metadata.json** **Step 1: Count Components**
```bash ```bash
Read(file_path=".workflow/reference_style/${package_name}/metadata.json") bash(jq '.layout_templates | length' .workflow/reference_style/${package_name}/layout-templates.json 2>/dev/null || echo 0)
```
**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` Store result as `component_count`
**Step 4: Check Available Files** **Step 2: Read Design Tokens Summary**
```bash ```bash
bash(cd .workflow/reference_style/${package_name} && ls -1 *.json *.md *.html *.css 2>/dev/null | wc -l) Read(file_path=".workflow/reference_style/${package_name}/design-tokens.json")
```
**Extract Information**:
- Available token categories (colors, typography, spacing, etc.)
- Token count per category
**Step 3: Check Available Files**
```bash
bash(cd .workflow/reference_style/${package_name} && ls -1 *.json *.html *.css 2>/dev/null | wc -l)
``` ```
Store result as `file_count` Store result as `file_count`
**Step 4: Check Optional Animation Tokens**
```bash
bash(test -f .workflow/reference_style/${package_name}/animation-tokens.json && echo "available" || echo "not_available")
```
Store result as `has_animations`
**Summary Data**: **Summary Data**:
- `COMPONENT_COUNT`: Number of components in catalog - `COMPONENT_COUNT`: Number of components in layout templates
- `FILE_COUNT`: Total files in package - `FILE_COUNT`: Total files in package
- `VERSION`: Package version (from metadata.json) - `HAS_ANIMATIONS`: Whether animation tokens are available
- `DESCRIPTION`: Package description (from metadata.json)
**TodoWrite Update**: **TodoWrite Update**:
```json ```json
[ [
{"content": "Read package metadata and documentation", "status": "completed", "activeForm": "Reading metadata"}, {"content": "Read package data and count components", "status": "completed", "activeForm": "Reading package data"},
{"content": "Generate SKILL.md with progressive loading", "status": "in_progress", "activeForm": "Generating SKILL.md"} {"content": "Generate SKILL.md with progressive loading", "status": "in_progress", "activeForm": "Generating SKILL.md"}
] ]
``` ```
@@ -202,18 +194,18 @@ bash(mkdir -p .claude/skills/style-${package_name})
**Format**: **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. {package_name} design system with {component_count} layout templates and interactive preview (located at .workflow/reference_style/{package_name}). Load when working with UI components, design tokens, layout patterns, analyzing component structures, or implementing visual consistency.
``` ```
**Key Elements**: **Key Elements**:
- **Component Count**: Emphasize available component catalog - **Component Count**: Emphasize available layout templates
- **Path Reference**: Precise package location - **Path Reference**: Precise package location
- **Trigger Keywords**: UI components, design tokens, style guidelines, design patterns - **Trigger Keywords**: UI components, design tokens, layout patterns, component structures
- **Action Coverage**: working with, analyzing, implementing - **Action Coverage**: working with, analyzing, implementing
**Example**: **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. main-app-style-v1 design system with 8 layout templates and interactive preview (located at .workflow/reference_style/main-app-style-v1). Load when working with UI components, design tokens, layout patterns, analyzing component structures, or implementing visual consistency.
``` ```
**Step 3: Write SKILL.md** (Use Write tool) **Step 3: Write SKILL.md** (Use Write tool)
@@ -222,7 +214,6 @@ main-app-style-v1 design system with 8 components and interactive preview (locat
--- ---
name: style-{package_name} name: style-{package_name}
description: {intelligent description from Step 2} description: {intelligent description from Step 2}
version: {version from metadata.json}
--- ---
# {Package Name} Style SKILL Package # {Package Name} Style SKILL Package
@@ -231,64 +222,50 @@ version: {version from metadata.json}
## Package Overview ## Package Overview
Style reference package with comprehensive design system documentation and interactive component preview. Style reference package extracted from codebase with layout templates, design tokens, and interactive preview.
**Package Details**: **Package Details**:
- Package: {package_name} - Package: {package_name}
- Version: {version} - Layout Templates: {component_count}
- Components: {component_count}
- Files: {file_count} - Files: {file_count}
- Generated: {generatedAt} - Animation Tokens: {has_animations ? "✓ Available" : "Not available"}
## Progressive Loading ## Progressive Loading
### Level 0: Quick Start (~2K tokens) ### Level 0: Design Tokens (~5K tokens)
Essential overview and package information. Essential design token system for consistent styling.
**Files**: **Files**:
- [README](../../../.workflow/reference_style/{package_name}/README.md) - Package overview and usage - [Design Tokens](../../../.workflow/reference_style/{package_name}/design-tokens.json) - Colors, typography, spacing, shadows, borders
- [Metadata](../../../.workflow/reference_style/{package_name}/metadata.json) - Source and package info
**Use when**: Quick reference, understanding package structure **Use when**: Quick token reference, applying consistent styles, color/typography queries
--- ---
### Level 1: Design Tokens (~8K tokens) ### Level 1: Layout Templates (~12K tokens)
Complete design token system with style guidelines. Component layout patterns extracted from codebase.
**Files**: **Files**:
- [Design Tokens](../../../.workflow/reference_style/{package_name}/design-tokens.json) - Colors, typography, spacing, shadows - Level 0 files
- [Style Guide](../../../.workflow/reference_style/{package_name}/style-guide.md) - Design philosophy and usage guidelines - [Layout Templates](../../../.workflow/reference_style/{package_name}/layout-templates.json) - Component structures with HTML/CSS patterns
**Use when**: Implementing UI, applying design tokens, style consistency **Use when**: Building components, understanding component architecture, implementing layouts
--- ---
### Level 2: Components & Patterns (~15K tokens) ### Level 2: Complete System (~20K tokens)
Full component catalog with patterns, variants, and states. Full design system with animations and interactive preview.
**Files**: **Files**:
- Level 1 files - All 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)_ - [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)
**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) - [Preview CSS](../../../.workflow/reference_style/{package_name}/preview.css) - Showcase styling (reference only)
**Use when**: Comprehensive analysis, complete design system understanding, implementation validation **Use when**: Comprehensive analysis, animation development, complete design system understanding
--- ---
@@ -317,45 +294,40 @@ python -m http.server 8080
### Loading Levels ### Loading Levels
**Level 0** (2K): Quick reference when you need basic package info **Level 0** (5K): Design tokens only
``` ```
Load Level 0 for package overview Load Level 0 for design token reference
``` ```
**Level 1** (8K): Design token implementation **Level 1** (12K): Tokens + layout templates
``` ```
Load Level 1 for design tokens and style guide Load Level 1 for layout templates and design tokens
``` ```
**Level 2** (15K): Component development **Level 2** (20K): Complete system with animations and preview
``` ```
Load Level 2 for component patterns and animations Load Level 2 for complete design system with preview reference
```
**Level 3** (25K): Comprehensive understanding
```
Load Level 3 for complete design system reference
``` ```
### Common Use Cases ### Common Use Cases
**Implementing UI Components**: **Implementing UI Components**:
- Load Level 2 for component patterns - Load Level 1 for layout templates
- Reference component-patterns.json for DOM structure and CSS classes - Reference layout-templates.json for component structures
- Apply design tokens from design-tokens.json - Apply design tokens from design-tokens.json
**Ensuring Style Consistency**: **Ensuring Style Consistency**:
- Load Level 1 for design tokens - Load Level 0 for design tokens
- Use style-guide.md for design philosophy - Use design-tokens.json for colors, typography, spacing
- Check preview.html for visual reference - Check preview.html for visual reference
**Analyzing Design Patterns**: **Analyzing Component Patterns**:
- Load Level 3 for complete analysis - Load Level 2 for complete analysis
- Review component-patterns.json for architecture - Review layout-templates.json for component architecture
- Check preview.html for implementation examples - Check preview.html for implementation examples
**Animation Development**: **Animation Development**:
- Load Level 2 for animation tokens - Load Level 2 for animation tokens (if available)
- Reference animation-tokens.json for durations and easing - Reference animation-tokens.json for durations and easing
- Apply consistent timing and transitions - Apply consistent timing and transitions
@@ -365,14 +337,11 @@ Load Level 3 for complete design system reference
``` ```
.workflow/reference_style/{package_name}/ .workflow/reference_style/{package_name}/
├── README.md # Package overview ├── layout-templates.json # Layout templates from codebase
├── metadata.json # Package metadata ├── design-tokens.json # Design token system
├── design-tokens.json # Design token system ├── animation-tokens.json # Animation tokens (optional)
├── style-guide.md # Style guide documentation ├── preview.html # Interactive showcase
├── component-patterns.json # Component catalog └── preview.css # Showcase styling
├── animation-tokens.json # Animation tokens (optional)
├── preview.html # Interactive showcase
└── preview.css # Showcase styling
``` ```
--- ---
@@ -408,7 +377,7 @@ bash(test -f .claude/skills/style-${package_name}/SKILL.md && echo "success" ||
```json ```json
[ [
{"content": "Validate style reference package", "status": "completed", "activeForm": "Validating package"}, {"content": "Validate style reference package", "status": "completed", "activeForm": "Validating package"},
{"content": "Read package metadata and documentation", "status": "completed", "activeForm": "Reading metadata"}, {"content": "Read package data and count components", "status": "completed", "activeForm": "Reading package data"},
{"content": "Generate SKILL.md with progressive loading", "status": "completed", "activeForm": "Generating SKILL.md"} {"content": "Generate SKILL.md with progressive loading", "status": "completed", "activeForm": "Generating SKILL.md"}
] ]
``` ```
@@ -426,22 +395,21 @@ Package: {package_name}
SKILL Location: .claude/skills/style-{package_name}/SKILL.md SKILL Location: .claude/skills/style-{package_name}/SKILL.md
Package Details: Package Details:
- Components: {component_count} - Layout Templates: {component_count}
- Files: {file_count} - Files: {file_count}
- Version: {version} - Animation Tokens: {has_animations ? "✓ Available" : "Not available"}
Progressive Loading Levels: Progressive Loading Levels:
- Level 0: Quick Start (~2K tokens) - Level 0: Design Tokens (~5K tokens)
- Level 1: Design Tokens (~8K tokens) - Level 1: Tokens + Layout Templates (~12K tokens)
- Level 2: Components & Patterns (~15K tokens) - Level 2: Complete System (~20K tokens)
- Level 3: Complete Reference (~25K tokens)
Usage: Usage:
Load design system context when working with: Load design system context when working with:
- UI component implementation - UI component implementation
- Layout pattern analysis
- Design token application - Design token application
- Style consistency validation - Style consistency validation
- Design pattern analysis
Preview: Preview:
Open interactive showcase: Open interactive showcase:
@@ -449,7 +417,7 @@ Open interactive showcase:
Next Steps: Next Steps:
1. Load appropriate level based on your task 1. Load appropriate level based on your task
2. Reference component-patterns.json for implementation 2. Reference layout-templates.json for component structures
3. Use design-tokens.json for consistent styling 3. Use design-tokens.json for consistent styling
``` ```
@@ -463,8 +431,8 @@ Next Steps:
|-------|-------|------------| |-------|-------|------------|
| Package not found | Invalid package name or package doesn't exist | Run codify-style first to create package | | 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 | | SKILL already exists | SKILL.md already generated | Use --regenerate to force regeneration |
| Missing metadata.json | Incomplete package | Verify package integrity, re-run codify-style | | Missing layout-templates.json | Incomplete package | Verify package integrity, re-run codify-style |
| Invalid metadata format | Corrupted metadata.json | Regenerate package with codify-style | | Invalid JSON format | Corrupted package files | Regenerate package with codify-style |
--- ---
@@ -481,34 +449,30 @@ Next Steps:
**Template**: **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. {package_name} design system with {component_count} layout templates and interactive preview (located at .workflow/reference_style/{package_name}). Load when working with UI components, design tokens, layout patterns, analyzing component structures, or implementing visual consistency.
``` ```
**Required Elements**: **Required Elements**:
- Package name - Package name
- Component count - Layout template count
- Location (full path) - Location (full path)
- Trigger keywords (UI components, design tokens, style guidelines, design patterns) - Trigger keywords (UI components, design tokens, layout patterns, component structures)
- Action verbs (working with, analyzing, implementing) - Action verbs (working with, analyzing, implementing)
### Progressive Loading Structure ### Progressive Loading Structure
**Level 0** (~2K tokens): **Level 0** (~5K tokens):
- README.md
- metadata.json
**Level 1** (~8K tokens):
- Level 0 files
- design-tokens.json - design-tokens.json
- style-guide.md
**Level 2** (~15K tokens): **Level 1** (~12K tokens):
- Level 0 files
- layout-templates.json
**Level 2** (~20K tokens):
- Level 1 files - Level 1 files
- component-patterns.json
- animation-tokens.json (if exists) - animation-tokens.json (if exists)
- preview.html
**Level 3** (~25K tokens): - preview.css
- All files including preview.html/css
--- ---
@@ -525,10 +489,10 @@ Next Steps:
``` ```
style-skill-memory style-skill-memory
├─ Phase 1: Validate (check package exists, check SKILL exists) ├─ Phase 1: Validate (check package exists, check SKILL exists)
├─ Phase 2: Read Metadata (extract metadata.json, README.md, count components) ├─ Phase 2: Read Package Data (count components from layout-templates.json, check animations)
└─ Phase 3: Generate SKILL.md (write SKILL with progressive loading) └─ Phase 3: Generate SKILL.md (write SKILL with progressive loading)
No external commands called No external commands called
Direct file reading and writing Direct file reading and writing
Smart description generation from metadata Smart description generation from package data
``` ```