version: "1.0.0" name: dom-inspector description: Advanced DOM inspection and interaction capabilities. Allows analyzing page layout, extracting compact DOM snapshots, manipulating elements, and debugging browser logs. allowed-tools: [ "get_page_snapshot", "get_visual_hierarchy", "get_element_details", "click_element", "input_text", "get_console_logs", "scroll_to_element", "capture_screenshot" ]

DOM Inspector Skill

Core Principle: Minimize token cost. Always choose the cheapest tool that gets the job done.

Tool Cost Reference

Workflows

1. Fix UI Against Design Mockup

capture_screenshot → compare with design → edit styles → capture_screenshot → verify

Screenshot is justified here — pixel-level visual comparison requires images.

2. Verify Interaction Flows

get_page_snapshot → find @eID → click_element/input_text → get_page_snapshot → verify DOM changes

Example: snapshot → @e42 [button] "Settings" → click_element(e42) → snapshot → confirm dialog appeared

3. Debug Bugs via Logs

get_console_logs(level="error") → add console.info("[BUG]",...) to code
→ click_element to reproduce → get_console_logs(keyword="[BUG]")
→ fix code → re-trigger → get_console_logs → confirm fix

Important: `console.log` is NOT captured. Use console.info or higher (warn/error) for debugging. Use prefixes ([BUG], [PERF]) + keyword/level filter to avoid log noise.

4. Explore Page Structure

get_visual_hierarchy → understand layout (cheap)
→ get_page_snapshot(startNodeId="eX") → targeted DOM of area of interest
→ get_element_details("eY") → deep dive if needed

Always start with `get_visual_hierarchy` — cheapest way to understand the page.

5. Performance Debugging

Add console.time/PerformanceObserver → click_element to trigger
→ get_console_logs(keyword="[PERF]") → fix → re-trigger → verify

Decision Guide

• Understand layout? → get_visual_hierarchy first
• Need element IDs? → get_page_snapshot (use startNodeId to narrow scope)
• Click / type? → click_element / input_text with @eID
• Compare with design? → capture_screenshot
• Runtime data? → get_console_logs with keyword / level
• Element off-screen? → scroll_to_element before snapshot
• Computed styles / position? → get_element_details + includeStyles: true (narrow with styleProps: ["font-weight"]; pseudo: "::before" for pseudo-elements)

Anti-Patterns

• ✗ capture_screenshot to discover structure (use get_visual_hierarchy)
• ✗ Full-page snapshot when only one section needed (use startNodeId)
• ✗ get_console_logs without keyword/level filter (token waste)
• ✗ Skipping get_visual_hierarchy and jumping straight to detailed snapshot