Initial commit: Clean DSS implementation
Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm
Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)
Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability
Migration completed: $(date)
🤖 Clean migration with full functionality preserved
This commit is contained in:
Digital Production Factory
183
dss-claude-plugin/skills/component-audit/SKILL.md
Normal file
183
dss-claude-plugin/skills/component-audit/SKILL.md
Normal file
@@ -0,0 +1,183 @@
|
||||
---
|
||||
name: Component Audit
|
||||
description: Audit React components for design system adoption and identify refactoring opportunities
|
||||
globs:
|
||||
- "**/*.tsx"
|
||||
- "**/*.jsx"
|
||||
- "**/*.vue"
|
||||
- "**/components/**"
|
||||
- "**/src/**"
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
# Component Audit
|
||||
|
||||
## Overview
|
||||
|
||||
This skill provides deep analysis of React/Vue components to identify design system adoption opportunities, hardcoded values, and refactoring recommendations.
|
||||
|
||||
## When to Use
|
||||
|
||||
Use this skill when the user asks to:
|
||||
- Audit components for design system readiness
|
||||
- Find hardcoded values in components
|
||||
- Identify component consolidation opportunities
|
||||
- Analyze component dependencies
|
||||
- Find styling inconsistencies in components
|
||||
|
||||
## Audit Categories
|
||||
|
||||
### 1. Hardcoded Values
|
||||
Identifies values that should be tokens:
|
||||
- Inline colors (`#ffffff`, `rgb()`)
|
||||
- Pixel values for spacing
|
||||
- Font sizes and weights
|
||||
- Border radii and shadows
|
||||
|
||||
### 2. Component Patterns
|
||||
Analyzes component structure:
|
||||
- Repeated component patterns
|
||||
- Similar components that could merge
|
||||
- Props that could use design tokens
|
||||
- Styling approaches used
|
||||
|
||||
### 3. Dependency Analysis
|
||||
Maps component relationships:
|
||||
- Import dependencies
|
||||
- Shared utilities
|
||||
- Style dependencies
|
||||
- Context usage
|
||||
|
||||
### 4. Accessibility
|
||||
Basic accessibility checks:
|
||||
- Missing alt texts
|
||||
- Color contrast issues
|
||||
- Focus management
|
||||
- ARIA attributes
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **Run Audit**
|
||||
```
|
||||
Use dss_audit_components with component directory path
|
||||
```
|
||||
|
||||
2. **Review Findings**
|
||||
- Check hardcoded values count
|
||||
- Review component patterns
|
||||
- Examine dependency graph
|
||||
|
||||
3. **Prioritize Issues**
|
||||
- High impact, low effort first
|
||||
- Group by category
|
||||
- Consider team capacity
|
||||
|
||||
4. **Create Refactoring Plan**
|
||||
- Token creation tasks
|
||||
- Component consolidation
|
||||
- Style migration steps
|
||||
|
||||
## Example Interaction
|
||||
|
||||
**User:** "Audit my components folder for design system issues"
|
||||
|
||||
**Assistant Response:**
|
||||
```
|
||||
I'll audit your components for design system adoption.
|
||||
|
||||
[Uses dss_audit_components tool]
|
||||
|
||||
**Component Audit Results:**
|
||||
|
||||
**Summary:**
|
||||
- 45 components analyzed
|
||||
- 127 hardcoded values found
|
||||
- 8 component consolidation opportunities
|
||||
- 23 accessibility issues
|
||||
|
||||
**Hardcoded Values (Top Issues):**
|
||||
|
||||
| File | Line | Issue | Suggested Token |
|
||||
|------|------|-------|-----------------|
|
||||
| Button.tsx | 12 | color: #0066cc | --color-primary |
|
||||
| Card.tsx | 8 | padding: 16px | --spacing-md |
|
||||
| Header.tsx | 15 | font-size: 24px | --font-size-xl |
|
||||
| Modal.tsx | 22 | border-radius: 8px | --radius-md |
|
||||
|
||||
**Component Consolidation:**
|
||||
1. `PrimaryButton`, `SecondaryButton`, `GhostButton`
|
||||
-> Consolidate to `Button` with variant prop
|
||||
|
||||
2. `SmallCard`, `LargeCard`, `FeaturedCard`
|
||||
-> Consolidate to `Card` with size prop
|
||||
|
||||
**Dependency Issues:**
|
||||
- Circular dependency: Header -> Nav -> Header
|
||||
- Deep nesting: Page -> Layout -> Container -> Box (4 levels)
|
||||
|
||||
**Recommendations:**
|
||||
1. Create color tokens (reduces 89 hardcoded colors)
|
||||
2. Implement spacing scale (standardizes 34 spacing values)
|
||||
3. Consolidate button components (removes 2 duplicates)
|
||||
|
||||
Would you like me to generate a detailed refactoring plan?
|
||||
```
|
||||
|
||||
## Issue Severity Levels
|
||||
|
||||
| Level | Description | Action |
|
||||
|-------|-------------|--------|
|
||||
| Critical | Breaks design consistency | Fix immediately |
|
||||
| High | Significant inconsistency | Fix in next sprint |
|
||||
| Medium | Minor inconsistency | Plan for refactoring |
|
||||
| Low | Optimization opportunity | Nice to have |
|
||||
|
||||
## Related Tools
|
||||
|
||||
- `dss_audit_components` - Main audit tool
|
||||
- `dss_analyze_project` - Broader project analysis
|
||||
- `dss_find_quick_wins` - Find easy fixes
|
||||
- `dss_extract_tokens` - Create tokens from findings
|
||||
|
||||
## Output Structure
|
||||
|
||||
```json
|
||||
{
|
||||
"components_analyzed": 45,
|
||||
"hardcoded_values": [
|
||||
{
|
||||
"file": "Button.tsx",
|
||||
"line": 12,
|
||||
"value": "#0066cc",
|
||||
"type": "color",
|
||||
"suggestion": "--color-primary"
|
||||
}
|
||||
],
|
||||
"consolidation_opportunities": [
|
||||
{
|
||||
"components": ["PrimaryButton", "SecondaryButton"],
|
||||
"suggested_name": "Button",
|
||||
"variant_prop": "variant"
|
||||
}
|
||||
],
|
||||
"dependency_issues": [],
|
||||
"accessibility_issues": []
|
||||
}
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Run Regularly**
|
||||
- Audit before major refactors
|
||||
- Include in CI/CD pipeline
|
||||
- Track metrics over time
|
||||
|
||||
2. **Prioritize Fixes**
|
||||
- Start with high-impact, low-effort
|
||||
- Group related changes
|
||||
- Document decisions
|
||||
|
||||
3. **Team Alignment**
|
||||
- Share audit results
|
||||
- Discuss consolidation decisions
|
||||
- Update component guidelines
|
||||
112
dss-claude-plugin/skills/design-system-analysis/SKILL.md
Normal file
112
dss-claude-plugin/skills/design-system-analysis/SKILL.md
Normal file
@@ -0,0 +1,112 @@
|
||||
---
|
||||
name: Design System Analysis
|
||||
description: Analyze codebases for design patterns, component usage, and tokenization opportunities
|
||||
globs:
|
||||
- "**/*.css"
|
||||
- "**/*.scss"
|
||||
- "**/*.tsx"
|
||||
- "**/*.jsx"
|
||||
- "**/*.vue"
|
||||
- "**/tailwind.config.*"
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
# Design System Analysis
|
||||
|
||||
## Overview
|
||||
|
||||
This skill provides comprehensive analysis of existing codebases to identify design patterns, component usage, and opportunities for design system adoption.
|
||||
|
||||
## When to Use
|
||||
|
||||
Use this skill when the user asks to:
|
||||
- Analyze a project for design system opportunities
|
||||
- Audit an existing codebase for design patterns
|
||||
- Scan a React/Vue project for component patterns
|
||||
- Identify style inconsistencies
|
||||
- Find tokenization opportunities
|
||||
|
||||
## Capabilities
|
||||
|
||||
### 1. Project Scanning
|
||||
- Scans entire project structure
|
||||
- Identifies style files (CSS, SCSS, Tailwind)
|
||||
- Locates component files (React, Vue)
|
||||
- Builds file dependency map
|
||||
|
||||
### 2. Style Analysis
|
||||
- Extracts color values and patterns
|
||||
- Identifies typography scales
|
||||
- Finds spacing patterns
|
||||
- Detects shadow and border patterns
|
||||
|
||||
### 3. Component Analysis
|
||||
- Identifies React/Vue components
|
||||
- Maps component dependencies
|
||||
- Finds repeated patterns
|
||||
- Detects hardcoded values
|
||||
|
||||
### 4. Dependency Graph
|
||||
- Builds component relationship graph
|
||||
- Identifies shared dependencies
|
||||
- Finds circular dependencies
|
||||
- Maps style imports
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **Start Analysis**
|
||||
```
|
||||
Use the dss_analyze_project tool with the project path
|
||||
```
|
||||
|
||||
2. **Review Results**
|
||||
- Check scan summary for file counts
|
||||
- Review style patterns found
|
||||
- Examine component analysis
|
||||
- Note dependency relationships
|
||||
|
||||
3. **Generate Recommendations**
|
||||
- Prioritize findings by impact
|
||||
- Suggest token candidates
|
||||
- Recommend component refactoring
|
||||
- Identify quick wins
|
||||
|
||||
## Example Interaction
|
||||
|
||||
**User:** "Analyze my React app at /home/user/my-app for design system adoption"
|
||||
|
||||
**Assistant Response:**
|
||||
```
|
||||
I'll analyze your React application for design system opportunities.
|
||||
|
||||
[Uses dss_analyze_project tool]
|
||||
|
||||
Based on the analysis:
|
||||
|
||||
**Summary:**
|
||||
- 47 style files scanned
|
||||
- 23 React components found
|
||||
- 156 unique color values detected
|
||||
- 12 typography variations identified
|
||||
|
||||
**Key Findings:**
|
||||
1. Color Inconsistency: Found 156 color values that could be reduced to 12 design tokens
|
||||
2. Spacing Patterns: 8 different spacing scales in use
|
||||
3. Component Duplication: 3 button variants that could be consolidated
|
||||
|
||||
**Recommendations:**
|
||||
1. Create a color token system (high impact, medium effort)
|
||||
2. Standardize spacing scale to 4px grid (medium impact, low effort)
|
||||
3. Create a Button component with variants (high impact, high effort)
|
||||
```
|
||||
|
||||
## Related Tools
|
||||
|
||||
- `dss_analyze_project` - Main analysis tool
|
||||
- `dss_extract_tokens` - Extract tokens from analysis
|
||||
- `dss_find_quick_wins` - Find low-effort improvements
|
||||
|
||||
## Dependencies
|
||||
|
||||
- DSS analyze module (ProjectScanner, ReactAnalyzer, StyleAnalyzer)
|
||||
- DSS models (Project, ProjectMetadata)
|
||||
188
dss-claude-plugin/skills/figma-sync/SKILL.md
Normal file
188
dss-claude-plugin/skills/figma-sync/SKILL.md
Normal file
@@ -0,0 +1,188 @@
|
||||
---
|
||||
name: Figma Sync
|
||||
description: Synchronize design tokens from Figma files using the Figma API
|
||||
globs:
|
||||
- "**/figma-tokens/**"
|
||||
- "**/design-tokens/**"
|
||||
- "**/*.figma.json"
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
# Figma Sync
|
||||
|
||||
## Overview
|
||||
|
||||
This skill enables synchronization of design tokens from Figma files. It extracts colors, typography, spacing, and other design decisions from Figma and converts them to code-ready tokens.
|
||||
|
||||
## When to Use
|
||||
|
||||
Use this skill when the user asks to:
|
||||
- Import tokens from Figma
|
||||
- Sync design decisions with code
|
||||
- Extract colors from Figma file
|
||||
- Update tokens from Figma changes
|
||||
- Connect Figma to the design system
|
||||
|
||||
## Prerequisites
|
||||
|
||||
### Figma Token
|
||||
Set the `FIGMA_TOKEN` environment variable:
|
||||
```bash
|
||||
export FIGMA_TOKEN=your-figma-personal-access-token
|
||||
```
|
||||
|
||||
### File Key
|
||||
Get the file key from Figma URL:
|
||||
```
|
||||
https://www.figma.com/file/XXXXXXXXXXXXXX/Design-System
|
||||
^^^^^^^^^^^^^^
|
||||
This is the file key
|
||||
```
|
||||
|
||||
## Extracted Token Types
|
||||
|
||||
| Type | Figma Source | Token Output |
|
||||
|------|--------------|--------------|
|
||||
| Colors | Fill colors, Strokes | color.* tokens |
|
||||
| Typography | Text styles | typography.* tokens |
|
||||
| Spacing | Auto-layout gaps | spacing.* tokens |
|
||||
| Shadows | Drop shadows | shadow.* tokens |
|
||||
| Radii | Corner radius | radius.* tokens |
|
||||
| Borders | Stroke weights | border.* tokens |
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **Get Figma File Key**
|
||||
- Open Figma file in browser
|
||||
- Copy file key from URL
|
||||
|
||||
2. **Sync Tokens**
|
||||
```
|
||||
Use dss_sync_figma with file_key
|
||||
```
|
||||
|
||||
3. **Review Extracted Tokens**
|
||||
- Check token names
|
||||
- Verify values
|
||||
- Review categories
|
||||
|
||||
4. **Generate Theme Files**
|
||||
- Use theme generation skill
|
||||
- Export to CSS/SCSS/JSON
|
||||
|
||||
## Example Interaction
|
||||
|
||||
**User:** "Sync design tokens from our Figma file"
|
||||
|
||||
**Assistant Response:**
|
||||
```
|
||||
I'll sync tokens from your Figma file.
|
||||
|
||||
First, I need the Figma file key. You can find it in the URL:
|
||||
https://www.figma.com/file/[FILE_KEY]/Design-System
|
||||
|
||||
What's your file key?
|
||||
|
||||
**User:** abc123xyz456
|
||||
|
||||
[Uses dss_sync_figma with file_key: abc123xyz456]
|
||||
|
||||
**Figma Sync Results:**
|
||||
|
||||
**Extracted Tokens:**
|
||||
|
||||
Colors (24 tokens):
|
||||
- primary/500: #0066CC
|
||||
- primary/400: #3385D6
|
||||
- primary/600: #0052A3
|
||||
- secondary/500: #6C757D
|
||||
- success/500: #28A745
|
||||
- error/500: #DC3545
|
||||
|
||||
Typography (8 styles):
|
||||
- heading/h1: Inter Bold 48px/56px
|
||||
- heading/h2: Inter Bold 36px/44px
|
||||
- heading/h3: Inter SemiBold 24px/32px
|
||||
- body/regular: Inter Regular 16px/24px
|
||||
- body/small: Inter Regular 14px/20px
|
||||
|
||||
Spacing (6 values):
|
||||
- xs: 4px
|
||||
- sm: 8px
|
||||
- md: 16px
|
||||
- lg: 24px
|
||||
- xl: 32px
|
||||
- 2xl: 48px
|
||||
|
||||
Shadows (3 styles):
|
||||
- sm: 0 1px 2px rgba(0,0,0,0.05)
|
||||
- md: 0 4px 6px rgba(0,0,0,0.1)
|
||||
- lg: 0 10px 15px rgba(0,0,0,0.1)
|
||||
|
||||
**Total:** 41 tokens extracted
|
||||
|
||||
Would you like me to generate theme files from these tokens?
|
||||
```
|
||||
|
||||
## API Rate Limiting
|
||||
|
||||
The Figma API has rate limits:
|
||||
- 30 requests per minute for free plans
|
||||
- Higher limits for paid plans
|
||||
|
||||
DSS implements:
|
||||
- Automatic retry with exponential backoff
|
||||
- Request caching (1 hour TTL)
|
||||
- Batch requests where possible
|
||||
|
||||
## Token Naming
|
||||
|
||||
Figma names are converted to token format:
|
||||
```
|
||||
Figma: "Primary / 500"
|
||||
Token: color-primary-500
|
||||
|
||||
Figma: "Heading / H1"
|
||||
Token: typography-heading-h1
|
||||
|
||||
Figma: "Shadow / Medium"
|
||||
Token: shadow-md
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
| Error | Cause | Solution |
|
||||
|-------|-------|----------|
|
||||
| 403 Forbidden | Invalid token | Check FIGMA_TOKEN |
|
||||
| 404 Not Found | Invalid file key | Verify file key |
|
||||
| 429 Too Many Requests | Rate limited | Wait and retry |
|
||||
|
||||
## Related Tools
|
||||
|
||||
- `dss_sync_figma` - Main sync tool
|
||||
- `dss_extract_tokens` - Merge with other sources
|
||||
- `dss_generate_theme` - Generate from Figma tokens
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Figma Organization**
|
||||
- Use consistent naming in Figma
|
||||
- Organize styles in folders
|
||||
- Use descriptions for context
|
||||
|
||||
2. **Sync Frequency**
|
||||
- Sync after major design changes
|
||||
- Automate in CI/CD if possible
|
||||
- Version control token files
|
||||
|
||||
3. **Conflict Resolution**
|
||||
- Compare with existing tokens
|
||||
- Review changes before applying
|
||||
- Maintain changelog
|
||||
|
||||
## Security Notes
|
||||
|
||||
- Never commit FIGMA_TOKEN to version control
|
||||
- Use environment variables or secrets manager
|
||||
- Rotate tokens periodically
|
||||
- Use read-only tokens when possible
|
||||
223
dss-claude-plugin/skills/quick-wins/SKILL.md
Normal file
223
dss-claude-plugin/skills/quick-wins/SKILL.md
Normal file
@@ -0,0 +1,223 @@
|
||||
---
|
||||
name: Quick Wins
|
||||
description: Find low-effort, high-impact opportunities for design system adoption
|
||||
globs:
|
||||
- "**/*.css"
|
||||
- "**/*.scss"
|
||||
- "**/*.tsx"
|
||||
- "**/*.jsx"
|
||||
- "**/components/**"
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
# Quick Wins
|
||||
|
||||
## Overview
|
||||
|
||||
This skill identifies quick win opportunities for design system adoption - low-effort changes that provide high impact improvements to design consistency and maintainability.
|
||||
|
||||
## When to Use
|
||||
|
||||
Use this skill when the user asks to:
|
||||
- Find easy design system improvements
|
||||
- Get quick wins for the sprint
|
||||
- Prioritize low-hanging fruit
|
||||
- Start design system adoption incrementally
|
||||
- Get immediate impact with minimal effort
|
||||
|
||||
## Quick Win Categories
|
||||
|
||||
### 1. Color Consolidation
|
||||
- Multiple similar colors that differ slightly
|
||||
- Colors that can be reduced to a single token
|
||||
- Opportunity: Replace 10+ colors with 3-5 tokens
|
||||
|
||||
### 2. Spacing Standardization
|
||||
- Arbitrary pixel values (13px, 17px, 22px)
|
||||
- Inconsistent margins and paddings
|
||||
- Opportunity: Implement 4px/8px grid system
|
||||
|
||||
### 3. Typography Cleanup
|
||||
- Too many font sizes
|
||||
- Inconsistent line heights
|
||||
- Opportunity: Define 5-7 type scale levels
|
||||
|
||||
### 4. Border Radius Normalization
|
||||
- Random radius values
|
||||
- Inconsistent rounded corners
|
||||
- Opportunity: 3-4 standard radius values
|
||||
|
||||
### 5. Shadow Standardization
|
||||
- Various shadow implementations
|
||||
- Inconsistent elevation
|
||||
- Opportunity: 3 shadow levels (sm, md, lg)
|
||||
|
||||
## Effort/Impact Matrix
|
||||
|
||||
```
|
||||
HIGH IMPACT
|
||||
|
|
||||
+-----------+--------+--------+-----------+
|
||||
| | | | |
|
||||
| Extract | Create | Spacing| Color |
|
||||
| common | Button | scale | tokens |
|
||||
| utilities | system | | |
|
||||
| | | | |
|
||||
LOW +-----------|--------|--------|-----------|+ HIGH
|
||||
EFFORT | | | EFFORT
|
||||
| | | | |
|
||||
| Document | Create | Build | Complete |
|
||||
| existing | icons | full | component |
|
||||
| patterns | set | theme | library |
|
||||
| | | | |
|
||||
+-----------+--------+--------+-----------+
|
||||
|
|
||||
LOW IMPACT
|
||||
```
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **Find Quick Wins**
|
||||
```
|
||||
Use dss_find_quick_wins with project path
|
||||
```
|
||||
|
||||
2. **Review Opportunities**
|
||||
- Check effort estimates
|
||||
- Review impact scores
|
||||
- Consider dependencies
|
||||
|
||||
3. **Prioritize**
|
||||
- High impact, low effort first
|
||||
- Group related changes
|
||||
- Consider team velocity
|
||||
|
||||
4. **Execute**
|
||||
- Create tokens for identified values
|
||||
- Replace hardcoded values
|
||||
- Document changes
|
||||
|
||||
## Example Interaction
|
||||
|
||||
**User:** "Find quick wins for our design system"
|
||||
|
||||
**Assistant Response:**
|
||||
```
|
||||
I'll find quick win opportunities for your project.
|
||||
|
||||
[Uses dss_find_quick_wins tool]
|
||||
|
||||
**Quick Win Analysis:**
|
||||
|
||||
**Top 5 Quick Wins (by Impact/Effort):**
|
||||
|
||||
1. **Color Consolidation** [HIGH IMPACT / LOW EFFORT]
|
||||
- Found 47 color values reducible to 8 tokens
|
||||
- Files affected: 23
|
||||
- Estimated effort: 2 hours
|
||||
```css
|
||||
/* Before: 47 variations */
|
||||
color: #0066cc;
|
||||
color: #0067cd; /* Nearly identical */
|
||||
color: #0065cb; /* Nearly identical */
|
||||
|
||||
/* After: 1 token */
|
||||
color: var(--color-primary);
|
||||
```
|
||||
|
||||
2. **Spacing Scale** [HIGH IMPACT / LOW EFFORT]
|
||||
- Found 34 unique spacing values
|
||||
- Can reduce to 6 tokens (4, 8, 16, 24, 32, 48)
|
||||
- Files affected: 31
|
||||
- Estimated effort: 3 hours
|
||||
|
||||
3. **Border Radius** [MEDIUM IMPACT / LOW EFFORT]
|
||||
- Found 12 radius values
|
||||
- Can reduce to 4 tokens (2, 4, 8, 16)
|
||||
- Files affected: 15
|
||||
- Estimated effort: 1 hour
|
||||
|
||||
4. **Shadow Cleanup** [MEDIUM IMPACT / LOW EFFORT]
|
||||
- Found 8 shadow definitions
|
||||
- Can consolidate to 3 tokens
|
||||
- Files affected: 12
|
||||
- Estimated effort: 1 hour
|
||||
|
||||
5. **Font Size Scale** [HIGH IMPACT / MEDIUM EFFORT]
|
||||
- Found 15 font sizes
|
||||
- Can reduce to 7 tokens
|
||||
- Files affected: 28
|
||||
- Estimated effort: 3 hours
|
||||
|
||||
**Total Estimated Time:** 10 hours
|
||||
**Estimated Impact:** 60% reduction in style inconsistency
|
||||
|
||||
**Recommended Order:**
|
||||
1. Colors (biggest impact)
|
||||
2. Spacing (most widespread)
|
||||
3. Border radius (quick win)
|
||||
4. Shadows (contained scope)
|
||||
5. Font sizes (needs coordination)
|
||||
|
||||
Would you like me to create tokens for any of these?
|
||||
```
|
||||
|
||||
## Quick Win Templates
|
||||
|
||||
### Color Token Creation
|
||||
```css
|
||||
/* Quick win: Create color tokens */
|
||||
:root {
|
||||
--color-primary: #0066cc;
|
||||
--color-primary-light: #3385d6;
|
||||
--color-primary-dark: #004c99;
|
||||
}
|
||||
|
||||
/* Replace all instances */
|
||||
/* Before */ color: #0066cc;
|
||||
/* After */ color: var(--color-primary);
|
||||
```
|
||||
|
||||
### Spacing Scale
|
||||
```css
|
||||
/* Quick win: Spacing scale */
|
||||
:root {
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 16px;
|
||||
--spacing-lg: 24px;
|
||||
--spacing-xl: 32px;
|
||||
}
|
||||
```
|
||||
|
||||
## Related Tools
|
||||
|
||||
- `dss_find_quick_wins` - Main quick wins tool
|
||||
- `dss_analyze_project` - Full analysis
|
||||
- `dss_extract_tokens` - Create tokens
|
||||
- `dss_audit_components` - Component-level audit
|
||||
|
||||
## Metrics
|
||||
|
||||
Quick wins are scored on:
|
||||
- **Impact**: How many files/components affected
|
||||
- **Effort**: Estimated time to implement
|
||||
- **Risk**: Likelihood of regression
|
||||
- **Value**: Improvement to consistency
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Start Small**
|
||||
- Pick 2-3 quick wins per sprint
|
||||
- Validate before scaling
|
||||
- Document learnings
|
||||
|
||||
2. **Track Progress**
|
||||
- Measure before/after metrics
|
||||
- Celebrate wins
|
||||
- Share with team
|
||||
|
||||
3. **Build Momentum**
|
||||
- Use quick wins to build support
|
||||
- Demonstrate value early
|
||||
- Plan for larger initiatives
|
||||
229
dss-claude-plugin/skills/storybook-integration/SKILL.md
Normal file
229
dss-claude-plugin/skills/storybook-integration/SKILL.md
Normal file
@@ -0,0 +1,229 @@
|
||||
---
|
||||
name: Storybook Integration
|
||||
description: Set up and configure Storybook for design system documentation and development
|
||||
globs:
|
||||
- "**/.storybook/**"
|
||||
- "**/*.stories.tsx"
|
||||
- "**/*.stories.jsx"
|
||||
- "**/*.stories.mdx"
|
||||
- "**/storybook-static/**"
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
# Storybook Integration
|
||||
|
||||
## Overview
|
||||
|
||||
This skill helps set up, configure, and generate Storybook stories for design system components. It creates comprehensive documentation and interactive examples.
|
||||
|
||||
## When to Use
|
||||
|
||||
Use this skill when the user asks to:
|
||||
- Set up Storybook for a project
|
||||
- Generate stories for components
|
||||
- Configure Storybook theme
|
||||
- Create component documentation
|
||||
- Add Storybook addons
|
||||
|
||||
## Capabilities
|
||||
|
||||
### 1. Story Generation
|
||||
- Automatic story creation from components
|
||||
- Props documentation extraction
|
||||
- Default story with all props
|
||||
- Variant stories for different states
|
||||
|
||||
### 2. Theme Configuration
|
||||
- Design token integration
|
||||
- Light/dark mode themes
|
||||
- Custom branding
|
||||
- Typography setup
|
||||
|
||||
### 3. Addon Configuration
|
||||
- Controls for prop editing
|
||||
- Actions for event logging
|
||||
- Viewport for responsive testing
|
||||
- Accessibility testing
|
||||
|
||||
### 4. Documentation
|
||||
- MDX documentation pages
|
||||
- Component API tables
|
||||
- Usage examples
|
||||
- Design guidelines
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **Scan Existing Setup**
|
||||
```
|
||||
Use dss_setup_storybook with action: scan
|
||||
```
|
||||
|
||||
2. **Generate Stories**
|
||||
```
|
||||
Use dss_setup_storybook with action: generate
|
||||
```
|
||||
|
||||
3. **Configure Theme**
|
||||
```
|
||||
Use dss_setup_storybook with action: configure
|
||||
```
|
||||
|
||||
4. **Review and Refine**
|
||||
- Check generated stories
|
||||
- Add custom documentation
|
||||
- Configure addons
|
||||
|
||||
## Example Interaction
|
||||
|
||||
**User:** "Set up Storybook for my design system components"
|
||||
|
||||
**Assistant Response:**
|
||||
```
|
||||
I'll help you set up Storybook for your design system.
|
||||
|
||||
[Uses dss_setup_storybook with action: scan]
|
||||
|
||||
**Current Status:**
|
||||
- Storybook: Not installed
|
||||
- Components found: 23
|
||||
- Existing stories: 0
|
||||
|
||||
Let me set up Storybook with your design tokens.
|
||||
|
||||
[Uses dss_setup_storybook with action: configure]
|
||||
|
||||
**Storybook Configuration Created:**
|
||||
|
||||
.storybook/main.js:
|
||||
```javascript
|
||||
module.exports = {
|
||||
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
|
||||
addons: [
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-a11y',
|
||||
'@storybook/addon-links'
|
||||
],
|
||||
framework: '@storybook/react'
|
||||
};
|
||||
```
|
||||
|
||||
.storybook/preview.js:
|
||||
```javascript
|
||||
import { themes } from '@storybook/theming';
|
||||
import '../src/styles/tokens.css';
|
||||
|
||||
export const parameters = {
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
controls: { expanded: true },
|
||||
docs: {
|
||||
theme: themes.light
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
Now generating stories for your components...
|
||||
|
||||
[Uses dss_setup_storybook with action: generate]
|
||||
|
||||
**Stories Generated:**
|
||||
- Button.stories.tsx (4 variants)
|
||||
- Card.stories.tsx (3 variants)
|
||||
- Input.stories.tsx (5 variants)
|
||||
- Modal.stories.tsx (2 variants)
|
||||
|
||||
Run `npm run storybook` to see your component library!
|
||||
```
|
||||
|
||||
## Story Template
|
||||
|
||||
```tsx
|
||||
// Button.stories.tsx
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { Button } from './Button';
|
||||
|
||||
const meta: Meta<typeof Button> = {
|
||||
title: 'Components/Button',
|
||||
component: Button,
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: 'select',
|
||||
options: ['primary', 'secondary', 'ghost']
|
||||
},
|
||||
size: {
|
||||
control: 'select',
|
||||
options: ['sm', 'md', 'lg']
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Button>;
|
||||
|
||||
export const Primary: Story = {
|
||||
args: {
|
||||
variant: 'primary',
|
||||
children: 'Click me'
|
||||
}
|
||||
};
|
||||
|
||||
export const Secondary: Story = {
|
||||
args: {
|
||||
variant: 'secondary',
|
||||
children: 'Click me'
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## Configuration Options
|
||||
|
||||
### Theme Branding
|
||||
```javascript
|
||||
// .storybook/theme.js
|
||||
import { create } from '@storybook/theming';
|
||||
|
||||
export default create({
|
||||
base: 'light',
|
||||
brandTitle: 'My Design System',
|
||||
brandUrl: 'https://example.com',
|
||||
brandImage: '/logo.svg',
|
||||
|
||||
// UI colors from tokens
|
||||
colorPrimary: '#0066cc',
|
||||
colorSecondary: '#6c757d',
|
||||
|
||||
// Typography
|
||||
fontBase: '"Inter", sans-serif',
|
||||
fontCode: 'monospace'
|
||||
});
|
||||
```
|
||||
|
||||
## Related Tools
|
||||
|
||||
- `dss_setup_storybook` - Main Storybook tool
|
||||
- `dss_generate_theme` - Generate theme for Storybook
|
||||
- `dss_audit_components` - Find components to document
|
||||
|
||||
## Server Configuration
|
||||
|
||||
DSS Storybook runs on port 6006 by default:
|
||||
- Host: 0.0.0.0 (configurable)
|
||||
- Port: 6006 (configurable)
|
||||
- Auto-open: disabled by default
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Story Organization**
|
||||
- Group by component category
|
||||
- Use consistent naming
|
||||
- Include edge cases
|
||||
|
||||
2. **Documentation**
|
||||
- Write clear descriptions
|
||||
- Show usage examples
|
||||
- Document props thoroughly
|
||||
|
||||
3. **Maintenance**
|
||||
- Update stories with components
|
||||
- Test in CI/CD
|
||||
- Review accessibility regularly
|
||||
183
dss-claude-plugin/skills/theme-generation/SKILL.md
Normal file
183
dss-claude-plugin/skills/theme-generation/SKILL.md
Normal file
@@ -0,0 +1,183 @@
|
||||
---
|
||||
name: Theme Generation
|
||||
description: Generate theme files from design tokens using style-dictionary
|
||||
globs:
|
||||
- "**/tokens.json"
|
||||
- "**/theme.json"
|
||||
- "**/*.tokens.json"
|
||||
- "**/design-tokens/**"
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
# Theme Generation
|
||||
|
||||
## Overview
|
||||
|
||||
This skill transforms design tokens into platform-specific theme files using Amazon Style Dictionary. Supports multiple output formats for different platforms and frameworks.
|
||||
|
||||
## When to Use
|
||||
|
||||
Use this skill when the user asks to:
|
||||
- Generate CSS custom properties from tokens
|
||||
- Create SCSS variables
|
||||
- Export tokens to JSON
|
||||
- Create JavaScript/TypeScript theme modules
|
||||
- Build theme files for a design system
|
||||
|
||||
## Output Formats
|
||||
|
||||
### CSS Variables
|
||||
```css
|
||||
:root {
|
||||
--color-primary: #0066cc;
|
||||
--color-secondary: #6c757d;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 16px;
|
||||
}
|
||||
```
|
||||
|
||||
### SCSS Variables
|
||||
```scss
|
||||
$color-primary: #0066cc;
|
||||
$color-secondary: #6c757d;
|
||||
$spacing-sm: 8px;
|
||||
$spacing-md: 16px;
|
||||
```
|
||||
|
||||
### JSON Export
|
||||
```json
|
||||
{
|
||||
"color": {
|
||||
"primary": "#0066cc",
|
||||
"secondary": "#6c757d"
|
||||
},
|
||||
"spacing": {
|
||||
"sm": "8px",
|
||||
"md": "16px"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### JavaScript Module
|
||||
```javascript
|
||||
export const color = {
|
||||
primary: '#0066cc',
|
||||
secondary: '#6c757d'
|
||||
};
|
||||
|
||||
export const spacing = {
|
||||
sm: '8px',
|
||||
md: '16px'
|
||||
};
|
||||
```
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **Prepare Tokens**
|
||||
- Ensure tokens are extracted or defined
|
||||
- Validate token structure
|
||||
- Organize by category
|
||||
|
||||
2. **Choose Format**
|
||||
- CSS for web projects with CSS custom properties
|
||||
- SCSS for projects using Sass
|
||||
- JSON for framework-agnostic export
|
||||
- JS for JavaScript/TypeScript projects
|
||||
|
||||
3. **Generate Theme**
|
||||
```
|
||||
Use dss_generate_theme with tokens and format
|
||||
```
|
||||
|
||||
4. **Review Output**
|
||||
- Check generated files
|
||||
- Verify variable names
|
||||
- Validate values
|
||||
|
||||
## Example Interaction
|
||||
|
||||
**User:** "Generate CSS theme files from the tokens we extracted"
|
||||
|
||||
**Assistant Response:**
|
||||
```
|
||||
I'll generate CSS theme files from your tokens.
|
||||
|
||||
[Uses dss_generate_theme with format: css]
|
||||
|
||||
**Generated Files:**
|
||||
|
||||
theme.css:
|
||||
```css
|
||||
:root {
|
||||
/* Colors */
|
||||
--color-primary: #0066cc;
|
||||
--color-primary-light: #3385d6;
|
||||
--color-primary-dark: #004c99;
|
||||
--color-secondary: #6c757d;
|
||||
|
||||
/* Typography */
|
||||
--font-family-base: 'Inter', sans-serif;
|
||||
--font-size-base: 16px;
|
||||
--line-height-base: 1.5;
|
||||
|
||||
/* Spacing */
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 16px;
|
||||
--spacing-lg: 24px;
|
||||
--spacing-xl: 32px;
|
||||
}
|
||||
```
|
||||
|
||||
The theme file has been generated successfully. You can:
|
||||
1. Import it directly into your main CSS
|
||||
2. Use the variables in your components
|
||||
3. Create dark mode variants
|
||||
|
||||
Would you like me to generate a dark mode theme as well?
|
||||
```
|
||||
|
||||
## Theme Variants
|
||||
|
||||
### Light/Dark Mode
|
||||
Generate separate themes for light and dark modes:
|
||||
- `theme-light.css`
|
||||
- `theme-dark.css`
|
||||
|
||||
### Brand Variants
|
||||
Create multiple brand themes:
|
||||
- `theme-brand-a.css`
|
||||
- `theme-brand-b.css`
|
||||
|
||||
## Style Dictionary Features
|
||||
|
||||
| Feature | Description |
|
||||
|---------|-------------|
|
||||
| Transform Groups | Pre-defined transformations for each platform |
|
||||
| Custom Transforms | Add custom value transformations |
|
||||
| File Headers | Include comments and metadata |
|
||||
| Filtering | Filter tokens by category or attributes |
|
||||
|
||||
## Related Tools
|
||||
|
||||
- `dss_generate_theme` - Main generation tool
|
||||
- `dss_extract_tokens` - Get tokens first
|
||||
- `dss_transform_tokens` - Convert between formats
|
||||
- `dss_list_themes` - See available themes
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Naming Convention**
|
||||
- Use consistent naming (kebab-case recommended)
|
||||
- Include category prefix (color-, spacing-, etc.)
|
||||
- Be descriptive but concise
|
||||
|
||||
2. **Token Organization**
|
||||
- Group by category
|
||||
- Use semantic names over values
|
||||
- Include descriptions for documentation
|
||||
|
||||
3. **Version Control**
|
||||
- Track generated files
|
||||
- Document token changes
|
||||
- Use semantic versioning
|
||||
158
dss-claude-plugin/skills/token-extraction/SKILL.md
Normal file
158
dss-claude-plugin/skills/token-extraction/SKILL.md
Normal file
@@ -0,0 +1,158 @@
|
||||
---
|
||||
name: Token Extraction
|
||||
description: Extract design tokens from CSS, SCSS, Tailwind, and JSON sources
|
||||
globs:
|
||||
- "**/*.css"
|
||||
- "**/*.scss"
|
||||
- "**/*.sass"
|
||||
- "**/tailwind.config.*"
|
||||
- "**/tokens.json"
|
||||
- "**/theme.json"
|
||||
- "**/*.tokens.json"
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
# Token Extraction
|
||||
|
||||
## Overview
|
||||
|
||||
This skill enables extraction of design tokens from multiple source formats and merging them into a unified token collection.
|
||||
|
||||
## When to Use
|
||||
|
||||
Use this skill when the user asks to:
|
||||
- Extract tokens from CSS/SCSS files
|
||||
- Parse Tailwind configuration for tokens
|
||||
- Import tokens from JSON files
|
||||
- Merge tokens from multiple sources
|
||||
- Convert existing styles to tokens
|
||||
|
||||
## Supported Sources
|
||||
|
||||
### CSS
|
||||
- Custom properties (--variable-name)
|
||||
- Color values in declarations
|
||||
- Font and typography values
|
||||
- Spacing values
|
||||
|
||||
### SCSS
|
||||
- Variables ($variable-name)
|
||||
- Maps and nested structures
|
||||
- Mixins with token values
|
||||
- Function outputs
|
||||
|
||||
### Tailwind
|
||||
- Theme configuration
|
||||
- Extended colors
|
||||
- Custom spacing
|
||||
- Typography settings
|
||||
|
||||
### JSON
|
||||
- Design token format (W3C Draft)
|
||||
- Style Dictionary format
|
||||
- Figma export format
|
||||
- Custom JSON structures
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **Identify Sources**
|
||||
- Determine which file types contain tokens
|
||||
- Locate configuration files
|
||||
- Check for existing token files
|
||||
|
||||
2. **Extract Tokens**
|
||||
```
|
||||
Use dss_extract_tokens with path and source types
|
||||
```
|
||||
|
||||
3. **Review Extraction**
|
||||
- Check token count
|
||||
- Verify token categories
|
||||
- Review token values
|
||||
|
||||
4. **Merge if Needed**
|
||||
- Combine tokens from multiple sources
|
||||
- Resolve conflicts
|
||||
- Normalize naming
|
||||
|
||||
## Token Categories
|
||||
|
||||
| Category | Examples |
|
||||
|----------|----------|
|
||||
| color | primary, secondary, error, success |
|
||||
| typography | font-family, font-size, line-height |
|
||||
| spacing | margin, padding, gap values |
|
||||
| sizing | width, height, border-radius |
|
||||
| shadow | box-shadow, drop-shadow |
|
||||
| border | border-width, border-color |
|
||||
| opacity | transparency values |
|
||||
| z-index | stacking order values |
|
||||
|
||||
## Example Interaction
|
||||
|
||||
**User:** "Extract all design tokens from my project's styles"
|
||||
|
||||
**Assistant Response:**
|
||||
```
|
||||
I'll extract design tokens from your project.
|
||||
|
||||
[Uses dss_extract_tokens tool with sources: css, scss, tailwind]
|
||||
|
||||
**Extraction Results:**
|
||||
|
||||
From CSS (23 tokens):
|
||||
- 12 color tokens
|
||||
- 5 spacing tokens
|
||||
- 6 typography tokens
|
||||
|
||||
From SCSS (45 tokens):
|
||||
- 20 color tokens (including variants)
|
||||
- 15 spacing tokens
|
||||
- 10 typography tokens
|
||||
|
||||
From Tailwind (32 tokens):
|
||||
- Custom colors defined in theme
|
||||
- Extended spacing scale
|
||||
- Custom font families
|
||||
|
||||
**Merged Collection:** 78 unique tokens
|
||||
- Duplicates resolved using latest value
|
||||
- Naming normalized to kebab-case
|
||||
|
||||
Would you like me to generate theme files from these tokens?
|
||||
```
|
||||
|
||||
## Merge Strategies
|
||||
|
||||
| Strategy | Description |
|
||||
|----------|-------------|
|
||||
| PREFER_LATEST | Use most recently encountered value |
|
||||
| PREFER_FIRST | Keep first encountered value |
|
||||
| ERROR_ON_CONFLICT | Fail if conflicts exist |
|
||||
| MERGE_ARRAYS | Combine array values |
|
||||
|
||||
## Related Tools
|
||||
|
||||
- `dss_extract_tokens` - Main extraction tool
|
||||
- `dss_generate_theme` - Generate theme from tokens
|
||||
- `dss_transform_tokens` - Convert between formats
|
||||
|
||||
## Output Format
|
||||
|
||||
```json
|
||||
{
|
||||
"color": {
|
||||
"primary": {
|
||||
"value": "#0066cc",
|
||||
"type": "color",
|
||||
"description": "Primary brand color"
|
||||
}
|
||||
},
|
||||
"spacing": {
|
||||
"sm": {
|
||||
"value": "8px",
|
||||
"type": "dimension"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user