web-perf
Installation
SKILL.md
Web Performance: the first load of a route
Diagnose and fix what a user sees on a route's first load. Two territories:
- Hand-wired loading -
@font-facewritten by hand, fonts pulled from a hosted CDN (Google Fonts), native<img>, resource hints in your own document head. No framework layer is doing it for you, so you must - and must verify it yourself. - The rendering path itself - streamed shells, Suspense fallbacks and the skeleton-to-content swap, hydration timing, router-level pending states. Here the framework's rendering model is the mechanism, and the lever is where you place boundaries and what the fallback reserves.
Where a framework does automate the fix (Next's next/font/next/image,
Astro's Fonts API), defer to that layer's own output - but app code
wrapping it stays in scope (references/framework-automation.md).