headless-browser-verification

Community

Prove visual changes with screenshot evidence.

Authorthistleknot
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It prevents costly UI surprises by providing visual proof that HTML/CSS (and related rendered output) matches intended layout and behavior before you deliver changes to users.

Core Features & Use Cases

  • Screenshot-Based Visual Verification: Render pages in a headless browser and capture PNG screenshots for review or comparison.
  • Responsive Multi-Viewport Checks: Validate the same endpoint across multiple viewport sizes to catch breakpoint-specific regressions.
  • Interaction-Driven Evidence: Capture screenshots after user-like actions (click, scroll, hover, form interaction) to verify dynamic UI states.
  • Visual Regression Detection: Compare baseline and current PNGs using perceptual hashing to flag meaningful differences.
  • CI/CD Integration: Automate screenshot capture and upload artifacts in build pipelines for repeatable QA.

Quick Start

Use headless-browser-verification to capture PNG screenshots of the page in your local server and compare them against a baseline after your UI changes.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: headless-browser-verification
Download link: https://github.com/thistleknot/skills/archive/main.zip#headless-browser-verification

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.