Use when modifying or extending an existing frontend component in apps/web while preserving project styling conventions, hook boundaries, and accessibility.

2026-05-190

enforce-apollo-state-boundary

takeshi-su57/luckyplans

Use when introducing or modifying frontend state management to keep GraphQL data in Apollo cache and avoid mixed-state ownership.

2026-05-190

enforce-frontend-auth-boundary

takeshi-su57/luckyplans

Use when implementing frontend auth-adjacent behavior to preserve gateway-managed session architecture and avoid token handling in the browser.

2026-05-190

name	add-frontend-page
description	Use when adding a new Next.js App Router page in apps/web, including route structure, data hooks usage, and auth/session-aware behavior.

Add Frontend Page

Overview

Create new pages in apps/web using App Router patterns and LuckyPlans data/auth boundaries.

When To Use

Add a new route/page in frontend.
Add a protected app page behind session flow.
Add a page consuming GraphQL data through existing hook patterns.

Rules

Use App Router structure under apps/web/src/app.
Do not call useQuery/useMutation directly in page components; use custom hooks from src/hooks.
Use generated GraphQL client patterns (no manual .graphql files).
Keep frontend token-agnostic; auth is gateway-managed via session_id cookie.
Preserve existing design system and project UI conventions.

Checklist

Add route files in apps/web/src/app/<route>/.
If data is needed, add/update hooks in apps/web/src/hooks/.
Use generated GraphQL types/operations pattern already used in repo.
Handle loading/error/empty states.
For protected pages, align behavior with middleware/session model.
Run pnpm lint, pnpm type-check, pnpm build, pnpm format:check.

Common Mistakes

Querying directly inside page instead of hooks.
Introducing auth token handling in frontend.
Creating separate .graphql operation files against project convention.