菜单
Next.js 16 App Router best practices for this repo. Use when creating routes, layouts, data fetching, metadata, or anything touching the Next.js framework surface.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Clean code and structure standards for this repo. Use when writing or refactoring any TypeScript/React code — covers naming, file layout, typing, and testing discipline.
Self-review a change before declaring it finished. Use after implementing any feature or fix, before committing or reporting completion.
Understand the true intent behind a request before writing any code. Use at the start of every non-trivial task, especially vague ones ("make it better", "add a page", "fix the layout").
Security rules for all code in this repo. Use when handling any external input, env vars, auth, API routes, server actions, or dependencies.
UI/UX design standards for this stack (Tailwind v4 + shadcn/ui). Use whenever creating or modifying any page, component, layout, or style — the goal is professional, consistent UI with zero AI slop.
| name | nextjs-quality |
| description | Next.js 16 App Router best practices for this repo. Use when creating routes, layouts, data fetching, metadata, or anything touching the Next.js framework surface. |
This repo runs Next.js 16 — newer than most training data. When in doubt about an
API, read the bundled docs in node_modules/next/dist/docs/ instead of guessing from
memory. Heed deprecation notices.
"use client" only when the component needs
state, effects, event handlers, or browser APIs — and push that directive as deep into
the tree as possible (leaf components, not layouts).next lint does not exist in Next 16. Linting is the plain eslint CLI
(npm run lint). Never add next lint to scripts or docs.async Server Components and route handlers over
client-side useEffect fetching. Cache deliberately — know whether each fetch is
static, revalidated, or dynamic.route.ts handlers.src/app/<segment>/page.tsx. Route-specific components live next to the
route; shared components go in src/components/.layout.tsx (persistent shell),
loading.tsx (Suspense fallback), error.tsx (error boundary, must be a client
component), not-found.tsx.searchParams are async in Next 16 — await them:
const { slug } = await params.next/link; programmatic navigation uses useRouter from
next/navigation (never next/router).next/image (automatic sizing/optimization) — never bare <img>.next/font (already configured with Geist in the root layout).metadata or generateMetadata from pages/layouts — never manual
<head> tags.process.env.X; browser-visible only with NEXT_PUBLIC_
prefix. Document new variables in .env.example.pages/ directory, getServerSideProps, getStaticProps, getInitialPropsnext/head, next/routeruseEffect + fetch for data that could be fetched on the serverpages/api/ (use src/app/**/route.ts)After framework-level changes, run npm run build — it type-checks generated route types
and catches invalid segment configs that dev mode tolerates.