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
2025-12-09 18:45:48 -03:00
commit 276ed71f31
884 changed files with 373737 additions and 0 deletions

View 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"
}
}
}
```