skills.rest
sethihq
sethihqCOMMUNITY
Explore all skills by this author →
Website𝕏@sethihqGitHub

debug

Navigate, screenshot, and inspect web pages via the agent-browser CLI.

Updated Mar 12, 2026
Search Tags:#debug#ui testing#browser#screenshot#visual bug#inspect element
One-click install
npx skills add https://github.com/sethihq/guide --skill debug-sethihq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: debug
Source: https://github.com/sethihq/guide/tree/main/public/kit/skills/debug
Command: npx skills add https://github.com/sethihq/guide --skill debug-sethihq

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps debug browser rendering, layout, and visual issues by providing tools to inspect and interact with web pages.

Core Features & Use Cases

  • Visual Debugging: Capture screenshots to identify visual bugs.
  • Element Inspection: Use snapshot to get an accessibility tree with element references for precise interaction.
  • Interactive Testing: Navigate, type, and click elements to test UI components.
  • Use Case: When a user reports a "visual bug" on a webpage, use this Skill to navigate to the page, take a screenshot, and inspect the element tree to pinpoint the issue.

Quick Start

Use the debug skill to take a screenshot of the current page.

Frequently Asked Questions about debug

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

FAQPage Schema
How do I debug visual bugs on a webpage using screenshots?▼

Debug visual bugs by navigating to the webpage and capturing a screenshot to inspect rendering and layout discrepancies. This allows you to visually verify the issue and pinpoint the exact element causing the problem.

How does accessibility tree snapshotting help with element inspection?▼

Accessibility tree snapshotting provides element references for precise interaction during browser debugging. It generates a structural tree of the page elements, allowing you to inspect and target specific UI components for testing.

Do I need a specific CLI to automate browser interaction for UI testing?▼

Yes, you need the agent-browser CLI to execute browser automation for UI testing. This CLI enables navigation, text input, and element interaction required to debug rendering and visual discrepancies.

What is the best way to inspect element layout issues during interactive testing?▼

The best way to inspect element layout issues is to use an accessibility tree snapshot to get element references. This allows you to interact with specific elements, type text, and click to test UI components directly.

Can I interact with web page elements by typing and clicking to test UI components?▼

Yes, you can interact with web page elements by typing and clicking to test UI components. The browser automation CLI supports text input and element interaction via references, allowing for interactive UI testing.

Why are my screenshots not showing the visual discrepancies I expect?▼

Screenshots may not show expected visual discrepancies if the page is not fully rendered or the wrong element is targeted. Use an accessibility tree snapshot to verify the correct element references before capturing the screenshot.

Related Skills

Explore More Software Engineering Skills→
8b-is8b-is

agent-browser

Automate browser navigation, element interaction, and data extraction via CLI.

Official
Advanced
Clay-HHKClay-HHK
2

web-design-reviewer

Inspect websites across viewports and apply code fixes for layout and accessibility issues.

Community
Intermediate
softmgsoftmg

browser

Automate web browsing and UI interactions using accessibility-tree snapshots with stable element refs.

Official
Intermediate
consuelohqconsuelohq
7

agent-browser

Orchestrate the agent-browser CLI to open pages, interact with elements, and capture screenshots or PDFs.

Official
Intermediate