# Coding Conventions

## Tech Stack

React + TypeScript + Mantine UI (`@mantine/core`, `@mantine/hooks`, `@mantine/form`)

## Style Guidelines

- Run `npm run format` before committing (enforced via `husky` and `lint-staged`)
- Named function exports: `export function ComponentName` (not `React.FC`)
- Use `React.lazy()` for route-level components
- PascalCase for components/types, camelCase for functions/variables, UPPER_SNAKE_CASE for constants

## TypeScript

- Use interfaces for data structures
- Avoid comments; use TSDoc only for public APIs
- Strict mode enabled - no `any` types

## State & Imports

- Use `create-pubsub` for global state (avoid nested context providers)
- Prefer absolute path aliases where configured (`@/` for client root)

## UI & Performance

- Use Mantine components for consistency
- Ensure keyboard navigation, ARIA labels, semantic HTML
- Use `React.memo()` and `useCallback()` for optimization

## File Organization

- Components organized by feature domain
- Each component folder is self-contained
- Hooks in dedicated `hooks/` directories
- Shared utilities in `shared/` or component-level `utils/`

## Error Handling

- Use error boundaries for React components
- Proper TypeScript error types
- Graceful degradation for AI features

## Related Topics

- **Project Structure**: `docs/project-structure.md` - Directory organization
- **Design**: `docs/design.md` - UI/UX principles
- **UI Components**: `docs/ui-components.md` - Component architecture
- **Pull Requests**: `docs/pull-requests.md` - Contribution workflow