next-dev-loop skill: make your agent check Next.js changes in a running app

A Next.js skill that makes your coding agent check each edit in your running dev app, not just in the type checker.

Installs: 23.4K; on skills.sh
Stars: 143.5K; on GitHub
Updated: Nov 2026; last repo commit

next-dev-loop tells your agent to verify every change at runtime. After an edit it checks for compile errors, runtime errors, what the page shows, and React behavior. It uses two views of the same app: the /_next/mcp endpoint that next dev exposes, and agent-browser, a command line tool that drives a real Chrome.

It triggers when you edit app code and want proof it works. It needs a running next dev, Next.js 16.3 or newer with Turbopack, and agent-browser 0.31.1 or newer. If any of that is missing, the skill tells the agent to explain how to upgrade and stop.

Good for

Next.js developers who let an agent edit app code
Teams on Next.js 16.3 or newer with Turbopack
Anyone tired of "it compiles" changes that break in the browser

Install next-dev-loop

Claude Code

Copy this prompt.

Install the next-dev-loop skill in Claude Code. Run this command:

npx skills add https://github.com/vercel/next.js --skill next-dev-loop

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Verify Next.js runtime behavior after editing app code. Use this skill to confirm a change actually works in a running app — not just that it compiles or type-checks. Combines /_next/mcp (Next.js's view) with agent-browser (the browser's view). Requires a running `next dev`.

Sections in SKILL.md

requires
preflight
loop
before the edit — narrow the scope
after the edit — verify
gotchas
reference
teardown
Report Next.js friction

Key facts

Author: Vercel (the Next.js team)
Repository: vercel/next.js (skills/next-dev-loop)
Installs on skills.sh: 23,442 as of 2026-11-02
GitHub stars: 143,460 for the whole vercel/next.js repo, 2026-11-02
License: MIT (as detected by GitHub)
Last commit to the repo: 2026-11-01
What is inside: 1 file (SKILL.md only)

What it includes

Stops unless Next.js 16.3+, Turbopack and agent-browser 0.31.1+ are present
The skill treats the version floors as hard rules. If something is missing, the agent tells you how to upgrade and does not fall back to searching source code.
Read · requires check
Opens the app in agent-browser and probes /_next/mcp
Once per session the agent derives a session id for your checkout, opens your URL in agent-browser with react-devtools on, lists the /_next/mcp tools and reads the route map.
Try: “Use next-dev-loop to check my change on the /pricing page.”
Runs code · preflight
Asks the running app which files render the current route
Instead of searching the codebase, the agent asks /_next/mcp which files power the route and uses those as its search scope.
Network · before the edit
Checks compile, errors, visible behavior and React behavior
Four checks: get_compilation_issues for compile problems, /_next/mcp for server and browser errors, agent-browser for what the user sees, and react-devtools for renders, props and suspense fallbacks.
Runs code · after the edit
Seven Next.js tools such as get_routes, get_errors and get_logs
The seven Next.js tools the skill lists: get_project_metadata, get_routes, get_errors, get_page_metadata, get_logs, get_server_action_by_id and get_compilation_issues. get_compilation_issues works only with Turbopack.
Network · /_next/mcp reference tools
Closes the browser session and saves login state
The agent closes the agent-browser session with --restore so cookies and storage are saved for the next loop. It leaves next dev running.
Runs code · teardown
Do not move .next; keep the session id on every command
Moving or deleting .next while the dev server runs resets its state. Every agent-browser command needs the session and restore key. When the two views disagree, suspect the browser session first.
Read · gotchas

From the official docs

Permissions

Medium risk

The agent runs a browser tool on your machine and keeps its login cookies between sessions. Use it on your own dev app with test accounts.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It drives a browser that keeps your login state
With --restore the session cookies and storage are saved and reloaded. Point it at local or test accounts, not your real production logins.
It tells the agent to install agent-browser globally
If the CLI is missing the SKILL.md says to install it with npm i -g agent-browser@latest. Check the package yourself before you approve that command.
Page content flows into the conversation
The agent reads DOM, console and network output. Only open pages you control.

Technical details

Talks to	http://localhost:<port>/_next/mcp (your dev server). the URL you give agent-browser
Sign-in and keys	agent-browser saves cookies and localStorage for the session id on close and loads them on the next --restore open.
Scopes	Runs agent-browser commands that drive a real Chrome Reads the local /_next/mcp endpoint of your dev server Saves and restores browser cookies and localStorage for the session

Questions

What does next-dev-loop do?

It makes your agent confirm an edit works in a running next dev app. It checks compile status, errors, the rendered page and React behavior, using the Next.js /_next/mcp endpoint and the agent-browser tool.

What do I need before using it?

A running next dev on Next.js 16.3 or newer with Turbopack, and agent-browser 0.31.1 or newer. The SKILL.md says these are hard floors, and the agent should stop and tell you how to upgrade when one is missing. It names pnpm next upgrade and npm i -g agent-browser@latest.

How do I install it in Claude Code, the Claude app or Codex?

Use the install box at the top of this page. It is a single SKILL.md file with no bundled scripts. The SKILL.md does not name which clients it works in.

Does it work with webpack or older Next.js?

No. The SKILL.md says to refuse when Turbopack is not in use (get_compilation_issues reports "Turbopack project is not available") or when Next.js is below 16.3.

Is it safe to use?

It runs commands on your machine and drives a real browser, so read what the agent proposes. It tells the agent to run agent-browser commands, to probe a local /_next/mcp URL, and to save browser cookies and storage between sessions. Use it on projects and logins you trust.

Does it keep me logged in during tests?

Yes, in the way the SKILL.md describes. It opens the browser with --restore, which loads saved cookies and localStorage for the session and saves them on close. If you need to log in by hand, it can reopen the session headed.

Information

updated Nov 2, 2026

Repository: vercel/next.js
Folder: skills/next-dev-loop

vercel/next.js skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 1

next-dev-loop SKILL.md · github.com