Does it support debugging pages that require a login?

Yes, by using the --profile flag during browser startup, you can preserve user profiles and session data to debug authenticated sections of your application.

Why use this instead of a standard MCP browser server?

This skill is designed to be significantly more token-efficient, consuming only about 300 tokens compared to the 13k-18k tokens typically required by standard Model Context Protocol browser servers.

Can I test Safari-specific layout issues?

Yes, the toolkit includes WebKit support via Playwright, allowing you to simulate Safari's rendering engine to catch platform-specific CSS bugs.

How does Claude use this to automatically fix my website?

Claude enters a self-debugging loop: it makes a code change, runs a screenshot or console check to verify the result, and iterates until the visual or functional issue is resolved.

Website Debug Toolkit

Name: Website Debug Toolkit
Author: AnthemFlynn

byAnthemFlynn

•

Browser Automation

Debugs frontend code, captures screenshots, and inspects DOM elements using a token-efficient browser automation framework.

The Website Debug skill is a lightweight, agent-focused toolkit designed to bridge the gap between AI-generated code and visual reality. By leveraging the Chrome DevTools Protocol and Playwright, it enables Claude to perform real-time visual verification, capture console logs, and test responsive designs without the heavy context overhead of traditional MCP servers. This skill is essential for developers looking to automate the "write-test-fix" loop for CSS, HTML, and JavaScript, providing precise element selection and cross-browser testing capabilities for both Chrome and WebKit engines.

Key Features

011 GitHub stars

02Integrated console and network monitoring to identify runtime errors and failed assets

03Real-time visual verification with high-resolution viewport screenshots

04Interactive element selection for extracting precise CSS selectors and computed styles

05Automated responsive layout testing across custom mobile, tablet, and desktop breakpoints

06Token-efficient CLI architecture minimizing context usage to approximately 300 tokens

Use Cases

01Self-debugging JavaScript execution errors and network request failures during site navigation

02Cross-browser testing to identify and fix layout regressions specific to Safari/WebKit

03Validating visual UI changes and CSS fixes immediately after Claude modifies frontend code

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anthemflynn/ccmp website-debug

For use in Claude.ai and ChatGPT

Download Skill