Files
dss/dss-claude-plugin/commands/dss-extract.md
Digital Production Factory 276ed71f31 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
2025-12-09 18:45:48 -03:00

2.1 KiB

name, description, arguments
name description arguments
dss-extract Extract design tokens from CSS, SCSS, Tailwind, or JSON sources
name description required
path Path to file or directory containing design tokens false
name description required
sources Comma-separated source types: css,scss,tailwind,json 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