菜单
Use when adding a new Next.js App Router page in apps/web, including route structure, data hooks usage, and auth/session-aware behavior.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when introducing or expanding tests in LuckyPlans, especially service logic, shared utilities, controllers, and resolvers.
Use when implementing or modifying frontend UI in apps/web to enforce the repository's HeroUI + Notion-style baseline consistently.
Use when adding a new GraphQL query or mutation in apps/web so the operation is defined inline in a hook and consumed by components.
Use when modifying or extending an existing frontend component in apps/web while preserving project styling conventions, hook boundaries, and accessibility.
Use when introducing or modifying frontend state management to keep GraphQL data in Apollo cache and avoid mixed-state ownership.
Use when implementing frontend auth-adjacent behavior to preserve gateway-managed session architecture and avoid token handling in the browser.
| 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. |
Create new pages in apps/web using App Router patterns and LuckyPlans data/auth boundaries.
apps/web/src/app.useQuery/useMutation directly in page components; use custom hooks from src/hooks..graphql files).session_id cookie.apps/web/src/app/<route>/.apps/web/src/hooks/.pnpm lint, pnpm type-check, pnpm build, pnpm format:check..graphql operation files against project convention.