Frontend website debugging toolkit using Chrome DevTools Protocol with Playwright/WebKit fallbacks. Use this skill when: (1) Debugging CSS, HTML, or JavaScript issues on a webpage, (2) Taking screenshots to verify visual changes, (3) Inspecting DOM structure or console errors, (4) Testing responsive layouts, (5) Extracting selectors for automation, (6) Self-debugging frontend work Claude has created, (7) User says "debug this page", "check my site", "why doesn't this look right", or "fix the frontend". Supports Chrome (primary) and Safari/WebKit (via Playwright). Designed for agent-driven debugging loops.
Launches Chrome/WebKit browsers via CLI scripts to debug frontend issues. Use when you need to inspect DOM, capture screenshots, check console errors, test responsive layouts, or verify visual changes on webpages.
/plugin marketplace add AnthemFlynn/ccmp/plugin install website-debug@ccmpThis skill inherits all available tools. When active, it can use any tool Claude has access to.
package-lock.jsonpackage.jsonreferences/css-debug.mdreferences/js-debug.mdreferences/self-debug.mdscripts/browser-close.jsscripts/browser-console.jsscripts/browser-dom.jsscripts/browser-eval.jsscripts/browser-nav.jsscripts/browser-network.jsscripts/browser-pick.jsscripts/browser-resize.jsscripts/browser-screenshot.jsscripts/browser-start.jsscripts/setup.shLightweight, token-efficient browser debugging toolkit for frontend development. Uses CLI scripts instead of MCP servers to minimize context usage (~300 tokens vs 13k-18k).
Use the slash commands for easiest access:
/debug-page <url> - Start debugging session/screenshot - Take screenshot/pick-element - Interactive element selection/test-responsive - Test at all breakpoints/verify-changes - Verify after making changes# Start browser
node scripts/browser-start.js
node scripts/browser-start.js --profile # Preserve logins
node scripts/browser-start.js --webkit # Safari/WebKit
# Navigate
node scripts/browser-nav.js https://localhost:3000
# Debug
node scripts/browser-screenshot.js
node scripts/browser-eval.js 'document.title'
node scripts/browser-pick.js "Select element"
node scripts/browser-console.js --errors
node scripts/browser-network.js --failures
| Script | Purpose | Output |
|---|---|---|
browser-start.js | Launch Chrome/WebKit with debug port | Status message |
browser-nav.js <url> | Navigate to URL | Confirmation |
browser-screenshot.js | Capture viewport | File path (PNG) |
browser-eval.js '<js>' | Run JS in page | Result or error |
browser-pick.js "<msg>" | Interactive selector | CSS selectors |
browser-console.js | Get console output | Logs/errors |
browser-network.js | Network activity | Request/response data |
browser-dom.js "<sel>" | Get DOM snapshot | HTML fragment |
browser-close.js | Close browser | Confirmation |
When debugging frontend code Claude has written or modified:
# After making CSS/HTML changes, verify visually
node scripts/browser-screenshot.js
# Claude reads the screenshot, identifies issues, iterates
# Check for JavaScript errors after changes
node scripts/browser-console.js --errors
# Fix any errors found, re-verify
# Test at different viewport sizes
node scripts/browser-resize.js 375 667 # iPhone SE
node scripts/browser-screenshot.js
node scripts/browser-resize.js 768 1024 # iPad
node scripts/browser-screenshot.js
node scripts/browser-resize.js 1920 1080 # Desktop
node scripts/browser-screenshot.js
# When user reports "X looks wrong", have them select it
node scripts/browser-pick.js "Click on the element that looks wrong"
# Returns detailed info including computed styles
Primary engine. Uses Chrome DevTools Protocol on port 9222.
--profile to preserve loginsFallback via Playwright's WebKit build. Closest to Safari behavior on macOS.
node scripts/browser-start.js --webkit
| Scenario | Engine |
|---|---|
| General debugging | Chrome |
| Safari layout issues | WebKit |
| Testing with logins | Chrome --profile |
| Cross-browser comparison | Both |
| CI/headless testing | Chrome or WebKit |
For complex scenarios, load the appropriate reference:
All scripts output to files when practical, enabling:
# Capture multiple screenshots for comparison
node scripts/browser-screenshot.js --output=/tmp/before.png
# ... make changes ...
node scripts/browser-screenshot.js --output=/tmp/after.png
# Save DOM snapshot for analysis
node scripts/browser-dom.js "body" > /tmp/page-structure.html
# Export console log for review
node scripts/browser-console.js > /tmp/console-log.txt
# Navigate and screenshot in one command
node scripts/browser-nav.js https://example.com && node scripts/browser-screenshot.js
# Full page audit
node scripts/browser-nav.js $URL && \
node scripts/browser-console.js --errors > /tmp/errors.txt && \
node scripts/browser-screenshot.js
Chrome must be launchable from command line. The start script handles this automatically.
For Safari testing, ensure Playwright is installed:
npm install -g playwright
npx playwright install webkit
Scripts require Node.js and puppeteer-core:
npm install -g puppeteer-core
Browser may not be running or wrong port:
node scripts/browser-start.js # Restart browser
Scripts may need execute permission:
chmod +x ./scripts/*.js
Kill existing instances first:
killall "Google Chrome" 2>/dev/null
node scripts/browser-start.js
Install Playwright browsers:
npx playwright install webkit
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.