CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

next-cache-components-optimizer

Optimize the meaningful UI available immediately from a Next.js route on an initial load (hard navigation) or named client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route and entry point at a time; the shipped test then guards against regression. Use when asked to grow a static shell, fix a slow first paint or non-instant navigation, diagnose which Suspense boundary blocks useful UI, or add instant() regression coverage. Requires Next.js 16.3+ with Cache Components already adopted.

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

70%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 well-engineered, gate-driven optimization workflow with excellent sequencing, validation feedback loops, and concrete commands and config. Its two real weaknesses are runtime-blocking: the three bundle files it repeatedly defers to do not exist in the bundle, and the framing sections repeat themselves enough that the body could be materially tightened.

Suggestions

Ship the three referenced bundle files — rig-template.md, test-template.md, and reference/red-test-robustness.md — alongside SKILL.md. The body instructs Claude to 'read it now' at the C-gate and to build the shipped test from test-template.md, so their absence dead-ends the workflow at runtime.

Inline a minimal self-contained instant() test example and the SHELL_MARKER definition in SKILL.md, so the core executable artifact survives even where the templates are unavailable; this also closes the actionability gap where the central deliverable exists only in a missing file.

De-duplicate the framing: 'a ruler, not a stopwatch' and 'the verdict comes from the build, never the platform' each appear twice (invariants section plus Goal/phase A), and phase A restates the invariants section — merge these into one statement to cut roughly 40-60 lines without losing any gate or check.

DimensionReasoningScore

Conciseness

The body assumes Claude's competence (no tutorial padding on Suspense, Playwright, or prerendering) and most content is load-bearing, but framing is noticeably repeated: "a ruler, not a stopwatch" appears in both the invariants section and Goal, "the verdict comes from the build, never the platform" appears in both the invariants section and phase A, and phase A restates much of the invariants section. Two prose-heavy framing sections ("What is invariant, and what is yours", "Reporting to the user") could be tightened or merged.

3 / 5

Actionability

Concrete and executable throughout — `npm ls next @next/playwright`, `npx @next/codemod upgrade`, the `exposeTestingApiInProductionBuild` snippet with per-platform conditions, the `rg` partial-prefetching check, and a blocker-to-guide-pattern table. It falls short of fully copy-paste ready because the central artifact (the shipped `instant()` test and the `SHELL_MARKER` definition it asserts on) is delegated to `test-template.md`, which is not present in the bundle.

4 / 5

Workflow Clarity

Phases P through G are explicitly sequenced, each ends in a gate (C-gate VERIFY-RED, D-gate GREEN-under-lock), and validation is woven in as feedback loops: the untrustworthy-RED two-branch resolution, the revert-to-RED/re-apply-to-GREEN differential, the parity checklist, and base-branch reproduction of pre-existing failures. A explicit whole-workflow stop condition ("the locked test from C is GREEN on the rig, the differential (F) holds, and every item above is checked") closes the loop.

5 / 5

Progressive Disclosure

References are clearly signaled, one level deep, and indexed in a Files section with per-file descriptions — the structure would score 5 if the bundle shipped. But scoring against the actual bundle, all three referenced files (`rig-template.md`, `test-template.md`, `reference/red-test-robustness.md`) are absent from the skill directory, so every "read it now" instruction dead-ends at runtime and the detail layer the skill depends on is inaccessible.

3 / 5

Total

15

/

20

Passed

Description

92%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.

A strong description: concrete actions, an explicit Use-when clause with multiple natural trigger phrases, a stated prerequisite that scopes activation, and a distinct niche with minimal conflict risk. The only shortfall is modest synonym coverage of user-facing symptoms (spinner, blank page, flicker).

DimensionReasoningScore

Specificity

It lists multiple concrete actions — "Optimize the meaningful UI available immediately", "Encode the goal as a failing @next/playwright instant() e2e and work it to green", "the shipped test then guards against regression" — covering both entry points (hard and soft navigation) and the full loop from failing test to shipped guard. Coverage within the stated scope is comprehensive, matching the 5 anchor rather than the 4 anchor's "minor gaps".

5 / 5

Completeness

It explicitly answers both questions: what ("Optimize the meaningful UI available immediately from a Next.js route... Encode the goal as a failing @next/playwright instant() e2e and work it to green") and when ("Use when asked to grow a static shell, fix a slow first paint or non-instant navigation, diagnose which Suspense boundary blocks useful UI, or add instant() regression coverage"), plus a concrete prerequisite ("Requires Next.js 16.3+ with Cache Components already adopted").

5 / 5

Trigger Term Quality

The "Use when" clause supplies natural phrases users would actually say — "grow a static shell", "fix a slow first paint or non-instant navigation", "diagnose which Suspense boundary blocks useful UI", "add instant() regression coverage". A few natural variations are missing (e.g., "loading spinner too long", "blank page on navigation", "flicker"), so it fits the 4 anchor (good coverage, a few natural terms missing) rather than the 5 anchor's comprehensive synonym coverage.

4 / 5

Distinctiveness Conflict Risk

It occupies a clear niche — Next.js 16.3+ Cache Components static-shell optimization verified via `@next/playwright` `instant()` e2e — with trigger terms that no adjacent skill (partial-prefetching adoption/optimizer, cache-components adoption) would claim. Voice is third-person/infinitive throughout, matching the good examples.

5 / 5

Total

19

/

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-optimizer/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.