Skip to content
UXClaim
Design Ops

Chrome DevTools Skill

Browser debugging, automation, performance analysis, accessibility auditing, and LCP optimization for Claude Code without MCP server setup.

View source More in Design Ops

What it does

Chrome DevTools Skill provides 29 CLI commands for browser debugging, automation, and performance analysis directly in Claude Code. No MCP server installation required—all commands run via chrome-devtools <tool> in the shell.

How it works

The skill includes four specialized modules:

  • chrome-devtools: Core browser debugging, screenshots, and page inspection
  • a11y-debugging: Accessibility auditing based on web.dev guidelines
  • debug-optimize-lcp: Largest Contentful Paint debugging and optimization
  • chrome-devtools-troubleshooting: Connection and configuration diagnostics

Commands cover input automation (click, fill, drag), navigation, emulation, performance tracing, network inspection, and screenshot capture.

Use cases

  • Audit accessibility compliance during design iteration
  • Identify and optimize Core Web Vitals like LCP
  • Automate browser testing workflows without code
  • Capture performance metrics and console logs
  • Debug responsive design across viewport sizes
  • Validate interaction patterns programmatically

Who benefits

Product designers and UX researchers who need hands-on browser analysis without deep technical setup. Perfect for performance audits, accessibility testing, and design validation workflows.

Frequently asked questions

How do I install Chrome DevTools Skill?
Install the CLI globally with `npm i chrome-devtools-mcp@latest -g`, verify with `chrome-devtools status`, then copy skills to `~/.claude/skills/`. Requires Node.js v20.19+ and Chrome stable. Alternatively, install as a Claude Code plugin via `/plugin marketplace add ddfourtwo/chrome-devtools-skill`.
What does Chrome DevTools Skill do?
It provides 29 CLI commands for browser debugging, automation, performance analysis, accessibility auditing, and LCP optimization. Commands automate input, navigation, emulation, performance tracing, network inspection, and screenshots without MCP server setup.
How do I audit accessibility with this skill?
Use the `a11y-debugging` module which runs accessibility audits based on web.dev guidelines. Commands identify WCAG violations, color contrast issues, and semantic HTML problems. Run audits alongside design reviews to catch accessibility gaps early.
Can I debug performance and LCP issues?
Yes. The `debug-optimize-lcp` module specializes in Largest Contentful Paint debugging. Use `performance_start_trace`, `performance_stop_trace`, and `performance_analyze_insight` to identify what delays LCP and optimize accordingly.
What are the input automation commands?
Nine commands automate user interactions: click, drag, fill, fill_form, handle_dialog, hover, press_key, type_text, and upload_file. Use these to test form flows, button interactions, and page navigation programmatically.
How do I take screenshots and inspect pages?
Use `take_screenshot` to capture the current page, `take_snapshot` for DOM snapshots, and `get_console_message` to retrieve browser logs. Combine with `list_pages` and `select_page` to work across multiple browser tabs.
Does this require Chrome DevTools Protocol knowledge?
No. The CLI abstracts Chrome DevTools Protocol complexity into simple commands. Designers can run `chrome-devtools <command> --help` to see options without learning protocol internals.
What prerequisites do I need?
You need Node.js v20.19 or later and Chrome browser (stable version). After installation, run `chrome-devtools status` to verify the setup is working correctly.

Glossary

Largest Contentful Paint (LCP)
A Core Web Vital metric measuring when the largest visible element renders. Target is 2.5 seconds or less for good user experience.
Chrome DevTools Protocol
Low-level protocol enabling remote automation and inspection of Chromium-based browsers through programmatic APIs.
Web.dev Guidelines
Google's best practices for web performance, accessibility, SEO, and security documented at web.dev/learn.
MCP Server
Model Context Protocol server for extending Claude with external tools and APIs. This skill doesn't require one.

More in Design Ops

All →
Design Ops

AI Atelie

Local-first, open-source design tool. Bring your own AI agent (Claude Code, Kimi, Codex). Generate designs as HTML/JSX/CSS folders with instant tweaks, inspe...

aiatelie
Design Ops

AI Toolbox

Claude Code plugin with 13+ skills for code review, accessibility audits, design systems, and end-to-end feature planning backed by ClickUp.

Matisantillan11
Design Ops

Architect Playbook

Self-improving Claude Code audit skills for TypeScript/React codebases covering architecture, security, accessibility, performance, testing, and more.

BenSheridanEdwards
Design Ops

Claude Canvas

AI-orchestrated visual production for Obsidian Canvas. Create presentations, flowcharts, mood boards, and knowledge graphs with intelligent layout.