henkisdabro/devtools
plugins/developer/skills/devtools/SKILL.md
Chrome DevTools MCP setup and live-browser debugging for visual app inspection, console/network/performance triage, 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. Do NOT use for headless CI test runs - use Playwright tests directly. Do NOT use for Selenium/Puppeteer setup.
$ install --global
skillsauthnpx skillsauth add henkisdabro/wookstar-claude-plugins devtoolsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 16, 2026, 2:43 AM202.8s8 files scanned
SKILL.md
- name:
- devtools
- description:
- Chrome DevTools MCP setup and live-browser debugging for visual app inspection, console/network/performance triage, 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. Do NOT use for headless CI test runs - use Playwright tests directly. Do NOT use for Selenium/Puppeteer setup.
Chrome 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
Related Skills
henkisdabro/humanise
testing
VerifiedTrustedCommunity
Identifies and removes AI writing patterns to make text sound natural and human-written. Use when user says "humanise this", "make this sound less AI", "this reads like a robot wrote it", "de-AI this text", "remove AI patterns", "make this more natural", "clean up this AI-generated text". Detects and fixes 29 patterns based on Wikipedia's "Signs of AI writing" guide - inflated language, promotional tone, AI vocabulary, em dash overuse, filler phrases, sycophantic tone, placeholder text, formulaic structure, thematic breaks. Do NOT use for grammar-only proofreading, spell checking, or rewriting text that is already clearly human-written.
66SKILL.mdUpdated Apr 20, 2026
henkisdabro/pdf-extract
tools
VerifiedTrustedCommunity
Fast, zero-AI text extraction from PDFs that have a text layer (digitally created PDFs from Word, Typst, WeasyPrint, wkhtmltopdf, LaTeX, etc). Uses pymupdf (fitz) - instant and deterministic. Use when you need to quickly pull raw text from a known text-layer PDF, e.g. "extract text from this PDF", "read this PDF", "get the content of", "what does this PDF say", "quickly read this PDF". Do NOT use for scanned/image PDFs or when you need structured output (tables, headings, OCR, AI analysis) - use the pdf-processing-pro skill in this plugin for those cases.
59SKILL.mdUpdated May 16, 2026
henkisdabro/timezone-tools
tools
VerifiedTrustedCommunity
Get current time in any timezone and convert times between timezones. Use when working with time, dates, timezones, scheduling across regions, "what time is it in X", "convert 3pm Sydney to London", DST checks, or when the user mentions specific cities/regions for time queries. Supports IANA timezone names. Do NOT use for date arithmetic (adding days/months), recurring event scheduling, business-day calculations, or full calendar/booking logic - those need a dedicated date library or scheduling tool.
59SKILL.mdUpdated Apr 24, 2026
henkisdabro/shopify-developer
tools
VerifiedTrustedCommunity
Complete Shopify development reference for Liquid templating, theme development (OS 2.0), GraphQL Admin API, Storefront API, custom app development, Shopify Functions, Hydrogen, performance optimisation, and debugging. Use when working with .liquid files, creating theme sections and blocks, writing GraphQL queries or mutations for Shopify, building Shopify apps with CLI and Polaris, implementing cart operations via Ajax API, optimising Core Web Vitals for Shopify stores, debugging Liquid or API errors, configuring settings_schema.json, accessing Shopify objects (product, collection, cart, customer), using Liquid filters, creating app extensions, working with webhooks, migrating from Scripts to Functions, or building headless storefronts with Hydrogen and React Router 7. Covers API version 2026-01. Do NOT use for WooCommerce, Magento, BigCommerce, or other non-Shopify e-commerce platforms.
59SKILL.mdUpdated Apr 24, 2026