---
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

# Application Guidelines

## Architecture
- This is a monorepo managed with Turborepo
- Apps: web (Next.js), api (Express), mobile (React Native)
- Shared packages: ui, config, types

## Code Standards
- TypeScript strict mode in all packages
- Use barrel exports (index.ts) for public APIs
- No default exports; use named exports everywhere
- Prefer async/await over raw Promises

## API Design
- RESTful endpoints follow /api/v1/{resource} pattern
- All responses use { data, error, meta } envelope
- Validate request bodies with Zod schemas
- Return 4xx for client errors, 5xx for server errors

## Database
- Use Prisma ORM for all database operations
- Migrations checked into source control
- Soft-delete pattern: use deletedAt timestamp, never hard delete
- All timestamps stored as UTC

## Testing
- Jest for unit tests, Playwright for E2E
- Test files colocated: foo.ts -> foo.test.ts
- Mock external services, never call real APIs in tests