husheng-web/personal-website-skills

Vergleiche eine Portfolio-Webseiten-Route mit einer genehmigten visuellen Referenz auf Desktop- und Mobilgrößen und melde evidenzgestützte visuelle Mängel und Korrekturen.

Was ist personal-website-skills?

Diese Fähigkeit führt eine visuelle Qualitätssicherung (QA) für Portfolio-Webseiten durch, anstatt sich nur auf Code-Reviews zu verlassen. Sie vergleicht die tatsächliche Darstellung einer Route mit einer genehmigten Referenz in den maßgeblichen Viewport-Größen (Desktop und Mobil) und identifiziert Abweichungen. Die Bewertung umfasst Hierarchie, Typografie, Abstände, Farben, Kontraste, Asset-Treue, responsives Verhalten, interaktive Zustände sowie Tastaturerreichbarkeit und Bewegungsreduzierung. Die gemeldeten Ergebnisse werden nach Priorität gestaffelt: P1 für kritische Blockaden, P2 für wesentliche visuelle oder responsive Mismatches und P3 für kosmetische Verbesserungen. Zu jedem Befund wird die betroffene Route, das beobachtete Verhalten, die wahrscheinliche Ursache und der minimal nötige Fix dokumentiert. Die Fähigkeit unterstützt gängige Agent-Plattformen (z. B. Claude Code, Cursor, Codex) und setzt voraus, dass die Referenz sowie die Route bereitgestellt werden; ein Visuell-Check gilt nur dann als bestanden, wenn sowohl Browsererfassung als auch Zielreferenz verfügbar waren.

Funktioniert mit~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/husheng-web/personal-website-skills/tree/HEAD/skills/portfolio-visual-qa

Dokumentation

Portfolio Visuelle Qualitätssicherung

Führe eine visuelle Verifizierung durch – keine reine Code-Überprüfung.

Einrichtung

Bestätige die Referenz, die Route, den UI-Zustand, die Viewport-Größen und ob die Aufgabe eine Implementierung erlaubt. Starte die Website über den festgelegten Befehl und inspiziere die gerenderte Ausgabe in den angeforderten Größen. Füge eine mobile Größe hinzu, wenn die Anfrage keine spezifiziert.

Vergleich

Bewerte Hierarchie, Typografie und Textumbruch, Abstände und Geometrie, Farben und Kontraste, Asset-Treue, responsiven Beschnitt/Überlauf sowie interaktive Zustände. Verifiziere die Tastaturerreichbarkeit und das Verhalten bei reduzierter Bewegung, wenn Bewegung oder Navigation betroffen sind.

Bericht

Nenne zuerst die Evidenz und die Einschränkungen. Gruppiere die Ergebnisse nach Priorität:

P1: Blockiert die beabsichtigte Hierarchie, Zugänglichkeit oder Kernaufgabe.
P2: Wesentlicher visueller oder responsiver Mismatch.
P3: Kosmetik, die warten kann.

Für jeden Befund nenne die betroffene Route/den Zustand, das beobachtete Verhalten, die wahrscheinliche Quelle und den kleinsten glaubwürdigen Fix. Teste Korrekturen im betroffenen Viewport erneut. Gib nicht an, dass eine visuelle Prüfung bestanden wurde, wenn die Browseraufnahme oder die Zielreferenz nicht verfügbar war.