Fähigkeiten ui-visual-validator

📦

ui-visual-validator

Name: ui-visual-validator
Author: sickn33

Inhaltsrevision r1 Sicher ⚙️ Externe Befehle

UI-Änderungen mit visuellen Nachweisen validieren

UI-Änderungen können die Code-Review bestehen und dennoch visuelle, responsive oder barrierefreie Ziele verfehlen. Diese Skill unterstützt eine gründliche screenshotbasierte Validierung mit messbaren Befunden und Abhilfemaßnahmen.

Unterstützt: Claude Codex Code(CC)

🥉 78 Bronze

Mit meinem Agent installieren

Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.

Agent-Anfrage

Review the Skillstore skill "ui-visual-validator" from https://skillstore.io/skills/sickn33-ui-visual-validator.md and its manifest at https://skillstore.io/api/skills/sickn33-ui-visual-validator/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.

Agent-lesbare Ressourcen

Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.

Markdown-Detailseite GET /skills/sickn33-ui-visual-validator.md Signiertes manifest GET /api/skills/sickn33-ui-visual-validator/manifest Signiertes lockfile GET /api/skills/sickn33-ui-visual-validator/lockfile

Testen

„ui-visual-validator“ wird verwendet. Ein Vorher- und Nachher-Screenshot eines neu gestalteten Checkout-Buttons.

Erwartetes Ergebnis:

Aus den visuellen Nachweisen geht hervor, dass der Button größer und leichter zu erfassen ist, aber der deaktivierte Zustand wird nicht gezeigt. Der Farbkontrast sollte vor der Freigabe gemessen werden.

„ui-visual-validator“ wird verwendet. Mobile-Screenshots eines Navigationsmenüs nach einem responsiven Update.

Erwartetes Ergebnis:

Das Menü klappt bei der erwarteten Breite ein, aber das aktive Element verliert seinen visuellen Zustand. Der Fokusindikator ist auf dunklen Hintergründen ebenfalls zu subtil.

„ui-visual-validator“ wird verwendet. Screenshots eines Formulars mit Validierungsfehlern und Ladezuständen.

Erwartetes Ergebnis:

Der Fehlertext ist sichtbar und nah am jeweiligen Feld, aber der Ladezustand verschiebt den Absenden-Button. Reserviere stabilen Platz, um Layoutbewegungen zu verhindern.

Sicherheitsaudit

Sicher

v4 • 7.7.2026 Versionsbericht öffnen

The only static finding is a false positive caused by Markdown inline code at SKILL.md line 27. The skill is prompt-only guidance for UI visual validation and contains no executable command behavior or data exfiltration intent. No prompt injection attempt or semantic security issue was found.

Gescannte Dateien

215

Analysierte Zeilen

Prüfelemente

Falschmeldungen ignoriert

Risikofaktoren

⚙️ Externe Befehle (1)

SKILL.md:27

Das letzte abgeschlossene statische und semantische Audit erkannte keine bestätigten Sicherheitsbefunde. Dies beweist nicht, dass der Skill keine Nebenwirkungen hat.

Geprüft von: codex Audit-Verlauf anzeigen →

Diesen Bericht teilen & zitieren

Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.

Versionsbericht öffnen

Berichtslink kopieren

https://skillstore.io/skills/sickn33-ui-visual-validator/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown-Badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/sickn33-ui-visual-validator/security.svg)](https://skillstore.io/skills/sickn33-ui-visual-validator?utm_source=security_passport_badge)

HTML-Badge

<a href="https://skillstore.io/skills/sickn33-ui-visual-validator?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-ui-visual-validator/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Einbettungskarte

<iframe src="https://skillstore.io/embed/skills/sickn33-ui-visual-validator.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Wissenschaftliche Zitate (APA · BibTeX · CFF)

APA-Zitat

sickn33. (2026). ui-visual-validator security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-ui-visual-validator/audits/4

BibTeX-Zitat

@techreport{sickn33-sickn33-ui-visual-validator-2026,
  author = {sickn33},
  title = {ui-visual-validator security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/sickn33-ui-visual-validator/audits/4},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ui-visual-validator security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "sickn33"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/sickn33-ui-visual-validator/audits/4"
identifiers:
  - type: other
    value: "skillstore:sickn33-ui-visual-validator:audit:4"
    description: "Skillstore immutable audit report identifier"

Skillstore-Score

Warum dieser Score Evidenzvertrauen: Hoch

Architektur

Wartbarkeit

Inhalt

Gemeinschaft

Spezifikationskonformität

Was Sie erstellen können

UI-Änderungen in Pull Requests validieren

Vorher- und Nachher-Screenshots überprüfen, um zu bestätigen, dass eine UI-Änderung das angegebene Ziel erfüllt und keine sichtbaren Regressionen aufweist.

Design-System-Konformität prüfen

Komponenten anhand von Design Tokens, Typografieregeln, Abstandsstandards, Farbpaletten und Icon-Nutzung prüfen.

Visuelle Barrierefreiheitszustände prüfen

Kontrast, Fokusindikatoren, lesbaren Text, responsive Layouts, Ladezustände und Fehlerzustände vor der Veröffentlichung bewerten.

Diese Prompts ausprobieren

Einen Screenshot überprüfen

Überprüfe diesen UI-Screenshot auf sichtbare Layout-, Typografie-, Abstands-, Farb- und Barrierefreiheitsprobleme. Beginne mit beobachtbaren visuellen Nachweisen und liste danach konkrete Korrekturen auf.

Vorher und Nachher validieren

Vergleiche diese Vorher- und Nachher-Screenshots mit diesem Ziel: [describe goal]. Entscheide, ob das Ziel erreicht, teilweise erreicht oder nicht erreicht wurde.

Responsive Barrierefreiheit prüfen

Bewerte diese Desktop-, Tablet- und Mobile-Screenshots hinsichtlich responsivem Verhalten, visueller Hierarchie, Kontrast, Fokus-Sichtbarkeit sowie Fehler- oder Ladezuständen.

Einen Regression-Workflow entwerfen

Erstelle einen Plan zur visuellen Validierung für diese Komponentenbibliothek unter Verwendung von Screenshot-Review, Regressionstests, Barrierefreiheitsprüfungen und Review-Gates für Pull Requests.

Bewährte Praktiken

Stelle klare Ziele, Vorher- und Nachher-Screenshots sowie die Ziel-Viewport-Größen bereit.
Validiere wichtige Zustände, einschließlich hover, focus, disabled, loading, error, empty und dark mode.
Kombiniere die visuelle Review mit Messwerkzeugen für Pixel-Diffs, Kontrastverhältnisse und Cross-Browser-Abdeckung.

Vermeiden

Eine UI-Änderung allein aufgrund von Codeänderungen ohne visuelle Nachweise als erfolgreich erklären.
Für ein responsives oder plattformübergreifendes Feature nur einen einzigen Desktop-Screenshot testen.
Fokus-, Kontrast-, Lade-, Fehler- und Leerzustände während der visuellen Review ignorieren.

Häufig gestellte Fragen

Führt diese Skill visuelle Tests automatisch aus?

Nein. Es bietet fachkundige Unterstützung für Analyse und Workflow-Design, aber separate Tools müssen Screenshots erfassen oder Tests ausführen.

Welche Tools für visuelle Tests deckt es ab?

Es verweist auf Chromatic, Percy, Applitools, BackstopJS, visuelle Vergleiche mit Playwright, visuelle Tests mit Cypress und Jest image snapshots.

Kann es Barrierefreiheit überprüfen?

Ja. Es konzentriert sich auf visuelle Barrierefreiheitssignale wie Kontrast, Fokusindikatoren, Lesbarkeit, Hierarchie und responsives Verhalten.

Welche Eingaben liefern das beste Ergebnis?

Verwende Vorher- und Nachher-Screenshots, Zielvorgaben, Viewport-Details, Theme-Informationen und alle bekannten Design-System-Regeln.

Kann es eine menschliche Design-Review ersetzen?

Nein. Es strukturiert visuelle QA und hebt Probleme hervor, aber Produktkontext und abschließendes Designurteil bleiben weiterhin wichtig.

Ist es für Pull Requests nützlich?

Ja. Es kann Reviewer dabei unterstützen, sichtbare UI-Änderungen zu verifizieren, Regressionen zu dokumentieren und vor dem Merge konkrete Abhilfemaßnahmen anzufordern.

Entwicklerdetails

Autor

sickn33

Lizenz

MIT

Skillstore-Revision

Versionshinweis

Der Autor hat keine Version angegeben.

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/ui-visual-validator

Ref.

9f814fc6a43fd99946f2da5e0df231c65a38bc76

Aktualität der Wartung

18.7.2026

Nutzung

11 Downloads · 154 Aufrufe

Dateistruktur

📄 SKILL.md