Next Dev Loop

This automates the Next.js development workflow loop, the cycle of making changes, seeing them in the browser, and iterating. With 2.7K installs from the official Vercel repo, it's clearly solving a real pain point in the Next.js development process. The repository has 141K stars, so you're getting this from the source. There's no SKILL.md yet, which means the implementation details aren't documented, but given it's from Vercel themselves, it likely handles hot reloading, error recovery, and the constant feedback cycle that makes or breaks your development speed. If you're doing Next.js work with Claude Code, this is probably worth trying just to see how much manual context switching it eliminates.

skills.sh installs: 24.8K
GitHub stars: 143.4K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel/next.js --skill next-dev-loop --agent claude-code

Installs into .claude/skills of the current project.

Files

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.