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

name, description, arguments

name	description	arguments
dss-analyze	Analyze a project for design system patterns and opportunities	name description required path Path to the project directory to analyze false

DSS Analyze Command

Analyze a project directory for design system patterns, component usage, and tokenization opportunities.

Usage

/dss-analyze [path]

If no path is provided, analyzes the current working directory.

What This Does

1. Scans Project Structure

   • Identifies all style files (CSS, SCSS, Tailwind)
   • Locates component files (React, Vue)
   • Maps project dependencies

2. Analyzes Styles

   • Extracts color values and patterns
   • Identifies typography usage
   • Finds spacing patterns
   • Detects shadows and borders

3. Analyzes Components

   • Maps React/Vue components
   • Identifies repeated patterns
   • Finds hardcoded values

4. Generates Report

   • Summary statistics
   • Pattern identification
   • Recommendations for improvement

Instructions for Claude

When the user runs this command:

1. Use the dss_analyze_project tool with the provided path (or current directory if not specified)
2. Wait for analysis results
3. Present findings in a clear, organized format:
   • Summary section with key metrics
   • Style patterns found
   • Component analysis
   • Top recommendations
4. Offer to drill deeper into specific areas
5. Suggest next steps (token extraction, component audit, etc.)

Example Output

Design System Analysis: /path/to/project

SUMMARY
- Files scanned: 127
- Style files: 34
- Components: 23
- Unique colors: 156
- Typography variations: 12

TOP FINDINGS
1. Color inconsistency: 156 colors could be 12 tokens
2. Spacing: 8 different scales in use
3. 3 button variants that could consolidate

RECOMMENDATIONS
1. Create color token system
2. Standardize spacing scale
3. Audit button components

Next: Run /dss-extract to create tokens from these patterns