Next.js Agent Skills

Agent skills for common Next.js workflows.

Essential Skills

Start here. These background skills are auto-applied to prevent common mistakes.

next-best-practices

Core Next.js knowledge:

• File Conventions - Project structure and special files
• RSC Boundaries - Server/Client Component rules
• Data Patterns - Fetching and mutation strategies
• Async Patterns - Next.js 15+ async APIs
• Directives - 'use client', 'use server', 'use cache'
• Functions - Navigation hooks, server functions, generate functions
• Runtime Selection - Node.js vs Edge runtime
• Error Handling - Error boundaries and redirects
• Route Handlers - API routes with route.ts
• Metadata - SEO, OG images, sitemaps
• Image - next/image optimization
• Font - next/font optimization
• Bundling - Package compatibility, CSS imports, polyfills
• Scripts - Third-party scripts, Google Analytics
• Hydration Errors - Debugging mismatches
• Suspense Boundaries - CSR bailout, Cache Components requirements
• Parallel Routes - Modal patterns with intercepting routes
• Self-Hosting - Docker, standalone output, ISR
• Debug Tricks - MCP endpoint, rebuild specific routes

Installation

# Install essentials (recommended)
npx skills add vercel-labs/next-skills --skill next-best-practices

# Or install everything
npx skills add vercel-labs/next-skills

Advanced Use Cases

Optional skills for specific needs. Invoke via slash commands.

next-upgrade

Upgrading between Next.js versions with official migration guides.

npx skills add vercel-labs/next-skills --skill next-upgrade

next-cache-components

Next.js 16 Cache Components and PPR. Covers cacheComponents: true, 'use cache' directive, cache profiles, cacheLife(), cacheTag(), and updateTag().

npx skills add vercel-labs/next-skills --skill next-cache-components

Usage

Background skills (next-best-practices) are automatically applied when relevant.

Slash commands for advanced skills:

/next-upgrade
/next-cache-components

Related Skills

For React-specific patterns (hooks, state management, component composition):

npx skills add vercel-labs/agent-skills --skill react-best-practices

Contributing

Each skill follows the Agent Skills open standard:

1. Create a directory under skills/ with the skill name (prefix with next-)
2. Add a SKILL.md file with YAML frontmatter:

   ---
   name: next-skill-name
   description: Brief description
   user-invocable: false  # for background skills
   ---

3. For complex skills, add additional .md files and reference them from SKILL.md