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 agentmods add skills/madappgang/claude-code/browser-debuggingnpx 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.svg" alt="Measured on agentmods" 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 | $0.00071 | $0.04295 |
| Opus 5 | $0.00036 | $0.02148 |
| Sonnet 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 yesterday.
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.
- yesterday First seen · 614 lines · 71 tokens per session scan A 73aa096d90b2
browser-debugging is a skill published in the GitHub repository MadAppGang/claude-code (279 stars, last pushed 5mo ago), licensed MIT. It adds 71 tokens to every session and 4,295 once invoked, about $0.0004 per session on Opus 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
v8-jit
V8 JIT optimization patterns for writing high-performance JavaScript in Next.js server internals. Use when writing or reviewing hot-path code in app-render, stream-utils, routing, caching, or any per-request code path. Covers hidden classes / shapes, monomorphic call sites, inline caches, megamorphic deopt, closure…
use-agent-browser-for-airi
Test AIRI display-model imports with agent-browser across stage-tamagotchi Electron, stage-web, and stage-pocket mobile web layouts. Use when uploading and verifying contributor-supplied Live2D ZIP, VRM, or MMD ZIP/PMX/PMD files through AIRI's model selector, including onboarding bypass, format-specific import…
opencli-sitemap-author
Use when creating or maintaining OpenCLI site sitemaps: agent-facing navigation, page-state, action, workflow, API-reference, pitfall, and fallback knowledge for a website. Use after browser exploration discovers durable site context, when a sitemap is stale, or when promoting local site knowledge into the repo.
debug-optimize-lcp
Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions…
webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
interactive-login
How to complete browser/interactive logins (aws / gh / glab / gcloud). The platform backgrounds the login poller so it survives the human's browser round-trip — and when that does NOT work.