Drive Next.js routes to instant navigation - **name_fr:** Rendre les routes Next.js instantanées à la navigation - **tl_en:** Test-driven optimization loop that maximizes each route's static shell and guards it with an instant() e2e test - **tl_fr:** Boucle d'optimisation pilotée par les tests qui maximise le shell statique de chaque route et le protège par un test e2e instant() - **creator:** @vercel - **type:** Agent skill - **url:** https://github.com/vercel/next.js - **cat:** Web - **kws:** next.js, instant navigation, cache components, ppr, static shell, suspense, e2e, playwright, performance - **license:** MIT **Description EN:** Curated by Skill Harbor — an agentic optimization loop for making a Next.js route's navigation instant under Cache Components / PPR, on both initial load and client-side navigation: encode the goal as a failing `@next/playwright` `instant()` end-to-end test, work the phases in order (maximize the static shell, fix whichever Suspense boundary keeps content out of it), and ship the test as the regression guard. Includes before/after fix recipes and a clear warning about the empty-shell failure mode (an `instant()` pass is satisfied by a blank fallback, so the workflow enforces a non-blank bar by judgment). By @vercel, listed here with credit to its creator. Honest caveats: requires Next.js 16.3+ with cacheComponents and a rig that can run a production-like build plus Playwright — one route at a time, and the loop is the deliverable, not any single fix. Discovered via skills.sh. Skill Harbor never reviews the code, review it yourself before use. **Description FR:** Sélectionné par Skill Harbor — une boucle d'optimisation agentique pour rendre la navigation d'une route Next.js instantanée sous Cache Components / PPR, au chargement initial comme en navigation côté client : encoder l'objectif comme un test e2e `@next/playwright` `instant()` en échec, travailler les phases dans l'ordre (maximiser le shell statique, corriger la boundary Suspense qui en exclut le contenu), et livrer le test comme garde anti-régression. Inclut des recettes de correction avant/après et un avertissement clair sur le piège du shell vide (un test `instant()` qui passe est satisfait par un fallback vide, donc le workflow impose une barre non-vide par jugement). Crédit : @vercel. Bémols honnêtes : nécessite Next.js 16.3+ avec cacheComponents et un environnement capable de lancer un build proche de la prod plus Playwright — une route à la fois, et la boucle est le livrable, pas une correction isolée. 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 cacheComponents enabled; a rig able to run a production-like build plus Playwright (@next/playwright on the same release line as next) Install "Drive Next.js routes to instant navigation" for me. Give my agent the test-driven Cache Components optimization loop — encode instant navigation as a failing instant() e2e test, maximize the route's static shell phase by phase, fix the Suspense boundaries that keep content out, and ship the test as the regression guard Repository: https://github.com/vercel/next.js/blob/canary/skills/next-cache-components-optimizer/SKILL.md 1. Fetch the SKILL.md file for the vercel-next.js-next-cache-components-optimizer 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-cache-components-optimizer". 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. confirm cacheComponents is on and that I can run next build plus the @next/playwright instant() tests in my rig). 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 cacheComponents activé ; un environnement capable de lancer un build proche de la prod plus Playwright (@next/playwright sur la même ligne de release que next) Installe-moi « Rendre les routes Next.js instantanées à la navigation ». Donne à mon agent la boucle d'optimisation Cache Components pilotée par les tests — encoder la navigation instantanée comme un test e2e instant() en échec, maximiser le shell statique de la route phase par phase, corriger les boundaries Suspense qui en excluent le contenu, et livrer le test comme garde anti-régression Dépôt : https://github.com/vercel/next.js/blob/canary/skills/next-cache-components-optimizer/SKILL.md 1. Récupère le fichier SKILL.md du skill vercel-next.js-next-cache-components-optimizer 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-cache-components-optimizer ». 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. confirmer que cacheComponents est activé et que je peux lancer next build plus les tests @next/playwright instant() dans mon environnement). 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. ``` ---

Test-driven optimization loop that maximizes each route's static shell and guards it with an instant() e2e test - **tl_fr:** Boucle d'optimisation pilotée par les tests qui maximise le shell statique de chaque route et le protège par un test e2e instant() - **creator:** @vercel - **type:** Agent skill - **url:** https://github.com/vercel/next.js - **cat:** Web - **kws:** next.js, instant navigation, cache components, ppr, static shell, suspense, e2e, playwright, performance - **license:** MIT **Description EN:** Curated by Skill Harbor — an agentic optimization loop for making a Next.js route's navigation instant under Cache Components / PPR, on both initial load and client-side navigation: encode the goal as a failing `@next/playwright` `instant()` end-to-end test, work the phases in order (maximize the static shell, fix whichever Suspense boundary keeps content out of it), and ship the test as the regression guard. Includes before/after fix recipes and a clear warning about the empty-shell failure mode (an `instant()` pass is satisfied by a blank fallback, so the workflow enforces a non-blank bar by judgment). By @vercel, listed here with credit to its creator. Honest caveats: requires Next.js 16.3+ with cacheComponents and a rig that can run a production-like build plus Playwright — one route at a time, and the loop is the deliverable, not any single fix. Discovered via skills.sh. Skill Harbor never reviews the code, review it yourself before use. **Description FR:** Sélectionné par Skill Harbor — une boucle d'optimisation agentique pour rendre la navigation d'une route Next.js instantanée sous Cache Components / PPR, au chargement initial comme en navigation côté client : encoder l'objectif comme un test e2e `@next/playwright` `instant()` en échec, travailler les phases dans l'ordre (maximiser le shell statique, corriger la boundary Suspense qui en exclut le contenu), et livrer le test comme garde anti-régression. Inclut des recettes de correction avant/après et un avertissement clair sur le piège du shell vide (un test `instant()` qui passe est satisfait par un fallback vide, donc le workflow impose une barre non-vide par jugement). Crédit : @vercel. Bémols honnêtes : nécessite Next.js 16.3+ avec cacheComponents et un environnement capable de lancer un build proche de la prod plus Playwright — une route à la fois, et la boucle est le livrable, pas une correction isolée. 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 cacheComponents enabled; a rig able to run a production-like build plus Playwright (@next/playwright on the same release line as next) Install "Drive Next.js routes to instant navigation" for me. Give my agent the test-driven Cache Components optimization loop — encode instant navigation as a failing instant() e2e test, maximize the route's static shell phase by phase, fix the Suspense boundaries that keep content out, and ship the test as the regression guard Repository: https://github.com/vercel/next.js/blob/canary/skills/next-cache-components-optimizer/SKILL.md 1. Fetch the SKILL.md file for the vercel-next.js-next-cache-components-optimizer 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-cache-components-optimizer". 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. confirm cacheComponents is on and that I can run next build plus the @next/playwright instant() tests in my rig). 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 cacheComponents activé ; un environnement capable de lancer un build proche de la prod plus Playwright (@next/playwright sur la même ligne de release que next) Installe-moi « Rendre les routes Next.js instantanées à la navigation ». Donne à mon agent la boucle d'optimisation Cache Components pilotée par les tests — encoder la navigation instantanée comme un test e2e instant() en échec, maximiser le shell statique de la route phase par phase, corriger les boundaries Suspense qui en excluent le contenu, et livrer le test comme garde anti-régression Dépôt : https://github.com/vercel/next.js/blob/canary/skills/next-cache-components-optimizer/SKILL.md 1. Récupère le fichier SKILL.md du skill vercel-next.js-next-cache-components-optimizer 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-cache-components-optimizer ». 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. confirmer que cacheComponents est activé et que je peux lancer next build plus les tests @next/playwright instant() dans mon environnement). 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: