Next Cache Components
Skill Verified ActiveNext.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
To guide developers in effectively leveraging Next.js 16's Cache Components for optimizing performance through Partial Prerendering and advanced caching strategies.
Features
- Explains Next.js 16 Cache Components configuration
- Details Partial Prerendering (PPR) concepts
- Demonstrates `use cache` directive for static, cached, and dynamic content
- Covers `cacheLife()`, `cacheTag()`, and `updateTag()` for cache control
- Provides migration guidance from `unstable_cache` and legacy configurations
Use Cases
- Implementing Partial Prerendering in Next.js 16 applications
- Optimizing page load performance by strategically caching content
- Understanding and migrating from older Next.js caching mechanisms
- Controlling cache invalidation within a single request or in the background
Non-Goals
- Does not provide executable code or tools; it is purely documentation.
- Does not cover Edge runtime specific caching limitations.
- Does not address static export scenarios with cache components.
Installation
npx skills add vercel-labs/next-skillsRuns the Vercel skills CLI (skills.sh) via npx — needs Node.js locally and at least one installed skills-compatible agent (Claude Code, Cursor, Codex, …). Assumes the repo follows the agentskills.io format.
Quality Score
VerifiedSimilar Extensions
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
Gsap React
100Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.
Redis Development
99Redis performance optimization and best practices. Use this skill when working with Redis data structures, Redis Query Engine (RQE), vector search with RedisVL, semantic caching with LangCache, or optimizing Redis performance.
TanStack Query Skill
99TanStack Query (React Query) for asynchronous server-state management with automatic caching, background refetching, optimistic updates, and pagination in React applications.
Senior Qa
99Generates unit tests, integration tests, and E2E tests for React/Next.js applications. Scans components to create Jest + React Testing Library test stubs, analyzes Istanbul/LCOV coverage reports to surface gaps, scaffolds Playwright test files from Next.js routes, mocks API calls with MSW, creates test fixtures, and configures test runners. Use when the user asks to "generate tests", "write unit tests", "analyze test coverage", "scaffold E2E tests", "set up Playwright", "configure Jest", "implement testing patterns", or "improve test quality".
Teach Guidance
100Guide a person in becoming a better teacher and explainer. AI coaches content structuring, audience calibration, explanation clarity, Socratic questioning technique, feedback interpretation, and reflective practice for technical presentations, documentation, and mentoring. Use when a person needs to present technical content and wants preparation coaching, wants to write better documentation or tutorials, struggles to explain concepts across expertise levels, is mentoring a colleague, or is preparing for a talk or knowledge-sharing session.