visual-ui-test

Name: visual-ui-test
Availability: InStock
Author: biztechprogramming

Capture and compare Playwright UI screenshots to detect visual regressions.

2|Updated Feb 19, 2026

Search Tags:#automation #frontend #playwright #screenshot #visual-testing #ui-regression

Ready to run

npx skills add https://github.com/biztechprogramming/bond --skill visual-ui-test

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-ui-test
Source: https://github.com/biztechprogramming/bond/tree/main/skills/visual-ui-test
Command: npx skills add https://github.com/biztechprogramming/bond --skill visual-ui-test

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, Pillow, and includes scripts (resource) components.

What problem does it solve?

Visually verify UI/CSS/layout changes using Playwright screenshots. Use when making any frontend change that affects layout, styling, scrolling, overflow, or visual appearance. Triggers on UI fixes, CSS changes, component layout work, "verify the UI", "take a screenshot", "check how it looks". Required before committing any visual change.

Core Features & Use Cases

Take screenshots of the Bond frontend to verify UI/CSS/layout changes work correctly.
Workflow includes starting the dev environment, capturing before/after screenshots, and optionally comparing diffs to validate changes.
Use case: verify responsive layouts and visual regressions in frontend after changes.

Quick Start

Start the visual UI test by running scripts/start-dev-env.sh and then capture before/after screenshots to compare changes.

Frequently Asked Questions about visual-ui-test

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I detect visual regressions in frontend UI after CSS changes?▼

Detect visual regressions by capturing before and after Playwright screenshots of your frontend UI, then comparing the diff visualization to validate layout and styling consistency. This automated visual testing ensures component appearance remains unchanged after modifications.

Can I capture element-specific screenshots instead of full-page UI captures?▼

Yes, screenshot capture supports both full-page and element-specific UI captures. You can configure Playwright viewport sizes and use wait-for selectors to target specific components, ensuring precise visual regression testing for localized frontend changes.

What's the best way to automate UI regression testing across multiple viewport sizes?▼

Automate UI regression testing by running Playwright screenshot workflows with configurable viewport sizes. Capture baseline and updated frontend screenshots across different screen dimensions, then generate diff visualizations to identify responsive layout failures.

Do I need Playwright and Pillow to run automated visual testing workflows?▼

Yes, Playwright and Pillow are required dependencies for running automated visual testing workflows. Playwright handles browser automation and screenshot capture, while Pillow supports image processing for generating the visual diff visualization.

When should I run a visual UI test during frontend development iteration?▼

Run a visual UI test when making any frontend change affecting layout, styling, scrolling, overflow, or visual appearance. Trigger automated screenshot capture during UI fixes, CSS changes, component layout work, and before committing any visual modification.