Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add MadAppGang/claude-code --skill browser-debugginggit clone --depth 1 https://github.com/MadAppGang/claude-codeWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/madappgang/claude-code/browser-debugging)<a href="https://agentmods.dev/skills/madappgang/claude-code/browser-debugging"><img src="https://agentmods.dev/badge/skills/madappgang/claude-code/browser-debugging/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/madappgang/claude-code/browser-debugging"><img src="https://agentmods.dev/badge/skills/madappgang/claude-code/browser-debugging.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00071 | $0.04295 |
| Opus 5.5 | $0.00028 | $0.01718 |
| Sonnet 5.5 | $0.00014 | $0.00859 |
| Haiku 4.5 | $0.00007 | $0.00430 |
Grade A, and why
browser-debugging scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 614 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Browser Debugging
This Skill provides comprehensive browser-based UI testing, visual analysis, and debugging capabilities using Claude-in-Chrome Extension MCP tools and optional external vision models via Claudish.
When to Use This Skill
Claude and agents (developer, reviewer, tester, ui-developer) should invoke this Skill when:
- Validating Own Work: After implementing UI features, agents should verify their work in a real browser
- Design Fidelity Checks: Comparing implementation screenshots against design references
- Visual Regression Testing: Detecting layout shifts, styling issues, or visual bugs
- Console Error Investigation: User reports console errors or warnings
- Form/Interaction Testing: Verifying user interactions work correctly
- Pre-Commit Verification: Before committing or deploying code
- Bug Reproduction: User describes UI bugs that need investigation
Prerequisites
Required: Claude-in-Chrome Extension
This skill requires Claude-in-Chrome Extension MCP. The extension provides browser automation tools directly through Claude.
Check if available:
The tools are available when the extension is installed and active. Look for mcp__claude-in-chrome__* tools in your available MCP tools.
Optional: External Vision Models (via OpenRouter)
For advanced visual analysis, use external vision-language models via Claudish:
# Check OpenRouter API key
[[ -n "${OPENROUTER_API_KEY}" ]] && echo "OpenRouter configured" || echo "Not configured"
# Install claudish
npm install -g claudish
Visual Analysis Models (Recommended)
For best visual analysis of UI screenshots, use these models via Claudish:
Tier 1: Best Quality (Recommended for Design Validation)
| Model | Strengths | Cost | Best For |
|---|---|---|---|
| qwen/qwen3-vl-32b-instruct | Best OCR, spatial reasoning, GUI automation, 32+ languages | ~$0.06/1M input | Design fidelity, OCR, element detection |
| google/gemini-2.5-flash | Fast, excellent price/performance, 1M context | ~$0.05/1M input | Real-time validation, large pages |
| openai/gpt-4o | Most fluid multimodal, strong all-around | ~$0.15/1M input | Complex visual reasoning |
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 614 lines · 71 tokens per session scan A 73aa096d90b2
browser-debugging is a skill published in the GitHub repository MadAppGang/claude-code (286 stars, last pushed 7mo ago), licensed MIT. It adds 71 tokens to every session and 4,295 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
chrome-devtools-cli
Use this skill to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via CLI.
a11y-debugging
Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast.
chrome-devtools
Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions, analyzing performance, or inspecting network requests. This skill does not apply to --slim mode (MCP configuration).
opencli-autofix
Automatically fix broken OpenCLI adapters when commands fail. Load this skill when an opencli command fails — it guides you through collecting a trace artifact, patching the adapter, retrying, and filing an upstream GitHub issue after a verified fix. Works with any AI agent.
chrome-performance-optimizer
Autonomous multi-agent performance optimization loop for Chromium and V8. Supports profile-seeded mode (analyzing Speedometer 3 / JetStream profiles via pprof or Sagacity MCP) and pattern-driven discovery mode (fan-out exploration of Blink and V8 macro-patterns grounded in historical wins and past rejected CLs).…
nullaway
Guide for resolving NullAway static analysis errors. Best practices for: Passing ObservableSupplier/Supplier Dereferencing potentially @Nullable values Adding @NullMarked to Java code.