CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

next-cache-components-adoption

Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the `cacheComponents` flag, work through a flood of blocking-prerender / instant validation errors, run the `cache-components-instant-false` codemod, or decide between opting routes out with `export const instant = false` and fixing them in place.

Quality

92%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

81%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A strong, deeply actionable runbook: exact commands, explicit validation loops, checklists, and genuine judgment-call offloading to two well-integrated reference files. Its weaknesses are redundancy (several maxims restated two or three times), version-sensitive details in the main flow, one misplaced paragraph, and a body long enough that more content should have been pushed to references.

Suggestions

State each maxim once: 'the docs page is the source of truth, the inline message is a summary' appears in working surfaces and in both loop variants, and the browser-verification preference is argued in both 'verifying each fix at runtime' and step 2 — consolidate these into their primary location and reference it from the loops.

Fix the misplaced paragraph in 'background': the `<Suspense>`/streaming and CLS guidance sits between "Three classes of blocker come up, usually in this order:" and its numbered list — move it after the list (or into the Caching guidance paragraph) so the promised ordering is immediately followed by the three classes.

Trim and relocate version-sensitive material: the Next.js 16.3/16.2 version requirements and upgrade instructions could move to a short reference or a clearly-marked version-compat section, and the `--debug-build-paths` parenthetical can drop to one path-shape example, keeping the body lean.

DimensionReasoningScore

Conciseness

The body is expert-level and mostly earns its tokens (no explaining what Next.js or `<Suspense>` is), but there is noticeable repetition and slack: "fetch the docs page; the inline message is a summary" is stated three times (working surfaces, the with-browser loop, the build-only loop), the browser-verification preference is argued twice, and the `--debug-build-paths` explainer runs to a parenthetical with three examples. Version-sensitive specifics ("Next.js 16.3 or later", "bundled since Next.js 16.2") sit in the main flow rather than a deprecated/old-patterns section, which the guidelines penalize. This fits the score-3 anchor ("mostly efficient but includes some unnecessary explanation or could be tightened") better than score 4, where trimming would be minor rather than structural.

3 / 5

Actionability

Fully executable throughout: `npx @next/codemod@latest cache-components-instant-false ./app`, `grep -n "export const instant" <app dir>/layout.*`, `next build --debug-prerender --debug-build-paths="app/path/to/page.tsx"`, a copy-paste hand-codemod block with exact comment text, and the `npx skills add` install command. Concrete failure modes are pre-empted ("a wrong path is not an error: it reports `0 ok` and exits `0`"). Matches the score-5 anchor: copy-paste ready commands covering the common cases.

5 / 5

Workflow Clarity

The multi-step process is explicitly sequenced (requires → strategy choice → pre-step → inner loop → feature verification) with validation at every level: "dev loop reports no errors AND `next build` passes" as the per-route bar, rerun-the-build-until-passing feedback loops, a step-3 checklist, grep-based completion criteria, and user check-in gates. All elements of the score-5 anchor are present. The one blemish (a Suspense/CLS paragraph inserted between "Three classes of blocker come up, usually in this order:" and its numbered list) is a background-exposition glitch, not a workflow gap, so it does not drop this to 4.

5 / 5

Progressive Disclosure

Good structure with real, well-signaled one-level-deep references: `references/per-page-decisions.md` ("read this before editing" when fixes are ambiguous) and `references/dev-only-validations.md` (framed as an optional follow-up), both existing files with clear read-when framing, plus canonical external docs links. However, the body is a ~250-line manual rather than an overview — the background section, route-table glyph explanation, and parts of the working-surfaces detail could live in reference files. This is the score-4 anchor ("most content is appropriately placed; references mostly clear; minor organization gaps"), not 5, which requires the body itself to be an appropriately split overview.

4 / 5

Total

17

/

20

Passed

Description

100%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

An exemplary description: concrete actions, a complete 'Use when' trigger list with exact flag/codemod/error names, and a distinct niche. It neither pads nor over-claims, and every phrase maps to something the skill actually does.

DimensionReasoningScore

Specificity

Multiple concrete actions are named: "Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces", "flip the `cacheComponents` flag", "run the `cache-components-instant-false` codemod", and "opting routes out with `export const instant = false`". This comprehensively covers the skill's scope with no generic filler; the score-4 anchor ("minor gaps in coverage") does not apply since every major capability is named.

5 / 5

Completeness

Explicitly answers both questions: the what is "Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces" and the when is a full "Use when the user wants to..." clause with concrete trigger phrases (flag flip, error flood, codemod, opt-out decision). Matches the score-5 example pattern exactly; a missing or weak 'when' would have capped it at 3, which is not the case.

5 / 5

Trigger Term Quality

Comprehensive natural-term coverage: "enable, adopt, or migrate to Cache Components", the exact flag name `cacheComponents`, error slugs "blocking-prerender / instant validation errors", the codemod name, and the export syntax a user would paste. Includes the synonyms (enable/adopt/migrate) users would actually say; not merely the score-4 "a few natural terms missing" anchor.

5 / 5

Distinctiveness Conflict Risk

Clear niche with minimal conflict risk: it is pinned to "Cache Components in a Next.js app" with unique tokens (`cacheComponents`, `cache-components-instant-false`, `export const instant = false`) that no neighboring Next.js skill (e.g. partial-prefetching or optimizer skills) would claim. Far beyond the score-4 "minor overlap risk with closely related skills" anchor.

5 / 5

Total

20

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

vercel/next.js

Path

skills/next-cache-components-adoption/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.