What problem does it solve? Next.js routes often block navigation on dynamic data reads, leaving users staring at blank screens while layouts and content load. This Skill provides a test-driven loop that makes a route's static shell commit immediately on both hard and soft navigations, then ships a regression test to keep it that way. ## Core Features & Use Cases - Test-driven optimization loop: Encodes the goal as a failing @next/playwright instant() e2e test, works it to green by pushing Suspense boundaries down to the data they guard, and ships the test as a regression guard. - Fix pattern library: Provides before/after recipes for common blockers including top-level awaits, cookies()/headers() reads, uncached fetches, searchParams, auth gates, and parallel routes. - RED verification gates: Includes a robustness checklist and differential testing procedure to ensure failing tests fail for the right reason before optimizing. - Use Case: A dashboard route waits on a charts query before painting anything. The Skill drives the navigation under an instant() lock, identifies the blocking Suspense boundary, hoists the layout into the static shell, and verifies the shell commits instantly at desktop and mobile widths. ## Quick Start Ask the agent to make a specific Next.js route's navigation instant using the cache components optimizer workflow.
