---
name: dss-audit
description: Audit React components for design system adoption
arguments:
  - name: path
    description: Path to components directory
    required: false
---

# DSS Audit Command

Audit React/Vue components for design system readiness, identifying hardcoded values and consolidation opportunities.

## Usage

```
/dss-audit [path]
```

Examples:
```
/dss-audit
/dss-audit ./src/components
/dss-audit ./src/ui
```

## What This Does

1. **Scans Components**
   - Finds all React/Vue components
   - Parses component code
   - Extracts styling information

2. **Identifies Issues**
   - Hardcoded color values
   - Inline spacing values
   - Inconsistent styling patterns
   - Duplicate component patterns

3. **Maps Dependencies**
   - Component relationships
   - Style imports
   - Shared utilities

4. **Generates Report**
   - Issues by severity
   - Consolidation opportunities
   - Refactoring recommendations

## Instructions for Claude

When the user runs this command:

1. Use `dss_audit_components` tool with the provided path
2. Present findings organized by:
   - Summary statistics
   - Hardcoded values (table format)
   - Consolidation opportunities
   - Dependency issues
3. Prioritize by impact and effort
4. Provide specific fix recommendations
5. Offer to create tokens for hardcoded values

## Example Output

```
Component Audit: /src/components

SUMMARY
- Components analyzed: 45
- Hardcoded values: 127
- Consolidation opportunities: 8
- Accessibility issues: 23

HARDCODED VALUES (Top 10)

| File | Line | Value | Suggested Token |
|------|------|-------|-----------------|
| Button.tsx | 12 | #0066cc | --color-primary |
| Button.tsx | 15 | 16px | --spacing-md |
| Card.tsx | 8 | #ffffff | --color-surface |
| Card.tsx | 22 | 8px | --radius-md |
| Modal.tsx | 34 | rgba(0,0,0,0.5) | --color-overlay |

CONSOLIDATION OPPORTUNITIES

1. Button Components (3 variants)
   Files: PrimaryButton.tsx, SecondaryButton.tsx, GhostButton.tsx
   Suggestion: Merge into Button.tsx with 'variant' prop

2. Card Components (2 variants)
   Files: Card.tsx, FeaturedCard.tsx
   Suggestion: Add 'featured' prop to Card.tsx

RECOMMENDATIONS

1. [HIGH] Create color tokens for 89 hardcoded colors
2. [HIGH] Implement spacing scale (34 values)
3. [MEDIUM] Consolidate button variants
4. [LOW] Add TypeScript types for tokens

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