Next Cache Components Optimizer

This optimizer helps Claude automatically configure caching strategies for Next.js components, which matters when you're working on performance optimization and don't want to manually audit every component for cache potential. It comes from Vercel's official Next.js repository, which has serious credibility with 141K stars and 2.5K installs already. The lack of a SKILL.md is unfortunate since caching strategies can be opinionated and it would help to know what approach it takes. Best case, it saves you from the tedious work of identifying which components benefit from caching and setting up the right patterns. Worst case, it makes overly aggressive assumptions about your app's data freshness requirements.

skills.sh installs: 20.6K
GitHub stars: 143.4K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel/next.js --skill next-cache-components-optimizer --agent claude-code

Installs into .claude/skills of the current project.

Files

next-cache-components-optimizer

Set up an agentic optimization loop that drives a Next.js route from "not instant" to "instant" and keeps it there. The loop is test-driven: encode the goal as a failing @next/playwright instant() test, work it to green, and ship the test as the regression guard. Run it once per target route and entry point. Work the phases P → G in order; each ends in a gate.

Before changing the route, read the bundled Optimizing the static shell guide at node_modules/next/dist/docs/01-app/02-guides/optimizing-the-static-shell.md. If it is unavailable, use the online guide. The guide owns the framework behavior and implementation patterns. This skill owns the navigation contract, production rig, trustworthy RED-to-GREEN loop, parity check, differential, and report.