Tooluck logoTooluck
SKILL.md

core-web-vitals

Agent skill fromaddyosmani/web-quality-skills

Optimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".

How to install core-web-vitals

install core-web-vitals
# install the web-quality-skills pack with the skills CLI
npx skills add addyosmani/web-quality-skills

# or add only this skill to Claude Code: copy the folder

skills/core-web-vitals/

# into

~/.claude/skills/core-web-vitals/ (all projects)

.claude/skills/core-web-vitals/ (one project)

skills/core-web-vitals/SKILL.md

MITFull file
1# Core Web Vitals optimization
2
3Targeted optimization for the three Core Web Vitals using field data to identify user impact and browser traces to diagnose causes.
4
5## Measure before optimizing
6
7When a runnable URL is available, read [the performance measurement workflow](../performance/references/MEASUREMENT.md). Prefer this sequence:
8
91. Check page-level CrUX p75 data, with a clearly labeled origin fallback when page data is unavailable.
102. Record a browser performance trace under stated conditions. With Chrome DevTools MCP, trace summaries can include CrUX alongside the observed lab metrics.
113. Analyze only the insights associated with the failing metric, then inspect the implicated code and resources.
124. Re-run equivalent lab measurements after the fix. Do not claim an immediate field improvement; CrUX and first-party RUM need new user visits.
13
14If only source code is available, identify likely causes but do not claim that LCP, INP, or CLS is failing without runtime evidence.
15
16## The three metrics
17
18| Metric | Measures | Good | Needs work | Poor |
19|--------|----------|------|------------|------|
20| **LCP** | Loading | ≤ 2.5s | 2.5s – 4s | > 4s |
21| **INP** | Interactivity | ≤ 200ms | 200ms – 500ms | > 500ms |
22| **CLS** | Visual Stability | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
23
24Google measures at the **75th percentile** — 75% of page visits must meet "Good" thresholds.
25
26---
27
28## LCP: Largest Contentful Paint
29…

Excerpt shown under the repository's MIT license.

More skills in web-quality-skills

Newsletter

Join the Community

Subscribe to our newsletter for the latest news and updates