before-and-after

Automate visual regression testing by capturing before and after screenshots from two URLs to compare web pages and highlight visual differences. This skill supports optional CSS selectors and viewport controls for deterministic UI change verification across multiple environments.

Yes, you can compare specific page elements by providing optional CSS selectors to target specific elements during the before and after screenshot capture. This allows precise visual diffing of individual UI components rather than capturing the entire web page.

Generate PR-ready visual diffs by capturing before and after screenshots of your web pages and running the included scripts to upload images and produce markdown-ready summaries. This automates documenting UI changes and facilitates design QA reviews directly in your pull requests.

Yes, this visual diff tool requires the agent-browser dependency for automated screenshot capture, along with gh, curl, pbcopy, and xclip for uploading images and generating markdown summaries. These dependencies enable deterministic capture and PR-ready output generation.

The best way to verify UI changes after a deploy is to compare production versus preview versions by capturing before and after screenshots from both URLs. This skill automates the visual comparison and can file the resulting diff directly into your PR for review.

Yes, you can use local image paths as an alternative to URLs for before and after comparison. The skill accepts two image paths as input to generate visual diffs, providing flexibility when web pages are not accessible or when comparing previously captured screenshots.