skills.rest
jonaseck2
jonaseck2COMMUNITY
Explore all skills by this author →
GitHub

dom-first-debugging

Diagnose UI layout issues by reading live DOM and computed styles.

2|Updated Apr 2, 2026
Search Tags:#ui debugging#dom inspection#visual QA#computed styles#layout regression#vue rendering#tauri renderer
One-click install
npx skills add https://github.com/jonaseck2/slaktforskning --skill dom-first-debugging
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dom-first-debugging
Source: https://github.com/jonaseck2/slaktforskning/tree/main/.claude/skills/dom-first-debugging
Command: npx skills add https://github.com/jonaseck2/slaktforskning --skill dom-first-debugging

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It resolves UI layout and visual discrepancies by forcing the debugging workflow to start from the rendered DOM and computed styles, so the next hypothesis is grounded in what the app actually produced.

Core Features & Use Cases

  • DOM-first truth reading: Reads computed styles, bounding rect, and scroll metrics for the affected element before analyzing CSS.
  • Rendered-structure inspection: Retrieves the outerHTML of the specific element to understand the live structure (including inline styles and data-v hashes).
  • Visual dimensional confirmation: Uses a focused screenshot crop of the target element to validate what the user is seeing (sizes, spacing, and positioning).
  • Layout symptom triggers: Designed for cases like “panel doesn’t fill,” “X looks different from Y,” spacing/padding issues, missing border-radius, incorrect widths/heights, overlap, or UI breakage after refactors.

Quick Start

When you report a layout issue, ask the AI to first run DOM and computed-style reads for the exact element you suspect (e.g., the side panel) and then explain what specific computed values or DOM structure differ from what you expect.

Frequently Asked Questions about dom-first-debugging

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

FAQPage Schema
Why does my Vue rendering show incorrect panel sizing and spacing after a refactor?▼

Incorrect panel sizing during Vue rendering often stems from unexpected computed styles or live DOM structure changes. Diagnosing the issue requires reading the live DOM and computed styles first, rather than guessing CSS rules, to see what the app actually produced.

How do I debug UI layout issues where a panel doesn't fill the screen?▼

To debug UI layout issues like a panel not filling the screen, start by querying the DOM and computed styles of the exact element. Use a focused screenshot crop and targeted outerHTML to confirm visual dimensions before reasoning about CSS sources.

What is DOM-first debugging for visual QA and layout regressions?▼

DOM-first debugging is a technique that resolves visual discrepancies by reading live DOM elements, bounding rects, and computed styles before analyzing CSS. It grounds your layout regression hypotheses in what the app actually rendered.

Does DOM inspection work for Tauri renderer layout discrepancies?▼

Yes, DOM inspection applies to Tauri renderer visual QA by reading the live DOM and computed styles of the affected element. This ensures your debugging workflow starts from the actual rendered structure to identify missing border radii or incorrect sizing.

What is the best way to fix CSS spacing and padding errors without guessing?▼

The best way to fix CSS spacing and padding errors without guessing is to use computed-style queries to inspect exact rendered values. Make a single CSS change based on those metrics, then re-read the DOM to confirm the visual fix.

Related Skills

Explore More Software Engineering Skills→
agent0aiagent0ai
1.4k

Screenshots

Capture browser-rendered pages or DOM elements as PNG images.

Official
Basic
lucasmccomblucasmccomb

design-review

Capture multi-viewport screenshots and analyze DOM, CSS, and computed styles for design issues.

Community
Advanced
chmcchmc

visual-verification

Visually verify ListAll app UI implementations across macOS, iOS, and watchOS using MCP tools.

Community
Intermediate
sadie100sadie100

cafe24-find-source

Trace bundled CSS and JS files to their Cafe24 source files.

Community
Advanced