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.
93
92%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Quality
Discovery
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 |
Implementation
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 |
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 — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- vercel/next.js
- Commit
55bb48d
- 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.