Agent skill
debug
Browser debugging with agent-browser CLI. Use when: - User mentions "screenshot", "visual bug", "inspect element" - User asks "what does it look like", "see the page" - Need to debug browser rendering, layout, or visual issues - User wants to test UI in browser - E2E debugging or visual verification
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/debug-darkroomengineering-cc-settings
SKILL.md
Browser Debugging with agent-browser
AI-optimized browser automation for visual debugging.
Commands
# Navigate to a URL
agent-browser navigate http://localhost:3000
# Take screenshot
agent-browser screenshot
# Get accessibility tree (AI-optimized DOM)
agent-browser snapshot
# Click element by accessibility ref
agent-browser click @e5
# Type text
agent-browser type @e3 "search query"
# Get page info
agent-browser info
Workflow
- Navigate to the target URL
- Screenshot to see current state
- Snapshot to get accessibility tree with element refs
- Interact using element refs (@e1, @e2, etc.)
- Screenshot again to verify changes
Element References
The accessibility tree gives each element a unique ref:
@e1: button "Submit"
@e2: textbox "Email"
@e3: link "Home"
Use these refs for reliable element targeting.
Common Debugging Tasks
Visual Bug
agent-browser navigate http://localhost:3000/broken-page
agent-browser screenshot
# Analyze screenshot for visual issues
Interactive Testing
agent-browser navigate http://localhost:3000/form
agent-browser snapshot
agent-browser type @e2 "[email protected]"
agent-browser click @e5
agent-browser screenshot
Layout Inspection
agent-browser navigate http://localhost:3000
agent-browser snapshot
# Analyze accessibility tree for structure
Prerequisites
Requires agent-browser CLI:
npm i -g [email protected]
Output
Return findings:
- Visual state: What the page looks like
- Issues found: Layout problems, missing elements
- Accessibility tree: Key element structure
- Recommendations: How to fix issues
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?