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:
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