| 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
- 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.
- Types: Add or extend interfaces in
frontend/src/types/ for request/response shapes.
- 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.
- Components: Add feature-specific UI under
frontend/src/components/<feature>/. Reuse common/ and ui/ for primitives; use layout/ for shell.
- 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.
- 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.
