#What it does

The /component-audit skill performs a comprehensive health check on your component library. It evaluates consistency across components, catches accessibility violations, identifies redundant components that should be consolidated, and flags API design issues that make components hard to use. Think of it as a code review focused specifically on your component architecture.

#How to use

/component-audit

Run at the project root to audit all components. Target a specific directory to narrow the scope.

/component-audit src/components/forms/

#What it checks

• Consistency -- Do similar components follow the same prop naming? Does Button use variant while Badge uses type for the same concept?
• Accessibility -- Missing ARIA labels, non-semantic HTML, missing keyboard handlers, color contrast violations, missing focus indicators
• Reuse -- Components that duplicate logic or rendering patterns and should be consolidated into one
• Prop API design -- Boolean prop traps (isOpen vs open), excessive prop counts, missing TypeScript generics, required props that should have defaults
• Composition -- Components that should accept children or render props but use hardcoded content instead
• Performance -- Missing memo() on expensive renders, inline object/function props that break memoization, missing key props in lists

#Workflow

1. Inventory -- Catalogs every component with its props, usage count, and file size
2. Cross-reference -- Compares prop patterns, naming conventions, and styling approaches across components
3. Test -- Runs automated accessibility checks (axe-core rules) against component markup
4. Score -- Rates each component on consistency, accessibility, and API quality
5. Report -- Produces actionable findings grouped by severity

#Example

> /component-audit
 
## Component Audit: 34 components analyzed
 
### Consistency issues
- `Button` uses `variant` but `Tag` uses `color` for the same concept
  Fix: Standardize on `variant` across all components
- `Modal` and `Dialog` are 80% identical with different APIs
  Fix: Consolidate into one component with aliased export
 
### Accessibility violations
- [HIGH] `Dropdown` missing keyboard navigation (arrow keys, Escape)
- [HIGH] `Toast` disappears without screen reader announcement
- [MEDIUM] `Input` label linked via className instead of htmlFor
 
### API improvements
- `Card` has 14 props -- consider composition pattern with Card.Header, Card.Body, Card.Footer
- `DataTable` requires `onSort` even when sorting is disabled
 
### Component health scores
| Component  | Consistency | A11y | API  | Overall |
|-----------|-------------|------|------|---------|
| Button     | A           | A    | A    | A       |
| Modal      | B           | B    | C    | C+      |
| Dropdown   | B           | F    | B    | D       |