Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Cache Components (Next.js) — Skill · asymmetric-al | DecimalAI

frontendby asymmetric-al

Cache Components (Next.js) — Skill

asymmetric-al/cache-components

Source asymmetric-al/core ↗License AGPL-3.0

Build correct cached/dynamic boundaries in the Next.js App Router when Cache Components or PPR are enabled.

SkillScore100Maintained

Automatic

Frontend / UI pack

Last verified 8/20/2026

What it changes

Passed 22 of 22 test cases with the skill, and 16 of 22 without it.

Without skill73%

With skill100%

Checks it passed that the model alone missed

The route config exports instant set to false.
The route configuration sets prefetch to 'allow-runtime'.
The function calls cacheTag with the cache tag identifier.

and 6 more in the full report

6 fixed16 passed either way0 still failing0 broke

Pass-rate lift: +27 pp
Tokens: +3%
Agent turns: 0%
Response time: -43%

Model gemini-3.6-flashMeasured 8/20/2026v122 of 22 cases passed with skill

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/asymmetric-al-cache-components/SKILL.md https://app.decimal.ai/s/asymmetric-al-cache-components/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add asymmetric-al-cache-components, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/asymmetric-al-cache-components/ and pins it in .decimal/skills.lock

decimalai skills add asymmetric-al-cache-components

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/asymmetric-al-cache-components/SKILL.md https://app.decimal.ai/s/asymmetric-al-cache-components/SKILL.md

Raw file: /s/asymmetric-al-cache-components/SKILL.md ↗ · machine-readable summary at /s/asymmetric-al-cache-components.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 6

Prompt

We have dynamic cached navigation targets in Next.js where prefetching should extend to request-time cached content on link hover or viewport entry. Which route export parameter controls runtime prefetch escalation?

What was checked, without and with the skill
Checked	Without skill	With skill
The route configuration sets prefetch to 'allow-runtime'.	Missed	Passed

case-11 · 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.md98 linessingle file

Cache Components (Next.js) — Skill

Name: cache-components Purpose: Build correct cached/dynamic boundaries in Next.js App Router when Cache Components or PPR are in use. Use this skill to avoid request-context leaks and to enforce proper cache invalidation.

Applies when: cacheComponents: true, Partial Prerendering (PPR), 'use cache', cacheLife, cacheTag, updateTag, revalidateTag. Do not use when: Working in the Pages Router or when Cache Components/PPR are not enabled.

Rules

Cached vs dynamic: Shared data should be cached; request/user-specific data must be dynamic and streamed behind <Suspense>.
No request context inside cache: Never call cookies(), headers(), or auth/session inside a 'use cache' scope.
Cached functions must be async: Any 'use cache' function/component must be async.
Prefer code-local caching: Favor 'use cache', cacheLife, cacheTag over route-segment config (revalidate, dynamic).
Mutations must invalidate tags: Use updateTag for immediate consistency or revalidateTag for background refresh.
PPR + generateStaticParams: Do not return empty arrays; keep request-specific logic out of the shell.
Instant Navigation (16.3): with partialPrefetching: true, Next.js prefetches one reusable shell per route. Every server await is a Stream (<Suspense>) / Cache ('use cache') / Block (export const instant = false + reason comment) decision; Instant Insights errors link the canonical fix at nextjs.org/docs/messages/... — apply that pattern, don't improvise.
Prefetch escalation: <Link prefetch={true}> extends prefetching to build-time-known cached content on that link; export const prefetch = 'allow-runtime' extends it to request-time cached content and requires PR justification.

Workflow

Classify each data dependency as shared or request-specific.
For shared data, add 'use cache' + cacheTag (and cacheLife if needed).
For request/user-specific data, keep it dynamic and render behind <Suspense>.
Split cached logic from request logic if needed.
Invalidate tags after mutations.

Checklists

Implementation checklist

Shared data uses 'use cache'
Cached scopes have cacheTag
No request data inside cached scopes
Dynamic UI is isolated behind <Suspense>
Cached functions are async
Route stays instant (Stream/Cache), or Blocks explicitly via export const instant = false with a reason
Mutations invalidate correct tags

Track record

Benchmark

22 / 22

test cases passed, vs 16 / 22 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

asymmetric-al / core

.agents/skills/cache-components/SKILL.md

View on GitHub ↗

License AGPL-3.0Imported 8/3/2026Version v1

Other skills for the same job

Published skills whose descriptions closely match this one, with their headline benchmark lift.

sangrokjung/cache-componentsExpert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enaClose match+36 pp pass-rate lift

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

Cache Components (Next.js) — Skill

Rules

Workflow

Checklists

Implementation checklist

Track record

Benchmark

Adoption

SkillSafety

Source

Other skills for the same job

Related skills