Web Quality Skills
Agent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.
Install
/plugin marketplace add addyosmani/web-quality-skillsInstall command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →Web Quality Skills
An (unofficial) measurement-first collection of Agent Skills for optimizing web projects with Google Lighthouse, Chrome DevTools for agents, Core Web Vitals, WCAG, and search guidance.
Stack-agnostic. Works with any framework: React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, plain HTML, and more.
Why web quality skills?
While interface guidelines tell you what to build, Web Quality Skills tell you how to build it performantly, accessibly, and optimally for search engines. These skills combine:
- Live Lighthouse audits for agents across Accessibility, SEO, Best Practices, and Agentic Browsing when Chrome DevTools MCP is available
- Performance traces and Insights for diagnosing LCP, INP, CLS, network, and main-thread bottlenecks
- Field plus lab measurement using CrUX for real-user context and controlled browser runs for repeatable diagnosis
- Core Web Vitals optimization patterns for LCP, INP, and CLS
- WCAG 2.2 accessibility standards
- Modern SEO requirements
Available skills
| Skill | Description | Use when |
|---|---|---|
| web-quality-audit | Evidence-led review across Lighthouse and source categories | "Audit my site", "Review this for quality", "Check web quality" |
| performance | Field/lab measurement, traces, loading and runtime fixes | "Optimize performance", "Speed up my site", "Fix slow loading" |
| core-web-vitals | Measured LCP, INP, and CLS diagnosis and optimization | "Improve Core Web Vitals", "Fix LCP", "Reduce CLS" |
| accessibility | WCAG compliance, screen reader support, keyboard navigation | "Improve accessibility", "WCAG audit", "a11y review" |
| seo | Search engine optimization, crawlability, structured data | "Optimize for SEO", "Improve search ranking", "Fix meta tags" |
| best-practices | Security, modern APIs, code quality patterns | "Apply best practices", "Security audit", "Code quality review" |
Measurement model
The performance skills keep four evidence types explicit:
| Evidence | Answers |
|---|---|
| CrUX field data | How eligible real Chrome users experienced the URL or origin over the recent aggregation window |
| First-party RUM | How the site's own users experience routes, releases, devices, and interactions |
| DevTools trace or Lighthouse lab run | What happened in one controlled browser session and why |
| Static source inspection | What might be a problem when the page cannot run |
Field data determines user impact. Lab traces reproduce and diagnose it. A PerformanceObserver snippet run in one browser is a lab observation, not real-user data by itself.
Quick start
Installation
add-skill is a powerful CLI tool that lets you install agent skills onto your coding agents from git repositories. Whether you're using OpenCode, Claude Code, Codex, or Cursor, the add-skill tool makes it simple to extend your agent's capabilities with specialized instruction sets. Use add-skill to automate release notes, create pull requests, integrate with external tools, and more. Simply run npx add-skill to get started.
npx skills add addyosmani/web-quality-skills
or
npx add-skill addyosmani/web-quality-skills
Or manually:
Similar plugs
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…
Why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman.
The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create prototypes, websites, apps, dashboards, presentations, images, and videos with your team…