EN DE
โ† โ† Back to Index

visual-verification

visual-verification

Description

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.

Relevance to Our Projects

Browser-based visual QA for every website. Ensures layout, responsiveness, animations, and console errors are correct before shipping.

Pipeline

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

โ† โ† Back to Index