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 core-web-vitalsgit 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/core-web-vitals)<a href="https://agentmods.dev/skills/addyosmani/web-quality-skills/core-web-vitals"><img src="https://agentmods.dev/badge/skills/addyosmani/web-quality-skills/core-web-vitals/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/core-web-vitals"><img src="https://agentmods.dev/badge/skills/addyosmani/web-quality-skills/core-web-vitals.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk pass
- NVIDIA SkillSpector warn
SkillSpector: 1 finding, 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 54 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.00067 | $0.02276 |
| Opus 5 | $0.00034 | $0.01138 |
| Sonnet 5 | $0.00013 | $0.00455 |
| Haiku 4.5 | $0.00007 | $0.00228 |
Grade A, and why
core-web-vitals scanned grade A with 0 findings 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 12d 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.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 229 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Core Web Vitals optimization
Targeted optimization for the three Core Web Vitals using field data to identify user impact and browser traces to diagnose causes.
Measure before optimizing
When a runnable URL is available, read the performance measurement workflow. Prefer this sequence:
- Check page-level CrUX p75 data, with a clearly labeled origin fallback when page data is unavailable.
- Record a browser performance trace under stated conditions. With Chrome DevTools MCP, trace summaries can include CrUX alongside the observed lab metrics.
- Analyze only the insights associated with the failing metric, then inspect the implicated code and resources.
- Re-run equivalent lab measurements after the fix. Do not claim an immediate field improvement; CrUX and first-party RUM need new user visits.
If only source code is available, identify likely causes but do not claim that LCP, INP, or CLS is failing without runtime evidence.
The three metrics
| Metric | Measures | Good | Needs work | Poor |
|---|---|---|---|---|
| LCP | Loading | ≤ 2.5s | 2.5s – 4s | > 4s |
| INP | Interactivity | ≤ 200ms | 200ms – 500ms | > 500ms |
| CLS | Visual Stability | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
Google measures at the 75th percentile — 75% of page visits must meet "Good" thresholds.
LCP: Largest Contentful Paint
LCP measures when the largest visible content element renders. Usually this is:
- Hero image or video
- Large text block
- Background image
<svg>element
Common LCP issues
1. Slow server response (TTFB > 800ms)
Fix: CDN, caching, optimized backend, edge rendering
2. Render-blocking resources
<!-- ❌ Blocks rendering -->
<link rel="stylesheet" href="/all-styles.css">
<!-- ✅ Critical CSS inlined, rest deferred -->
<style>/* Critical above-fold CSS */</style>
<link rel="preload" href="/styles.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
What ships with it
3 files 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.
- 12d ago First seen · 229 lines · 67 tokens per session scan A 731aa78c0347
core-web-vitals is a skill published in the GitHub repository addyosmani/web-quality-skills (2,776 stars, last pushed 18d ago), licensed MIT. It adds 67 tokens to every session and 2,276 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
raweb-code
Write accessible HTML, CSS, and JavaScript that conforms to RAWeb 1.1 (Luxembourg Web Accessibility Framework, based on EN 301 549 / WCAG 2.1). Use when developing web interfaces, components, forms, navigation, or any front-end code that must meet Luxembourg accessibility law. Covers all 17 RAWeb themes with…
raweb-audit
Audit web pages and components against RAWeb 1.1 (Luxembourg Web Accessibility Framework). Use when reviewing existing code for accessibility compliance, generating audit reports, checking conformance levels, or preparing for Luxembourg accessibility certification. Covers all 17 themes with systematic test procedures.…
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build landing pages, websites, dashboards, web components, or any frontend UI. Generates creative, polished code that avoids generic AI aesthetics.
prototype
Build a self-contained local prototype at .turbo/prototypes/ .html, drive it, and hand it to the user to settle unknowns that prose cannot answer. Use when the user asks to "prototype this", "build a prototype", "mock this up", "show me what it would look like", "let me try the interaction first", or when a decision…
seo-landing
Generates fast, SEO-optimized static HTML landing pages targeting 100/100 PageSpeed (LCP < 2.5s, INP < 100ms, CLS < 0.1), full schema.org JSON-LD, AVIF images, critical CSS, zero external dependencies. Use when: user asks to create/build/generate a landing page, one-pager, or static site with focus on SEO, speed, or…
slop-eval
Objectively evaluate a UI/web design against the pols.dev anti-slop design law: detect catalogued slop tells with cited evidence, score 8 weighted axes (color, type, components, layout, motion, execution, signature, cohesion), and emit a Slop Report with a 0–100 Slop Index and grade. Use when the user asks to…