Source: vercel/next.js · Maintainer: Vercel · License: MIT · Checked: 24 October 2026
What is the next-dev-loop skill?
next-dev-loop is the official Next.js skill that makes a coding agent prove a change works in the running app, not just that it compiles. After each edit, Claude Code, Codex or another agent checks the dev server's own view through /_next/mcp and the real browser's view through the agent-browser CLI. It is for Next.js developers who want the agent to catch runtime errors, hydration problems and broken UI before telling you it's done.
The Next.js team maintains it in the framework repo under vercel/next.js/skills, so it stays version-matched with Next.js. The skill's description opens: "Verify Next.js runtime behavior after editing app code."
It is the most-installed skill in that folder, with about 21,900 installs on its skills.sh page (snapshot, 24 October 2026). The Next.js guide on AI coding agents calls it a "runtime foundation" that gives "any coding task a repeatable inspect, edit, and verify cycle."
Why is it a workflow skill and not a Next.js reference?
Because Next.js moved its reference knowledge out of skills. The old vercel-labs/next-skills repo now says next-best-practices "is no longer a skill" and next-upgrade was retired too. That knowledge ships as docs inside the package at node_modules/next/dist/docs/, and next dev writes an AGENTS.md block pointing agents at them in Next.js 16.3 and later.
The Next.js docs explain the split: "Framework knowledge comes from the bundled docs, not from Skills." They cite Vercel research that found "a 100% pass rate with bundled documentation, compared with up to 79% for Skill-based approaches." Skills now cover tasks that are workflows rather than lookups.
The folder holds six skills as of 24 October 2026:
| Skill | What it does |
|---|---|
next-dev-loop |
Verifies each edit against the running dev server and browser |
next-cache-components-adoption |
Migrates an app to Cache Components, one feature at a time |
next-cache-components-optimizer |
Expands a route's static shell, backed by a failing instant() test |
next-partial-prefetching-adoption |
Moves an app onto Partial Prefetching |
next-partial-prefetching-optimizer |
Tunes what is prefetched for chosen navigations |
next-bundle-optimizer |
Finds what makes client bundles large, using Turbopack's analyzer |
What does next-dev-loop do?
The skill is a single SKILL.md. It works through two views of the same running app that cross-check each other:
/_next/mcp, an endpoint the Next.js dev server exposes about itself: routes, segments, server actions, server logs and errors as Next.js saw them. The Next.js MCP docs say it is on by default innext dev.- agent-browser, a CLI from Vercel Labs that drives a real Chrome and reports the DOM, console, network, React component tree and Web Vitals as text.
Once per session, the agent runs a preflight. It opens agent-browser at your URL with a session id scoped to the current worktree and React DevTools enabled, probes /_next/mcp and confirms get_compilation_issues is listed, and calls get_routes for a route map. If the endpoint is missing, Next.js is too old or the dev server isn't running. If get_compilation_issues returns a "Turbopack project is not available" error, you're on webpack, and the skill refuses.
Before an edit, it asks the running app which files rendered the current route and uses those as its search scope. After an edit, it checks four failure modes:
- Compiles:
get_compilation_issues. - Runs without errors: server and bubbled-up browser errors from
/_next/mcp. - Behaves as intended: agent-browser drives the page and checks what a user sees.
- React-level behavior: the component tree, props, state and render counts, for issues like extra renders or Suspense fallbacks that DOM checks miss.
At the end it closes the browser session, which saves cookies so the next loop stays logged in, and leaves next dev running.
How do you install it?
The Next.js docs give this command for the skills CLI:
npx skills add vercel/next.js --skill next-dev-loop
Add -a claude-code to target Claude Code and -g to install it for every project. skills.sh shows the same install with the full URL, npx skills add https://github.com/vercel/next.js --skill next-dev-loop. To choose from all of the repo's workflow skills, the old next-skills README gives npx skills add vercel/next.js.
Then install the browser CLI, as the SKILL.md says:
npm i -g agent-browser@latest
In Claude Code, the folder lands in .claude/skills/next-dev-loop/ in your project, or ~/.claude/skills/next-dev-loop/ with -g, per the Claude Code skills docs. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.
How do you use it?
Start next dev, then give the agent a task. The Next.js docs suggest one standing instruction: "After every edit, verify the page still works at runtime using the next-dev-loop Skill."
Example prompts (suggestions, not quotes from the docs):
Add a loading state to /dashboard, then confirm it renders in the browser with no hydration errors.The checkout button does nothing. Find out why using the running app, fix it, and verify the click works.Move the product list into a server component and check the render count didn't go up.I'm logged in on the headed browser. Verify the settings page saves the new display name.
Requirements, which the skill treats as hard floors:
- Next.js 16.3 or later, running with Turbopack.
- agent-browser 0.31.1 or later on your
PATH. - A running
next dev. If it isn't on port 3000, the agent setsNEXT_MCP_URLto the right address.
If you're behind, the skill tells the agent to explain how to upgrade (npx next upgrade) and stop. It does not fall back to grepping source.
Tips and limits
From the SKILL.md and Next.js docs, not from testing:
- Don't delete
.nextwhile it runs. The skill warns that moving or deleting it disconnects the dev server from its state and drops caches. - Suspect the tooling first. If the browser says a route is broken but
/_next/mcpsays it rendered cleanly, a stale browser session is the likelier cause. A blank snapshot orabout:blankusually means the same thing. - Routine checks are headless. When login must carry over, the agent reopens the session headed and waits while you sign in.
- Feedback stays off by default. The skill joins Next.js's agent feedback pass only when the project has enabled it; the AI agents guide says that feature is experimental and nothing is sent until you select Send feedback.
- Security audits: Gen Agent Trust Hub, Socket and Snyk all showed Pass on skills.sh on 24 October 2026.
The skill runs agent-browser and dev server tools on your machine, so review it like any script. The vercel/next.js repository is MIT licensed.
Save it in your Kipt library
In Kipt, open Skills and paste the next-dev-loop folder link into the import box. Kipt brings in the SKILL.md; a link to a repo with many skills shows a list to pick from instead. You can also drop the folder or a .zip. Your copies live in your own private GitHub repo and install into Claude Code or Codex with npx skills add https://github.com/<you>/<repo>.git --all -g. Since Next.js keeps these version-matched, re-import when you upgrade Next.js. Kipt is not affiliated with Vercel.
Similar skills
- Agent browser skill: the browser CLI that next-dev-loop drives, as a skill on its own.
- React best practices skill: Vercel's performance rules for React and Next.js code.
- Webapp testing skill: Anthropic's Playwright-based skill for testing local web apps.
- Web performance skill: speed and Core Web Vitals checks once the page works.