---
name: Design System Analysis
description: Analyze codebases for design patterns, component usage, and tokenization opportunities
globs:
  - "**/*.css"
  - "**/*.scss"
  - "**/*.tsx"
  - "**/*.jsx"
  - "**/*.vue"
  - "**/tailwind.config.*"
alwaysApply: false
---

# Design System Analysis

## Overview

This skill provides comprehensive analysis of existing codebases to identify design patterns, component usage, and opportunities for design system adoption.

## When to Use

Use this skill when the user asks to:
- Analyze a project for design system opportunities
- Audit an existing codebase for design patterns
- Scan a React/Vue project for component patterns
- Identify style inconsistencies
- Find tokenization opportunities

## Capabilities

### 1. Project Scanning
- Scans entire project structure
- Identifies style files (CSS, SCSS, Tailwind)
- Locates component files (React, Vue)
- Builds file dependency map

### 2. Style Analysis
- Extracts color values and patterns
- Identifies typography scales
- Finds spacing patterns
- Detects shadow and border patterns

### 3. Component Analysis
- Identifies React/Vue components
- Maps component dependencies
- Finds repeated patterns
- Detects hardcoded values

### 4. Dependency Graph
- Builds component relationship graph
- Identifies shared dependencies
- Finds circular dependencies
- Maps style imports

## Workflow

1. **Start Analysis**
   ```
   Use the dss_analyze_project tool with the project path
   ```

2. **Review Results**
   - Check scan summary for file counts
   - Review style patterns found
   - Examine component analysis
   - Note dependency relationships

3. **Generate Recommendations**
   - Prioritize findings by impact
   - Suggest token candidates
   - Recommend component refactoring
   - Identify quick wins

## Example Interaction

**User:** "Analyze my React app at /home/user/my-app for design system adoption"

**Assistant Response:**
```
I'll analyze your React application for design system opportunities.

[Uses dss_analyze_project tool]

Based on the analysis:

**Summary:**
- 47 style files scanned
- 23 React components found
- 156 unique color values detected
- 12 typography variations identified

**Key Findings:**
1. Color Inconsistency: Found 156 color values that could be reduced to 12 design tokens
2. Spacing Patterns: 8 different spacing scales in use
3. Component Duplication: 3 button variants that could be consolidated

**Recommendations:**
1. Create a color token system (high impact, medium effort)
2. Standardize spacing scale to 4px grid (medium impact, low effort)
3. Create a Button component with variants (high impact, high effort)
```

## Related Tools

- `dss_analyze_project` - Main analysis tool
- `dss_extract_tokens` - Extract tokens from analysis
- `dss_find_quick_wins` - Find low-effort improvements

## Dependencies

- DSS analyze module (ProjectScanner, ReactAnalyzer, StyleAnalyzer)
- DSS models (Project, ProjectMetadata)