Web Quality Audit

Runs an evidence-led audit of performance, accessibility, SEO, best practices, and agentic browsing, then outputs a prioritized, verifiable report.

Web & APIIntermediate★ 3,010⑂ 262AI score 9/10Last updated: Aug 24, 2026

What it does

Forces you to scope the audit first (representative URLs, key journeys, mobile/desktop, public vs. authenticated) and gather a live browser baseline before grepping the codebase.
Provides a tool-routing table: prefer Chrome DevTools MCP (performance_start_trace, performance_analyze_insight, lighthouse_audit, take_snapshot), fall back to Lighthouse CLI or PageSpeed Insights.
Encodes concrete thresholds: Core Web Vitals (LCP < 2.5s, INP < 200ms, CLS < 0.1), WCAG AA contrast and keyboard rules, crawlability/on-page/technical SEO, security (HTTPS, CSP, vulnerable deps), plus agentic browsing signals (accessibility tree, WebMCP, optional llms.txt).
Classifies findings as Critical/High/Medium/Low and emits a report template: evidence table → issues with file paths → recommended priority → verification status.
Aligned with Lighthouse 13+ Performance Insights and explicitly warns against treating an aggregate score as proof of quality.

Who it's for

Frontend and full-stack developers who want a pre-deploy quality gate.
Agencies and consultants who must hand clients defensible performance/a11y reports.
Tech leads and QA owners tracking Core Web Vitals and technical SEO over time.

Example uses

Ask "audit my site" → the skill traces and Lighthouse-audits a representative URL, then tabulates LCP/INP/CLS and the accessibility score with scope and source for each number.
Pre-deploy gate: verify console errors, HTTPS, meta tags, and zero automated a11y failures, reporting only the misses with file references.
Poor INP on a checkout page: localize the runtime failure first, inspect only the implicated bundles/long tasks, propose a fix, then re-measure under identical conditions.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/addyosmani/web-quality-skills/HEAD/skills/web-quality-audit/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)

Download the ZIP with the button below.
In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.

↓ Download ZIP

Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on AI Skill Mart.
Copy the skills/web-quality-audit folder from the GitHub repo addyosmani/web-quality-skills into my ~/.claude/skills/web-quality-audit/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/addyosmani/web-quality-skills.git /tmp/web-quality-skills && cp -r /tmp/web-quality-skills/skills/* ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

Open a terminal.
Clone the repo: git clone https://github.com/addyosmani/web-quality-skills.git
Create the skills directory if needed: mkdir -p ~/.claude/skills
This skill links to sibling skills via relative paths, so copy the whole skills folder: cp -r web-quality-skills/skills/* ~/.claude/skills/
(Recommended) Connect Chrome DevTools MCP for live traces, or install the CLI fallback: npm i -g lighthouse.
Restart Claude Code and try: "audit my site" or "run lighthouse audit on example.com".
Fix Critical/High findings first, then re-run the same checks under the same conditions to confirm.

View source on GitHub ↗License: MIT