Can this skill detect pixel-perfect visual regressions?

While it doesn't provide a numerical pixel-diff percentage, Claude performs high-level descriptive visual analysis to identify layout shifts, color changes, or missing elements between two screenshots.

When should I use this instead of claude-in-chrome?

Use this skill for visual, DOM, and layout inspection. Escalate to claude-in-chrome if you specifically need to read JavaScript console errors, monitor network requests, or inspect React/Vue component state.

How does Claude perform responsive testing with this skill?

Claude uses a multi-session approach or JavaScript-driven viewport resizing to capture screenshots at specific breakpoints like mobile (375px) and tablet (768px), then analyzes the visual output for layout breaks.

What tools are used for CSS debugging?

The skill utilizes browser_get_state and browser_get_html to inspect inline styles, applied CSS classes, and DOM attributes, allowing Claude to diagnose styling issues without manual DevTools access.

UI Debugging & Visual Analysis

Name: UI Debugging & Visual Analysis
Author: MadAppGang

byMadAppGang

•

デザインツール

Analyzes frontend interfaces by capturing screenshots, inspecting DOM states, and validating responsive layouts across multiple viewports.

The debug-ui skill empowers Claude to identify and resolve visual bugs that are often invisible to traditional code analysis. By leveraging the browser-use plugin, it allows for automated screenshot capture, multi-viewport responsive testing, and deep inspection of DOM attributes and CSS classes. This skill is essential for detecting layout overflows, z-index stacking issues, and visual regressions, providing a structured workflow for comparing UI states before and after code changes.

主な機能

01Deep DOM inspection for validating CSS classes, attributes, and hidden elements

02Visual regression detection via before/after state comparison workflows

034 GitHub stars

04Automated identification of overlapping elements and z-index issues

05Multi-viewport responsive testing through simulated device breakpoints

06Structured UI bug reporting including root cause analysis and evidence capture

ユースケース

01Verifying that complex layouts remain responsive across mobile, tablet, and desktop views

02Diagnosing why elements are overlapping, hidden, or failing to respond to user clicks

03Performing visual smoke tests to ensure UI stability after merging new styling changes

主な機能

01Deep DOM inspection for validating CSS classes, attributes, and hidden elements

02Visual regression detection via before/after state comparison workflows

034 GitHub stars

04Automated identification of overlapping elements and z-index issues

05Multi-viewport responsive testing through simulated device breakpoints

06Structured UI bug reporting including root cause analysis and evidence capture

ユースケース

01Verifying that complex layouts remain responsive across mobile, tablet, and desktop views

02Diagnosing why elements are overlapping, hidden, or failing to respond to user clicks

03Performing visual smoke tests to ensure UI stability after merging new styling changes