chrome-devtools
Chrome DevTools MCP Skill
Complete Chrome browser automation and debugging using the Chrome DevTools Protocol. This skill provides access to all Chrome DevTools capabilities for web development, testing, and debugging tasks.
Capabilities
- Navigate & Automate - Control browser navigation, tabs, and page interactions
- Interact with Pages - Click, type, drag, fill forms, upload files
- Debug & Inspect - View console logs, network requests, execute scripts
- Performance Analysis - Record traces and get performance insights
- Emulation - Test different devices, network conditions, viewports
- Visual Testing - Take screenshots and DOM snapshots
Quick Reference
For detailed instructions on each operation, see:
- NAVIGATION.md - Page navigation, tabs, waiting
- INTERACTION.md - Clicking, typing, forms, uploads
- DEBUGGING.md - Console logs, network requests, script execution
More from johnlindquist/claude-workshop-skills
diagram
Maintain and synchronize Unified Impact Diagrams following Diagram Driven Development (DDD) methodology. Create, update, and manage diagrams that connect user value to technical implementation.
26frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
17github
Manage GitHub issues using gh CLI - create, list, view, update, close, and assign issues. Use when working with GitHub issues, bug tracking, or project management tasks.
16review
Centralizes persona-driven code reviews (Fowler, Torvalds, Carmack, React core, etc.) so Claude can pick or combine expert viewpoints when the user asks for a code review or perspective-specific critique.
16ts-testing
Design, implement, and maintain high‑value TypeScript test suites using popular JS/TS testing libraries. Use this skill whenever the user is adding tests, debugging failing tests, or refactoring code that should be covered by tests.
15