What problem does it solve? Next.js routes under Cache Components often block navigation on top-level awaits, coarse Suspense boundaries, or uncached data reads, leaving users staring at blank screens. This Skill sets up a repeatable, test-driven loop that encodes instant navigation as a failing @next/playwright instant() e2e test, works it to green, and ships the test as a permanent regression guard. ## Core Features & Use Cases - Test-driven optimization loop: Encode the goal as a failing instant() test (RED), push each Suspense boundary down to the data it guards, and verify GREEN on a production build, with a differential check proving the test measures the right property. - Fix pattern library: Before/after recipes for every blocker type — top-level awaits, cookies()/headers() reads, uncached fetches, searchParams, generateMetadata, non-deterministic values, and auth gates in layouts. - Rig discovery: A one-time per-repo setup that records how the project builds, exposes the testing API, authenticates the test user, and runs the e2e loop, so later runs skip rediscovery. - Use Case: A dashboard route waits on a charts query before anything paints. The Skill writes a locked instant() test, defers the query behind a Suspense boundary reusing the route's existing skeleton, and ships the passing test so the layout and skeletons now commit immediately while charts stream in. ## Quick Start Ask the agent to make a specific route's navigation instant using the next-cache-components-optimizer skill, naming the route and whether to guard soft navigation, initial load, or both.
