Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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`.
.claude/skills/asymmetric-al-next-dev-loop/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-07 | ✗→✓ | ▲ Improved | 37% | 0% |
| case-08 | ✗→✓ | ▲ Improved | 80% | 0% |
| case-09 | ✗→✓ | ▲ Improved | 69% | 0% |
| case-10 | ✗→✓ | ▲ Improved | 49% | 0% |
| case-11 | ✗→✓ | ▲ Improved | 16% | 0% |
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. Knowsframework-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.
/_next/mcp plus theproactive compile check via get_compilation_issues.
agent-browser >= 0.31.1 — React introspection, worktree-scopedsession 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.
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)
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.
Once per session, confirm both views are live.
agent-browser at the target URL, restoring savedlogin state when present. First derive one stable session id for this checkout and use it for every agent-browser command:
bash SESSION="$(agent-browser session id --scope worktree --prefix next-dev-loop)" export AGENT_BROWSER_SESSION="$SESSION" export AGENT_BROWSER_RESTORE="$SESSION"
Then open the target URL:
bash agent-browser --session "$SESSION" --restore --headed --enable react-devtools open <url>
--scope worktree keeps parallel worktrees and copied checkouts from colliding. Bare --restore uses the session id as the persistence key, loads saved cookies/localStorage before navigation when present, and auto-saves state on close. Always pass the desired launch flags on open; agent-browser will reuse, relaunch, or restart its scoped background state as needed.
The browser is the user's. If state was not restored (first run, expired session) and the page is gated, the user drives the login — pause until they confirm. After login, continue using the same session and restore context; agent-browser close saves the cookie state so the next open restores it.
/_next/mcp (tools/list) — confirm it's reachable andlists get_compilation_issues:
next dev isn't running, or Next.js isbelow 16.3. Check package.json to disambiguate, then refuse.
get_compilation_issues not in the list → Next.js below 16.3.Refuse and tell the user to upgrade.
get_compilation_issues doubles as a Turbopack probe. An errorresponse of "Turbopack project is not available..." means the user is on webpack. Refuse — Turbopack is required.
get_routes → your route map for the rest of the session.Ask the running app, not the codebase. /_next/mcp knows which files rendered the current route; use those as your search scope. Runtime introspection stays cheap as the codebase grows; agentic search doesn't.
Four failure modes. Check each:
get_compilation_issues./_next/mcp (server and bubbled-upbrowser errors both surface here).
agent-browser drives the page; assertwhat the user actually sees.
agent-browser with react-devtoolsenabled exposes the component tree, props, state, and render counts. Anchor framework-level checks here (extra renders, server/client boundary shifts, suspense fallbacks) — DOM asserts alone miss them.
Pick the specific tool from tools/list or the agent-browser manual rather than from memory.
agent-browser command must know your session and restorekey, or it may use an empty default browser or fail to save login state. Easiest: export both AGENT_BROWSER_SESSION="$SESSION" and AGENT_BROWSER_RESTORE="$SESSION" at the top of each shell you run agent-browser in. If you do not export them, pass --session "$SESSION" --restore on every command.
agent-browser says a route is broken but /_next/mcp and the server say it rendered cleanly, a stale or misdirected browser session is the likelier cause than a real bug — reconcile the views before debugging the app.
wait with wait --load networkidle (no path to get wrong), then snapshot/read to confirm the page. Avoid wait --url unless you pass the link's exact href — a guessed or placeholder path won't match the real URL and times out after 25s.
about:blank, or a "no browsersession" error — right after open or after a click (even if open reported the page) — is the browser dropping the page (a stale session), not a broken route. Reopen your session at the URL with --session "$SESSION" --restore and re-snapshot; if still blank, run agent-browser --session "$SESSION" --restore close, then open again. Don't fall back to curl; it bypasses the browser you're testing.
/_next/mcp replies are SSE — read the JSON off the data: linewith sed -n 's/^data: //p' (a plain sed 's/^data: //' leaves the event: line and the parse fails).
next dev banner; setNEXT_MCP_URL=http://localhost:<port>/_next/mcp.
get_errors and get_page_metadata need at least one navigationto populate.
All tools below are present once preflight passes. If tools/list is missing any of them, preflight should have refused — re-check.
# /_next/mcp notes
get_project_metadata projectPath, devServerUrl, bundler
get_routes fs-scan; no browser session needed
get_errors runtime + build; needs a browser session;
includes browser-side errors caught by the
dev server
get_page_metadata segment trie + routerType; needs a browser
session; use as a discovery shortcut for
which files power a route
get_logs returns logFilePath
get_server_action_by_id hashed id → file + functionName
get_compilation_issues Turbopack only; errors on webpack
("Turbopack project is not available")Close the session with the same session and restore context: agent-browser --session "$SESSION" --restore close. close saves that session's cookies and storage so the next loop's --restore open keeps the user logged in. Leave next dev up for the next loop.
next-dev-loop-<topic> siblings (e.g. next-dev-loop-rsc, next-dev-loop-debug) assume this preflight already ran; they pick up at the loop.
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→fail | 7,430 | 7,900 | +6% | 1 | 1 | 0% | 1,134 | 2,554 | +125% | 0 | 0 | — |
case-02 | fail→fail | 10,971 | 6,648 | -39% | 1 | 1 | 0% | 1,831 | 2,446 | +34% | 0 | 0 | — |
case-03 | fail→fail | 12,224 | 6,225 | -49% | 1 | 1 | 0% | 1,948 | 2,468 | +27% | 0 | 0 | — |
case-04 | pass→pass | 9,456 | 3,737 | -60% | 1 | 1 | 0% | 1,514 | 2,701 | +78% | 0 | 0 | — |
case-05 | pass→pass | 12,866 | 12,527 | -3% | 1 | 1 | 0% | 2,508 | 4,466 | +78% | 0 | 0 | — |
case-06 | pass→pass | 16,702 | 17,229 | +3% | 1 | 1 | 0% | 3,076 | 5,286 | +72% | 0 | 0 | — |
case-07 | fail→pass | 12,029 | 3,999 | -67% | 1 | 1 | 0% | 2,038 | 2,789 | +37% | 0 | 0 | — |
case-08 | fail→pass | 8,361 | 3,441 | -59% | 1 | 1 | 0% | 1,522 | 2,732 | +80% | 0 | 0 | — |
case-09 | fail→pass | 9,237 | 3,419 | -63% | 1 | 1 | 0% | 1,574 | 2,658 | +69% | 0 | 0 | — |
case-10 | fail→pass | 21,371 | 2,379 | -89% | 1 | 1 | 0% | 1,640 | 2,451 | +49% | 0 | 0 | — |
case-11 | fail→pass | 13,873 | 2,534 | -82% | 1 | 1 | 0% | 2,150 | 2,491 | +16% | 0 | 0 | — |
case-12 | fail→pass | 3,615 | 2,028 | -44% | 1 | 1 | 0% | 558 | 2,434 | +336% | 0 | 0 | — |
case-13 | fail→pass | 14,870 | 6,268 | -58% | 1 | 1 | 0% | 2,362 | 3,192 | +35% | 0 | 0 | — |
case-14 | pass→pass | 12,287 | 3,430 | -72% | 1 | 1 | 0% | 2,018 | 2,635 | +31% | 0 | 0 | — |
case-15 | fail→pass | 9,620 | 3,817 | -60% | 1 | 1 | 0% | 1,640 | 2,768 | +69% | 0 | 0 | — |
case-16 | fail→pass | 9,420 | 5,150 | -45% | 1 | 1 | 0% | 1,516 | 2,994 | +97% | 0 | 0 | — |
case-17 | fail→pass | 9,553 | 3,000 | -69% | 1 | 1 | 0% | 1,610 | 2,517 | +56% | 0 | 0 | — |
case-18 | fail→pass | 9,260 | 2,784 | -70% | 1 | 1 | 0% | 1,624 | 2,507 | +54% | 0 | 0 | — |
case-19 | pass→pass | 9,247 | 2,350 | -75% | 1 | 1 | 0% | 1,413 | 2,387 | +69% | 0 | 0 | — |
case-20 | pass→pass | 7,971 | 2,265 | -72% | 1 | 1 | 0% | 1,272 | 2,455 | +93% | 0 | 0 | — |
case-21 | fail→pass | 21,024 | 2,023 | -90% | 1 | 1 | 0% | 3,566 | 2,388 | -33% | 0 | 0 | — |
case-22 | fail→pass | 10,589 | 2,926 | -72% | 1 | 1 | 0% | 1,791 | 2,597 | +45% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted, and 18 counted toward the lift figure. The other 4 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of +59 percentage points is the difference between those two pass rates over the 18 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.