Claude MarketplacesSubmit
addyosmani avatar

Core Web Vitals

addyosmani/web-quality-skills

The core-web-vitals skill provides targeted optimization guidance for the three Core Web Vitals metrics (LCP, INP, CLS) that impact Google Search rankings and user experience. It serves web developers and performance engineers who need to diagnose and fix specific performance issues like slow loading times, layout shifts, and interaction delays. The skill solves the problem of understanding which optimization techniques apply to each metric by offering concrete code examples, performance thresholds, and actionable checklists.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
7
skills.sh installs
34.4K
GitHub stars
3.1K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add addyosmani/web-quality-skills --skill core-web-vitals --agent claude-code

Installs into .claude/skills of the current project.

Files

Core Web Vitals optimization

Targeted optimization for the three Core Web Vitals using field data to identify user impact and browser traces to diagnose causes.

Measure before optimizing

When a runnable URL is available, read the performance measurement workflow. Prefer this sequence:

  1. Check page-level CrUX p75 data, with a clearly labeled origin fallback when page data is unavailable.
  2. Record a browser performance trace under stated conditions. With Chrome DevTools MCP, trace summaries can include CrUX alongside the observed lab metrics.
  3. Analyze only the insights associated with the failing metric, then inspect the implicated code and resources.
  4. Re-run equivalent lab measurements after the fix. Do not claim an immediate field improvement; CrUX and first-party RUM need new user visits.

If only source code is available, identify likely causes but do not claim that LCP, INP, or CLS is failing without runtime evidence.

The three metrics

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/addyosmani/web-quality-skills
Categories
Frontend Development, Code Review & Quality, Debugging, Marketing & SEO

More from addyosmani/web-quality-skills

All 6

Recommended

More Frontend Development
1jimliu avatarbaoyu-infographicjimliu/baoyu-skillsGenerate professional infographics with 21 layout types and 22 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-33.4Kskills.sh installs
2mcp-use avatarmcp-apps-buildermcp-use/mcp-useBuild, modify, debug, migrate, or review TypeScript MCP servers and interactive MCP Apps using mcp-use v2. Use for tools, resources, prompts, Views, React host 33.1Kskills.sh installs
3vercel-labs avatarnext-cache-componentsvercel-labs/next-skillsMix static, cached, and dynamic content in a single Next.js route with Partial Prerendering.33Kskills.sh installs
4dammyjay93 avatarinterface-designdammyjay93/interface-designCraft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when designing, buil32.8Kskills.sh installs
5expo avatarexpo-data-fetchingexpo/skillsFramework (OSS). Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching31.8Kskills.sh installs
6firecrawl avatarfirecrawl-qafirecrawl/firecrawl-workflowsQA test a live website with Firecrawl browser and scrape evidence. Use when the user wants exploratory QA, form testing, navigation/link checks, responsive chec31.6Kskills.sh installs