// Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
Guide for building features, pages, tables, forms, themes, and navigation in this Next.js 16 shadcn dashboard template. Use this skill whenever the user wants to add a new page, create a feature module, build a data table, add a form, configure navigation items, add a theme, set up RBAC access control, or work with the dashboard's patterns and conventions. Also triggers when adding routes under /dashboard, working with Clerk auth/orgs/billing, creating mock APIs, or modifying the sidebar. Even if the user doesn't mention "dashboard" explicitly — if they're adding UI, pages, or features to this project, use this skill.
TanStack Query v5 data fetching patterns including useSuspenseQuery, useQuery, mutations, cache management, and API service integration. Use when fetching data, managing server state, or working with TanStack Query hooks.
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
Headless, performant, and type-safe form state management for TS/JS, React, Vue, Angular, Solid, Lit, and Svelte.
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
| name | next-best-practices |
| description | Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling |
| user-invocable | false |
Apply these rules when writing or reviewing Next.js code.
See file-conventions.md for:
Detect invalid React Server Component patterns.
See rsc-boundaries.md for:
Next.js 15+ async API changes.
See async-patterns.md for:
params and searchParamscookies() and headers()See runtime-selection.md for:
See directives.md for:
'use client', 'use server' (React)'use cache' (Next.js)See functions.md for:
useRouter, usePathname, useSearchParams, useParamscookies, headers, draftMode, aftergenerateStaticParams, generateMetadataSee error-handling.md for:
error.tsx, global-error.tsx, not-found.tsxredirect, permanentRedirect, notFoundforbidden, unauthorized (auth errors)unstable_rethrow for catch blocksSee data-patterns.md for:
Promise.all, Suspense, preload)See route-handlers.md for:
route.ts basicspage.tsxSee metadata.md for:
generateMetadata functionnext/ogSee image.md for:
next/image over <img>sizes attributeSee font.md for:
next/font setupSee bundling.md for:
See scripts.md for:
next/script vs native script tagsid@next/third-partiesSee hydration-error.md for:
See suspense-boundaries.md for:
useSearchParams and usePathnameSee parallel-routes.md for:
@slot and (.) interceptorsdefault.tsx for fallbacksrouter.back()See self-hosting.md for:
output: 'standalone' for DockerSee debug-tricks.md for:
--debug-build-paths