# Frontend Rules

Frontend development rules for React, Next.js, Tailwind CSS, and shadcn/ui.

## shadcn/ui Components

- ALWAYS check `src/components/ui/` first before creating new components
- NEVER recreate a component that already exists in shadcn/ui
- If missing component: `npx shadcn@latest add <component-name>`

## Styling

- Use Tailwind CSS utility classes (never raw CSS)
- Follow existing patterns in the codebase
- Use `clsx` and `tailwind-merge` for conditional classes

## Component Standards

- All components must be TypeScript (`.tsx`)
- Use proper TypeScript types for props
- Follow existing component patterns

## Testing

- Unit tests co-located next to source files
- Pattern: `ComponentName.test.tsx` next to `ComponentName.tsx`
- Use `@testing-library/react` for React tests

## Lint

- Run `npm run lint` after every change
- Fix lint errors before committing