PlugWiki

Next.js Partial Prefetching Adoption Skill for Claude Code: Turn It On Safely

Makes Claude turn on Partial Prefetching in a Next.js app, test that today's prefetched UI survives, and fix the insights it surfaces.

Installs
9.7K
on skills.sh
Stars
143.5K
on GitHub
Files
1
besides SKILL.md
Updated
Nov 2026
last repo commit

Claude audits your links with prefetch set to true, writes a production-mode test suite with instant() and gets it passing with the flag off, opts each destination in with a route export, turns the partialPrefetching flag on, then sweeps for URL-data insights and verifies on a production run. It talks to you about PRs and page behavior, not internal step names.

It needs Next.js 16.3 or later with Cache Components already adopted and building. It lives in the Next.js repo itself. It edits your config and routes, may install test packages, and runs builds and servers.

Good for

  • Next.js teams adopting Partial Prefetching after Cache Components
  • Developers with <Link prefetch={true}> links that must keep their prefetched UI
  • Teams that want the change split into reviewable PRs

Install next-partial-prefetching-adoption

Claude Code

  1. 1

    Copy this prompt.

    Install the next-partial-prefetching-adoption skill in Claude Code. Run this command:

/plugin marketplace add vercel/next.js
/plugin install nextjs@nextjs

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Pick the plugin or the skills CLI route, not both. The plugin command comes from the repo's marketplace manifest, which names the marketplace and plugin nextjs and holds 6 skills, including next-dev-loop and next-cache-components-adoption. The single-skill route needs next-dev-loop too: SKILL.md says to install it before the development passes. Needs Next.js 16.3 or later.

Built from the package data we hold. Not yet tested by us. Source.

What's in the skill

When it loads

Turn on Partial Prefetching in a Next.js app and work through the insights it surfaces. Use when the user wants to enable or adopt Partial Prefetching, flip the `partialPrefetching` flag, opt routes in with `export const prefetch = 'partial'`, audit `Link prefetch={true}` behavior, preserve existing prefetched UI with `instant()` tests, or resolve the instant-link-prefetch-partial and instant-shell-url-data insights.

Sections in SKILL.md

  1. preservation gate
  2. requires
  3. notes
  4. background
  5. working surfaces
  6. step 1: audit <Link prefetch={true}> navigations (before enabling)
  7. Choose what to preserve and how to verify it
  8. step 2: capture the legacy baseline
  9. step 3: adopt destinations and restore the target
  10. step 4: enable the flag
  11. step 5: sweep for URL-data insights (after enabling)
  12. step 6: verify
  13. step 7: per-link prefetching (optional)
  14. further reading

Key facts

Author
Vercel and the Next.js team (vendor's own repo, vercel/next.js)
Needs
Next.js 16.3 or later, Cache Components on with a passing build, a drivable browser, and next-dev-loop for the dev passes
Folder
2 files including SKILL.md (rig-template.md is the test rig guide)
Part of plugin
nextjs: 6 skills, from the Next.js repo's skills folder
Installs on skills.sh
9,658 (Nov 2, 2026)
GitHub stars
143,460 (Nov 2, 2026)
License
MIT
Last repo commit
Nov 1, 2026

What it includes

  • A passing flag-off instant() suite must exist before any adoption edit.

    Until the baseline passes, Claude must not enable the flag or change destinations, cache boundaries or Link props.

    Runs code · Preservation gate

  • Finds every Link with effective prefetch={true} and manual router.prefetch() calls.

    It proposes which UI to preserve in a table, and asks whether to ship on one branch or route by route.

    Files · Step 1: Audit prefetch links

  • Writes and runs the instant() suite against a production build with the flag off.

    Uses @next/playwright. If no suite exists it builds the rig described in rig-template.md and records it in instant-nav.rig.md.

    Runs code · Step 2: Capture the legacy baseline

  • Adds export const prefetch = 'partial' to each audited destination and reruns the tests.

    Failures become the work queue. It marks extra URL-data candidates with a TODO(per-link-prefetch) comment.

    Runs code · Step 3: Adopt destinations

  • Sets partialPrefetching: true, then runs the remove-partial-prefetch codemod.

    The codemod refuses to run on a dirty working tree unless you pass --force.

    Runs code · Step 4: Enable the flag

  • Loads routes in next dev feature by feature and fixes the insights it logs.

    Uses next-dev-loop and the dev overlay. The URL-data insight flags a params or searchParams read that sits too high in the suspended subtree.

    Runs code · Step 5: Sweep URL-data insights

  • Reruns the suite, checks real App Shells on a production run, and checks next build.

    Then it reports what changed, with a table of links to click and what should paint instantly.

    Runs code · Step 6: Verify

  • Optionally walks the TODO markers with you and opts links in one by one.

    Per-link prefetch costs a server invocation per prefetchable link, so SKILL.md says not to decide these alone.

    Try: “Adopt Partial Prefetching in this app and keep what we prefetch today.”

    Write · Step 7: Per-link prefetching

From the official docs

Permissions

Medium risk

It edits your Next.js config and routes, may install test packages, and runs builds and servers. Review every diff.

What it can do

  • Read your data
  • Create and change things
  • Delete things
  • Read-only mode

Watch out for

  • It edits your config and routes

    It sets partialPrefetching: true, adds export const prefetch = 'partial' to routes and later removes it with a codemod. Work on a branch and review each diff. github.com

  • It turns on a testing API in production builds

    The rig sets experimental.exposeTestingApiInProductionBuild. rig-template.md says to gate it behind a variable such as EXPOSE_TESTING_API so real production builds do not expose it. Confirm that gate in the diff. github.com

  • It runs a codemod and may install packages

    It runs npx @next/codemod@canary remove-partial-prefetch and may install test packages. The codemod refuses a dirty working tree unless you pass --force, so commit or stash first. github.com

  • The production run needs your real environment

    SKILL.md says the final demo needs the app's database, auth and secrets, so the build and the production run use whatever environment you give them. We suggest a staging environment rather than production data. github.com

  • The next-dev-loop companion installs a global CLI

    For the development passes SKILL.md says to install next-dev-loop. Its SKILL.md requires Next.js 16.3+ with Turbopack and agent-browser 0.31.1 or later (npm i -g agent-browser@latest), drives a real Chrome against your running next dev, and restores saved login state when present. github.com

Technical details
Scopes

  • Edits next.config.ts and route files

  • Writes Playwright tests and an instant-nav.rig.md file

  • May install @next/playwright and @playwright/test if they are missing

  • Runs next build, next start, next dev and the remove-partial-prefetch codemod

  • With next-dev-loop: drives Chrome with agent-browser against your running next dev server

Questions

What does the Partial Prefetching adoption skill do?

It makes Claude turn on Next.js Partial Prefetching in your app and prove nothing you prefetch today is lost. It audits links, writes tests, opts routes in, enables the flag and checks the result on a production run.

What do I need first?

Next.js 16.3 or later, with Cache Components turned on and a passing build. If Cache Components is off, SKILL.md says to use next-cache-components-adoption first. It also needs a browser Claude can drive and the next-dev-loop skill for the dev passes.

How do I install it?

Use the install box above. In Claude Code, the nextjs plugin installs this skill with next-dev-loop and 4 more from the Next.js repo. There is no Claude app tab because the skill runs your Node tooling.

Does it change my code?

Yes. It edits next.config, adds and then removes route exports, may add test dependencies, and writes tests and a rig file. Work on a branch and review the diffs.

Does it need an API key?

SKILL.md names none. The production run needs your app's real environment, such as its database, auth and secrets, so have those ready.

Is it safe to use?

It runs builds, servers and a codemod on your project, and it turns on a testing API in production builds. SKILL.md says to gate that API behind a test-only environment variable so real production builds do not expose it. Check that gate in the diff.

Information

updated Nov 2, 2026

Repository
vercel/next.js
Folder
skills/next-partial-prefetching-adoption

vercel/next.jsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5
  1. next-partial-prefetching-adoption SKILL.md · github.com
  2. rig-template.md · github.com
  3. nextjs plugin.json · github.com
  4. next.js marketplace.json · github.com
  5. next-dev-loop SKILL.md · github.com

Updated Nov 2, 2026.