npx claudepluginhub henkisdabro/wookstar-claude-plugins --plugin developerWant just this skill?
Then install: npx claudepluginhub u/[userId]/[slug]
This skill helps launch and configure the Chrome DevTools MCP server, giving Claude visual access to a live browser for debugging and automation. Use when the user asks to set up browser debugging, launch Chrome with DevTools, configure chrome-devtools-mcp, see what my app looks like, take screenshots of my web application, check the browser console, debug console errors, inspect network requests, analyse API responses, measure Core Web Vitals or page performance, run a Lighthouse audit, test button clicks or form submissions, automate browser interactions, fill out forms programmatically, simulate user actions, emulate mobile devices or slow networks, capture DOM snapshots, execute JavaScript in the browser, or troubleshoot Chrome DevTools MCP connection issues. Supports Windows, Linux, and WSL2 environments.
This skill uses the workspace's default tool permissions.
references/chrome-installation.mdreferences/mcp-configuration.mdreferences/troubleshooting.mdscripts/check_chrome.shscripts/detect_dev_server.shscripts/detect_environment.shscripts/launch_chrome.shChrome DevTools MCP
GitHub Repository: https://github.com/ChromeDevTools/chrome-devtools-mcp
Without browser access, Claude is "coding blindfolded" - making changes without seeing results. The Chrome DevTools MCP server provides 26 specialised tools across these categories:
| Category | Capabilities |
|---|---|
| Visual Inspection | Take screenshots, capture DOM snapshots, see rendered output |
| Console & Logging | Read console messages, catch JavaScript errors, debug issues |
| Network Analysis | Inspect API requests/responses, analyse headers, debug fetch calls |
| Performance | Record traces, measure Core Web Vitals (LCP, CLS, TBT), identify bottlenecks |
| User Simulation | Click elements, fill forms, drag-and-drop, handle dialogs |
| Device Emulation | Simulate mobile viewports, throttle CPU/network, test responsive design |
Quick Start Workflow
Execute these steps in order:
Step 1: Detect Environment
bash scripts/detect_environment.sh
Returns one of: windows, linux, or wsl2
Step 2: Verify Chrome Installation
bash scripts/check_chrome.sh <environment>
Outputs status:installed or status:not_installed. If not installed, see references/chrome-installation.md for installation options.
IMPORTANT: Do not proceed until Chrome is installed and verified.
Step 3: Check MCP Server Status
claude mcp list | grep -i chrome
If not installed:
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222
For advanced configuration options and alternative connection methods, see references/mcp-configuration.md.
Step 4: Detect Running Dev Server
bash scripts/detect_dev_server.sh
Checks ports 5173, 5174, 5175, 3000, 3001, 8080, and 8000. If no dev server is running and one is needed, offer to start it.
Step 5: Launch Chrome with Debugging
bash scripts/launch_chrome.sh <environment> <url> [headed]
<environment>:windows,linux, orwsl2<url>: Target URL (e.g.,http://localhost:5173)[headed]: Optional - passheadedfor visible browser, omit for headless (default)
Step 6: Verify Connection
curl -s http://127.0.0.1:9222/json/version
Once connected, test with the mcp__chrome-devtools__list_pages tool.
Quick Troubleshooting
| Issue | Solution |
|---|---|
| "Target closed" error | Close all Chrome instances, restart with debugging |
| Module not found | Clear npm cache: rm -rf ~/.npm/_npx && npm cache clean --force |
| Connection refused | Ensure Chrome launched with --remote-debugging-port=9222 |
| Port already in use | Kill existing Chrome or use different port |
| Chrome won't start in sandbox | Use --browserUrl to connect to manually-started Chrome |
| WebDriver sign-in blocked | Use --autoConnect to connect to your normal browser session |
For detailed troubleshooting steps, see references/troubleshooting.md.
References
- Chrome Installation: references/chrome-installation.md - platform-specific installation options
- MCP Configuration: references/mcp-configuration.md - all configuration flags, JSON examples, connection methods, platform commands, and known limitations
- Troubleshooting: references/troubleshooting.md - detailed error resolution, debugging with logs, and recovery scripts
Similar Skills
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.