This repository provides a collection of Agent Skills for optimizing web quality using Lighthouse and Core Web Vitals. It targets framework-agnostic integration and includes multiple installation and usage workflows.
Collecting history — the radar snapshots this repo daily. The trend line appears after 3 days of data (1 so far).
What it is
An unofficial collection of Agent Skills for optimizing web projects based on Lighthouse guidelines and Core Web Vitals best practices. It is described as stack-agnostic and compatible with React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, plain HTML, and more.
How it works
The project assembles skills focused on web quality categories (web-quality-audit, performance, core-web-vitals, accessibility, seo, best-practices). Skills can be activated by matching phrases in prompts or conversations. It provides example trigger phrases and outlines checks such as Core Web Vitals metrics, performance patterns, accessibility rules, SEO requirements, and security/best practice patterns.
Getting started
Installation
npx skills add addyosmani/web-quality-skills
npx add-skill addyosmani/web-quality-skills
Or manually:
cp -r skills/* ~/.claude/skills/
Claude Code (plugin)
/plugin marketplace add addyosmani/web-quality-skills
/plugin install web-quality-skills@addy-web-quality-skills
Codex
codex plugin marketplace add addyosmani/web-quality-skills
Gemini CLI
gemini extensions install https://github.com/addyosmani/web-quality-skills
claude.ai
Add skills to your project knowledge or paste the SKILL.md contents into your conversation.
Usage
Skills activate automatically when prompts match their description. Examples:
Audit this page for web quality issues
Optimize performance and fix Core Web Vitals
Review accessibility and suggest improvements
Make this SEO-ready
Skill details
web-quality-audit
Trigger phrases: "audit my site", "quality review", "lighthouse audit", "check web quality" What it checks:
- All Core Web Vitals metrics
- 50+ performance patterns
- 40+ accessibility rules
- 30+ SEO requirements
- 20+ security/best practice patterns
performance
Trigger phrases: "speed up", "optimize performance", "reduce load time", "fix slow" Key optimizations:
- Critical rendering path
- JavaScript bundling and code splitting
- Image optimization (formats, sizing, lazy loading)
- Font loading strategies
- Caching and preloading
- Server response optimization
core-web-vitals
Trigger phrases: "Core Web Vitals", "LCP", "INP", "CLS", "page experience" Metrics covered:
- LCP < 2.5s
- INP < 200ms
- CLS < 0.1
accessibility
Trigger phrases: "accessibility", "a11y", "WCAG", "screen reader", "keyboard navigation" Categories: Perceivable, Operable, Understandable, Robust
seo
Trigger phrases: "SEO", "search optimization", "meta tags", "structured data", "sitemap" What it covers: Technical SEO, On-page SEO, Structured data, Mobile-friendliness, Performance signals
best-practices
Trigger phrases: "best practices", "security audit", "modern standards", "code quality" Areas covered: HTTPS/security headers, Modern JavaScript APIs, Browser compatibility, Error handling, Console cleanliness
Thresholds reference
Core Web Vitals targets are listed for LCP, INP, CLS. Performance budget recommendations and Lighthouse score targets are provided in the tables.
Framework-specific notes
Notes on React/Next.js, Vue/Nuxt, Svelte/SvelteKit, Astro, and Static HTML usage patterns.
Contributing
Instructions to fork, create SKILL.md under skills/{skill-name}/, keep SKILL.md under 500 lines, include practical examples and patterns, and submit a PR.
Resources
References to Lighthouse documentation, web.dev, Core Web Vitals, WCAG 2.2, and Agent Skills Specification.
License
MIT License - see LICENSE for details.