Agent skill

Web Quality Audit

by addyosmani in addyosmani/web-quality-skills

Run an evidence-led web quality audit covering performance, accessibility, SEO, best practices, and agentic browsing.

MITAuto-check passedFrontend & Design

Install Web Quality Audit

skills CLI
$ npx skills add addyosmani/web-quality-skills --skill web-quality-audit -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install addyosmani/web-quality-skills web-quality-audit --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/addyosmani/web-quality-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/web-quality-audit .claude/skills/web-quality-audit && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
web-quality-audit
GitHub stars
2.9k
Token cost
~2.6k tokens
SKILL.md length
1,115 words
Files
2 (incl. scripts)
Skills in repo
2
Repo updated
First seen
Licence
MIT

At a glance

Run an evidence-led web quality audit covering performance, accessibility, SEO, best practices, and agentic browsing.

  • Works in 5 steps: Establish the audit target:… → If a page can run, read the measurement… → Use runtime failures to localize source… → …
  • Asked to audit my site
  • SKILL.md covers How it works, Tool routing, Audit categories and Severity levels, plus 3 more sections
  • Runs Shell scripts from its folder

What it does

Web Quality Audit is an agent skill from addyosmani/web-quality-skills. 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".

Its SKILL.md is about 2.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including scripts (for example `scripts/analyze.sh`).

It sits in Frontend & Design, covering Web performance and Accessibility. The repository describes itself as: Agent Skills for optimizing web quality based on Lighthouse and Core Web Vitals. The licence is MIT.

When your agent uses it

  • Asked to audit my site
  • Review web quality
  • Run lighthouse audit
  • Check page quality

Example prompts

  • “audit my site”
  • “review web quality”
  • “run lighthouse audit”
  • “/web-quality-audit”

Requirements

  • A Bash shell

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Establish the audit target: representative URLs, important states and journeys, public versus authenticated access, and mobile/desktop…
  2. If a page can run, read the measurement workflow and collect a minimal live baseline before searching the codebase broadly.
  3. Use runtime failures to localize source inspection. Keep measured findings separate from hypotheses found only in code.
  4. Categorize by user impact and confidence, then make or recommend specific fixes.
  5. Re-run equivalent automated checks and the affected manual flows. Report what is verified and what still needs field or human validation.

What it can do on your machine

Read from SKILL.md and the folder at commit afa8da9. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (Shell), which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • developer.chrome.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Web Quality Audit loads about 2.6k tokens when it runs. Until then it costs about 66 tokens; SKILL.md has 1,115 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~66
When it runs · the whole SKILL.md, loaded when a task matches
~2.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from addyosmani/web-quality-skills at commit afa8da9, republished under its MIT licence (© addyosmani). 1,115 words, ~2,612 tokens.

Download SKILL.mdSave it as .claude/skills/web-quality-audit/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
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
metadata.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.

Lighthouse 13+. The Performance category now uses shared Performance Insights across Lighthouse and the DevTools Performance panel (announcement). Follow current insight names and evidence. Do not require removed audit IDs or automatically recreate their recommendations; some were retired because they were noisy, inactionable, or easy to over-recommend.

How it works

  1. Establish the audit target: representative URLs, important states and journeys, public versus authenticated access, and mobile/desktop scope.
  2. If a page can run, read the measurement workflow and collect a minimal live baseline before searching the codebase broadly.
  3. Use runtime failures to localize source inspection. Keep measured findings separate from hypotheses found only in code.
  4. Categorize by user impact and confidence, then make or recommend specific fixes.
  5. Re-run equivalent automated checks and the affected manual flows. Report what is verified and what still needs field or human validation.

Tool routing

Use the best capability already available; do not block the audit on optional setup.

NeedPreferred routeFallback
Performance and Core Web VitalsRecord a browser performance trace and analyze focused insights; with Chrome DevTools MCP, use performance_start_trace then performance_analyze_insightLighthouse CLI or PageSpeed Insights lab data
Real-user performanceCrUX values included in current DevTools trace summariesPageSpeed Insights/CrUX Vis; direct CrUX API only when a key is already available or automation is requested
Accessibility, SEO, Best Practices, Agentic BrowsingRun a live Lighthouse audit; with Chrome DevTools MCP, use lighthouse_auditCategory-specific Lighthouse CLI audits plus manual checks
Rendered semantics and interactionInspect the accessibility tree and exercise the UI; with Chrome DevTools MCP, use take_snapshot and focused evaluate_scriptBrowser/manual testing
Source smoke testscripts/analyze.sh <path>Direct source inspection

Chrome DevTools MCP's lighthouse_audit intentionally excludes performance. Its navigation mode reloads the page; use snapshot mode when preserving the current authenticated or user-created state matters. The static analyzer is a fast smoke test, not a substitute for a rendered-page audit.

Audit categories

Performance

Core Web Vitals — Must pass for good page experience:

  • LCP (Largest Contentful Paint) < 2.5s. The largest visible element must render quickly. Optimize images, fonts, and server response time.
  • INP (Interaction to Next Paint) < 200ms. User interactions must feel instant. Reduce JavaScript execution time and break up long tasks.
  • CLS (Cumulative Layout Shift) < 0.1. Content must not jump around. Set explicit dimensions on images, embeds, and ads.

Resource Optimization:

  • Compress images. Use WebP/AVIF with fallbacks. Serve correctly sized images via srcset.
  • Minimize JavaScript. Remove unused code. Use code splitting. Defer non-critical scripts.
  • Optimize CSS. Extract critical CSS. Remove unused styles. Avoid @import.
  • Efficient fonts. Use font-display: swap. Preload critical fonts. Subset to needed characters.

Loading Strategy:

  • Preconnect to origins. Add <link rel="preconnect"> for third-party domains.
  • Preload critical assets. LCP images, fonts, and above-fold CSS.
  • Lazy load below-fold content. Images, iframes, and heavy components.
  • Cache effectively. Long cache TTLs for static assets. Immutable caching for hashed files.
Accessibility

Perceivable:

  • Text alternatives. Every <img> has meaningful alt text. Decorative images use alt="".
  • Color contrast. Minimum 4.5:1 for normal text, 3:1 for large text (WCAG AA).
  • Don't rely on color alone. Use icons, patterns, or text alongside color indicators.
  • Captions and transcripts. Video has captions. Audio has transcripts.

Operable:

  • Keyboard accessible. All functionality available via keyboard. No keyboard traps.
  • Focus visible. Clear focus indicators on all interactive elements.
  • Skip links. Provide "Skip to main content" for keyboard users.
  • Sufficient time. Users can extend time limits. No auto-advancing content without controls.

Understandable:

  • Page language. Set lang attribute on <html>.
  • Consistent navigation. Same navigation structure across pages.
  • Error identification. Form errors clearly described and associated with fields.
  • Labels and instructions. All form inputs have associated labels.

Robust:

  • Valid HTML. No duplicate IDs. Properly nested elements.
  • ARIA used correctly. Prefer native elements. ARIA roles match behavior.
  • Name, role, value. Interactive elements have accessible names and correct roles.
Show full SKILL.md (457 more words)Show less
SEO

Crawlability:

  • Valid robots.txt. Doesn't block important resources.
  • XML sitemap. Lists all important pages. Submitted to Search Console.
  • Canonical URLs. Prevent duplicate content issues.
  • No noindex on important pages. Check meta robots and headers.

On-Page SEO:

  • Unique title tags. Make each title descriptive and concise; display truncation varies by device and result type.
  • Meta descriptions. Write useful, page-specific summaries; search engines may choose a different snippet.
  • Heading hierarchy. The primary heading is descriptive and the structure is logical; do not fail valid HTML solely for using more than one <h1>.
  • Descriptive link text. Not "click here" or "read more".

Technical SEO:

  • Mobile-friendly. Responsive design. Tap targets ≥ 48px.
  • HTTPS. Secure connection required.
  • Page experience signals. Use field Core Web Vitals as evidence, without promising a ranking change.
  • Structured data. JSON-LD for rich snippets (Article, Product, FAQ, etc.).
Best practices

Security:

  • HTTPS everywhere. No mixed content. HSTS enabled.
  • No vulnerable libraries. Keep dependencies updated.
  • CSP headers. Content Security Policy to prevent XSS.
  • No exposed source maps. In production builds.

Modern Standards:

  • No deprecated APIs. Replace document.write, synchronous XHR, etc.
  • Valid doctype. Use <!DOCTYPE html>.
  • Charset declared. <meta charset="UTF-8"> as first element in <head>.
  • No browser errors. Clean console. No CORS issues.

UX Patterns:

  • No intrusive interstitials. Especially on mobile.
  • Clear permission requests. Only ask when needed, with context.
  • No misleading buttons. Buttons do what they say.
Agentic browsing

Use the Lighthouse Agentic Browsing results as technical signals for how well assistants can understand and interact with the rendered page.

  • Accessible interaction surface. Semantic HTML, labels, names, roles, and states must expose meaningful controls in the accessibility tree.
  • WebMCP integrations are valid when present. Review registered tools, schemas, and form coverage; do not add WebMCP solely to raise an audit score.
  • llms.txt is optional. A valid file may help compatible tools discover curated content, but a Lighthouse pass does not prove that search or AI products will ingest, rank, or cite it.
  • Keep this category separate from SEO claims. Agentic browsability is not evidence of search ranking or AI visibility.

Severity levels

LevelDescriptionAction
CriticalSecurity vulnerabilities, complete failuresFix immediately
HighCore Web Vitals failures, major a11y barriersFix before launch
MediumPerformance opportunities, SEO improvementsFix within sprint
LowMinor optimizations, code qualityFix when convenient

Audit output format

When performing an audit, structure findings as:

markdown
## Audit results

### Evidence
| Signal | Scope/conditions | Result | Source |
|--------|------------------|--------|--------|
| LCP | URL, phone, p75/28 days | 3.1s (needs improvement) | CrUX |
| Accessibility | URL, mobile navigation | 92 | Lighthouse |

### Critical issues (X found)
- **[Category]** Issue description. File: `path/to/file.js:123`
  - **Impact:** Why this matters
  - **Evidence:** Measured failure, runtime observation, or source hypothesis
  - **Fix:** Specific code change or recommendation

### High priority (X found)
...

### Summary
- Performance: measured status and X findings
- Accessibility: automated status, X findings, manual checks pending/passed
- SEO: X findings
- Best Practices: X findings
- Agentic Browsing: X findings or not available

### Recommended priority
1. First fix this because...
2. Then address...
3. Finally optimize...

### Verification
- Re-run results under the same conditions
- Manual checks completed
- Field validation still pending

Quick checklist

Before every deploy
  • Core Web Vitals passing
  • No accessibility errors (axe/Lighthouse)
  • No console errors
  • HTTPS working
  • Meta tags present
Weekly review
  • Check Search Console for issues
  • Review Core Web Vitals trends
  • Update dependencies
  • Test with screen reader
Monthly deep dive
  • Full Lighthouse audit
  • Performance profiling
  • Accessibility audit with real users
  • SEO keyword review

References

For detailed guidelines on specific areas:

© addyosmani, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (scripts) in skills/web-quality-audit of addyosmani/web-quality-skills.

  • SKILL.md
  • scripts/analyze.sh

Open the folder on GitHubat commit afa8da9

Compare with similar skills

Web Quality Audit next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Web Quality Audit compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Web Quality Audit this skilladdyosmani/web-quality-skills2.9k—~2.6kAutomated safety check: PassMIT
Web Quality Auditmidudev/100cosas.dev1143 repos~1.7kAutomated safety check: PassMIT
Optimize Loadtextura-agency/next16-claude-starter133—~4.6kAutomated safety check: NotesUnlicense
Accessibilityericrisco/rsc-harness180—~3.4kAutomated safety check: PassMIT
Web Perfelithrar/dotfiles202—~721Automated safety check: PassMIT
Accessibility Checkmakifbaysal/tasktrooper112—~1.1kAutomated safety check: PassApache-2.0

Similar skills

  • Web Quality Audit

    midudev/100cosas.dev

    Comprehensive web quality audit covering performance, accessibility, SEO, and best practices.

    114 GitHub starsUsed in 3 repos~1.7k tokens
    Frontend & DesignAuto-check passed
  • Optimize Load

    textura-agency/next16-claude-starter

    Get a page into Lighthouse's green zone on desktop and mobile, for people AND for the robot form crawlers get — build it, audit all four categories (Performance, Accessibility, Best Practices, SEO)…

    133 GitHub stars~4.6k tokensUpdated 3 days ago
    Frontend & DesignAuto-check: notes
  • Accessibility

    ericrisco/rsc-harness

    A skill your agent uses when making a web UI conform to WCAG 2.2 Level AA — axe-core or Lighthouse a11y violations, keyboard operability, focus management, ARIA roles/names/live regions, contrast…

    180 GitHub stars~3.4k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Web Perf

    elithrar/dotfiles

    Diagnose page-load and interaction performance using browser traces, network evidence, and source code.

    202 GitHub stars~721 tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • Accessibility Check

    makifbaysal/tasktrooper

    A skill your agent uses when a task changes any screen, form, dialog, menu or control - Lighthouse/axe scan of the changed screens, a keyboard walk, and the thresholds that fail a task

    112 GitHub stars~1.1k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Best Practices

    tech-leads-club/agent-skills

    Apply modern web development best practices for security, compatibility, and code quality.

    7k GitHub stars~3.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from addyosmani/web-quality-skills

  • Core Web Vitals

    addyosmani/web-quality-skills

    Optimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence.

    2.9k GitHub stars~2.4k tokensUpdated 1 mo ago
    Auto-check passed

Questions about Web Quality Audit

What does Web Quality Audit do?

Run an evidence-led web quality audit covering performance, accessibility, SEO, best practices, and agentic browsing. Web Quality Audit is an agent skill from addyosmani/web-quality-skills. Run an evidence-led web quality audit covering performance, accessibility, SEO, best practices, and agentic browsing.

When should I use Web Quality Audit?

Web Quality Audit fits situations like: asked to audit my site; review web quality; run lighthouse audit; check page quality.

How do I install Web Quality Audit in Claude Code?

Run `npx skills add addyosmani/web-quality-skills --skill web-quality-audit -a claude-code`. Or copy the skill folder (skills/web-quality-audit in addyosmani/web-quality-skills) into .claude/skills/web-quality-audit in your project. Claude Code loads it when a task matches its description.

How do I install Web Quality Audit in Codex?

Run `npx skills add addyosmani/web-quality-skills --skill web-quality-audit -a codex`. Or copy the skill folder (skills/web-quality-audit in addyosmani/web-quality-skills) into .agents/skills/web-quality-audit in your project. Codex loads it when a task matches its description.

Can I use Web Quality Audit in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add addyosmani/web-quality-skills --skill web-quality-audit -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/web-quality-audit, .gemini/skills/web-quality-audit, .github/skills/web-quality-audit and .opencode/skills/web-quality-audit in your project.

What does Web Quality Audit need to run?

Going by SKILL.md and its folder, Web Quality Audit needs a shell for the scripts in its folder. Our summary lists: A Bash shell.

Does Web Quality Audit access the network?

SKILL.md names 1 domain. As links in the text: developer.chrome.com. This is read from the text; nothing was executed.

Is Web Quality Audit safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Web Quality Audit use?

Web Quality Audit is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Web Quality Audit use?

About 2.6k tokens (SKILL.md is roughly 10k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Web Quality Audit?

Skills that share tags, products or a category with Web Quality Audit: Web Quality Audit (midudev/100cosas.dev, 114 stars), Optimize Load (textura-agency/next16-claude-starter, 133 stars), Accessibility (ericrisco/rsc-harness, 180 stars) and Web Perf (elithrar/dotfiles, 202 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Web Quality Audit?

addyosmani (a GitHub user) maintains it in addyosmani/web-quality-skills, which has 2,915 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on August 24, 2026.

Source: addyosmani/web-quality-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.