clerk-nextjs-skills — Claude Code skill for Clerk in Next.js 16
Walks your agent through Clerk auth in Next.js 16 App Router: proxy.ts, env vars, route protection and an MCP server.
npx skills add gocallum/nextjs16-agent-skills --skill clerk-nextjs-skills -a claude-codeWhat clerk-nextjs-skills does
The skill lays out the install path for Clerk in a Next.js 16 project. It covers adding @clerk/nextjs with pnpm, creating proxy.ts at the root or in /src, filling .env.local with the Clerk keys, and wrapping the app in ClerkProvider inside app/layout.tsx.
A separate section handles the move from Next.js 15. You rename middleware.ts to proxy.ts, keep the code as is, since clerkMiddleware() behaves the same either way. If routes stop being protected, the skill points at the file location and suggests clearing the cache with rm -rf .next && pnpm dev.
There is also a walkthrough for an MCP server built on @vercel/mcp-adapter and @clerk/mcp-tools, with a route at app/[transport]/route.ts. One thing to watch: clerkMiddleware() leaves every route public by default, so you add auth.protect() yourself. You will need a publishable key and a secret key from the Clerk dashboard.
What it helps with
- set up Clerk auth in a fresh Next.js 16 project
- rename
middleware.tstoproxy.tswithout touching the code - lock down routes with
auth.protect() - catch missing Clerk env vars before runtime
- build an MCP server that verifies Clerk tokens
Example prompts for the agent
- Set up Clerk auth in my Next.js 16 App Router project
- Help me migrate
middleware.tstoproxy.ts - Protect this route with
auth.protect()and show the signed-in user
How to install clerk-nextjs-skills
1Skills CLI (Vercel)
npx skills add gocallum/nextjs16-agent-skills --skill clerk-nextjs-skills -a claude-code2Manually: put the files in place
~/.claude/skills/clerk-nextjs-skills/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/clerk-nextjs-skills/
1Skills CLI (Vercel)
npx skills add gocallum/nextjs16-agent-skills --skill clerk-nextjs-skills -a codex2Manually: put the files in place
.agents/skills/clerk-nextjs-skills/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add gocallum/nextjs16-agent-skills --skill clerk-nextjs-skills -a cursor2Manually: put the files in place
.cursor/skills/clerk-nextjs-skills/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install gocallum/nextjs16-agent-skills clerk-nextjs-skills2Manually: put the files in place
.github/skills/clerk-nextjs-skills/SKILL.md1Skills CLI (Vercel)
npx skills add gocallum/nextjs16-agent-skills --skill clerk-nextjs-skills -a gemini-cli2Platform CLI
gemini skills install https://github.com/gocallum/nextjs16-agent-skills --path skills/clerk-nextjs-skillsManually: put the files in place
.devin/skills/clerk-nextjs-skills/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add gocallum/nextjs16-agent-skills --skill clerk-nextjs-skills -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 clerk-nextjs-skills
How do I install clerk-nextjs-skills in Claude?
Run npx skills add gocallum/nextjs16-agent-skills --skill clerk-nextjs-skills -a claude-code. The skill lands at ~/.claude/skills/clerk-nextjs-skills/SKILL.md.
What does clerk-nextjs-skills do?
It guides your agent through Clerk setup for Next.js 16: dependencies, proxy.ts, environment variables, ClerkProvider in the layout, route protection and an MCP server.
Why are my routes still public after adding Clerk?
clerkMiddleware() does not protect routes by default. You call auth.protect() explicitly, either in a page or in proxy.ts to cover everything.
