debug-ui
OfficialDebug UI visually and with DOM inspection.
Software Engineering#responsive design#screenshot#ui debugging#css validation#visual bug#layout issue
AuthorMadAppGang
Version1.0.0
Installs0
System Documentation
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'.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: debug-ui Download link: https://github.com/MadAppGang/magus/archive/main.zip#debug-ui Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.