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.
Inherits all available tools
Additional assets for this skill
This skill inherits all available tools. When active, it can use any tool Claude has access to.
package.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.sh