Next.js team kit

Verified

I reach for this when the repo is Next.js and more than one person will read the PR. Vercel’s rules keep the agent on current React. 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 React and Next defaults, 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.
  • Next best practices: App Router defaults from the Next team.
  • Composition patterns: components that compose, not prop piles.
  • 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.
  • 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 react-best-practices and next-best-practices. No pages router.
2. Prefer 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.
6. If CI is red, use gh-fix-ci on the logs. Do not guess.

## Skills

react-best-practices, next-best-practices, composition-patterns,
web-design-guidelines, webapp-testing, code-review, code-reviewer, 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.

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

Requires Node.js 18+.

npx skills add vercel-labs/next-skills --skill next-best-practices

Requires Node.js 18+.

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

Requires Node.js 18+.

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

Requires Node.js 18+.

npx skills add anthropics/claude-plugins-official --skill code-reviewer

Requires Node.js 18+.

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

Requires Node.js 18+.

Skills in this kit