Does it support element-specific debugging?

Absolutely. You can capture screenshots of specific elements and inspect their DOM structure and CSS properties directly.

Can I compare my live website with Figma designs?

Yes, the skill supports Figma design comparison to identify visual deviations and styling inconsistencies between code and design.

Is this skill useful for catching UI bugs?

Yes, it is specifically designed for visual regression testing to detect unintended styling changes or layout shifts.

How does this skill handle responsive design testing?

It includes viewport presets for mobile, tablet, and desktop, allowing you to resize the browser and verify UI behavior across different screen sizes.

Visual Testing & UI Verification

Name: Visual Testing & UI Verification
Author: serkan-ozal

byserkan-ozal

•

安全与测试

Automates visual audits and UI verification by capturing screenshots, analyzing DOM structures, and comparing live pages against design specifications.

The Visual Testing skill empowers AI agents to perform comprehensive UI audits and regression testing within a live browser environment. It enables high-resolution screenshot capture across multiple viewport presets—from mobile to desktop—and provides the ability to compare live implementations directly with Figma designs. By combining DOM inspection with visual similarity analysis, this skill ensures that layouts remain consistent, responsive behaviors are correct, and styling regressions are caught early in the development lifecycle.

主要功能

01PDF generation and automated visual regression reporting

02Multi-device responsive testing with viewport presets

03Full-page and element-specific screenshot capture

0460 GitHub stars

05Direct comparison between live pages and Figma designs

06Detailed DOM and CSS inspection for styling verification

使用场景

01Comparing production web pages against Figma design files to identify deviations.

02Automating visual regression tests to catch UI bugs after code changes.

03Verifying responsive design across mobile, tablet, and desktop breakpoints.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add serkan-ozal/browser-devtools-mcp visual-testing

For use in Claude.ai and ChatGPT

Download Skill