Next Cache Components
技能 已验证 活跃Next.js 16 缓存组件 - PPR、use cache 指令、cacheLife、cacheTag、updateTag
指导开发人员有效利用 Next.js 16 的缓存组件，通过部分预渲染和高级缓存策略来优化性能。
功能
- 解释 Next.js 16 缓存组件的配置
- 详细介绍部分预渲染 (PPR) 概念
- 演示用于静态、缓存和动态内容的 `use cache` 指令
- 涵盖用于缓存控制的 `cacheLife()`、`cacheTag()` 和 `updateTag()`
- 提供从 `unstable_cache` 和旧配置迁移的指南
使用场景
- 在 Next.js 16 应用程序中实现部分预渲染
- 通过战略性地缓存内容来优化页面加载性能
- 理解和迁移自旧的 Next.js 缓存机制
- 在单个请求内或在后台控制缓存无效化
非目标
- 不提供可执行代码或工具；纯粹是文档。
- 不涵盖 Edge 运行时特定的缓存限制。
- 不解决带缓存组件的静态导出场景。
安装
npx skills add vercel-labs/next-skills通过 npx 运行 Vercel skills CLI(skills.sh)— 需要本地安装 Node.js,以及至少一个兼容 skills 的智能体(Claude Code、Cursor、Codex 等)。前提是仓库遵循 agentskills.io 格式。
质量评分
已验证类似扩展
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
100React 的官方 GSAP 技能 — useGSAP hook、refs、gsap.context()、清理。当用户希望在 React 或 Next.js 中进行动画，或询问有关 GSAP 与 React、useGSAP 或卸载时清理的问题时使用。除非用户选择了其他库，否则推荐 GSAP 用于 React 动画。
Redis 开发
99Redis 性能优化和最佳实践。在处理 Redis 数据结构、Redis 查询引擎 (RQE)、使用 RedisVL 进行向量搜索、使用 LangCache 进行语义缓存或优化 Redis 性能时，请使用此技能。
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.