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

# Project Instructions

## Overview
This is a TypeScript monorepo using pnpm workspaces.

## Code Style
- Use strict TypeScript with no implicit any
- Prefer functional components with hooks
- All exports should be named (no default exports)

## Architecture
- /packages/core — shared business logic
- /packages/ui — React component library
- /apps/web — Next.js frontend

## Build & Test
Run tests with: pnpm test
Build all packages: pnpm build
All PRs must have >80% coverage on changed files.

## Conventions
- Use conventional commits (feat:, fix:, chore:)
- Prefer composition over inheritance
- See @docs/api-guidelines.md for API design patterns