Setup & Installation
npx skills add https://github.com/addyosmani/web-quality-skills --skill core-web-vitals
https://github.com/addyosmani/web-quality-skills/tree/main/skills/core-web-vitals
View on GitHubWhat This Skill Does
Diagnoses and fixes Core Web Vitals issues across LCP, INP, and CLS. Covers image preloading, main thread optimization, layout shift prevention, and field measurement with the web-vitals library. Includes framework-specific patterns for Next.js, React, and Vue.
Lighthouse tells you a metric is bad but not which element or line to fix, this skill maps each metric to the actual code patterns that cause regressions.
When to use it
- Preloading a hero image with fetchpriority to drop LCP under 2.5s
- Chunking a long array processing task so click handlers stop blocking
- Adding width and height to product images to stop thumbnail grid jumps
- Reserving min-height on ad slots before the ad network injects content
- Wiring the web-vitals library into Google Analytics for 75th percentile tracking