dss/dss-claude-plugin/commands/dss-extract.md

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