Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsBrowser Debug Agent
Connect to browser for testing like Claude Code but with headless mode and support for multiple engine (Chrome, Playwright, ...)
$5
browser-debug-agent
Example session with this skill installed
The signup button on localhost:3000 isn't working on mobile. Check the console and fix the layout if it is overflowing.
- Read your context and instructions
- Compiled the browser-debug-agent
I have reproduced the issue on localhost:3000 using a mobile viewport (375x812). The signup button was unreachable due to a container overflow and a script error.
Debugging & Verification Results
| Check | Viewport | Result | Evidence |
|---|---|---|---|
| Console Errors | 375 | FAIL | Uncaught ReferenceError: validateForm is not defined |
| Layout Overflow | 375 | FAIL | scrollWidth (410) > clientWidth (375) |
| Button Interaction | 375 | PASS | Click event triggered after fix |
| Responsive Check | 1280 | PASS | No layout regressions found |
Fixed Root Causes
Script Error: The validateForm function was missing an export in utils/validation.js, preventing the click handler from executing.
2.
CSS Overflow: The signup container had a fixed width of 400px. Changed to max-width: 100% in SignupForm.module.css.
Next steps
- Run the full Vitest suite to ensure no regressions in validation logic.
- Verify the fix on a physical iOS device to confirm touch target sizing.
- Merge the CSS change to the main branch.
Connects securely to your tools. The creator never sees your data.
About this skill
Frontend debugging is expensive and slow when agents rely on constant screenshots. This skill implements a text-first evidence loop to repair browser-facing applications using the most efficient data available. It moves beyond code inspection by running the application to prove fixes through console logs, network states, and DOM geometry.
What it does
- Automated Reproduction creates a minimal test case before applying any code changes.
- Evidence Hierarchy prioritizes console errors, network status, and DOM snapshots over expensive screenshots.
- Layout Verification uses computed geometry to detect overflows and clipping without visual inspection.
- Multi-Viewport Testing validates responsive behavior across desktop, tablet, and mobile breakpoints.
- Cross-Runtime Support utilizes Playwright, Chrome DevTools Protocol, or project-specific tools based on availability.
How it works
- Accept the bug report or verification task and define clear observable assertions.
- Reproduce the failure by navigating, acting, and recording the first divergence from expected behavior.
- Patch the root cause identified via console traces or network failures.
- Verify the fix using a multi-layer checklist covering functional, responsive, and accessibility requirements.
Frameworks & tools
This skill works with Playwright, Puppeteer, Chrome/Chromium CDP, and Obscura. It integrates with any frontend stack including React, Vue, and Next.js by interacting directly with the browser runtime.
Why this beats prompting it yourself
Standard prompts often cause agents to burn tokens on unnecessary screenshots or hallucinate layout fixes. This skill enforces a rigorous execution loop that requires browser-visible proof before claiming a task is complete.
Use cases
- Debugging uncaught JavaScript errors and failed API requests in the browser.
- Fixing responsive layout bugs where elements overlap or overflow the viewport.
- Performing automated QA smoke tests across multiple device resolutions.
- Verifying accessibility roles and focus order via the DOM tree.
Known limitations
Requires shell access to run browser instances. It does not install new runtimes and relies on existing system or project dependencies.
What's included (2 skills)
browser-debug-agent
Debug, repair, and verify browser-facing applications through an evidence-led execution loop. Use for any task involving frontend UI bugs, browser testing, console or network errors, layout issues, responsive checks, visual regressions, form interactions, browser-visible verification of a code change, UI review, QA check, smoke test, or acceptance verification. Prefer existing project tooling; otherwise select the cheapest compatible runtime.
browser-debug-agent
Debug, repair, and verify browser-facing applications through an evidence-led execution loop. Use for any task involving frontend UI bugs, browser testing, console or network errors, layout issues, responsive checks, visual regressions, form interactions, browser-visible verification of a code change, UI review, QA check, smoke test, or acceptance verification. Prefer existing project tooling; otherwise select the cheapest compatible runtime.
How to use
Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scanned
Verified clean 5 days ago
- Passed all security checks, Safe to install
Requires
Node.js