Skills

web-quality-skills: messungsfirst Webqualitätsprüfung mit Lighthouse

Für alle, die eine bestehende Seite evidenzbasiert prüfen wollen; mit dem offiziellen npx installieren, zuerst web-quality-audit ausführen und das Ergebnis lesen, bevor Dateien geändert werden.

Official source · web-quality-skills

Install

npx skills add addyosmani/web-quality-skills

Für wen

Passt zu allen, die Webqualität nach Messungen verbessern, nicht nach Bauchgefühl am Stil. Offizieller Text: Dies ist eine inoffizielle, messungsfirst Agent-Skills-Sammlung zur Optimierung von Webprojekten mit Google Lighthouse, agentenorientierten Chrome DevTools, Core Web Vitals, WCAG und suchbezogenen Hinweisen.

Besser geeignet: wer schon eine öffenbare Site oder ein lokales Projekt hat und zuerst eine evidenzbasierte Qualitätsprüfung will. Die im Quelltext genannte Skill ist web-quality-audit: Prüfung über Lighthouse- und Quellcode-Kategorien. Auslöseformulierungen umfassen “Audit my site”, “Review this for quality”, “Check web quality”.

Sie behauptet Stack-Unabhängigkeit und Nutzbarkeit mit React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, reinem HTML und Ähnlichem. Diese Menge nicht als „nur diese Frameworks“ lesen.

Vor dem Start muss npx skills add ausführbar sein. Den Hauptweg nicht auf einen anderen Installer umstellen.

Ersten Versuch in 3 Minuten abschließen

Nur den im Repository genannten npx-Hauptweg gehen. Der erste Versuch ist nur Prüfung; keinen Produktionscode ändern.

Vorbedingung: Dieser Rechner hat bereits npm/npx, und ein bestehendes Webprojekt oder eine erreichbare Site liegt vor. Keine zu prüfende URL erfinden.

Installationsort: im Arbeitsbereich ausführen:

npx skills add addyosmani/web-quality-skills

Offizielles Repository:

https://github.com/addyosmani/web-quality-skills

Anker der Skill-Hinweise:

https://github.com/addyosmani/web-quality-skills#web-quality-audit

Lighthouse-Überblick:

https://developer.chrome.com/docs/lighthouse/overview/

Risikoarmer Auslöser: Nach der Installation zu einem bestehenden Projekt “Check web quality” oder “Review this for quality” sagen. Offiziell ist das eine evidenzbasierte Prüfung. Zuerst den Bericht lesen, dann entscheiden, ob Dateien geändert werden. Die Agent-Skills-Normseite ist nur ein Zeiger aus dem Quelltext:

https://agentskills.io/

Erfolg: Der Assistent liefert Prüfergebnisse nach Lighthouse- und Quellcode-Kategorien, statt sofort einen Patch abzugeben. Würde der nächste Schritt Performance- oder Barrierefreiheitscode ändern, zuerst bestätigen, welche Dateien sich ändern.

Anwendungsfälle

Fall 1: web-quality-audit auf einer bestehenden Site. Einen der offiziellen Auslösesätze nutzen und über Lighthouse- und Quellcode-Kategorien prüfen lassen. Passt zu allen, die schon eine Site haben und zuerst Messgrundlagen wollen. Die Belege beschreiben nur diese Skill-Zeile und nennen keine anderen Skills. Die Ausgabe als Prüfergebnis behandeln; nicht automatisch nach außen senden.

Fall 2: Dieselbe messungsfirst Prüfung in Projekten unterschiedlicher Frameworks. Offiziell stack-unabhängig, mit Beispielen React, Vue, Angular, Svelte, Next.js, Nuxt, Astro und reinem HTML. Passt zu allen, deren Stack schon feststeht und die nur eine Qualitätsprüfung ergänzen wollen. Nicht ableiten, dass eines dieser Frameworks Pflicht ist, und keine nie erschienenen Skill-Namen ergänzen.

Nutzungsgrenzen

Der Hauptinstallationsbefehl ist npx skills add addyosmani/web-quality-skills. Der Quelltext nennt zusätzlich Claude-Code-Plugin-Befehle: /plugin marketplace add addyosmani/web-quality-skills, dann /plugin install web-quality-skills@addy-web-quality-skills. Beim ersten Versuch beide Wege nicht in einem Vorgang mischen.

Die einzig auf dieser Seite genannte Skill ist web-quality-audit. Andere Skill-Namen nicht selbst ergänzen.

Dies ist eine inoffizielle Sammlung. Offiziell wird keine Abdeckung aller WCAG-Klauseln zugesichert, und Suchhinweise plus DevTools müssen nicht gleichzeitig offen sein.