Official agent skill

Next Partial Prefetching Optimizer

by vercel in vercel/next.js

Optimize what selected Next.js client navigations include before the click under Partial Prefetching.

OfficialMITAuto-check passed

Install Next Partial Prefetching Optimizer

skills CLI
$ npx skills add vercel/next.js --skill next-partial-prefetching-optimizer -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install vercel/next.js next-partial-prefetching-optimizer --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/vercel/next.js.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/next-partial-prefetching-optimizer .claude/skills/next-partial-prefetching-optimizer && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
next-partial-prefetching-optimizer
GitHub stars
143k
Token cost
~2.9k tokens
SKILL.md length
1,434 words
Files
3
Skills in repo
27
Repo updated
First seen
Licence
MIT

At a glance

Optimize what selected Next.js client navigations include before the click under Partial Prefetching.

  • Wants selected URL-specific UI to be instant
  • SKILL.md covers Reporting to the user, Define the contract, Reuse the production rig and Prove the current behavior, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Wants reusable content to wait for navigation

What it does

Next Partial Prefetching Optimizer is an agent skill from vercel/next.js, published by the product's own GitHub organization. Optimize what selected Next.js client navigations include before the click under Partial Prefetching. Use after Cache Components and Partial Prefetching are adopted when the user wants selected URL-specific UI to be instant, wants reusable content to wait for navigation, or needs to choose between default, viewport, and intent prefetching. Requires Next.js 16.3+.

Its SKILL.md is about 2.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files (for example `reference/red-test-robustness.md` and `rig-template.md`).

It works with Next.js. The licence is MIT.

When your agent uses it

  • Wants selected URL-specific UI to be instant
  • Wants reusable content to wait for navigation
  • Needs to choose between default
  • Intent prefetching

Example prompts

  • “/next-partial-prefetching-optimizer”

What it can do on your machine

Read from SKILL.md and the folder at commit a32ddfd. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • nextjs.org

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Next Partial Prefetching Optimizer loads about 2.9k tokens when it runs. Until then it costs about 100 tokens; SKILL.md has 1,434 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~100
When it runs · the whole SKILL.md, loaded when a task matches
~2.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from vercel/next.js at commit a32ddfd, republished under its MIT licence (© vercel). 1,434 words, ~2,877 tokens.

Download SKILL.mdSave it as .claude/skills/next-partial-prefetching-optimizer/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
next-partial-prefetching-optimizer
description
Optimize what selected Next.js client navigations include before the click under Partial Prefetching. Use after Cache Components and Partial Prefetching are adopted when the user wants selected URL-specific UI to be instant, wants reusable content to wait for navigation, or needs to choose between default, viewport, and intent prefetching. Requires Next.js 16.3+.

Partial Prefetching optimizer

Optimize each requested source link and destination as its own contract. Turn the requested prefetched UI, navigation-only UI, and trigger into a production instant() test. Record the current behavior, make the smallest optimization, verify the differential, and keep the passing test as regression coverage.

Before making framework changes, read the bundled Optimizing prefetching guide at node_modules/next/dist/docs/01-app/02-guides/optimizing-prefetching.md. If the bundled guide is unavailable, use the online guide. It is the source of truth for prefetch stages, prefetch={true}, session-specific UI, and cost trade-offs.

When the work changes what belongs in the App Shell, follow the Instant navigation and Caching docs for cache placement, Suspense boundaries, loading UI, and authorization.

The guides own framework behavior and implementation patterns. This skill owns the navigation contract, production rig, trustworthy RED-to-GREEN loop, parity check, differential, and report.

This is not an adoption skill. If Cache Components or Partial Prefetching are not adopted, use their adoption skills and return to this workflow. If the App Shell itself cannot commit under instant(), use next-cache-components-optimizer first, then resume the selected navigation.

Run the workflow unattended. Resolve the contract from the request and the existing application. Stop for user input only when a product decision is genuinely blocked and cannot be inferred safely without changing cost, freshness, authorization, or user-visible behavior.

Reporting to the user

This loop runs unattended, so do not stop between implementation steps. Finish the navigations the user named, then check in. The rig, lock, RED/GREEN loop, and stage names are internal scaffolding; report the product behavior instead.

  • Speak their language. Describe the source link and result in terms of what the user sees before and after the click, not the validation mechanics.
  • Show, don't tell. Drive the exact link in a production browser so the user sees which content is already available and which content streams after the click. If a live demonstration is unavailable, attach before/after captures.
  • Give them a concise click-through list, not a technical results table. Use one line per navigation with the source URL, link to click, UI ready before the click, UI that waits for navigation, and whether prefetching starts in the viewport or after intent.
  • Only surface a question for a genuine fork. Ask when the choice changes cost, freshness, authorization, or visible behavior. If the user already requested a PR or named every navigation, finish that scope without asking again.

Define the contract

Inspect the source route, the exact link or interaction, the destination's Suspense boundaries, its data reads, existing prefetch policy, and any existing instant() test. Record:

  • which destination UI should be ready before the click;
  • which reusable UI should wait for navigation;
  • whether per-link prefetching should start in the viewport or only after intent.

The trigger is part of the contract. Two links to the same URL may use different prefetch policies and need separate tests.

Use the guide's cost model when the trigger is not already specified. Do not silently increase the number of links that can invoke the server or cache data whose freshness contract is unknown.

Reuse the production rig

Read an existing instant-nav.rig.md. Cache Components optimization, Partial Prefetching adoption, and this optimizer share the same build, auth, data, and Playwright contract. Add the exact source link, destination markers, and prefetch budget instead of creating another rig.

If the project has no rig, use rig-template.md to discover and record one. The measured run must be a production build or preview where experimental.exposeTestingApiInProductionBuild is enabled only for testing. Development can help diagnose a route, but automatic link prefetching is production-only.

Prove the current behavior

Search for an existing instant() test for the exact source link and destination. Extend it when it already covers the same behavior. Otherwise, add a focused click-driven test using the guide's prefetched and deferred content testing pattern.

Keep one production browser test per source-link, destination, and trigger contract. Do not loop over several destinations or collect their readiness results in one test. Focused tests can still run serially in one browser worker.

First, run an unlocked scaffold that proves the link reaches the exact pathname and query and that the selected UI eventually renders for the test user. Do not ship this scaffold.

Then run the same interaction inside instant(). The existing App Shell must stay visible, while the guide's positive and negative assertions capture the prefetched result. After the lock releases, every selected region must eventually render.

Read reference/red-test-robustness.md before treating this failure as RED. A timeout before the URL changes, a missing App Shell, a redirect, missing data, or a stale preview indicates a rig or route problem. It does not justify changing prefetching.

If the complete desired contract already passes under the lock, stop. Never add prefetch={false} merely to manufacture a RED.

Only test files and the configuration needed to expose the testing API may change before these runs finish. Run builds and tests in the foreground. If the harness moves one into the background, wait for it to exit and continue the loop in the same task. A written test or a build still in progress is not verification.

Show full SKILL.md (589 more words)Show less

Make the smallest optimization

Follow the Optimizing prefetching guide for stage and link policy. If the contract also requires changing cache placement, Suspense, or loading UI, follow the static-shell documentation used by next-cache-components-optimizer. Preserve the existing freshness and authorization behavior. Change only what the selected contract requires.

When reusable UI should wait for navigation, follow the navigation() reference, including its comparison with connection(). Then verify both properties independently. The instant() assertion proves that the UI is absent from the prefetch; it does not prove that the underlying work stayed reusable. Verify that reusable work remains cached below the stage boundary.

When the contract needs an explicit runtime stage, follow the API references for prefetch() and navigation().

Work one accepted navigation to GREEN before moving to another. Do not create an app-wide Link or cache abstraction from a single case.

If the optimization adds or expands a cache boundary, follow Revalidating. When a writer can change that cached data, test the complete lifecycle: populate the cache, perform the mutation, then read the data again and verify the updated value. A passing instant() test proves prefetched readiness, not mutation freshness.

Verify and ship

Keep the passing locked test for the real source link as regression coverage. Preserve the loaded page's content, ordering, empty and error states, authorization, freshness, redirects, and direct-load behavior.

Finally, remove only the optimization and rerun the test:

  • the App Shell stays GREEN;
  • the selected prefetch contract returns RED.

Reapply the optimization and require GREEN again. This differential proves the test guards the exact link policy instead of unrelated cached state. Ship only the final positive test.

Report the verified result using the user-facing format above. Be precise that prefetching is best-effort; the App Shell remains the fallback when it has not completed.

Treat request counts, transferred bytes, and cache behavior as measurements, not as part of the instant() contract. Do not classify requests using private RSC URLs or internal headers such as next-router-prefetch. The public testing API verifies the rendered result, not the protocol stage that produced each request.

Completion checklist

  • Cache Components and Partial Prefetching were already adopted.
  • The target UI, trigger, freshness, and authorization constraints were resolved from the request and existing application.
  • The test clicks the exact source link and verifies the exact destination.
  • Each source-link, destination, and trigger contract has its own test.
  • The unlocked baseline and locked RED used the same production artifact.
  • The App Shell stayed visible throughout the RED/GREEN loop.
  • The selected UI is present and navigation-only UI is absent under lock.
  • Reusable navigation-only work remains cached below its navigation stage.
  • After populating any new cache whose data can be updated, a mutation test confirms the next read returns the expected data.
  • Loaded content, freshness, authorization, and direct visits are unchanged.
  • Removing only the optimization returns the contract to RED.
  • The final positive instant() regression test ships.

Handoff

Finish every navigation named in the request. If Cache Components or Partial Prefetching are not adopted, use next-cache-components-adoption or next-partial-prefetching-adoption, then return to this workflow. If the App Shell cannot commit under instant(), use next-cache-components-optimizer and resume the selected navigation afterward. Do not leave a build or test for the user to monitor.

Report additional optimization candidates without changing them unless they are already in scope. Do not broaden a selected per-link policy into an app-wide Link or cache abstraction.

Files

  • rig-template.md: production build, test context, navigation contract, and unattended loop discovery for projects without an existing instant-nav.rig.md.
  • reference/red-test-robustness.md: trustworthy RED and differential checks.

Further reading

© vercel, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files in skills/next-partial-prefetching-optimizer of vercel/next.js.

  • SKILL.md
  • reference/red-test-robustness.md
  • rig-template.md

Open the folder on GitHubat commit a32ddfd

Compare with similar skills

Next Partial Prefetching Optimizer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Next Partial Prefetching Optimizer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Next Partial Prefetching Optimizer this skillvercel/next.js143k—~2.9kAutomated safety check: PassMIT
Vercel Optimize Auditvercel-labs/agent-skills32k9 repos~4.3kAutomated safety check: PassNone
AI SDKvercel-labs/ai-facts16821 repos~1.2kAutomated safety check: PassNone
Supabase Development and Debuggingsupabase/agent-skills2.7k3 repos~3.6kAutomated safety check: PassMIT
Chakra UI v3 Builderchakra-ui/chakra-ui41k—~3.1kAutomated safety check: PassMIT
Remotion Best Practiceslyonjs/shortvid.io14733 repos~1kAutomated safety check: PassMIT

Similar skills

  • Vercel Optimize Audit

    vercel-labs/agent-skills

    Official

    Runs a metrics-first audit of a deployed Vercel project, gating investigations on real signals to produce ranked, citation-backed cost and performance recommendations.

    32k GitHub starsUsed in 9 repos~4.3k tokens
    DevOps & CloudAuto-check passed
  • AI SDK

    vercel-labs/ai-facts

    Official

    Answer questions about the AI SDK and help build AI-powered features.

    168 GitHub starsUsed in 21 repos~1.2k tokens
    AI & LLM EngineeringAuto-check passed
  • Official

    General Supabase skill for database, auth, Edge Functions, Realtime and storage work, plus client libraries, migrations, security audits, debugging and reading logs.

    2.7k GitHub starsUsed in 3 repos~3.6k tokens
    Backend & APIsAuto-check passed
  • Chakra UI v3 Builder

    chakra-ui/chakra-ui

    Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.

    41k GitHub stars~3.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Remotion Best Practices

    lyonjs/shortvid.io

    Best practices for Remotion - Video creation in React. An agent skill from lyonjs/shortvid.io.

    147 GitHub starsUsed in 33 repos~1k tokens
    Media & CreativeAuto-check passed
  • React View Transitions Guide

    vercel-labs/next-beats

    Official

    Guides implementing animated page and state transitions in React with the native View Transition API, covering shared elements, list reorders and directional navigation.

    167 GitHub starsUsed in 10 repos~3.1k tokens
    Frontend & DesignAuto-check passed

More from vercel/next.js

All 27 skills in this repo
  • Gh Stack

    vercel/next.js

    Official

    Manages stacked PRs and splits multi-part work into reviewable branches with gh-stack.

    143k GitHub starsUsed in 7 repos~2.3k tokens
    Auto-check passed
  • Sandbox Bench

    vercel/next.js

    Official

    Benchmark React or Next.js changes on Vercel Sandbox VMs with paired A/B statistics: react PR/commit vs base, or Next.js PR/commit vs base, measured end-to-end through the bench/render-pipeline app…

    143k GitHub stars~4.1k tokensUpdated today
    Auto-check passed
  • Next Dev Loop

    vercel/next.js

    Official

    Verify Next.js runtime behavior after editing app code. An agent skill from vercel/next.js.

    143k GitHub starsUsed in 9 repos~2.3k tokens
    Auto-check passed
  • Docs Diagrams

    vercel/next.js

    Official

    Draw diagrams for the Next.js docs in the style of the ones already published there: the light/dark PNGs an mdx references with <Image srcLight="/docs/light/<name.png" srcDark="/docs/dark/<name.png".

    143k GitHub stars~2.9k tokensUpdated today
    Auto-check passed
  • Official

    Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces.

    143k GitHub starsUsed in 6 repos~8.3k tokens
    Auto-check passed
  • React Sync

    vercel/next.js

    Official

    Build local React changes in the bundle variants consumed by Next.js, sync them into a local Next.js checkout, and test the resulting integration.

    143k GitHub stars~486 tokensUpdated today
    Auto-check passed

Works with

Questions about Next Partial Prefetching Optimizer

What does Next Partial Prefetching Optimizer do?

Optimize what selected Next.js client navigations include before the click under Partial Prefetching. js, published by the product's own GitHub organization.js client navigations include before the click under Partial Prefetching.

When should I use Next Partial Prefetching Optimizer?

Next Partial Prefetching Optimizer fits situations like: wants selected URL-specific UI to be instant; wants reusable content to wait for navigation; needs to choose between default; intent prefetching.

How do I install Next Partial Prefetching Optimizer in Claude Code?

Run `npx skills add vercel/next.js --skill next-partial-prefetching-optimizer -a claude-code`. Or copy the skill folder (skills/next-partial-prefetching-optimizer in vercel/next.js) into .claude/skills/next-partial-prefetching-optimizer in your project. Claude Code loads it when a task matches its description.

How do I install Next Partial Prefetching Optimizer in Codex?

Run `npx skills add vercel/next.js --skill next-partial-prefetching-optimizer -a codex`. Or copy the skill folder (skills/next-partial-prefetching-optimizer in vercel/next.js) into .agents/skills/next-partial-prefetching-optimizer in your project. Codex loads it when a task matches its description.

Can I use Next Partial Prefetching Optimizer in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add vercel/next.js --skill next-partial-prefetching-optimizer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/next-partial-prefetching-optimizer, .gemini/skills/next-partial-prefetching-optimizer, .github/skills/next-partial-prefetching-optimizer and .opencode/skills/next-partial-prefetching-optimizer in your project.

What does Next Partial Prefetching Optimizer need to run?

SKILL.md names no scripts, command-line tools or credentials: Next Partial Prefetching Optimizer is instructions for the agent only.

Does Next Partial Prefetching Optimizer access the network?

SKILL.md names 1 domain. As links in the text: nextjs.org. This is read from the text; nothing was executed.

Is Next Partial Prefetching Optimizer safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Next Partial Prefetching Optimizer use?

Next Partial Prefetching Optimizer is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Next Partial Prefetching Optimizer use?

About 2.9k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Next Partial Prefetching Optimizer?

Skills that share tags, products or a category with Next Partial Prefetching Optimizer: Vercel Optimize Audit (vercel-labs/agent-skills, 32k stars), AI SDK (vercel-labs/ai-facts, 168 stars), Supabase Development and Debugging (supabase/agent-skills, 2.7k stars) and Chakra UI v3 Builder (chakra-ui/chakra-ui, 41k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Next Partial Prefetching Optimizer?

vercel (a GitHub organization, an official publisher) maintains it in vercel/next.js, which has 143,241 GitHub stars. The repository holds 27 skills in this directory. The repository was last updated on October 8, 2026.

Source: vercel/next.js on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.