ui-library-usage-auditor

# UI Library Usage Auditor

Review and audit shadcn/ui component usage across the codebase to ensure accessible, consistent, and maintainable UI patterns. This skill identifies issues, suggests improvements, and recommends component extractions or layout optimizations.

## When to Use This Skill

Apply this skill when:
- Auditing UI components for accessibility compliance
- Reviewing shadcn/ui usage patterns for consistency
- Identifying opportunities for component extraction
- Checking layout structure and responsive design
- Ensuring proper ARIA attributes and semantic HTML
- Finding duplicate component patterns
- Reviewing form implementations
- Checking for proper error handling in UI
- Validating design system adherence

## Audit Categories

### 1. Accessibility Audit

Check for:
- Missing ARIA labels and descriptions
- Improper heading hierarchy
- Missing alt text on images
- Insufficient color contrast
- Missing keyboard navigation support
- Form fields without labels
- Non-semantic HTML usage
- Missing focus indicators
- Improper button vs link usage
- Missing skip links for navigation

### 2. Component Consistency Audit

Check for:
- Inconsistent component variants across pages
- Mixed styling approaches (inline vs className)
- Duplicate component implementations
- Inconsistent spacing patterns
- Mixed icon libraries or icon sizes
- Inconsistent typography usage
- Non-standard button patterns
- Inconsistent error message displays
- Mixed loading state implementations

### 3. Component Extraction Opportunities

Identify:
- Repeated component patterns (3+ instances)
- Complex inline JSX that could be components
- Reusable form field groups
- Common layout patterns
- Shared modal/dialog content
- Repeated table structures
- Common card layouts
- Shared empty states
- Repeated loading skeletons

### 4. Layout and Responsiveness

Review:
- Responsive breakpoint usage
- Container max-width consistency
- Grid and flexbox usage patterns
- Mobile-first responsive de