What problem does it solve? Next.js routes often block navigation on top-level awaits, uncached data reads, or misplaced Suspense boundaries, leaving users staring at blank screens. This Skill sets up a repeatable, test-driven loop that proves a route's static shell commits instantly and ships a regression guard so it stays that way. ## Core Features & Use Cases - Test-driven optimization loop: Encodes the goal as a failing @next/playwright instant() e2e test (RED), 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, dynamic metadata, and non-deterministic values. - Robustness gates: Includes a RED-verification checklist, differential testing (revert fix → RED, re-apply → GREEN), and parity checks so the refactor changes only whether the route is instant. - Use Case: A dashboard route waits on a charts query before painting anything. The Skill drives a real <Link> click under the instant() lock, confirms the shell is missing, hoists the layout UI into the static shell, defers the charts read behind a Suspense boundary with the existing skeleton, and verifies the shell now commits instantly at desktop and mobile widths. ## Quick Start Ask the agent to make a specific route's navigation instant using the next-cache-components-optimizer skill, for example: make navigating to /movies instant and ship the instant() e2e guard for it.
