Open-Source Testing · addyosmani

web-quality-skills

Web Quality Skills is a collection of agent-ready instruction sets for optimizing web projects across performance, accessibility, SEO, and best practices. It encodes Lighthouse audit patterns and Core Web Vitals guidance for use with Claude, Codex, Gemini, and other AI coding agents.

Talk to DEV.co Discuss Implementation

Source: GitHub — github.com/addyosmani/web-quality-skills

2.5k

GitHub stars

227

Forks

Shell

Primary language

MIT

License (OSI-approved)

Key facts

Objective fields from the source. Values we can't verify are shown as “Unknown” rather than guessed.

Field	Value
Repository	addyosmani/web-quality-skills
Owner	addyosmani
Primary language	Shell
License	MIT — OSI-approved
Stars	2.5k
Forks	227
Open issues	8
Latest release	Unknown
Last updated	2026-06-14
Source	https://github.com/addyosmani/web-quality-skills

What web-quality-skills is

A framework-agnostic skill repository (Shell-based, MIT-licensed) providing modular prompts and decision trees for 150+ Lighthouse audits, WCAG 2.2 compliance, and CWV metrics (LCP, INP, CLS). Installs via npx, CLI plugins, or manual skill directory copy; activates via trigger phrases in agent chat.

Quickstart

Get the web-quality-skills source

Clone the repository and explore it locally.

terminalbash

1git clone https://github.com/addyosmani/web-quality-skills.git2cd web-quality-skills3# follow the project's README for install & configuration

Need it deployed, integrated, or customized instead? DEV.co ships production installs.

Best use cases

AI-Assisted Web Performance Audits

Use with Claude Code, Cursor, or Codex to run comprehensive or targeted audits (performance, CWV, accessibility) on existing web projects. Skills auto-trigger on user intent ("optimize performance", "fix CLS") and suggest concrete code changes.

Framework-Agnostic Code Review & Optimization

Apply to React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, or plain HTML projects. Skills provide framework-specific hints (next/image, nuxt/image, etc.) and performance budgets, making them useful during development or refactoring.

Continuous Quality Guidance in Agent Workflows

Embed skills into coding agent workspaces to automatically surface web quality checks as context during new feature development or bug fixes, reducing the need for post-hoc audits.

Implementation considerations

Skills activate on trigger phrase matching (e.g., 'optimize performance', 'improve accessibility'). Ensure agents are configured to invoke them; behavior may vary across agent platforms (Claude, Codex, Gemini, Cursor).
Each skill is a SKILL.md file (< 500 lines) with examples and thresholds; no code execution. Agents will synthesize guidance, but you must apply changes manually or provide agents with code editing / testing capabilities.
Core Web Vitals guidance assumes you can measure LCP, INP, CLS via lab tools (Chrome DevTools, PageSpeed) or field data (CrUX, RUM); skills do not collect metrics themselves.
Framework-specific hints are included (React, Vue, Svelte, etc.) but are illustrative, not executable recipes. Agents may need context (project files, package.json) to generate relevant suggestions.
Lighthouse thresholds and performance budgets are guidelines; tune them to your product's requirements and user base.

When to avoid it — and what to weigh

No agent environment (Claude Code, Cursor, Codex, Gemini) — Skills are designed as instruction sets for AI agents, not standalone CLI tools or npm packages. If you need a run-as-you-go auditor (e.g., lighthouse CLI, PageSpeed Insights API), this is not it.
Seeking automated enforcement or CI/CD integration — Skills provide guidance and suggestions, not automated linting, test execution, or performance budgets enforcement. For CI gates, pair with actual tools (lighthouse, axe, PageSpeed) via separate pipelines.
Expecting real-time data from live sites — Skills are prompts and checklists; they do not collect lab or field metrics, integrate with RUM providers, or fetch Lighthouse reports. You must supply URLs, screenshots, or HTML manually or via agent tools.
Requirement for support or SLA — Project is maintained by an individual (Addy Osmani); no commercial support, bug-fix SLA, or vendor commitment. Critical issues depend on community PRs and maintainer availability.

License & commercial use

MIT License. Permissive OSI license allowing unrestricted use, modification, and distribution, including commercial use, provided the license notice and copyright are retained.

MIT is a permissive license that explicitly permits commercial use. However, there is no vendor support, SLA, or indemnification. For commercial deployment, review the license grant scope and your internal compliance requirements. No warranty is provided; you assume all risk of use.

DEV.co evaluation signals

Editorial assessment — not user reviews. Directional, with an explicit confidence level.

Signal	Assessment
Maintenance	Active
Documentation	Strong
License clarity	Clear
Deployment complexity	Low
DEV.co fit	Good
Assessment confidence	High

Security considerations

Skills are static prompts and do not execute code, make network requests, or persist data. Security depends on the agent environment (Claude Code, Cursor, Codex, Gemini) and project source access. Ensure agents run with least privilege, do not leak credentials or sensitive code in suggestions, and validate agent-generated code before deployment. No CVEs or known exploits are disclosed; review agent implementation for injection or inference risks.

Alternatives to consider

Google Lighthouse (CLI or PageSpeed Insights API)

Automated, real-time audits with lab and field metrics. Directly executable, no agent required. Best for CI/CD and measurement; requires separate tool integration and interpretation.

Axe-core, WAVE, Pa11y (accessibility audits)

Focused, automated accessibility testing with detailed reports and CI integration. Complementary to skills; can enforce WCAG compliance programmatically without agent involvement.

web.dev, MDN, WCAG Guidelines (static reference docs)

Authoritative, human-readable guidance without agent automation. Suitable for self-directed learning; no prompt/trigger-phrase activation or AI-assisted code synthesis.

Software development agency

Build on web-quality-skills with DEV.co software developers

If you're using Claude Code, Cursor, Codex, or Gemini, install Web Quality Skills to embed Lighthouse and Core Web Vitals guidance directly into your AI agent workflow. No setup required—just activate and start optimizing.

Talk to DEV.co

Related open-source tools

Surfaced by semantic similarity across the DEV.co open-source index.

garden-skills skills claude-code-plugins-plus-skills

Related on DEV.co

Explore the category and the services that help you build with it.

Open-Source Testing AI Application Development Web App Development Talk to DEV.co

web-quality-skills FAQ

Do skills run Lighthouse or collect performance metrics?

No. Skills are prompts and checklists that guide agents to recommend optimizations based on Lighthouse/Core Web Vitals principles. You must use separate tools (Lighthouse CLI, PageSpeed Insights, RUM) to measure actual metrics and verify improvements.

Can I use skills without an AI coding agent?

Not easily. Skills are designed to activate within agent chat (Claude Code, Cursor, Codex, Gemini) via trigger phrases and context awareness. You can manually copy SKILL.md files as reference documents, but you lose the AI-assisted automation and synthesis.

Are skills framework-specific, or do they work with any stack?

Framework-agnostic by design. Skills provide universal guidance (Lighthouse, WCAG, CWV thresholds) plus framework-specific hints (React, Vue, Svelte, etc.). Recommendations apply across stacks; implementation details vary.

How do I enforce skills in CI/CD or as linting rules?

Skills themselves do not integrate with CI/CD pipelines. Use them for agent-assisted code review and guidance during development. For enforcement, add separate tools (lighthouse, axe-core, eslint, stylelint) to your pipeline and tune thresholds to match skill recommendations.

Software developers & web developers for hire

Adopting web-quality-skills is usually one piece of a larger software development effort. As a software development agency, DEV.co provides software development services and web development expertise — pairing senior software developers and web developers with your team to design, build, and operate open-source testing software in production.

Enhance Your Web Quality Workflow

Talk to DEV.co Schedule a Consultation