← ClaudeAtlas

next-dev-looplisted

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`.
susomejias/rembric · ★ 12 · Web & Frontend · score 72
Install: claude install-skill susomejias/rembric
# 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 `get_compilation_issues`. - `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) - Instal