visual-ui-tester

Identify visual regressions in web UIs with Playwright MCP tests across breakpoints.

1|Updated Jun 3, 2025

Search Tags:#accessibility #playwright #responsive #ui-testing #breakpoints #visual-testing

Ready to run

npx skills add https://github.com/jaysoo/dot-ai-config --skill visual-ui-tester

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-ui-tester
Source: https://github.com/jaysoo/dot-ai-config/tree/main/dot_gemini/skills/visual-ui-tester
Command: npx skills add https://github.com/jaysoo/dot-ai-config --skill visual-ui-tester

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual UI verification across responsive layouts and component rendering without manual QA effort, ensuring design fidelity and regression accuracy.

Core Features & Use Cases

Automated visual checks across breakpoints using Playwright MCP.
Snapshot-based verification of UI changes and accessibility trees.
Use case: validate that a new CSS change preserves layout at mobile, tablet, and desktop sizes.

Quick Start

Run a visual UI test across target pages and capture snapshots for comparison.

Frequently Asked Questions about visual-ui-tester

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

FAQPage Schema

How do I automate visual regression testing across responsive breakpoints?▼

Automated visual regression testing uses Playwright MCP to navigate web UIs and capture snapshots across mobile, tablet, and desktop breakpoints. This verifies layout fidelity and component rendering without manual QA effort.

What is Playwright MCP used for in UI testing?▼

Playwright MCP provides browser automation actions like browser_navigate, browser_take_screenshot, and browser_snapshot to perform end-to-end UI verification. It drives responsive layout checks and generates accessible snapshots.

How do I verify CSS changes preserve layout at different screen sizes?▼

To verify CSS changes preserve layout at different screen sizes, run automated Playwright MCP tests across target breakpoints. The tests capture snapshots for comparison to ensure rendering remains accurate at mobile, tablet, and desktop widths.

Do I need a Playwright MCP integration to run automated visual UI tests?▼

Yes, you need a Playwright MCP integration to run these automated visual UI tests. The Skill relies on exposed Playwright actions such as browser_navigate and browser_take_screenshot to perform end-to-end UI verification.

Can I capture accessibility trees during responsive UI testing?▼

Yes, you can capture accessibility trees during responsive UI testing. The Skill applies snapshot-based verification to generate accessible snapshots alongside visual screenshots across mobile, tablet, and desktop breakpoints.