cache-components

Expert 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 enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.

Quality

92%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Quality

Content

85%

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

This is a strong skill with excellent actionability and workflow clarity. The code examples are executable and comprehensive, covering all major use cases. The main weakness is some verbosity in conceptual explanations (philosophy section, ASCII diagrams) that could be trimmed to improve token efficiency while maintaining the same instructional value.

Suggestions

Remove or significantly condense the 'Philosophy: Code Over Configuration' section - Claude doesn't need the conceptual framing, just the practical mapping

Consider replacing the ASCII decision tree diagram with a more compact bulleted decision list to reduce token overhead while preserving the logic

Dimension	Reasoning	Score
Conciseness	The skill is mostly efficient but includes some unnecessary content like the philosophy section and verbose explanations of concepts Claude likely knows (e.g., explaining what PPR means conceptually). The decision tree diagrams, while helpful, add significant token overhead.	2 / 3
Actionability	Excellent actionability with fully executable code examples throughout. The config setup, component patterns, API usage, and Server Action examples are all copy-paste ready with real TypeScript/TSX syntax.	3 / 3
Workflow Clarity	Clear decision tree for when to use caching, explicit validation through build-time feedback section with error messages and solutions, and well-sequenced code review checklist. The 'Proactive Application' section provides clear step-by-step guidance for different scenarios.	3 / 3
Progressive Disclosure	Well-structured with clear sections progressing from detection to quick start to core APIs to advanced patterns. References to REFERENCE.md, PATTERNS.md, and TROUBLESHOOTING.md are clearly signaled and one level deep.	3 / 3
	Total	11 / 12 Passed

Description

100%

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

This is a well-crafted skill description that excels across all dimensions. It provides specific concrete actions, includes natural trigger terms that users would search for, clearly defines both what the skill does and when to use it with explicit activation conditions, and carves out a distinct niche within the Next.js ecosystem that minimizes conflict with other skills.

Dimension	Reasoning	Score
Specificity	Lists multiple specific concrete actions: implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing implementations.	3 / 3
Completeness	Clearly answers both what (Cache Components and PPR guidance, specific directives and functions) AND when (proactive activation when cacheComponents: true is detected, explicit USE CASES section with trigger scenarios). The PROACTIVE ACTIVATION and DETECTION sections provide explicit trigger guidance.	3 / 3
Trigger Term Quality	Includes natural technical terms users would say: 'Next.js', 'cacheComponents', 'use cache', 'cacheLife()', 'cacheTag()', 'revalidateTag()', 'PPR', 'Partial Prerendering', 'React Server Component', and 'next.config'. Good coverage of framework-specific terminology.	3 / 3
Distinctiveness Conflict Risk	Highly distinctive with clear niche: specifically targets Next.js Cache Components and PPR with unique config detection (cacheComponents: true). The specific API references (cacheLife, cacheTag, updateTag) make it unlikely to conflict with general Next.js or React skills.	3 / 3
	Total	12 / 12 Passed

Validation

100%

Warnings & errors only

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

Validation — 11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository: vercel/next.js
Commit: 55bb48d

Reviewed: 4 months ago

Table of Contents

Discovery Implementation Validation

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.