菜单
Visual UI verification with agent-browser. Use after implementing UI components to take screenshots, verify interactions, and self-check your work. FASTER than E2E tests.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Cross-project audit and sync. Backs up, bootstraps, promotes, syncs, and verifies all downstream projects.
Structured pre-planning research. Explores codebase, asks clarifying questions, and produces a brainstorm output file for /plan-feature input.
Capture knowledge from development sessions. Debug patterns, architecture decisions, framework gotchas, and integration learnings compound over time.
Load project context and show current status. Use at the start of a session or when context is needed.
Run parallel code reviews using specialized agents (security, performance, simplicity, nextjs-react). Produces a structured report.
Initialize a new project from Agent Kit boilerplate. Use when creating a new downstream project.
| name | visual-verify |
| description | Visual UI verification with agent-browser. Use after implementing UI components to take screenshots, verify interactions, and self-check your work. FASTER than E2E tests. |
| allowed-tools | Bash, Read |
| argument-hint | ["url-or-path"] |
Verwende diesen Skill nach UI-Implementierungen um deine Arbeit visuell zu verifizieren.
┌─────────────────────────────────────────────────────────────────┐
│ │
│ DEVELOPMENT (90% der Zeit) PRODUCTION (10%) │
│ ───────────────────────── ────────────────── │
│ /visual-verify E2E Tests (Playwright) │
│ │
│ ✅ Schnell (Sekunden) ✅ Automatisiert │
│ ✅ Interaktiv ✅ CI/CD Integration │
│ ✅ Flexibel ✅ Regression Testing │
│ ✅ AI Self-Verification ✅ Kritische Flows │
│ │
│ Für: Jede UI-Änderung Für: Login, Checkout, │
│ Layout prüfen Payment, Signup │
│ Komponenten testen │
│ Responsive checken │
│ │
└─────────────────────────────────────────────────────────────────┘
Regel: Agent-Browser für Development-Verification. E2E nur für kritische Production-Flows.
# Installation (einmalig)
cd frontend && pnpm add -D agent-browser
pnpm exec agent-browser install # Chromium downloaden
cd frontend && pnpm run dev
# Seite öffnen
agent-browser open http://localhost:3000/[path]
# Accessibility Snapshot (zeigt interaktive Elemente mit Refs)
agent-browser snapshot -i
# Screenshot der aktuellen Ansicht
agent-browser screenshot
# Screenshot mit spezifischem Pfad
agent-browser screenshot ./screenshots/feature-name.png
# Full-Page Screenshot
agent-browser screenshot --full ./screenshots/full-page.png
# Nach snapshot -i siehst du Refs wie @e1, @e2, etc.
# Element klicken
agent-browser click @e1
# Text eingeben
agent-browser fill @e2 "Test Input"
# Hover
agent-browser hover @e3
# Nach Interaktion: neuer Snapshot + Screenshot
agent-browser snapshot -i
agent-browser screenshot
# Mobile Viewport
agent-browser viewport 375 812
# Tablet Viewport
agent-browser viewport 768 1024
# Desktop Viewport
agent-browser viewport 1920 1080
# Screenshot nach Viewport-Änderung
agent-browser screenshot ./screenshots/mobile.png
Bei UI-Implementierungen diesen Loop durchführen:
┌─────────────────────────────────────────────────────────┐
│ SELF-VERIFICATION LOOP │
│ │
│ 1. UI implementieren │
│ 2. agent-browser open http://localhost:3000/page │
│ 3. agent-browser snapshot -i (Struktur prüfen) │
│ 4. agent-browser screenshot (visuell prüfen) │
│ 5. Interaktionen testen (click, fill, hover) │
│ 6. Responsive testen (viewport ändern) │
│ 7. Bei Problemen: Code anpassen, Loop wiederholen │
│ │
└─────────────────────────────────────────────────────────┘
# Öffnen und Screenshot
agent-browser open http://localhost:3000/dashboard
agent-browser screenshot ./screenshots/dashboard-layout.png
# Viewport-Varianten
agent-browser viewport 375 812
agent-browser screenshot ./screenshots/dashboard-mobile.png
agent-browser viewport 1920 1080
agent-browser screenshot ./screenshots/dashboard-desktop.png
# Snapshot zeigt alle interaktiven Elemente
agent-browser snapshot -i
# Prüfen ob Button klickbar
agent-browser click @e1
agent-browser snapshot -i # Zustand nach Klick
# Prüfen ob Form funktioniert
agent-browser fill @e2 "test@example.com"
agent-browser click @e3 # Submit
agent-browser snapshot -i # Ergebnis prüfen
# Hover über Element
agent-browser hover @e1
agent-browser screenshot ./screenshots/button-hover.png
# Dialog öffnen
agent-browser click @e1 # Trigger Button
agent-browser wait visible "[role='dialog']"
agent-browser screenshot ./screenshots/modal-open.png
# Dialog schließen
agent-browser press Escape
agent-browser screenshot ./screenshots/modal-closed.png
# Session für spezifischen Test
agent-browser --session auth-test open http://localhost:3000/login
agent-browser --session auth-test fill @e1 "user@example.com"
agent-browser --session auth-test fill @e2 "password"
agent-browser --session auth-test click @e3
agent-browser --session auth-test screenshot ./screenshots/after-login.png
# Separate Session für anderen Test
agent-browser --session dashboard-test open http://localhost:3000/dashboard
# Nach Role suchen
agent-browser find role button click --name "Submit"
# Nach Text suchen
agent-browser find text "Sign In" click
# Nach Label suchen
agent-browser find label "Email" fill "user@test.com"
Nach jeder UI-Implementation:
./screenshots/feature-state.png