菜单
Next.js App Router data layer: SSR hydration, React Query, auth patterns. Use when creating pages, adding tabs, or auditing data fetching.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/acampb/tripletownaces.com --skill nextjs-data命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Multi-phase audit pipeline with independent review agents. Use when finishing tickets, validating work against acceptance criteria, checking architecture compliance, or reviewing code against skill standards. Use /audit to run the full pipeline, /audit ac for acceptance criteria only, /audit arch for architecture only, /audit skill for skill compliance only.
Prepare code for commit by checking for bugs, ensuring consistency, removing debug code, and running checks until green. Use when finishing a feature, before committing, or when asked to "make it green" or "prep for commit".
JS/TS monorepo with pnpm workspaces and Turborepo. Use when setting up a monorepo, adding packages, or auditing config.
正在显示 SKILL.md
基于 SOC 职业分类
| name | nextjs-data |
| description | Next.js App Router data layer: SSR hydration, React Query, auth patterns. Use when creating pages, adding tabs, or auditing data fetching. |
Create and maintain Next.js App Router pages following the SSR + HydrationBoundary + React Query pattern with deterministic file structure.
| Command | Purpose | Modifies Code? |
|---|---|---|
/nextjs-data create | Create new pages with queries (list, detail) | Yes (approval) |
/nextjs-data add-tab | Add a new tab to existing detail page | Yes (approval) |
/nextjs-data skeleton | Create/update loading.tsx skeletons | Yes (approval) |
/nextjs-data review | Audit a specific feature for pattern issues | No |
/nextjs-data audit-all | Scan entire app for compliance issues | No |
/nextjs-data upgrade | Fetch latest docs and update skill patterns | Yes (approval) |
All sub-commands ask before making changes.
Load references based on the sub-command:
For create and add-tab (building pages):
For skeleton (loading states):
For review and audit-all (auditing):
For upgrade (updating skill):
loading.tsx won't animate. Read references/templates.md for the correct pattern.!data must show a skeleton, not null (which causes flash).page.tsx, content.tsx, loading.tsx, layout.tsx, default.tsx, error.tsx, not-found.tsx belong in app/ folders. Read references/file-structure.md for all placement rules./products/${id}/overview, not /products/${id} (which causes a redirect).default.tsx renders for ALL child routes; page.tsx only matches the exact route.error, isLoading, and !data states before rendering content.Read references/advanced-patterns.md for anti-patterns to avoid.
| Need | Page Type | Structure |
|---|---|---|
| List of items | List Page | page.tsx + content.tsx + loading.tsx |
| Simple detail (no tabs) | Single-Page Detail | [id]/page.tsx + content.tsx + loading.tsx |
| Detail with tabs | Detail Page | @header/ slot + tab routes (parallel routes) |
Always use parallel routes for detail pages with tabs. Benefits: correct loading skeleton during list-to-detail navigation, independent loading states, tab navigation doesn't reload the header.
/nextjs-data createCreate new pages with complete query layer and SSR hydration.
lib/queries/ (if exists) - reuse before creating new1. Gather requirements (page type, data source, which app)
2. Check/Create query layer (keys.ts + server.ts + client.ts)
3. Present plan to user (all files to create with locations)
4. After approval: create query, page.tsx, content.tsx, loading.tsx
For detail pages: layout.tsx, default.tsx, @header/, tabs
Read references/templates.md for complete code templates. Read references/file-structure.md for where every file goes.
/nextjs-data add-tabAdd a new tab to an existing detail page.
[id] route1. Locate existing detail page (layout.tsx, tabs array)
2. Determine data needs (reuse parent query or new sub-resource?)
3. Present plan (new tab folder, query additions, tab array update)
4. After approval: create {tab}/page.tsx, content.tsx, loading.tsx
Add query if needed, update tabs array in @header/content.tsx
Tab pages in parallel routes MUST have their own HydrationBoundary.
Read references/templates-detail-pages.md for tab page templates.
/nextjs-data skeletonCreate or update loading.tsx skeletons to match page structure.
When: After creating or modifying a page's content.tsx, or when loading states are missing or don't match the content layout.
content.tsx to understand the DOM structure to mirror<Skeleton> elementslib/domain/{feature}/layout-skeleton.tsxRead references/templates-detail-pages.md for the layout skeleton pattern.
/nextjs-data reviewAudit pages and queries for SSR hydration and pattern issues. Reports problems without modifying code.
When: Reviewing a specific feature's pages before or after changes, during code review, or when investigating SSR issues.
Read references/audit-patterns.md for the full review checklist and output format.
/nextjs-data audit-allScan an entire app for page pattern compliance. Generates a comprehensive report.
Use when: periodic health checks, before releases, after upgrading Next.js/React Query, onboarding.
Read references/audit-patterns.md for severity levels, audit flow, and discovery commands.
/nextjs-data upgradeFetch latest documentation and update skill patterns to stay current with framework evolution.
Read references/audit-patterns.md for the upgrade workflow and sources to check.
/react-ui - React component creation, extraction, patterns, review. Use for UI concerns (shadcn, forms, themes)./js-monorepo - Monorepo infrastructure (pnpm, Turborepo, shared packages). Use when setting up the repo structure./js-monorepo init first, then shadcn setup, then /react-ui create, then /nextjs-data create. Read the js-monorepo skill's shadcn-setup.md for the full sequence.Before completing any sub-command:
page.tsx uses getQueryClient() + getServerAuth + prefetchQuery + HydrationBoundarycontent.tsx has 'use client' + useQuery from client fetcherlib/queries/{domain}/mutations.ts use client API with invalidateQueries on successloading.tsx exists and mirrors content structureerror.tsx exists for error boundaries; detail pages have not-found.tsxnotFound() when entity doesn't exist