Agent skill · software engineering · vercel
next-dev-loop
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`.
Why this skill is useful
Adds specific commands and procedures for verifying Next.js runtime behavior that the AI wouldn't reliably generate on its own.
What it needs
Requires agent-browser, next installed locally. About 5k tokens when loaded. Last updated 2026-08-07. 141,663 stars on the source repository.
What this skill does
next-dev-loop The edit/verify rhythm during next dev — make a change, then confirm it actually works at runtime, not only that the types or the build are happy. You verify through two views of the same running app: /next/mcp — an HTTP endpoint Next.js exposes about itself. Knows framework-specific things: routes, segments, RSC, server actions, server logs, and errors as Next.js saw them. Call tools/list for the current surface. agent-browser — a CLI that drives a real Chrome. Knows framework-agnostic browser things: DOM, console, network, React fiber, vitals. Before driving it, run agent-browser skills get core once for the version-matched usage guide — don't guess subcommands from memory. The two views cross-check each other. requires Next.js 16.3+ with Turbopack — /next/mcp plus the proactive compile check via getcompilationissues. agent-browser >= 0.31.1 — React introspection, worktree-scoped session id, idempotent --restore, and launch flag reconciliation. These are hard floors, not soft preferences. If anything is missing, tell the user how to upgrade and stop. Don't fall back to grepping source or to a weaker probe — this skill assumes both views are live at the versions above. Upgrade Next.js: pnpm next upgrade (or npx next upgrade). Docs: https://nextjs.org/docs/app/getting-started/upgrading (version-16 guide: https://nextjs.org/docs/app/guides/upgrading/version-16) Install or upgrade agent-browser: npm i -g agent-browser@latest. If the CLI isn't on PATH, install it before continuing — preflight expects to invoke it directly. preflight Once per session, confirm both views are live. 1. Open agent-browser at the target URL, restoring saved login state when present. First derive one stable session id for this checkout and use it for every agent-browser command: Then open the target URL: --scope worktree keeps parallel worktrees and copied checkouts from colliding. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills vercel/next-dev-loop