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:
106
dss-claude-plugin/commands/dss-extract.md
Normal file
106
dss-claude-plugin/commands/dss-extract.md
Normal file
@@ -0,0 +1,106 @@
|
||||
---
|
||||
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
|
||||
```
|
||||
Reference in New Issue
Block a user