Web Quality Skills is a collection of agent skills for measuring and improving website performance, accessibility, search optimization, and browser usability. Developers use it with any web framework to run Lighthouse and Chrome DevTools checks, analyze Core Web Vitals and CrUX data, and apply WCAG and SEO guidance. The catalogue entries are the project's own skills, instructions, and plugin for agent-assisted web-quality work.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add addyosmani/web-quality-skills --skill best-practicesgit clone --depth 1 https://github.com/addyosmani/web-quality-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/addyosmani/web-quality-skills/best-practices)<a href="https://agentmods.dev/skills/addyosmani/web-quality-skills/best-practices"><img src="https://agentmods.dev/badge/skills/addyosmani/web-quality-skills/best-practices/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/addyosmani/web-quality-skills/best-practices"><img src="https://agentmods.dev/badge/skills/addyosmani/web-quality-skills/best-practices.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk pass
- NVIDIA SkillSpector warn
SkillSpector: 2 findings, up to high
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- high Prompt Injection · line 42 Hidden instructions were detected in comments or invisible text. These could contain malicious directives. Manual review is recommended.Fix: Audit all comments and invisible characters. Remove any instructions that direct the agent to perform unauthorized actions. Use plain, reviewable content.
- high Prompt Injection · line 339 Hidden instructions were detected in comments or invisible text. These could contain malicious directives. Manual review is recommended.Fix: Audit all comments and invisible characters. Remove any instructions that direct the agent to perform unauthorized actions. Use plain, reviewable content.
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00049 | $0.02990 |
| Opus 5 | $0.00024 | $0.01495 |
| Sonnet 5 | $0.00010 | $0.00598 |
| Haiku 4.5 | $0.00005 | $0.00299 |
Grade A, and why
best-practices scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 13d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
const response = await fetch(url); How it starts
The opening of the file, as written. The whole thing — 481 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Best practices
Modern web development standards based on Lighthouse best practices audits. Covers security, browser compatibility, and code quality patterns.
Evidence-led audit workflow
When a rendered page is available:
- Run a live Lighthouse Best Practices audit when that capability is available; with Chrome DevTools MCP, use
lighthouse_audit. Use navigation mode for a normal page load or snapshot mode when the current state must be preserved. - Inspect the listed console and network failures and fetch individual details only when they support a finding.
- Supplement runtime evidence with dependency, header, configuration, and source inspection; Lighthouse is not a complete security assessment.
- Fix the implicated code, re-run the same audit, and keep security findings separate from style preferences.
If live tools are unavailable, use the Lighthouse CLI plus focused dependency and header checks. Never report a high Lighthouse score as proof that the application is secure.
Security
Read the security reference when security is in scope or a live audit surfaces a related failure. It covers HTTPS/HSTS, CSP and Trusted Types, Subresource Integrity, headers, dependencies, sanitization, and cookies.
At minimum:
- Use HTTPS without mixed content. Add HSTS only after confirming every relevant subdomain supports HTTPS.
- Treat a strict CSP as defense in depth. Prefer nonces or hashes and test with report-only before enforcement.
- Sanitize untrusted HTML and protect DOM XSS sinks. Prefer text APIs when markup is not required.
- Pin and review third-party code. Use SRI where the delivery model supports it and keep dependencies patched.
- Verify response headers at runtime. Source configuration alone does not prove what the deployed page sends.
Browser compatibility
Doctype declaration
<!-- ❌ Missing or invalid doctype -->
<HTML>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!-- ✅ HTML5 doctype -->
<!DOCTYPE html>
<html lang="en">
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 13d ago First seen · 481 lines · 49 tokens per session scan A 9d1f10a08cd7
best-practices is a skill published in the GitHub repository addyosmani/web-quality-skills (2,779 stars, last pushed 18d ago), licensed MIT. It adds 49 tokens to every session and 2,990 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
resolve-pr-comments
Evaluate, fix, answer, and reply to GitHub pull request review comments and conversation comments. Handles both change requests (fix or skip) and reviewer questions (explain using reasoning recalled from past Claude Code transcripts). Use when the user asks to "resolve PR comments", "fix review comments", "address PR…
review-code
Review code for bugs, security vulnerabilities, API misuse, consistency issues, simplicity problems, or test coverage gaps by running internal reviews and a peer review in parallel and returning combined findings. Single-concern with a type argument, or full review with no argument. Use when the user asks to "review…
assess-technical-debt
Assess project-wide structural technical debt: complexity hotspots, deprecated API usage, duplication clusters, and architecture rot. Ranks findings by impact and refactor effort into a report at .turbo/technical-debt.md. Use when the user asks to "assess technical debt", "find technical debt", "review technical…
map-codebase
Deep architecture report that fans out parallel inspections across different aspects of the codebase (structure, tech stack, APIs, patterns, data flow, dependencies, testing) and synthesizes findings into a comprehensive document at .turbo/codebase-map.md and .turbo/codebase-map.html. Use when the user asks to "map…
peer-review
Run an independent peer review via Codex. Use when the user asks to "peer review", "peer review my code", "peer review my plan", "get a second opinion", or "independent review".
claude-print
Run a non-interactive Claude Code print-mode call from Codex. Use when the user asks to "claude print", "ask claude", "run claude", "consult claude", or when a Codex Turbo skill needs Claude as an independent peer reviewer.