shadcn-ui-design-validator

# shadcn/ui Design Validator SKILL

## Activation Patterns

This SKILL automatically activates when:
- New `.tsx` React components are created
- Tailwind configuration (`tailwind.config.ts`) is modified
- Tanstack Start configuration (`app.config.ts`) is modified
- Component styling or classes are changed
- Design token definitions are updated
- Before deployment commands are executed

## Expertise Provided

### Design Pattern Validation
- **Generic Pattern Detection**: Identifies default/overused design patterns
- **Typography Analysis**: Ensures distinctive font choices and hierarchy
- **Animation Validation**: Checks for engaging micro-interactions and transitions
- **Color System**: Validates distinctive color palettes vs generic defaults
- **Component Customization**: Ensures shadcn/ui components are customized, not default

### Specific Checks Performed

#### ❌ Critical Violations (Generic Design Patterns)
```tsx
<!-- These patterns trigger alerts: -->

<!-- Generic font (Inter/Roboto) -->
<div className="font-sans">  <!-- Using default Inter -->

<!-- Purple gradient on white (overused pattern) -->
<div className="bg-gradient-to-r from-purple-500 to-purple-600">

<!-- No animations/transitions -->
<Button onClick="submit">Submit</Button>  <!-- No hover state -->

<!-- Default background colors -->
<div className="bg-gray-50">  <!-- Generic #f9fafb -->
```

#### ✅ Correct Distinctive Patterns
```tsx
<!-- These patterns are validated as correct: -->

<!-- Custom distinctive fonts -->
<h1 className="font-heading">  <!-- Custom font family -->

<!-- Custom brand colors -->
<div className="bg-brand-coral">  <!-- Distinctive palette -->

<!-- Engaging animations -->
<Button
  className="transition-all duration-300 hover:scale-105 hover:shadow-xl"
  onClick="submit"
>
  Submit
</Button>

<!-- Atmospheric backgrounds -->
<div className="bg-gradient-to-br from-brand-ocean via-brand-sky to-brand-coral">
```

## Integration Points

### Complementary to Existing Componen