Which vision models are supported for visual analysis?

The skill supports a variety of models via Claudish and OpenRouter, including Qwen3-VL, Gemini 2.5 Flash, and GPT-4o for high-accuracy spatial reasoning and OCR.

What is the Browser Debugger skill for Claude Code?

It is a specialized plugin that allows Claude to control a web browser, capture screenshots, monitor console logs, and perform automated UI testing using Chrome DevTools.

Does it require a specific browser setup?

It requires the Chrome DevTools MCP server to be installed and running, which enables the programmatic interface between Claude and the browser.

Can this skill catch CSS and layout regressions?

Yes, by using AI visual analysis, the skill can compare current implementations against reference designs to identify spacing, typography, and alignment issues.

Browser Debugger & UI Tester

Name: Browser Debugger & UI Tester
Author: tianzecn

bytianzecn

0•

브라우저 자동화

Systematically tests web UI functionality, validates design fidelity with AI visual analysis, and monitors browser console logs for real-time debugging.

The Browser Debugger skill empowers Claude to interact directly with web applications via the Chrome DevTools MCP. It facilitates automated visual regression testing, console error monitoring, and network request tracking to ensure production-grade frontend quality. By integrating with advanced vision-language models like Qwen-VL and GPT-4o, it can perform high-fidelity design validation, detecting subtle layout shifts and styling inconsistencies that traditional testing tools might miss. This is an essential skill for developers and QA engineers who need to verify UI implementations and troubleshoot complex browser-based bugs within their AI-assisted workflow.

주요 기능

01Automated UI functionality and user interaction testing

02Integration with external vision models via OpenRouter and Claudish

03Network request tracking and performance debugging

04AI-powered visual analysis for design fidelity and OCR

050 GitHub stars

06Real-time console message monitoring and error reporting

사용 사례

01Automating visual regression testing to detect layout shifts and styling bugs

02Investigating and reproducing complex console errors reported by users

03Validating UI implementation against design mockups after code changes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tianzecn/myclaudecode browser-debugger

For use in Claude.ai and ChatGPT

Download Skill