AI导哈

前端开发

next-cache-components-optimizer

vercel/next.js

Optimize the meaningful UI available immediately from a Next.js route on an initial load (hard navigation) or named client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route and entry point at a time; the shipped test then guards against regression. Use when asked to grow a static shell, fix a slow first paint or non-instant navigation, diagnose which Suspense boundary blocks useful UI, or add instant() regression coverage. Requires Next.js 16.3+ with Cache Components already adopted.

  • 1.9万 次安装
  • 14.3万 星标
  • 收录于

安装命令

npx skills add https://github.com/vercel/next.js --skill next-cache-components-optimizer

SKILL.md

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.

What is invariant, and what is yours

相关 Skills

next-dev-loopvercel/next.jsVerify Next.js runtime behavior after editing app code. Use this skill to confirm a change actually works in a running app — not just that it compiles or type-checks. Combines /_next/mcp (Next.js's view) with agent-browser (the browser's view). Requires a running `next dev`.前端开发2.3万next-cache-components-adoptionvercel/next.jsTurn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the `cacheComponents` flag, work through a flood of blocking-prerender / instant validation errors, run the `cache-components-instant-false` codemod, or decide between opting routes out with `export const instant = false` and fixing them in place.前端开发2.2万next-partial-prefetching-adoptionvercel/next.jsTurn on Partial Prefetching in a Next.js app and work through the insights it surfaces. Use when the user wants to enable or adopt Partial Prefetching, flip the `partialPrefetching` flag, opt routes in with `export const prefetch = 'partial'`, audit `Link prefetch={true}` behavior, preserve existing prefetched UI with `instant()` tests, or resolve the instant-link-prefetch-partial and instant-shell-url-data insights.测试与安全9494next-partial-prefetching-optimizervercel/next.jsOptimize what selected Next.js client navigations include before the click under Partial Prefetching. Use after Cache Components and Partial Prefetching are adopted when the user wants selected URL-specific UI to be instant, wants reusable content to wait for navigation, or needs to choose between default, viewport, and intent prefetching. Requires Next.js 16.3+.前端开发2605next-bundle-optimizervercel/next.jsAudit and reduce Next.js browser initial-load work. Use for slow route startup, oversized client bundles, duplicate browser dependencies, or features that can wait for interaction.前端开发2330docs-diagramsvercel/next.jsdocs-diagrams — an installable skill for AI agents.其他601