EN DE

visual-verification

Beschreibung

Preview rendered websites in a browser and verify them visually. Uses the browser automation tool to check layout, responsiveness, console errors, and rendered output. Adapted from video 11's "giving Hermes eyes" concept.

Relevanz für unsere Projekte

Browser-basierte visuelle Prüfung jeder Website. Stellt sicher, dass Layout, Responsivität, Animationen und Konsolen-Fehler vor der Auslieferung korrekt sind.

Ablauf

1🌐 Seite im Browser öffnen — via browser_navigate

2📸 Screenshot machen — Gesamtseite und kritische Bereiche

3📱 Responsive prüfen — Mobile, Tablet, Desktop Viewports

4🎬 Animationen verifizieren — Jede einzeln im Browser beobachten

5🔊 Konsole prüfen — JS-Fehler, Warnungen, API-Aufrufe

6📋 Bericht — Bestanden/Nicht bestanden mit Screenshots

SKILL.md Preview

# Visual Verification

## When to use this
Use in Step 4 (Preview & Verify) of the **website-pipeline**. Also use whenever you:
- Complete a new component and need to verify it renders correctly
- Need to check responsive behavior at different breakpoints
- Want to read the browser console for JavaScript errors
- Need to verify form interactions, animations, or dynamic content

## Prerequisites
- A dev server running locally (start with `npm run dev` or `python3 -m http.server`)
- The browser to

← ← Zurück zur Übersicht