browser-visual-qa

What problem does it solve?

This Skill eliminates the gap between code/DOM-based UI checks and actual rendered output, which often misses visual bugs like layout misalignment, missing elements, and runtime rendering errors that only appear when the page is loaded in a real browser.

Core Features & Use Cases

• Browser Automation & Interaction: Drive a real browser to navigate to pages, click, type, and scroll through exact user flows under test.
• Visual Evidence Capture: Take step-by-step screenshots of each meaningful state in a workflow to create a verifiable evidence trail, or extract frames from recorded browser videos for transient/animation bug analysis.
• AI Vision Analysis: Analyze captured screenshots with a vision-capable AI model to confirm UI correctness, catch visual regressions, and pinpoint exactly which step a bug occurs in.
• Use Case: If you just updated a checkout flow on your e-commerce site, use this Skill to walk through the purchase process, capture screenshots of each step, and confirm the cart total, form fields, and buttons render correctly with no visual glitches.

Quick Start

Use the browser-visual-qa skill to navigate to your local development site's new user sign-up flow, complete the registration steps, capture screenshots of each page, and analyze them with vision to confirm the UI renders correctly with no layout or display bugs.