dss/dss-claude-plugin/skills/component-audit/SKILL.md

name, description, globs, alwaysApply

name	description	globs	alwaysApply
Component Audit	Audit React components for design system adoption and identify refactoring opportunities	**/*.tsx **/*.jsx **/*.vue **/components/** **/src/**	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

{
  "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