The Next.js edit/verify dev loop - **name_fr:** La boucle dev édition/vérification Next.js - **tl_en:** Confirm every app change actually works at runtime by cross-checking Next.js's /_next/mcp view with a real browser - **tl_fr:** Vérifier que chaque modification fonctionne vraiment au runtime en croisant la vue /_next/mcp de Next.js avec un vrai navigateur - **creator:** @vercel - **type:** Agent skill - **url:** https://github.com/vercel/next.js - **cat:** Developer tools - **kws:** next.js, dev loop, runtime verification, turbopack, agent-browser, mcp, debugging, react - **license:** MIT **Description EN:** Curated by Skill Harbor — the edit/verify rhythm for `next dev`: after every code change, confirm it actually works at runtime — not just that it compiles or type-checks — by cross-checking two views of the same running app: `/_next/mcp` (Next.js's own view: routes, RSC, server actions, server logs, compilation issues) and `agent-browser` (a real Chrome: DOM, console, network, React fiber). Includes a once-per-session preflight, the four failure modes to check after each edit (compiles, runs without errors, behaves as intended, React-level behavior), gotchas (stale sessions, SSE parsing, `.next` preservation), and teardown. By @vercel, listed here with credit to its creator. Honest caveats: hard requirements, not suggestions — Next.js 16.3+ with Turbopack and agent-browser >= 0.31.1, plus a running `next dev`; the skill refuses rather than degrades if the versions don't match. Discovered via skills.sh. Skill Harbor never reviews the code, review it yourself before use. **Description FR:** Sélectionné par Skill Harbor — le rythme édition/vérification pour `next dev` : après chaque modification de code, vérifier qu'elle fonctionne vraiment au runtime — pas seulement qu'elle compile ou passe le typage — en croisant deux vues de la même app en cours d'exécution : `/_next/mcp` (la vue propre de Next.js : routes, RSC, server actions, logs serveur, problèmes de compilation) et `agent-browser` (un vrai Chrome : DOM, console, réseau, React fiber). Inclut un pré-contrôle une fois par session, les quatre modes d'échec à vérifier après chaque édition (compile, s'exécute sans erreur, se comporte comme prévu, comportement au niveau React), les pièges (sessions périmées, parsing SSE, préservation de `.next`) et le démontage. Crédit : @vercel. Bémols honnêtes : des exigences dures, pas des suggestions — Next.js 16.3+ avec Turbopack et agent-browser >= 0.31.1, plus un `next dev` en cours ; le skill refuse plutôt que de se dégrader si les versions ne correspondent pas. Découvert via skills.sh. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. **Install prompt EN:** ``` Prerequisites: Next.js 16.3+ with Turbopack; agent-browser >= 0.31.1 on PATH; a running next dev Install "The Next.js edit/verify dev loop" for me. Give my agent the Next.js edit/verify rhythm — preflight the /_next/mcp endpoint and the agent-browser session once per run, then after every edit check the four failure modes: compiles, runs without errors, behaves as intended, React-level behavior Repository: https://github.com/vercel/next.js/blob/canary/skills/next-dev-loop/SKILL.md 1. Fetch the SKILL.md file for the vercel-next.js-next-dev-loop skill from the repository into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md into the agent's skills directory, in a folder named "vercel-next.js-next-dev-loop". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. upgrade Next.js to 16.3+ with Turbopack, install agent-browser >= 0.31.1, and start next dev before the loop). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : Next.js 16.3+ avec Turbopack ; agent-browser >= 0.31.1 sur le PATH ; un next dev en cours d'exécution Installe-moi « La boucle dev édition/vérification Next.js ». Donne à mon agent le rythme édition/vérification Next.js — pré-contrôler une fois par session le endpoint /_next/mcp et la session agent-browser, puis après chaque édition vérifier les quatre modes d'échec : compile, s'exécute sans erreur, se comporte comme prévu, comportement au niveau React Dépôt : https://github.com/vercel/next.js/blob/canary/skills/next-dev-loop/SKILL.md 1. Récupère le fichier SKILL.md du skill vercel-next.js-next-dev-loop depuis le dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Contrôle de sécurité : examine le SKILL.md pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code ; les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifie que c'est bien le cas ; STOP sur le moindre signal d'alerte et préviens-moi. 3. Installe-le comme skill : copie SKILL.md dans le répertoire des skills de l'agent, dans un dossier nommé « vercel-next.js-next-dev-loop ». 4. Vérifie sans aucun appel réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. mettre Next.js à niveau vers 16.3+ avec Turbopack, installer agent-browser >= 0.31.1, et démarrer next dev avant la boucle). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf si c'est dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi. ``` ---

Vérifier que chaque modification fonctionne vraiment au runtime en croisant la vue /_next/mcp de Next.js avec un vrai navigateur - **creator:** @vercel - **type:** Agent skill - **url:** https://github.com/vercel/next.js - **cat:** Developer tools - **kws:** next.js, dev loop, runtime verification, turbopack, agent-browser, mcp, debugging, react - **license:** MIT **Description EN:** Curated by Skill Harbor — the edit/verify rhythm for `next dev`: after every code change, confirm it actually works at runtime — not just that it compiles or type-checks — by cross-checking two views of the same running app: `/_next/mcp` (Next.js's own view: routes, RSC, server actions, server logs, compilation issues) and `agent-browser` (a real Chrome: DOM, console, network, React fiber). Includes a once-per-session preflight, the four failure modes to check after each edit (compiles, runs without errors, behaves as intended, React-level behavior), gotchas (stale sessions, SSE parsing, `.next` preservation), and teardown. By @vercel, listed here with credit to its creator. Honest caveats: hard requirements, not suggestions — Next.js 16.3+ with Turbopack and agent-browser >= 0.31.1, plus a running `next dev`; the skill refuses rather than degrades if the versions don't match. Discovered via skills.sh. Skill Harbor never reviews the code, review it yourself before use. **Description FR:** Sélectionné par Skill Harbor — le rythme édition/vérification pour `next dev` : après chaque modification de code, vérifier qu'elle fonctionne vraiment au runtime — pas seulement qu'elle compile ou passe le typage — en croisant deux vues de la même app en cours d'exécution : `/_next/mcp` (la vue propre de Next.js : routes, RSC, server actions, logs serveur, problèmes de compilation) et `agent-browser` (un vrai Chrome : DOM, console, réseau, React fiber). Inclut un pré-contrôle une fois par session, les quatre modes d'échec à vérifier après chaque édition (compile, s'exécute sans erreur, se comporte comme prévu, comportement au niveau React), les pièges (sessions périmées, parsing SSE, préservation de `.next`) et le démontage. Crédit : @vercel. Bémols honnêtes : des exigences dures, pas des suggestions — Next.js 16.3+ avec Turbopack et agent-browser >= 0.31.1, plus un `next dev` en cours ; le skill refuse plutôt que de se dégrader si les versions ne correspondent pas. Découvert via skills.sh. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. **Install prompt EN:** ``` Prerequisites: Next.js 16.3+ with Turbopack; agent-browser >= 0.31.1 on PATH; a running next dev Install "The Next.js edit/verify dev loop" for me. Give my agent the Next.js edit/verify rhythm — preflight the /_next/mcp endpoint and the agent-browser session once per run, then after every edit check the four failure modes: compiles, runs without errors, behaves as intended, React-level behavior Repository: https://github.com/vercel/next.js/blob/canary/skills/next-dev-loop/SKILL.md 1. Fetch the SKILL.md file for the vercel-next.js-next-dev-loop skill from the repository into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md into the agent's skills directory, in a folder named "vercel-next.js-next-dev-loop". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. upgrade Next.js to 16.3+ with Turbopack, install agent-browser >= 0.31.1, and start next dev before the loop). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : Next.js 16.3+ avec Turbopack ; agent-browser >= 0.31.1 sur le PATH ; un next dev en cours d'exécution Installe-moi « La boucle dev édition/vérification Next.js ». Donne à mon agent le rythme édition/vérification Next.js — pré-contrôler une fois par session le endpoint /_next/mcp et la session agent-browser, puis après chaque édition vérifier les quatre modes d'échec : compile, s'exécute sans erreur, se comporte comme prévu, comportement au niveau React Dépôt : https://github.com/vercel/next.js/blob/canary/skills/next-dev-loop/SKILL.md 1. Récupère le fichier SKILL.md du skill vercel-next.js-next-dev-loop depuis le dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Contrôle de sécurité : examine le SKILL.md pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code ; les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifie que c'est bien le cas ; STOP sur le moindre signal d'alerte et préviens-moi. 3. Installe-le comme skill : copie SKILL.md dans le répertoire des skills de l'agent, dans un dossier nommé « vercel-next.js-next-dev-loop ». 4. Vérifie sans aucun appel réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. mettre Next.js à niveau vers 16.3+ avec Turbopack, installer agent-browser >= 0.31.1, et démarrer next dev avant la boucle). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf si c'est dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi. ``` ---

Version :