/ Verzeichnis / Playground / web-quality-skills
← Alle Server ↗ GitHub
● Community addyosmani ⚡ Sofort

web-quality-skills

von addyosmani · addyosmani/web-quality-skills

6 skills encoding 150+ Lighthouse audits and Core Web Vitals patterns — Claude diagnoses and fixes LCP, INP, CLS, and accessibility issues.

A focused skill bundle from addyosmani covering web-quality-audit, performance, core-web-vitals, accessibility (WCAG 2.2), seo, and best-practices. Skills auto-activate on relevant asks (e.g. 'speed up my site' loads the performance skill). Framework-agnostic — works for React, Vue, Svelte, Next, Astro, and plain HTML.

▶ Demo ansehen 📦 Installieren 💡 Anwendungsfälle

Warum nutzen

Hauptfunktionen

Live-Demo

In der Praxis

web-quality-skill.replay ▶ bereit
0/0

Installation

Repository des Autors · Offizielle Dokumentation zu Claude Skills

Anwendungsfälle

Praxisnahe Nutzung: web-quality-skills

Fix a slow LCP on a product landing page

👤 Frontend engineers trying to get a green CWV ⏱ ~40 min intermediate

Wann einsetzen: CrUX shows LCP at 3.8s and you don't know where to start.

Voraussetzungen
  • Target URL — Live or staging URL — not just local
Ablauf
  1. Run the core-web-vitals skill
    Use the core-web-vitals skill on https://site.com. Focus on LCP.✓ Kopiert
    → Diagnosis of the LCP element (hero image, web font, server response) with specific fix
  2. Apply the fix
    Apply the recommended priority hints and image format change.✓ Kopiert
    → Concrete HTML changes
  3. Re-measure
    How do I verify the improvement?✓ Kopiert
    → Guided re-measure via Lighthouse or web-vitals JS

Ergebnis: LCP under the 2.5s target with a documented fix path.

Fallstricke
  • Fixing lab LCP but not field LCP (CrUX) — Always verify in CrUX, not just local Lighthouse

Run a WCAG 2.2 accessibility audit on a checkout flow

👤 Engineers preparing for an accessibility review ⏱ ~45 min intermediate

Wann einsetzen: Legal is asking about WCAG compliance for the checkout.

Ablauf
  1. Run the accessibility skill
    Use the accessibility skill on our checkout flow. What WCAG 2.2 issues exist?✓ Kopiert
    → Structured findings per WCAG success criterion with severity
  2. Prioritize fixes
    Group by fix-effort vs user impact.✓ Kopiert
    → Ordered backlog

Ergebnis: A real accessibility backlog, not a checklist you can't act on.

Fallstricke
  • Automated checks only catch ~30% of issues — Complement with keyboard-only and screen-reader manual testing
Kombinieren mit: playwright-skill

Run the full web-quality-audit before a marketing campaign

👤 Teams about to drive paid traffic ⏱ ~30 min intermediate

Wann einsetzen: Big campaign starts Monday and you want no nasty surprises.

Ablauf
  1. Run the combined audit
    Use web-quality-audit on our campaign landing page.✓ Kopiert
    → Report spanning performance, CWV, accessibility, SEO, best-practices
  2. Triage for launch
    What must be fixed before launch vs can wait?✓ Kopiert
    → Go/no-go triage

Ergebnis: A launch-ready page and a week-2 backlog.

Fallstricke
  • Treating every finding as blocker — The skill prioritizes — trust the must-fix list

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

web-quality-skill + chrome-devtools

Use DevTools MCP to grab live perf traces while the skill interprets them

Capture a perf trace via chrome-devtools, then have the performance skill analyze it.✓ Kopiert
web-quality-skill + playwright-skill

Playwright runs the site through real user flows, web-quality skills score each step

Use playwright to walk through checkout, capture metrics at each step, then accessibility-audit each screen.✓ Kopiert
web-quality-skill + claude-seo-skill

Technical SEO from claude-seo + CWV from this skill

Run /seo audit for link/schema issues, then web-quality-audit for CWV.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

WerkzeugEingabenWann aufrufenKosten
web-quality-audit URL Pre-launch or quarterly 0
performance URL Slow page 0
core-web-vitals URL Failing CWV 0
accessibility URL / component A11y review 0
seo URL SEO hygiene check 0
best-practices URL Hardening review 0

Kosten & Limits

Was der Betrieb kostet

API-Kontingent
None
Tokens pro Aufruf
2-5k per skill loaded
Kosten in €
Free — skill is local
Tipp
Audit one URL at a time; batch audits balloon context.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: No credentials — skill is prompts
Datenabfluss: None from the skill itself

Fehlerbehebung

Häufige Fehler und Lösungen

Skill gives generic advice

Feed in a real Lighthouse JSON or CrUX record for specific findings.

Recommendations don't apply to your framework

Name the framework ('Next.js 15 app router') so the skill tailors suggestions.

Alternativen

web-quality-skills vs. andere

AlternativeWann stattdessenKompromiss
Lighthouse CI directlyYou want automated CI gates, not interactive guidanceScalable for CI; less explanatory
claude-seo-skillYou need SEO-first with broader audit surfaceBroader scope but less CWV depth

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen