276ed71f31
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
107 lines
2.1 KiB
Markdown
107 lines
2.1 KiB
Markdown
---
|
|
name: dss-extract
|
|
description: Extract design tokens from CSS, SCSS, Tailwind, or JSON sources
|
|
arguments:
|
|
- name: path
|
|
description: Path to file or directory containing design tokens
|
|
required: false
|
|
- name: sources
|
|
description: "Comma-separated source types: css,scss,tailwind,json"
|
|
required: false
|
|
---
|
|
|
|
# DSS Extract Command
|
|
|
|
Extract design tokens from various source formats and create a unified token collection.
|
|
|
|
## Usage
|
|
|
|
```
|
|
/dss-extract [path] [sources]
|
|
```
|
|
|
|
Examples:
|
|
```
|
|
/dss-extract
|
|
/dss-extract ./src/styles
|
|
/dss-extract ./src css,scss
|
|
/dss-extract ./tailwind.config.js tailwind
|
|
```
|
|
|
|
## What This Does
|
|
|
|
1. **Scans Sources**
|
|
- CSS custom properties and values
|
|
- SCSS variables and maps
|
|
- Tailwind configuration
|
|
- JSON token files
|
|
|
|
2. **Extracts Tokens**
|
|
- Colors (hex, rgb, hsl)
|
|
- Typography (fonts, sizes, weights)
|
|
- Spacing (margins, paddings, gaps)
|
|
- Sizing (widths, heights, radii)
|
|
- Shadows and effects
|
|
|
|
3. **Merges Results**
|
|
- Combines tokens from all sources
|
|
- Resolves conflicts
|
|
- Normalizes naming
|
|
|
|
4. **Returns Collection**
|
|
- Categorized tokens
|
|
- Metadata included
|
|
- Ready for theme generation
|
|
|
|
## Instructions for Claude
|
|
|
|
When the user runs this command:
|
|
|
|
1. Parse the path argument (default to current directory)
|
|
2. Parse sources argument (default to all: css, scss, tailwind, json)
|
|
3. Use `dss_extract_tokens` tool with parsed arguments
|
|
4. Present extracted tokens organized by category:
|
|
- Colors
|
|
- Typography
|
|
- Spacing
|
|
- Sizing
|
|
- Shadows
|
|
- Other
|
|
5. Show token count and source breakdown
|
|
6. Offer to generate theme files with `/dss-generate`
|
|
|
|
## Example Output
|
|
|
|
```
|
|
Token Extraction: /path/to/project
|
|
|
|
SOURCES SCANNED
|
|
- CSS: 12 files
|
|
- SCSS: 8 files
|
|
- Tailwind: 1 file
|
|
|
|
TOKENS EXTRACTED
|
|
|
|
Colors (24 tokens):
|
|
primary: #0066cc
|
|
secondary: #6c757d
|
|
success: #28a745
|
|
error: #dc3545
|
|
...
|
|
|
|
Typography (8 tokens):
|
|
font-family-base: "Inter", sans-serif
|
|
font-size-base: 16px
|
|
...
|
|
|
|
Spacing (6 tokens):
|
|
xs: 4px
|
|
sm: 8px
|
|
md: 16px
|
|
...
|
|
|
|
TOTAL: 38 unique tokens
|
|
|
|
Next: Run /dss-generate css to create theme files
|
|
```
|