SkillFoxx

Type a name, a task or a service

Web Quality Skills

A set of skills for web quality audits: performance, Core Web Vitals, accessibility, SEO and best practices from Lighthouse

SkillMedium risk

addyosmani/web-quality-skillsAuthor: Addy Osmani

Install

npx skills add addyosmani/web-quality-skills

Installs all skills into the agent directory.

This is third-party code. Review the repository files before installing.

What it does

A set of six skills runs a measurement-first frontend quality review. The top-level web-quality-audit skill orchestrates the rest and keeps measured issues separate from code hypotheses. Separate skills cover performance and loading, the three Core Web Vitals, WCAG 2.2 accessibility, SEO and general best practices. The skills prefer live evidence: browser traces, Lighthouse audits and CrUX field data, and fall back to Lighthouse CLI and static inspection when Chrome DevTools MCP is absent. The stack is any: React, Vue, Angular, Svelte, Next.js, Astro or plain HTML.

Who it is for. For frontend developers and leads who need a repeatable web quality audit.

Good fit when

  • You need to find and fix LCP, INP or CLS issues
  • You audit a site for WCAG accessibility
  • You want a performance and SEO audit before release

Not a fit when

  • You need feature development rather than a quality review
  • The project is native or backend, not web

Example request

Run a web quality audit of this page and fix Core Web Vitals

Limitations

Live Lighthouse audits and traces are fullest with Chrome DevTools MCP connected; without it the skills use Lighthouse CLI, PageSpeed Insights and static inspection. Scores help catch regressions but do not replace field data and manual checks. The project is unofficial.

How to disable. Remove the web-quality-skills plugin via /plugin, or delete the skill folders from your agent's skills directory.

Security check

  • The skills run browser audits and read the project code

README in short

The README describes a measurement-first set of skills for optimizing sites against Lighthouse, Core Web Vitals, WCAG and search requirements. It separates four evidence types: CrUX field data, first-party RUM, a trace or Lighthouse lab run, and static source inspection. Installation is via npx skills, as a Claude Code plugin or a Gemini extension, with manual copying. It lists metric thresholds and starting budgets as guardrails, not universal norms. MIT licensed.

SKILL.md

---
name: web-quality-audit
description: 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".
license: MIT
metadata:
  author: web-quality-skills
  version: "2.0"
---

# Web quality audit

Comprehensive quality review that combines live browser evidence with source inspection. Covers Performance, Accessibility, SEO, Best Practices, and Agentic Browsing without treating an aggregate score as proof of quality.

FAQ

Do I need Chrome DevTools MCP?

No, it is optional. With it the skills give live audits; without it they fall back to Lighthouse CLI and static analysis.

Is this an official Google project?

No, the README calls the set unofficial, though it builds on Lighthouse and Core Web Vitals.

Editors’ pick

Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules

SkillMedium risk123.8K
Editors’ pick

A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells

SkillHigh risk68K
Editors’ pick

Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys

SkillMedium risk31.2K
Editors’ pick

Three skill plugins for Google Stitch: screen generation, code to design and React builds from mockups

PluginMedium risk8.3K