---
description: Next.js App Router frontend — components, pages, Vitest, Tailwind for apps/web
globs: ["apps/web/**", "packages/types/**"]
alwaysApply: false
---

# Next.js Frontend

Stack: Next.js 16 App Router, React 19, TypeScript strict, Tailwind 4, Vitest + Testing Library.

## Structure

- Pages/layouts: `apps/web/src/app/`
- Unit tests: `apps/web/src/tests/unit/`
- Integration tests: `apps/web/src/tests/integration/`
- Shared types: `@medlens/types` from `packages/types`

## Conventions

- Default to Server Components; add `"use client"` only when hooks or browser APIs are required.
- Colocate tests with feature areas under `src/tests/`; mirror patterns in `home-page.test.tsx`.
- Fetch from API via typed contracts; do not duplicate backend business logic in the web layer.
- Accessible markup: semantic HTML, labels on inputs, focusable controls.
- No PII in client logs or error boundaries.

## Commands

```bash
pnpm --filter @medlens/web lint
pnpm --filter @medlens/web typecheck
pnpm --filter @medlens/web test:unit
```

Skill: `.cursor/skills/web-frontend/SKILL.md`