skills.rest
MadAppGang
MadAppGangOFFICIAL
Explore all skills by this author →
WebsiteGitHub

debug-ui

Capture screenshots and inspect DOM state to diagnose UI layout issues.

7|4|Updated Feb 26, 2026
Search Tags:#responsive design#screenshot#ui debugging#css validation#visual bug#layout issue
One-click install
npx skills add https://github.com/MadAppGang/magus --skill debug-ui-madappgang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: debug-ui
Source: https://github.com/MadAppGang/magus/tree/main/plugins/browser-use/skills/debug-ui
Command: npx skills add https://github.com/MadAppGang/magus --skill debug-ui-madappgang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers quickly identify and diagnose visual bugs, layout issues, and CSS problems in web interfaces without needing to manually inspect browser developer tools for every issue.

Core Features & Use Cases

  • Visual State Capture: Take screenshots of web pages to visually inspect for bugs.
  • DOM Inspection: Analyze element attributes, classes, and positions to understand CSS application.
  • Responsive Testing: Check UI consistency across different viewport sizes.
  • Visual Regression: Compare before/after states to detect unintended changes.
  • Use Case: A developer notices a button looks misaligned on mobile. They use this Skill to capture a screenshot of the mobile view, inspect the button's DOM state to check its CSS classes and positioning, and then compare it to the desktop view to identify the responsive layout issue.

Quick Start

Use the debug-ui skill to capture a screenshot of the current page and inspect the DOM state of the element with the class 'main-content'.

Frequently Asked Questions about debug-ui

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

FAQPage Schema
How do I debug visual layout issues and CSS misconfigurations without manually checking the browser console?▼

Visual UI debugging automates layout issue detection by capturing page screenshots and analyzing DOM state. You inspect element attributes, classes, and positions to identify CSS property misconfigurations without manual browser developer tool checks.

What is the best way to detect visual regression and unintended UI changes across releases?▼

Visual regression detection works by capturing and comparing before and after screenshot states of a web page. This process highlights unintended visual changes, element overlaps, and layout issues introduced during development.

How do I check responsive design consistency across different viewport sizes?▼

Responsive testing validates UI consistency by capturing screenshots of web pages rendered at different viewport sizes. You compare these visual states to identify misaligned elements and responsive layout issues across mobile and desktop views.

Can I inspect DOM state and CSS class application directly within a browser context?▼

Yes, DOM inspection within a browser context analyzes element attributes, classes, and positions to verify CSS application. This helps pinpoint layout issues and visual bugs by understanding exactly how styles apply to specific elements.

Do I need browser developer tools to diagnose element overlaps and visual bugs?▼

No, you can diagnose element overlaps and visual bugs through automated screenshot capture and DOM state analysis. This approach bypasses manual developer tool inspection by directly reporting element positions and CSS properties.

Related Skills

Explore More Software Engineering Skills→
tiankong0101-bytetiankong0101-byte

agent-browser

Automate browser-based web interaction via a WebSocket endpoint.

Community
Intermediate
JaimeJunrJaimeJunr
2

run-tests

Execute unit and integration tests, analyze failures, and re-run to verify corrections.

Community
Advanced
WillNigriWillNigri
33

browse

Drive headless browsers to automate end-to-end QA testing and capture screenshots.

Community
Advanced
antriksh-29antriksh-29

browse

Drive a headless browser to test features and capture annotated screenshots.

Community
Advanced