01
It starts by itself
route picked for optimizing. Runs in Claude Code routine or GitHub Actions.
- ↻ route picked for optimizing
you name a route and entry point
vercel · 18K installsNext Cache Components Optimizer skill
Runs by itself, route picked for optimizing.
One more route paints instantly.
Install the Next Cache Components Optimizer skill and make it a habit: follow https://gethabit.dev/skills/vercel/next-cache-components-optimizer.md
- 1Copy
- 2Paste into Claude Code, Codex or Cursor
- 3It runs by itself
18K installs143K starsMIT licenceSource on GitHub ↗
Next Cache Components Optimizer
by vercel · 18K installs
The skill
The next cache components optimizer skill helps Next.js teams make routes paint instantly, using a failing instant() test that turns green and then guards against regressions.
Only when you ask.
The habit
One more route paints instantly.
↻ Runs by itselfroute picked for optimizing
How the habit works.
You don't have to.
When does it start? How does it check its work? What does it remember?
One run, step by step.
Then it stops.
Stops after one route and entry point per run, with at most two fix retries.
- 01
Check prereqs
The agent confirms Next.js 16.3+ with cacheComponents: true and a matching @next/playwright.
- 02
Read the rig
It reads instant-nav.rig.md, or writes it on first use, and the Optimizing the static shell guide.
- 03
Baseline
Without the lock it confirms SHELL_MARKER renders for the test user.
- 04
Write RED
It wraps the navigation in instant() and confirms the RED is trustworthy before fixing.
- 05
Fix
It applies the guide pattern that matches the blocker until the locked test is GREEN.
- 06
Parity
It checks the route renders the same content, redirects and state as before.
- 07
Differential
It reverts only the fix to get RED, re-applies for GREEN, and runs the full rig command.
- 08
Review
It walks the PR checklist and removes the baseline test.
What it may do.
Nothing more.
It writes only in its own folder and asks you before anything goes out.
- Writes only inapp/**, src/**, e2e/**, instant-nav.rig.md, next.config.ts
- Talks tonextjs.org
- Sendsnothing
- Your OKNothing goes out, so it needs no OK.
Is it for you?
Use it when it fits.
Read both lists. If the left one sounds like you, the Next Cache Components Optimizer skill helps.
Use it when
- ✓ A route has a slow first paint
- ✓ Client navigation is not instant
- ✓ You want instant() regression tests
Skip it when
- – You run Next.js older than 16.3
- – Cache Components is not adopted yet
Next Cache Components Optimizer skill, answered.
Can I measure on next dev?
No. The skill says next dev does not prefetch and its lock is unreliable, so only a production build counts.
What if the route needs URL-specific content to be instant?
The skill hands that case to next-partial-prefetching-optimizer.
How do I install the Next Cache Components Optimizer skill?
Copy the prompt at the top into your agent. It installs the skill from vercel/next.js and sets up the habit. Or run npx skills add vercel/next.js --skill next-cache-components-optimizer.
Is the Next Cache Components Optimizer skill free?
Yes. It is published under MIT. Habit is free too.
Next Cache Components Optimizer. Now as a habit.
Install the Next Cache Components Optimizer skill and make it a habit: follow https://gethabit.dev/skills/vercel/next-cache-components-optimizer.md
All vercel skills →More code skills →
Works in
- Claude Code
- Codex
- Cursor
- ChatGPT
- Claude app
Made by vercel, published under MIT. Habit links to the original and never changes it. Is this your skill?