---

name: add-frontend-page description: Implement a new frontend page and wire it to the backend API (API client, types, route, components, navigation, tests). Use when adding a new screen or feature that talks to the API.

Add Frontend Page and Wire to API

When to Use

• User asks to add a new page, screen, or frontend feature.
• User mentions a new route or UI that needs to call the API.
• Task involves creating a new Next.js page and connecting it to the backend.

Context

• Follow .cursor/AGENTS.md (section "Adding a new frontend page and wiring it to the API") and .cursor/rules.md for standards and the full walkthrough.
• Use any user-provided context (route path, feature name, Jira key) as scope or target.

Instructions

1. API client: Add typed functions in frontend/src/lib/api/<domain>Api.ts that call the backend. Use the shared api axios instance from frontend/src/lib/api.ts. Return typed data; do not call axios from components.
2. Types: Add or extend interfaces in frontend/src/types/ for request/response shapes.
3. Route: Add a page at frontend/src/app/<path>/page.tsx. Page should read route params, call API functions or hooks, compose feature components, handle loading/error UI. Keep page logic minimal.
4. Components: Add feature-specific UI under frontend/src/components/<feature>/. Reuse common/ and ui/ for primitives; use layout/ for shell.
5. Navigation: Add links or routes in the app shell (e.g. frontend/src/components/layout/ or the relevant nav component) so the new page is reachable.
6. Tests: Add or extend tests under frontend/src/__tests__/ (e.g. __tests__/components/<feature>/<Component>.test.tsx or integration test). Follow test file conventions in AGENTS.md (Testing section).

For the complete walkthrough and file conventions, see .cursor/AGENTS.md.