---
name: dss-analyze
description: Analyze a project for design system patterns and opportunities
arguments:
  - name: path
    description: Path to the project directory to analyze
    required: 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
```