Comprehensive guidance for writing and reviewing Next.js code — RSC boundaries, async patterns, routing, error handling, and data fetching.
What it does
Next.js App Router has enough sharp edges that Claude consistently generates code with subtle issues: `use client` directives placed too high in the component tree, async operations handled incorrectly in server components, data fetching that re-runs on every render because it's in the wrong place, and error boundaries missing from layouts that need them. This skill loads Vercel's Next.js-specific guidance: correct file conventions, server action patterns, middleware usage, route handler structure, and the specific places where App Router diverges from what Claude expects.
Use case
Any Next.js App Router project. Pair with vercel-react-best-practices for full coverage — this skill handles Next.js-specific patterns (routing, server actions, layouts), that one handles React patterns (components, hooks, rendering). Made by Vercel Labs.
"Build a server action for this form that validates input and writes to the database." "Why is this data fetching running twice? Fix the pattern." "Add error handling to this route — the right place for the error boundary." "Is my use of cookies in this server component correct?" "Build a layout that wraps the dashboard routes with auth checking."
Install in your Next.js project. Claude applies App Router patterns correctly to all generated code.
For architecture questions: ask Claude about the correct pattern for your specific case — it explains the trade-off, not just the answer.
Use for code review: ask Claude to audit a file for Next.js anti-patterns.
Input
Next.js component code, a feature description, or an architectural question about your application.
Output
Next.js code with correct App Router patterns: properly placed server/client boundaries, correct server action structure, appropriate Suspense usage, and accurate error boundary placement.
npx skillsadd vercel-labs/next-skills/next-best-practices
npx skillsadd vercel-labs/skills/next-best-practices
Requires skills.sh CLI
Build Obsidian.md plugins following official API patterns, TypeScript best practices, and plugin review guidelines.
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.
Techniques for context engineering with AI agents — managing context windows, prompt structure, and knowledge organisation.