skills.rest
jaysoo
jaysooCOMMUNITY
Explore all skills by this author →
Website𝕏@jay_sooGitHub

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
One-click install
npx skills add https://github.com/jaysoo/dot-ai-config --skill visual-ui-tester
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
tuantiensiutuantiensiu
1

playwright

Automate browser navigation, element interaction, and UI snapshotting with Playwright MCP.

Community
Intermediate
viably-labsviably-labs

playwright-screenshot-inspector

Analyze Playwright screenshots to validate UI rendering accuracy semantically.

Official
Advanced
PracticalSwanPracticalSwan
7

web-design-reviewer

Inspect live websites for UI layout, responsive design, and CSS issues.

Community
Intermediate
b-open-iob-open-io
14

dev-browser

Automate browser navigation, interaction, and content extraction for UI testing.

Official
Advanced