Visual Tester

UI-Reviews mit kommentierten Snapshots und nach Schweregrad markierten Befunden via Agent-Browser.

von incubrain · incubrain/foundry

Funktioniert mit Setup ★ 8.4/10

Visual Tester — UI-Reviews mit kommentierten Snapshots und nach Schweregrad markierten Befunden via Agent-Browser.

Was es kann

Steuert das agent-browser CLI, um eine Seite zu öffnen, einen kommentierten Screenshot zu erstellen und einen strukturierten visuellen Fehlerbericht mit den Schweregraden CRITICAL/WARNING/INFO und @eN-Elementreferenzen zu erzeugen. Wird bei Anfragen zur Überprüfung einer UI, zum Erstellen eines Screenshots einer Seite, zum Vergleichen von Layouts oder zum Testen von responsivem Design ausgelöst. Als internes Projekt-Skill für die Landingpage eines Produkts entwickelt, daher befinden sich das Wrapper-Skript und die data-testid-Selektortabelle, von denen es abhängt, außerhalb des Skill-Ordners und werden bei einer einfachen Kopie nicht mitgenommen.

Testbericht

Das vorgeschriebene Befundformat (CRITICAL/WARNING/INFO + @eN-Referenzen) verwandelt eine vage 'der Button sieht komisch aus'-Bewertung in einen scannbaren Triage-Bericht – aber das Wrapper-Skript (.claude/scripts/visual-review.sh) und die data-testid-Selektortabelle, auf die es verweist, befinden sich in der Projektkonfiguration des Quell-Repos, nicht in skills/visual-tester selbst, sodass eine reine Kopie stillschweigend nicht ausgeführt werden kann, bis man beides von Hand portiert.

Getestet am: 2026-07-14 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/incubrain/foundry
cd foundry
mkdir -p ~/.claude/skills
cp -r skills/visual-tester ~/.claude/skills/visual-tester

Befehle & Beispiel-Prompts

  • /visual-testerUI-Reviews mit kommentierten Snapshots und nach Schweregrad markierten Befunden via Agent-Browser.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • Take a screenshot of this page and flag any visual bugs you see
  • Review this UI for layout issues and rate them by severity
  • Compare how this page renders across a few different screen sizes