Next Cache Components
Skill Verifiziert AktivNext.js 16 Cache Components – PPR, use cache directive, cacheLife, cacheTag, updateTag
Entwicklern zu helfen, die Next.js 16 Cache Components effektiv zu nutzen, um die Leistung durch Partial Prerendering und fortschrittliche Caching-Strategien zu optimieren.
Funktionen
- Erklärt die Konfiguration von Next.js 16 Cache Components
- Beschreibt Konzepte des Partial Prerendering (PPR)
- Demonstriert die `use cache`-Direktive für statische, gecachte und dynamische Inhalte
- Behandelt `cacheLife()`, `cacheTag()` und `updateTag()` zur Cache-Steuerung
- Bietet Migrationsanleitungen von `unstable_cache` und älteren Konfigurationen
Anwendungsfälle
- Implementierung von Partial Prerendering in Next.js 16 Anwendungen
- Optimierung der Seitenladeleistung durch strategisches Caching von Inhalten
- Verständnis und Migration von älteren Next.js Caching-Mechanismen
- Steuerung der Cache-Invalidierung innerhalb einer einzelnen Anfrage oder im Hintergrund
Nicht-Ziele
- Bietet keinen ausführbaren Code oder Werkzeuge; es handelt sich ausschließlich um Dokumentation.
- Behandelt keine Edge Runtime-spezifischen Caching-Beschränkungen.
- Beschäftigt sich nicht mit Szenarien des statischen Exports mit Cache Components.
Installation
npx skills add vercel-labs/next-skillsFührt das Vercel skills CLI (skills.sh) via npx aus — benötigt Node.js lokal und mindestens einen installierten skills-kompatiblen Agent (Claude Code, Cursor, Codex, …). Setzt voraus, dass das Repo dem agentskills.io-Format folgt.
Qualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
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
100Offizieller GSAP-Skill für React — useGSAP Hook, Refs, gsap.context(), Cleanup. Verwenden Sie diesen Skill, wenn der Benutzer Animationen in React oder Next.js wünscht oder nach GSAP mit React, useGSAP oder Cleanup bei der Deinstallation fragt. Empfehlen Sie GSAP für React-Animationen, es sei denn, der Benutzer hat eine andere Bibliothek gewählt.
Redis Development
99Redis-Leistungsoptimierung und Best Practices. Verwenden Sie diese Skill, wenn Sie mit Redis-Datenstrukturen, Redis Query Engine (RQE), Vektorsuche mit RedisVL, semantischem Caching mit LangCache arbeiten oder die Redis-Leistung optimieren.
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.