---
name: Component Audit
description: Audit React components for design system adoption and identify refactoring opportunities
globs:
  - "**/*.tsx"
  - "**/*.jsx"
  - "**/*.vue"
  - "**/components/**"
  - "**/src/**"
alwaysApply: false
---

# Component Audit

## Overview

This skill provides deep analysis of React/Vue components to identify design system adoption opportunities, hardcoded values, and refactoring recommendations.

## When to Use

Use this skill when the user asks to:
- Audit components for design system readiness
- Find hardcoded values in components
- Identify component consolidation opportunities
- Analyze component dependencies
- Find styling inconsistencies in components

## Audit Categories

### 1. Hardcoded Values
Identifies values that should be tokens:
- Inline colors (`#ffffff`, `rgb()`)
- Pixel values for spacing
- Font sizes and weights
- Border radii and shadows

### 2. Component Patterns
Analyzes component structure:
- Repeated component patterns
- Similar components that could merge
- Props that could use design tokens
- Styling approaches used

### 3. Dependency Analysis
Maps component relationships:
- Import dependencies
- Shared utilities
- Style dependencies
- Context usage

### 4. Accessibility
Basic accessibility checks:
- Missing alt texts
- Color contrast issues
- Focus management
- ARIA attributes

## Workflow

1. **Run Audit**
   ```
   Use dss_audit_components with component directory path
   ```

2. **Review Findings**
   - Check hardcoded values count
   - Review component patterns
   - Examine dependency graph

3. **Prioritize Issues**
   - High impact, low effort first
   - Group by category
   - Consider team capacity

4. **Create Refactoring Plan**
   - Token creation tasks
   - Component consolidation
   - Style migration steps

## Example Interaction

**User:** "Audit my components folder for design system issues"

**Assistant Response:**
```
I'll audit your components for design system adoption.

[Uses dss_audit_components tool]

**Component Audit Results:**

**Summary:**
- 45 components analyzed
- 127 hardcoded values found
- 8 component consolidation opportunities
- 23 accessibility issues

**Hardcoded Values (Top Issues):**

| File | Line | Issue | Suggested Token |
|------|------|-------|-----------------|
| Button.tsx | 12 | color: #0066cc | --color-primary |
| Card.tsx | 8 | padding: 16px | --spacing-md |
| Header.tsx | 15 | font-size: 24px | --font-size-xl |
| Modal.tsx | 22 | border-radius: 8px | --radius-md |

**Component Consolidation:**
1. `PrimaryButton`, `SecondaryButton`, `GhostButton`
   -> Consolidate to `Button` with variant prop

2. `SmallCard`, `LargeCard`, `FeaturedCard`
   -> Consolidate to `Card` with size prop

**Dependency Issues:**
- Circular dependency: Header -> Nav -> Header
- Deep nesting: Page -> Layout -> Container -> Box (4 levels)

**Recommendations:**
1. Create color tokens (reduces 89 hardcoded colors)
2. Implement spacing scale (standardizes 34 spacing values)
3. Consolidate button components (removes 2 duplicates)

Would you like me to generate a detailed refactoring plan?
```

## Issue Severity Levels

| Level | Description | Action |
|-------|-------------|--------|
| Critical | Breaks design consistency | Fix immediately |
| High | Significant inconsistency | Fix in next sprint |
| Medium | Minor inconsistency | Plan for refactoring |
| Low | Optimization opportunity | Nice to have |

## Related Tools

- `dss_audit_components` - Main audit tool
- `dss_analyze_project` - Broader project analysis
- `dss_find_quick_wins` - Find easy fixes
- `dss_extract_tokens` - Create tokens from findings

## Output Structure

```json
{
  "components_analyzed": 45,
  "hardcoded_values": [
    {
      "file": "Button.tsx",
      "line": 12,
      "value": "#0066cc",
      "type": "color",
      "suggestion": "--color-primary"
    }
  ],
  "consolidation_opportunities": [
    {
      "components": ["PrimaryButton", "SecondaryButton"],
      "suggested_name": "Button",
      "variant_prop": "variant"
    }
  ],
  "dependency_issues": [],
  "accessibility_issues": []
}
```

## Best Practices

1. **Run Regularly**
   - Audit before major refactors
   - Include in CI/CD pipeline
   - Track metrics over time

2. **Prioritize Fixes**
   - Start with high-impact, low-effort
   - Group related changes
   - Document decisions

3. **Team Alignment**
   - Share audit results
   - Discuss consolidation decisions
   - Update component guidelines