What problem does it solve? Next.js routes often block navigation on dynamic data reads, so users wait for the entire page before anything paints. This Skill sets up a repeatable, test-driven loop that moves dynamic reads behind Suspense boundaries so the static shell commits immediately, and ships a regression test that keeps the route instant. ## Core Features & Use Cases - Test-driven optimization loop: Encodes the goal as a failing @next/playwright instant() e2e test (RED), fixes the route, and verifies GREEN on a production build, with a differential check proving the test measures the right property. - Fix pattern library: Provides before/after recipes for every blocker type — top-level awaits, cookies()/headers(), uncached fetches, searchParams, generateMetadata, non-deterministic values, auth gates, and parallel routes. - Rig discovery: Guides one-time setup of a committed instant-nav.rig.md describing how the project builds, exposes the testing API, authenticates the test user, and runs the e2e loop. - Use Case: A dashboard route waits on a charts query before painting anything. The Skill writes a failing instant() test, pushes the data read behind a Suspense boundary reusing the existing skeleton, and verifies the layout now commits instantly on both hard and soft navigations. ## Quick Start Ask the agent to make a specific Next.js route's navigation instant using the next-cache-components-optimizer skill, naming the route to optimize.
