Skip to content
mcp/skillhub

Agent Skill

Core Web Vitals skill

core-web-vitalsaddyosmani/web-quality-skillsskills/core-web-vitals/SKILL.md

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".

3.0kMIT

always on

67 tokname + description

once used

2,181 tokSKILL.md body

bundled files

313 KB

repo stars

3.0kGitHub

Install the Core Web Vitals skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/addyosmani/web-quality-skills --skill core-web-vitals

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/addyosmani/web-quality-skills.git /tmp/web-quality-skills
mkdir -p ~/.claude/skills
cp -R /tmp/web-quality-skills/skills/core-web-vitals ~/.claude/skills/core-web-vitals

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description67 tok
When the agent uses itThe SKILL.md instructions2,181 tok
Only if opened3 bundled files (13 KB)varies

Until it is used, core-web-vitals costs about 20× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 6 skills from addyosmani/web-quality-skills would load 320 tokens of descriptions. Skills vs MCP study

Checks

Our checks found nothing to flag: it follows the Agent Skills specification's naming and size guidelines and doesn't pipe downloads into a shell.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Core Web Vitals optimization
  • Measure before optimizing
  • The three metrics
  • LCP: Largest Contentful Paint
  • Common LCP issues
  • LCP optimization checklist
  • LCP element identification
  • INP: Interaction to Next Paint
  • CLS: Cumulative Layout Shift
  • Measurement sources
  • Framework quick fixes
  • Next.js
  • React
  • Vue/Nuxt
  • References

More skills from addyosmani/web-quality-skills

All skills in this repo
  1. accessibilityaddyosmani/web-quality-skills

    Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

    63k51 tok idle · 3,541 in use
  2. best-practicesaddyosmani/web-quality-skills

    Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities".

    3.0k49 tok idle · 2,913 in use
  3. performanceaddyosmani/web-quality-skills

    Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit".

    3.0k49 tok idle · 3,214 in use
  4. seoaddyosmani/web-quality-skills

    Optimize for search engine visibility and ranking. Use when asked to "improve SEO", "optimize for search", "fix meta tags", "add structured data", "sitemap optimization", or "search engine optimization".

    3.0k46 tok idle · 3,160 in use
  5. web-quality-auditaddyosmani/web-quality-skills

    Run an evidence-led web quality audit covering performance, accessibility, SEO, best practices, and agentic browsing. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "check page quality", or "optimize my website".

    3.0k158 tok idle · 2,242 in use