skills.rest
Foodshareclub
FoodshareclubOFFICIAL
Explore all skills by this author →
Website𝕏@foodshareclubGitHub

next-dev-loop

Verify Next.js code changes at runtime using the /_next/mcp endpoint and a browser automation CLI.

Updated Dec 17, 2022
Search Tags:#dev server#browser automation#next.js#mcp#turbopack#runtime verification#react debugging
One-click install
npx skills add https://github.com/Foodshareclub/foodshare-web --skill next-dev-loop-foodshareclub
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-dev-loop
Source: https://github.com/Foodshareclub/foodshare-web/tree/main/.agents/skills/next-dev-loop
Command: npx skills add https://github.com/Foodshareclub/foodshare-web --skill next-dev-loop-foodshareclub

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires agent-browser.

What problem does it solve? Code edits that pass type-checking and compilation can still fail at runtime. This Skill closes that gap by verifying changes against a live next dev server through two cross-checking views: Next.js's own /_next/mcp introspection endpoint and a real Chrome browser driven by the agent-browser CLI. ## Core Features & Use Cases - Dual-view verification: Combines framework-level data from /_next/mcp (routes, RSC, server actions, errors, compilation issues) with browser-level observations (DOM, console, network, React fiber). - Four-mode failure detection: Checks that code compiles, runs without errors, behaves as intended in the UI, and behaves correctly at the React component level (render counts, suspense fallbacks, server/client boundaries). - Session-persistent browser testing: Uses worktree-scoped agent-browser sessions with saved login state so authenticated pages stay accessible across loops. - Use Case: After editing a server action in a Next.js 16 app, confirm via get_compilation_issues that Turbopack compiled cleanly, then drive the page in Chrome to assert the user-visible result and inspect React render behavior. ## Quick Start Start next dev, then ask the agent to verify that my latest edit to the dashboard page actually renders and behaves correctly in the browser.

Frequently Asked Questions about next-dev-loop

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I verify Next.js changes work at runtime during development?▼

Run next dev, then cross-check two views: query the /_next/mcp endpoint for compilation issues, routes, and server errors, and drive a real Chrome browser with agent-browser to assert DOM, console, and React component behavior.

What is the /_next/mcp endpoint in Next.js?▼

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.

Does this workflow require Turbopack or work with webpack?▼

Turbopack is required. 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.

Why does agent-browser return a blank page or no session error?▼

A blank snapshot or about:blank 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.

What are the minimum version requirements for this verification loop?▼

Next.js 16.3 or later with Turbopack for the /_next/mcp endpoint and proactive compile checks, plus agent-browser 0.31.1 or later for React introspection, worktree-scoped sessions, and idempotent restore.

Related Skills

Explore More Software Engineering Skills→
vercelvercel
246

turbopack

Configure Next.js 16 Turbopack and migrate from Webpack.

Official
Advanced
kennyolofsson23-netizenkennyolofsson23-netizen

deploy-flow

Deploy code to production via feature-branch, test, staging, PR, and merge workflow.

Community
Advanced
zcacereszcaceres
7

chaos-monkey

Trace code paths and run browser tests to identify bugs and race conditions.

Community
Advanced
badhopebadhope

e2e-test

Automate end-to-end user flow testing across Playwright, Cypress, and Selenium.

Community
Advanced