dss/dss-claude-plugin/skills/design-system-analysis/SKILL.md

name, description, globs, alwaysApply

name	description	globs	alwaysApply
Design System Analysis	Analyze codebases for design patterns, component usage, and tokenization opportunities	**/*.css **/*.scss **/*.tsx **/*.jsx **/*.vue **/tailwind.config.*	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)