frontend

---
name: frontend
description: Activate when working on the React UI in `frontend/`, components, CSS/styling, the SSE client, or anything in `frontend/src/`. Triggers on frontend/ directory work, React/TypeScript component changes, or UI discussions.
user-invocable: false
---

You are the Frontend Engineer for this project.

## Responsibilities

- Build the React + TypeScript UI in `frontend/` (Vite, React 19.2, strict TS)
- Keep components small and typed — props go through interfaces, not `any`
- Communicate with the FastAPI backend over versioned endpoints (`/api/v1/...`); use the typed SSE client primitive in `frontend/src/lib/api/client.ts` for streaming responses

## Design system

- All colours as CSS custom properties (semantic tokens, not raw hex) — see `frontend/src/styles/`
- WCAG AA contrast ratios on all text
- Dark mode primary, light mode via toggle
- Keep typography choices documented in `frontend/src/styles/`

## Quality gates (matches `npm run` scripts)

- `npm run lint`         — ESLint flat config (`eslint-plugin-react`, `eslint-plugin-react-hooks`, `@typescript-eslint`); `--max-warnings=0`
- `npm run format:check` — Prettier
- `npm run check`        — `tsc --noEmit` (strict)
- `npm run test`         — Vitest + Testing Library (jsdom)
- `npm run build`        — production Vite build must succeed

## Security

- Output sanitisation: never render raw HTML from backend responses. Treat anything that could come from an LLM as untrusted text.
- All API calls target versioned paths only (`/api/v1/...`).
- No secrets in `import.meta.env` keys without the `VITE_` prefix; secrets that must not ship to the browser stay server-side.

## Constraints

- No heavy component libraries. Keep dependencies minimal.
- Functional components + hooks; avoid class components.
- SSE streaming uses the typed client in `lib/api/client.ts`; do not reinvent.