PRoBoT2004/claude-skill-website-qa-auditor

Was macht claude-skill-website-qa-auditor?

Verwandle jede Website-URL in einen einzigen, polierten, eigenständigen HTML-QA-Bericht – inklusive Links, Responsivität, Cross-Browser, Lighthouse, Barrierefreiheit (axe+Pa11y), Sicherheit, SEO, Inhalt, Mobil und Tracking. Ein Claude Code Skill.

Beschreibung

Dieser Skill führt eine umfassende Quality-Assurance-Prüfung einer Zielwebsite durch. Er nutzt dabei eine Kombination aus Browser-Automatisierung (Puppeteer), Lighthouse, axe-core, Pa11y und weiteren Tools, um folgende Bereiche zu prüfen:

• Link-Integrität: Defekte, Weiterleitungen und Statuscodes.
• Responsivität: Screenshots in verschiedenen Viewport-Größen.
• Cross-Browser: Analyse von Konsolenfehlern, die auf Kompatibilitätsprobleme hindeuten.
• Lighthouse: Performance, Best Practices, SEO, PWA.
• Barrierefreiheit: axe-core und Pa11y für WCAG-Konformität.
• Sicherheit: HTTP-Header (CSP, HSTS, X-Frame-Options, etc.).
• SEO: Meta-Tags, Strukturierte Daten, Robots-TXT, Sitemap.
• Content: Wortanzahl, Überschriften, Text/HTML-Verhältnis.
• Mobil: Touch-Events, Viewport-Meta, Medienabfragen.
• Tracking: Analyse von Analytics-Code (Google, Facebook, etc.).

Der generierte Bericht ist ein vollständig eigenständiges HTML-Dokument mit eingebettetem CSS, JavaScript und Bildern (Base64). Er kann in jedem modernen Browser geöffnet werden, ohne dass eine Internetverbindung oder lokale Server erforderlich sind.

Verwendung

Voraussetzungen

• Node.js (v18 oder höher)
• npm oder yarn
• Claude Code (oder einen anderen Claude-basierten Assistenten)

Installation

1. Klone das Repository oder installiere das Paket:

   git clone https://github.com/PRoBoT2004/claude-skill-website-qa-auditor.git
   cd claude-skill-website-qa-auditor
   npm install
   

2. Konfiguriere den Skill in deiner Claude Code-Umgebung (siehe claude-skills.json oder .claude-skills).

Ausführung

Rufe den Skill in Claude Code mit folgendem Prompt auf:

Führe den Skill `website-qa-auditor` mit der URL `https://example.com` aus.

Der Skill führt dann alle Tests durch und speichert den Bericht standardmäßig als qa-report.html im aktuellen Arbeitsverzeichnis.

Optionen

Du kannst die folgenden optionalen Parameter übergeben:

• --url (erforderlich): Die zu prüfende URL.
• --output: Ausgabedateipfad (Standard: qa-report.html).
• --lighthouse: Lighthouse-Prüfung durchführen (true/false, Standard: true).
• --accessibility: Barrierefreiheitsprüfung durchführen (true/false, Standard: true).
• --security: Sicherheitsprüfung durchführen (true/false, Standard: true).
• --seo: SEO-Prüfung durchführen (true/false, Standard: true).
• --mobile: Mobile-Prüfung durchführen (true/false, Standard: true).
• --tracking: Tracking-Analyse durchführen (true/false, Standard: true).

Beispiel mit Optionen:

Führe den Skill `website-qa-auditor` mit der URL `https://example.com`, --output `mein-bericht.html`, --lighthouse false aus.

Ausgabe

Der erzeugte HTML-Bericht enthält:

• Eine Übersichtsseite mit allen Prüfpunkten und dem Status (Bestanden/Fehlgeschlagen/Warnung).
• Detailierte Abschnitte für jede Prüfkategorie.
• Screenshots und Diagramme (in Base64 eingebettet).
• Farbcodierte Statusanzeigen (Grün/Rot/Gelb).
• Zusammenfassung der gefundenen Probleme.

Alle Daten sind im HTML-Dokument selbst enthalten – keine externen Ressourcen erforderlich.

Plattform

Dieser Skill ist speziell für Claude Code entwickelt, kann aber theoretisch in jeder Claude-basierten Umgebung verwendet werden, die benutzerdefinierte Skills unterstützt. Die Ausführung erfolgt lokal auf dem Rechner des Benutzers.

Lizenz

MIT – siehe LICENSE für Details.

Mitwirken

Beiträge sind willkommen! Bitte erstelle einen Issue oder Pull Request.

---

PRoBoT2004/claude-skill-website-qa-auditor – Dein umfassendes Website-QA-Tool als Claude Code Skill.