Drive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components / PPR, on initial load (hard navigation) and client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route at a time; the shipped test then guards against regression.
SkillScore83Maintained
Automatic
◆Frontend / UI pack
Last verified 8/20/2026
What it changes
Passed 17 of 21 test cases with the skill, and 7 of 21 without it.
Without skill35%
With skill83%
Checks it passed that the model alone missed
Mandates upgrading Next.js to version 16.3 or higher.
Mandates enabling cacheComponents: true in next.config.ts.
Asserts the visibility of a shell marker inside the instant() block.
and 11 more in the full report
11 fixed8 passed either way4 still failing0 broke
Pass-rate lift
+48 pp
Tokens
+217%
Agent turns
0%
Response time
-53%
Model gemini-3.6-flashMeasured 8/20/2026v119 of 23 cases passed with skill · 21 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 11 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 11
Prompt
In Phase C, our locked instant navigation test for `/orders` fails RED. Before we start modifying the page components to fix the route, what verification step must be conducted to confirm the RED result is trustworthy?
What was checked, without and with the skill
Checked
Without skill
With skill
Verifies whether the target shell marker renders successfully in an unlocked test run as the test user.
Missed
Passed
case-20 · gemini-3.6-flash · 8/20/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md438 linessingle file
next-cache-components-optimizer
Set up an agentic optimization loop that drives a Next.js route from "not
instant" to "instant" and keeps it there. The loop is test-driven: encode the
goal as a failing @next/playwrightinstant() test, work it to green, and
ship the test as the regression guard. Run it once per target route. Work the
phases P → G in order; each ends in a gate. Fix recipes live in two lazily-read
references — reference/patterns.md (before→after for each blocker type) and
reference/real-app-patterns.md (parallel routes, auth gates, the empty-shell
and responsive-skeleton failure modes). Read one only when its phase points
there.
What is invariant, and what is yours
One thing here is fixed. The rest is yours. Read this before treating any
command, platform, or env var below as a requirement.
Invariant: the verification loop. Maximizing the shell is worthless
unless you can prove it. The proof is an automated check: under a lock that
gates dynamic data, the static shell still commits. RED shows the gap, GREEN
shows it closed, the test ships as the regression guard. It must run on a
production-like build and must not be able to pass vacuously. Stand the loop
up once; every later optimization is then verifiable by construction. The
loop is the deliverable, not any one route.
The mechanism: @next/playwrightinstant(). This skill locks with
instant():
a ruler, not a stopwatch (phase A). It comes from
@next/playwright (installed alongside @playwright/test, on the same
release line as next), so it isn't tied to any host. Keep it. Timing a
navigation by hand is too flaky to trust, and is the failure mode this skill
exists to prevent.
Yours: the rig. How you build, deploy, authenticate, configure
Playwright, and loop belongs to your stack, not to this skill. A local
next build && next start, a CI/staging container, and a per-push preview
deploy are equally valid rigs; the verdict comes from the build, never the
platform. Phase 0 maps the invariant onto your repo. Read every platform
name, env-var spelling, and command below as an example to translate, not a
requirement.