Optimize Next.js Cache Component Navigation
Next.js routes can delay their static shell while dynamic data resolves. This skill builds verified instant-navigation tests and guides Cache Components refactors that preserve behavior.
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
Review the Skillstore skill "next-cache-components-optimizer" from https://skillstore.io/skills/vercel-next-cache-components-optimizer.md and its manifest at https://skillstore.io/api/skills/vercel-next-cache-components-optimizer/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
„next-cache-components-optimizer“ wird verwendet. Optimize the dashboard route for client-side navigation.
Erwartetes Ergebnis:
„next-cache-components-optimizer“ wird verwendet. Add regression coverage for the initial product-page load.
Erwartetes Ergebnis:
The new initial-load check verifies that the product header is served in the static shell while deferred inventory remains gated.
„next-cache-components-optimizer“ wird verwendet. Review whether the search route can become fully instant.
Erwartetes Ergebnis:
The shared shell can commit instantly, but query-specific results require targeted full prefetching or continued streaming.
All 158 static alerts are false positives caused by Markdown formatting, fixed relative paths, non-secret deployment flags, and official documentation links. No prompt injection, secret collection, arbitrary process execution, path traversal, or data-exfiltration intent was found. The skill provides legitimate Next.js optimization guidance and explicitly keeps its testing API out of production.
Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.
https://skillstore.io/skills/vercel-next-cache-components-optimizer/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/vercel-next-cache-components-optimizer?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/vercel-next-cache-components-optimizer?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vercel-next-cache-components-optimizer/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/vercel-next-cache-components-optimizer.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>vercel. (2026). next-cache-components-optimizer security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/vercel-next-cache-components-optimizer/audits/1@techreport{vercel-vercel-next-cache-components-optimizer-2026,
author = {vercel},
title = {next-cache-components-optimizer security audit report (audit version 1)},
institution = {Skillstore},
year = {2026},
number = {1},
url = {https://skillstore.io/skills/vercel-next-cache-components-optimizer/audits/1},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "next-cache-components-optimizer security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
- name: "vercel"
date-released: "2026-08-20"
url: "https://skillstore.io/skills/vercel-next-cache-components-optimizer/audits/1"
identifiers:
- type: other
value: "skillstore:vercel-next-cache-components-optimizer:audit:1"
description: "Skillstore immutable audit report identifier"
Identify why a route shell waits for dynamic data, then move blocking work behind focused Suspense boundaries.
Configure a production-like environment that exposes the testing API only outside production and verifies the deployed revision.
Add hard-navigation and soft-navigation checks that prove meaningful shell content commits before deferred data.
Review the route [ROUTE]. Confirm the Next.js and Cache Components prerequisites, then explain what prevents its static shell from committing instantly.
Create a Playwright instant-navigation test for [ROUTE] using [NAVIGATION TYPE]. Use an existing static shell marker and verify the test cannot pass vacuously.
Optimize [ROUTE] for hard and soft navigation. Reuse existing loading interfaces, preserve behavior, and verify failure without the fix and success with it.
Discover this repository build and test rig, document its safeguards, optimize [ROUTES] individually, and provide linked evidence for baseline, differential, parity, and final tests.
Autor
vercelLizenz
MIT
Skillstore-Revision
r1
Versionshinweis
Der Autor hat keine Version angegeben.
Ref.
bdb71a4bc34515f37772ae85fd5501f9c2ff33b0
Aktualität der Wartung
20.8.2026
Nutzung
0 Downloads · 1 Aufrufe
Dateistruktur
AI SDK-Funktionen mit aktueller Dokumentation entwickeln
AI SDK-APIs ändern sich schnell, wodurch generierter Code veraltet sein kann. Diese Skill führt Claude, Codex und Claude Code zu aktueller Dokumentation und Migrationsmustern.
Turborepo-Monorepos optimieren
Die Einrichtung von Turborepo kann schwierig sein, wenn Tasks, Cache-Eingaben, Filter und CI-Einstellungen zusammenspielen. Diese Skill bietet gezielte Anleitung für zuverlässige Monorepo-Builds und schnellere Pipelines.
AI-Chat-UI-Komponenten erstellen
Teams benötigen konsistente AI-Chat-Oberflächen, die den AI Elements-Mustern entsprechen. Diese Skill unterstützt die Komponentenerstellung mit React, shadcn/ui und den Konventionen des Vercel AI SDK.
Adopt Next.js Cache Components Safely
Cache Components migrations can expose blocking routes and hidden rendering issues. This skill guides staged adoption, route fixes, browser checks, and final build verification.
Produktionsreife Frontend-Funktionen entwickeln
von davila7
Frontend-Teams benötigen projektübergreifend einheitliche Leitlinien für React und Next.js. Dieser Skill bietet Referenz-Workflows, Qualitätspraktiken und Hilfsskripte für die Frontend-Analyse.
Next.js App Router-Architektur planen
von 89jobrien
Next.js-Teams können Schwierigkeiten haben, Routen, Komponenten, Datenladen und Migrationsschritte auszuwählen. Diese Skill bietet strukturierte Architekturberatung für App Router, Server Components und Performance.
React- und Next.js-Performance optimieren
von vercel-labs
React- und Next.js-Apps verlieren oft durch Waterfalls, große Bundles und vermeidbare Re-Renderings an Geschwindigkeit. Diese Skill gibt Agenten konkrete Regeln für sicherere, performanceorientierte Änderungen.
Playwright-Testabdeckung verbessern
von C0ntr0lledCha0s
Playwright-Suites können instabil werden, wenn Konfiguration, Locators und Fixtures uneinheitlich sind. Diese Skill bietet praktische Muster für zuverlässige Browser-Tests, Debugging und wiederverwendbare Page Objects.
Playwright-Web-App-Tests erstellen
von AutumnsGrove
Manuelles Browser-Testing ist langsam und übersieht häufig Regressionen bei Formularen, Geräten und Netzwerkzuständen. Dieser Skill hilft Claude, Codex und Claude Code dabei, praxisnahe Playwright-Tests für echte Web-Workflows zu erstellen.
Zuverlässige Testautomatisierung entwickeln
von 89jobrien
Schwache Tests verlangsamen Releases und verbergen Regressionen. Diese Skill unterstützt bei Teststrategie, TDD, Automatisierung, Coverage-Review und Playwright-Webprüfungen.