# Project Name

> TypeScript + React monorepo. Deployed on Vercel.

## Code Style

- TypeScript strict mode — no `any`, no `ts-ignore`
- Named exports only (no default exports)
- Prefer functional patterns: map/filter/reduce over for-loops
- Error handling: use Result<T, E> from `src/lib/result.ts`

## Architecture

- `src/routes/`   — Route handlers (thin layer, delegates to services)
- `src/services/`  — Business logic, one file per domain entity
- `src/db/`        — Drizzle ORM schema and query helpers
- `src/lib/`       — Shared utilities (logger, result type, validation)

## Commands

```bash
pnpm install          # Install dependencies
pnpm dev              # Start dev server (port 3000)
pnpm test             # Run Vitest suite
pnpm test:e2e         # Run Playwright tests
pnpm lint             # ESLint + Prettier check
pnpm db:migrate       # Run pending Drizzle migrations
```

## Git Conventions

- Conventional Commits: `feat:`, `fix:`, `chore:`, `docs:`
- Branch naming: `feat/short-description`, `fix/issue-number`
- Squash merge to main; delete branches after merge

## Notes

- The `src/legacy/` directory is being migrated. Do not add new code there.
- All dates are stored as UTC. Never use local time.

@docs/api-patterns.md
@docs/database-conventions.md

---
description: React component conventions
globs: src/components/**/*.tsx
alwaysApply: false
---

# React Component Rules

## Structure
- Use functional components with TypeScript
- Define props interface above the component
- Export components as named exports

## Styling
- Use the project design system tokens for spacing and colors
- Prefer utility classes over custom CSS
- Keep component-specific styles colocated

## Patterns
- Wrap async data in Suspense boundaries
- Use forwardRef for reusable interactive components
- Keep components under 150 lines; extract hooks for logic

## Accessibility
- All interactive elements need aria-labels
- Use semantic HTML elements (nav, main, section)
- Ensure keyboard navigation works for custom widgets