Verify Next.js runtime behavior after edits using /_next/mcp and agent-browser.
npx skills add https://github.com/hkw2028/toy-project --skill next-dev-loop-hkw2028
Please help me install this Agent Skill. Skill: next-dev-loop Source: https://github.com/hkw2028/toy-project/tree/main/.agents/skills/next-dev-loop Command: npx skills add https://github.com/hkw2028/toy-project --skill next-dev-loop-hkw2028
next dev server, combining Next.js's own introspection endpoint with a real browser session so you confirm actual behavior, not just build health. ## Core Features & Use Cases - Dual-view verification: Cross-checks the framework view (/_next/mcp routes, errors, compilation issues, server actions) against the browser view (DOM, console, network, React fiber) driven by agent-browser. - Four-mode failure detection: After each edit, checks compilation, runtime errors, user-visible behavior, and React-level behavior such as extra renders and suspense fallbacks. - Session-persistent browser testing: Uses worktree-scoped agent-browser sessions with cookie restore so logged-in state survives across verification loops. - Use Case: After editing a server component, confirm via get_compilation_issues that Turbopack compiled cleanly, then drive the page in Chrome to assert the rendered output and inspect the component tree for unexpected re-renders. ## Quick Start Ask the agent to verify that your recent Next.js edit actually works in the running dev server using the next-dev-loop skill.High-intent search queries and answers about installing and using this skill.
Run the edit/verify loop against a live next dev server: check compilation with get_compilation_issues via /_next/mcp, then drive the page in a real browser with agent-browser to assert what the user sees and inspect the React component tree.
It is an HTTP endpoint Next.js exposes about itself during development, listing tools like get_routes, get_errors, get_page_metadata, and get_compilation_issues. Call tools/list to see the current surface; it requires Next.js 16.3 or later.
Yes, Turbopack is a hard requirement. The get_compilation_issues tool returns a "Turbopack project is not available" error on webpack, and the skill refuses to continue rather than falling back to weaker checks.
A blank read or "no browser session" error usually means a stale browser session, not a broken route. Reopen with the same --session and --restore flags, or close and reopen the session; avoid falling back to curl since it bypasses the browser under test.
No, Next.js 16.3 or later is required because the /_next/mcp endpoint and the get_compilation_issues tool do not exist in earlier versions. Upgrade with pnpm next upgrade or npx next upgrade before using the skill.
vercelVerify Next.js runtime behavior after editing app code.
weval-orgRun Playwright end-to-end tests on routes affected by pull-request changes.
mosakuzii0216Detects and repays one unit of code quality debt weekly beyond ESLint and tsc coverage.
synaptiaiLaunch development servers and run smoke, end-to-end, and browser tests.