nextjs-core — Claude Code skill: what it does, how to install
Guides AI coding agents through Next.js App Router conventions: server-first components, safe Server Actions, and explicit cache revalidation.
npx skills add bobmatnyc/claude-mpm-skills --skill nextjs-core -a claude-codeWhat nextjs-core does
This skill enforces core App Router patterns for Next.js projects. It keeps components on the server by default and restricts "use client" directives to cases where interactivity is genuinely required. Route handlers manage incoming API requests and webhooks, paired with loading and error boundaries.
Mutations stay inside Server Actions alongside server-side validation and authorization. The rules explicitly flag client-only authorization checks as an anti-pattern. Initial data fetching inside useEffect and overly broad cache invalidation are also blocked.
What it helps with
- shift mutations to Server Actions with server validation
- eliminate initial data fetching inside useEffect
- set up targeted cache revalidation by tags and paths
- structure route handlers with loading and error boundaries
Example prompts for the agent
- Create a Server Action for user profile updates with authorization checks
- Refactor this page to Server Components and remove unnecessary use client directives
- Build a webhook route handler with error boundaries and tag revalidation
How to install nextjs-core
1Skills CLI (Vercel)
npx skills add bobmatnyc/claude-mpm-skills --skill nextjs-core -a claude-code2Manually: put the files in place
~/.claude/skills/nextjs-core/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/nextjs-core/
1Skills CLI (Vercel)
npx skills add bobmatnyc/claude-mpm-skills --skill nextjs-core -a codex2Manually: put the files in place
.agents/skills/nextjs-core/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add bobmatnyc/claude-mpm-skills --skill nextjs-core -a cursor2Manually: put the files in place
.cursor/skills/nextjs-core/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install bobmatnyc/claude-mpm-skills nextjs-core2Manually: put the files in place
.github/skills/nextjs-core/SKILL.md1Skills CLI (Vercel)
npx skills add bobmatnyc/claude-mpm-skills --skill nextjs-core -a gemini-cli2Platform CLI
gemini skills install https://github.com/bobmatnyc/claude-mpm-skills --path toolchains/nextjs/nextjs-coreManually: put the files in place
.devin/skills/nextjs-core/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add bobmatnyc/claude-mpm-skills --skill nextjs-core -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about nextjs-core
How do I install nextjs-core in Claude Code?
Run npx skills add bobmatnyc/claude-mpm-skills --skill nextjs-core -a claude-code in your terminal. This creates ~/.claude/skills/nextjs-core/SKILL.md.
What does nextjs-core do?
It provides Next.js App Router conventions focusing on Server Components by default, Server Actions for mutations, and explicit caching strategies.
Which anti-patterns does nextjs-core flag?
It stops agents from relying on client-only authorization and blocks fetching initial data inside useEffect.
Source text
SKILL.md · MIT
---
name: nextjs-core
description: Core Next.js patterns for App Router development including Server Components, Server Actions, route handlers, data fetching, and caching strategies
user-invocable: false
disable-model-invocation: true
version: 1.1.0
category: toolchain
progressive_disclosure:
entry_point:
summary: "Server-first patterns with safe mutations (Server Actions) and explicit caching/revalidation"
tags: [nextjs, app-router]
---
# Next.js Core (App Router)
- Server Components by default; minimal `"use client"`.
- Mutations in Server Actions (validate/authz; revalidate tags/paths).
- Route handlers for APIs/webhooks; add loading/error boundaries.
Anti-patterns:
- ❌ Fetch initial data in `useEffect`.
- ❌ Cache or revalidate too broadly.
- ❌ Client-only authz.
References: see `references/` (server actions, fetching, caching, routing, auth, testing).
© bobmatnyc · MIT · bobmatnyc/claude-mpm-skills
