Adopt Cache Components in your Next.js app - **name_fr:** Adopter Cache Components dans votre app Next.js - **tl_en:** Enable the cacheComponents flag and walk every blocking route to a passing build, incrementally or directly - **tl_fr:** Activer le flag cacheComponents et amener chaque route bloquante à un build qui passe, par étapes ou en direct - **creator:** @vercel - **type:** Agent skill - **url:** https://github.com/vercel/next.js - **cat:** Web - **kws:** next.js, cache components, caching, app router, prerender, suspense, migration, ppr - **license:** MIT **Description EN:** Curated by Skill Harbor — a sequenced migration workflow for turning on Cache Components in a Next.js 16.3+ App Router project: flip the `cacheComponents` flag, inventory incompatible config keys, then walk the route tree top-down — each blocking route fixed in `next dev` with the dev overlay's fix cards, verified in a real browser, and gated by a passing build. Choose the Incremental path (codemod opts every route out first, then un-opt them feature by feature) or the Direct path (fix as the build flags them). By @vercel, listed here with credit to its creator. Honest caveats: requires Next.js 16.3+ and a runnable app (real env/database) — a hybrid `pages/` + `app/` project only migrates its `app/` tree; per-error recipes live in the dev overlay and the official migration guide, which the skill points to as the source of truth; pairs well with the next-dev-loop skill for runtime verification. Discovered via skills.sh. Skill Harbor never reviews the code, review it yourself before use. **Description FR:** Sélectionné par Skill Harbor — un workflow de migration séquencé pour activer Cache Components dans un projet Next.js 16.3+ sous App Router : activer le flag `cacheComponents`, inventorier les clés de config incompatibles, puis parcourir l'arbre des routes de haut en bas — chaque route bloquante corrigée dans `next dev` avec les cartes de correction de l'overlay dev, vérifiée dans un vrai navigateur, et validée par un build qui passe. Choix entre la voie Incrémentale (le codemod désactive d'abord chaque route, puis on les réactive fonctionnalité par fonctionnalité) et la voie Directe (corriger au fil des erreurs du build). Crédit : @vercel. Bémols honnêtes : nécessite Next.js 16.3+ et une app qui démarre vraiment (vrai env/base de données) — un projet hybride `pages/` + `app/` ne migre que son arbre `app/` ; les recettes par erreur vivent dans l'overlay dev et le guide officiel de migration, désigné comme source de vérité ; se combine bien avec le skill next-dev-loop pour la vérification au runtime. Découvert via skills.sh. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. **Install prompt EN:** ``` Prerequisites: a Next.js 16.3+ App Router project that actually boots (real env/database); upgrade first if below 16.3 Install "Adopt Cache Components in your Next.js app" for me. Give my agent the sequenced Cache Components adoption workflow — flip the cacheComponents flag, inventory incompatible config keys, walk the route tree top-down fixing blocking routes in next dev, verify each fix in a real browser, gate every feature on a passing build Repository: https://github.com/vercel/next.js/blob/canary/skills/next-cache-components-adoption/SKILL.md 1. Fetch the SKILL.md file for the vercel-next.js-next-cache-components-adoption 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-adoption". 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. make sure the project runs Next.js 16.3+ with Turbopack and boots locally; optionally install the next-dev-loop skill for runtime verification). 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 : un projet Next.js 16.3+ sous App Router qui démarre vraiment (vrai env/base de données) ; mettre à niveau d'abord si version inférieure Installe-moi « Adopter Cache Components dans votre app Next.js ». Donne à mon agent le workflow séquencé d'adoption de Cache Components — activer le flag cacheComponents, inventorier les clés de config incompatibles, parcourir l'arbre des routes de haut en bas en corrigeant les routes bloquantes dans next dev, vérifier chaque correction dans un vrai navigateur, valider chaque fonctionnalité par un build qui passe Dépôt : https://github.com/vercel/next.js/blob/canary/skills/next-cache-components-adoption/SKILL.md 1. Récupère le fichier SKILL.md du skill vercel-next.js-next-cache-components-adoption 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-adoption ». 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. vérifier que le projet tourne sous Next.js 16.3+ avec Turbopack et démarre en local ; installer optionnellement le skill next-dev-loop pour la vérification au runtime). 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. ``` ---
Activer le flag cacheComponents et amener chaque route bloquante à un build qui passe, par étapes ou en direct - **creator:** @vercel - **type:** Agent skill - **url:** https://github.com/vercel/next.js - **cat:** Web - **kws:** next.js, cache components, caching, app router, prerender, suspense, migration, ppr - **license:** MIT **Description EN:** Curated by Skill Harbor — a sequenced migration workflow for turning on Cache Components in a Next.js 16.3+ App Router project: flip the `cacheComponents` flag, inventory incompatible config keys, then walk the route tree top-down — each blocking route fixed in `next dev` with the dev overlay's fix cards, verified in a real browser, and gated by a passing build. Choose the Incremental path (codemod opts every route out first, then un-opt them feature by feature) or the Direct path (fix as the build flags them). By @vercel, listed here with credit to its creator. Honest caveats: requires Next.js 16.3+ and a runnable app (real env/database) — a hybrid `pages/` + `app/` project only migrates its `app/` tree; per-error recipes live in the dev overlay and the official migration guide, which the skill points to as the source of truth; pairs well with the next-dev-loop skill for runtime verification. Discovered via skills.sh. Skill Harbor never reviews the code, review it yourself before use. **Description FR:** Sélectionné par Skill Harbor — un workflow de migration séquencé pour activer Cache Components dans un projet Next.js 16.3+ sous App Router : activer le flag `cacheComponents`, inventorier les clés de config incompatibles, puis parcourir l'arbre des routes de haut en bas — chaque route bloquante corrigée dans `next dev` avec les cartes de correction de l'overlay dev, vérifiée dans un vrai navigateur, et validée par un build qui passe. Choix entre la voie Incrémentale (le codemod désactive d'abord chaque route, puis on les réactive fonctionnalité par fonctionnalité) et la voie Directe (corriger au fil des erreurs du build). Crédit : @vercel. Bémols honnêtes : nécessite Next.js 16.3+ et une app qui démarre vraiment (vrai env/base de données) — un projet hybride `pages/` + `app/` ne migre que son arbre `app/` ; les recettes par erreur vivent dans l'overlay dev et le guide officiel de migration, désigné comme source de vérité ; se combine bien avec le skill next-dev-loop pour la vérification au runtime. Découvert via skills.sh. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. **Install prompt EN:** ``` Prerequisites: a Next.js 16.3+ App Router project that actually boots (real env/database); upgrade first if below 16.3 Install "Adopt Cache Components in your Next.js app" for me. Give my agent the sequenced Cache Components adoption workflow — flip the cacheComponents flag, inventory incompatible config keys, walk the route tree top-down fixing blocking routes in next dev, verify each fix in a real browser, gate every feature on a passing build Repository: https://github.com/vercel/next.js/blob/canary/skills/next-cache-components-adoption/SKILL.md 1. Fetch the SKILL.md file for the vercel-next.js-next-cache-components-adoption 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-adoption". 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. make sure the project runs Next.js 16.3+ with Turbopack and boots locally; optionally install the next-dev-loop skill for runtime verification). 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 : un projet Next.js 16.3+ sous App Router qui démarre vraiment (vrai env/base de données) ; mettre à niveau d'abord si version inférieure Installe-moi « Adopter Cache Components dans votre app Next.js ». Donne à mon agent le workflow séquencé d'adoption de Cache Components — activer le flag cacheComponents, inventorier les clés de config incompatibles, parcourir l'arbre des routes de haut en bas en corrigeant les routes bloquantes dans next dev, vérifier chaque correction dans un vrai navigateur, valider chaque fonctionnalité par un build qui passe Dépôt : https://github.com/vercel/next.js/blob/canary/skills/next-cache-components-adoption/SKILL.md 1. Récupère le fichier SKILL.md du skill vercel-next.js-next-cache-components-adoption 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-adoption ». 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. vérifier que le projet tourne sous Next.js 16.3+ avec Turbopack et démarre en local ; installer optionnellement le skill next-dev-loop pour la vérification au runtime). 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. ``` ---
- Quoi
- Activer le flag cacheComponents et amener chaque route bloquante à un build qui passe, par étapes ou en direct - **creator:** @vercel - **type:** Agent skill - **url:** https://github.com/vercel/next.js - **cat:** Web - **kws:** next.js, cache components, caching, app router, prerender, suspense, migration, ppr - **license:** MIT **Description EN:** Curated by Skill Harbor — a sequenced migration workflow for turning on Cache Components in a Next.js 16.3+ App Router project: flip the `cacheComponents` flag, inventory incompatible config keys, then walk the route tree top-down — each blocking route fixed in `next dev` with the dev overlay's fix cards, verified in a real browser, and gated by a passing build. Choose the Incremental path (codemod opts every route out first, then un-opt them feature by feature) or the Direct path (fix as the build flags them). By @vercel, listed here with credit to its creator. Honest caveats: requires Next.js 16.3+ and a runnable app (real env/database) — a hybrid `pages/` + `app/` project only migrates its `app/` tree; per-error recipes live in the dev overlay and the official migration guide, which the skill points to as the source of truth; pairs well with the next-dev-loop skill for runtime verification. Discovered via skills.sh. Skill Harbor never reviews the code, review it yourself before use. **Description FR:** Sélectionné par Skill Harbor — un workflow de migration séquencé pour activer Cache Components dans un projet Next.js 16.3+ sous App Router : activer le flag `cacheComponents`, inventorier les clés de config incompatibles, puis parcourir l'arbre des routes de haut en bas — chaque route bloquante corrigée dans `next dev` avec les cartes de correction de l'overlay dev, vérifiée dans un vrai navigateur, et validée par un build qui passe. Choix entre la voie Incrémentale (le codemod désactive d'abord chaque route, puis on les réactive fonctionnalité par fonctionnalité) et la voie Directe (corriger au fil des erreurs du build). Crédit : @vercel. Bémols honnêtes : nécessite Next.js 16.3+ et une app qui démarre vraiment (vrai env/base de données) — un projet hybride `pages/` + `app/` ne migre que son arbre `app/` ; les recettes par erreur vivent dans l'overlay dev et le guide officiel de migration, désigné comme source de vérité ; se combine bien avec le skill next-dev-loop pour la vérification au runtime. Découvert via skills.sh. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. **Install prompt EN:** ``` Prerequisites: a Next.js 16.3+ App Router project that actually boots (real env/database); upgrade first if below 16.3 Install "Adopt Cache Components in your Next.js app" for me. Give my agent the sequenced Cache Components adoption workflow — flip the cacheComponents flag, inventory incompatible config keys, walk the route tree top-down fixing blocking routes in next dev, verify each fix in a real browser, gate every feature on a passing build Repository: https://github.com/vercel/next.js/blob/canary/skills/next-cache-components-adoption/SKILL.md 1. Fetch the SKILL.md file for the vercel-next.js-next-cache-components-adoption 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-adoption". 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. make sure the project runs Next.js 16.3+ with Turbopack and boots locally; optionally install the next-dev-loop skill for runtime verification). 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 : un projet Next.js 16.3+ sous App Router qui démarre vraiment (vrai env/base de données) ; mettre à niveau d'abord si version inférieure Installe-moi « Adopter Cache Components dans votre app Next.js ». Donne à mon agent le workflow séquencé d'adoption de Cache Components — activer le flag cacheComponents, inventorier les clés de config incompatibles, parcourir l'arbre des routes de haut en bas en corrigeant les routes bloquantes dans next dev, vérifier chaque correction dans un vrai navigateur, valider chaque fonctionnalité par un build qui passe Dépôt : https://github.com/vercel/next.js/blob/canary/skills/next-cache-components-adoption/SKILL.md 1. Récupère le fichier SKILL.md du skill vercel-next.js-next-cache-components-adoption 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-adoption ». 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. vérifier que le projet tourne sous Next.js 16.3+ avec Turbopack et démarre en local ; installer optionnellement le skill next-dev-loop pour la vérification au runtime). 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. ``` ---
- Coût
- Gratuit
- Prérequis
- un projet Next.js 16.3+ sous App Router qui démarre vraiment (vrai env/base de données) ; mettre à niveau d'abord si version inférieure
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — un workflow de migration séquencé pour activer Cache Components dans un projet Next.js 16.3+ sous App Router : activer le flag `cacheComponents`, inventorier les clés de config incompatibles, puis parcourir l'arbre des routes de haut en bas — chaque route bloquante corrigée dans `next dev` avec les cartes de correction de l'overlay dev, vérifiée dans un vrai navigateur, et validée par un build qui passe. Choix entre la voie Incrémentale (le codemod désactive d'abord chaque route, puis on les réactive fonctionnalité par fonctionnalité) et la voie Directe (corriger au fil des erreurs du build). Crédit : @vercel. Bémols honnêtes : nécessite Next.js 16.3+ et une app qui démarre vraiment (vrai env/base de données) — un projet hybride `pages/` + `app/` ne migre que son arbre `app/` ; les recettes par erreur vivent dans l'overlay dev et le guide officiel de migration, désigné comme source de vérité ; se combine bien avec le skill next-dev-loop pour la vérification au runtime. Découvert via skills.sh. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Prérequis : un projet Next.js 16.3+ sous App Router qui démarre vraiment (vrai env/base de données) ; mettre à niveau d'abord si version inférieure Installe-moi « Adopter Cache Components dans votre app Next.js ». Donne à mon agent le workflow séquencé d'adoption de Cache Components — activer le flag cacheComponents, inventorier les clés de config incompatibles, parcourir l'arbre des routes de haut en bas en corrigeant les routes bloquantes dans next dev, vérifier chaque correction dans un vrai navigateur, valider chaque fonctionnalité par un build qui passe Dépôt : https://github.com/vercel/next.js/blob/canary/skills/next-cache-components-adoption/SKILL.md 1. Récupère le fichier SKILL.md du skill vercel-next.js-next-cache-components-adoption 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-adoption ». 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. vérifier que le projet tourne sous Next.js 16.3+ avec Turbopack et démarre en local ; installer optionnellement le skill next-dev-loop pour la vérification au runtime). 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.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.