Next.js team kit

Verified against Claude Code 2.1.273, Codex CLI 0.154.0 · Updated

I reach for this when the repo is Next.js and more than one person will read the PR. Vercel’s React rules keep the agent off 2019 patterns. Next’s own bundled docs, written into AGENTS.md by next dev, keep App Router current. Playwright against localhost is the UI proof. Review and CI skills catch what the author agent missed.

Who it is for

A team shipping a Next.js app. App Router, TypeScript, the usual Vercel stack.

What this combination solves

Agents trained on old React invent waterfalls, giant clients, and mystery CSS. This kit pins current React rules, points the agent at the Next docs that ship with your installed version, asks for composition and design, then proves the page in a browser and reviews the diff before CI is the first human in the loop.

Skills

  • React best practices: current React, not a 2019 blog post. Install name: vercel-react-best-practices.
  • Next bundled docs: App Router from node_modules/next/dist/docs/. The vercel-labs/next-skills README no longer lists next-best-practices; Next now ships that guidance in the bundled docs.
  • Composition patterns: components that compose, not prop piles. Install name: vercel-composition-patterns.
  • Web design guidelines: visual rules so “it renders” is not enough.
  • Webapp testing: Playwright against the local app.
  • Code review: a first-pass review from Sentry’s skill.
  • PR review agents: parallel reviewers with confidence scores. In Claude Code that is the pr-review-toolkit plugin.
  • GH fix CI: read the failing check and patch the cause.

AGENTS.md starter

# AGENTS.md

Next.js app. Read this first.

## Stack

- Next.js App Router
- TypeScript strict
- Tests: `npm test`
- Dev: `npm run dev`

## Hard rules

1. Follow vercel-react-best-practices. Read `node_modules/next/dist/docs/` before writing Next code. No pages router.
2. Prefer vercel-composition-patterns over a 400-line client component.
3. Match web-design-guidelines. Default gray boxes are a bug.
4. After UI work, run webapp-testing against localhost.
5. Do not mark a PR ready until code-review or pr-review-agents ran. In Claude Code, pr-review-agents is the pr-review-toolkit plugin.
6. If CI is red, use gh-fix-ci on the logs. Do not guess.

## Skills

vercel-react-best-practices, vercel-composition-patterns,
web-design-guidelines, webapp-testing, code-review, pr-review-agents, gh-fix-ci.

Verification hook

Fail the session if npm run build or the Playwright suite fails. See Verification loops.

Install

One command per source repo. --skill limits the install. -a claude-code (or cursor, codex) targets one agent. Flags checked against the skills CLI README. The published skills package (1.5.26) requires Node 22.20+.

npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices --skill vercel-composition-patterns --skill web-design-guidelines

Requires Node.js 22.20+.

This kit does not install next-best-practices from vercel-labs/next-skills. That repo’s README no longer lists it and points at Next’s bundled docs instead. On Next.js 16.3+, run next dev. It writes AGENTS.md and CLAUDE.md that point at those docs. On Next.js 16.2, the docs are already bundled; add AGENTS.md yourself pointing at node_modules/next/dist/docs/. On Next.js 16.1 or earlier:

npx @next/codemod@canary agents-md

Requires Node.js 20.9+ (Next.js minimum).

npx skills add anthropics/skills --skill webapp-testing

Requires Node.js 22.20+.

npx skills add getsentry/skills --skill code-review

Requires Node.js 22.20+.

This kit’s pr-review-agents entry is the Claude Code plugin pr-review-toolkit, not a skills CLI install. The official marketplace is registered on first interactive launch.

claude plugin install pr-review-toolkit@claude-plugins-official

If that marketplace is missing: claude plugin marketplace add anthropics/claude-plugins-official.

npx skills add openai/skills --skill gh-fix-ci

Requires Node.js 22.20+.

The openai/skills README marks that repo deprecated. gh-fix-ci is still there. I did not find it in openai/plugins.

Skills in this kit