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:

cp -r skills/* ~/.claude/skills/

Claude Code (plugin)

Install as a versioned, namespaced plugin from inside Claude Code:

/plugin marketplace add addyosmani/web-quality-skills
/plugin install web-quality-skills@addy-web-quality-skills

Skills are then namespaced (e.g. /web-quality-skills:performance) and update with /plugin update. The plugin reads the same skills/ directory as the manual copy above — no duplication.

Codex

Install directly via the Codex plugin marketplace (Codex CLI v0.122+):

codex plugin marketplace add addyosmani/web-quality-skills

Once installed, invoke skills in chat using @ (e.g. @performance, @accessibility). See docs/codex-setup.md for local installation and troubleshooting.

Gemini CLI

Install directly via Gemini CLI extensions:

gemini extensions install https://github.com/addyosmani/web-quality-skills

Skills are auto-discovered by Gemini and activate when prompts match their description. See docs/gemini-setup.md for workspace mode and troubleshooting.

claude.ai

Add skills to your project knowledge or paste the SKILL.md contents into your conversation.

Usage

Skills activate automatically when your request matches 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

Optional Chrome DevTools integration

When the agent exposes equivalent live-browser capabilities, the skills prefer them. With Chrome DevTools MCP, the current tool names are:

• performance_start_trace and focused Performance Insights for performance work, including CrUX context when eligible field data exists
• lighthouse_audit for Accessibility, SEO, Best Practices, and Agentic Browsing
• rendered accessibility snapshots, console messages, and network requests for issue-level diagnosis

This integration is optional. Without it, the skills fall back to Lighthouse CLI, PageSpeed Insights/CrUX tools, manual browser checks, and static inspection rather than stopping the task.

Skill details

web-quality-audit

The comprehensive skill that orchestrates all other skills. It starts with live evidence when a page is runnable and keeps measured failures separate from source-code hypotheses.

Trigger phrases: "audit my site", "quality review"