---
description: React component patterns for the project
globs: "**/*.tsx"
alwaysApply: false
---

# Component Patterns

## Structure
```tsx
// 1. Imports
// 2. Types/Interfaces
// 3. Component
// 4. Sub-components (if small)
```

## Rules
- Extract reusable logic into custom hooks (`src/hooks/`)
- Colocate component-specific types with the component
- Use `cn()` utility for conditional classNames
- Prefer composition over prop drilling
- Server Components by default, add `'use client'` only when needed
- Keep components under 150 lines — extract if larger

## Accessibility
- All images must have descriptive `alt` text
- Interactive elements must be keyboard-accessible
- Use proper heading hierarchy (h1 → h2 → h3)
- Color contrast ratio ≥ 4.5:1