skills.rest
HermeticOrmus
HermeticOrmusCOMMUNITY
Explore all skills by this author →
Website𝕏@dbodartmGitHub

browser-devtools-mcp

Inspect CSS, computed styles, and element properties via Chrome DevTools MCP.

89|14|Updated Nov 15, 2025
Search Tags:#automation#debugging#mcp#devtools#browser#screenshot#ui inspection
One-click install
npx skills add https://github.com/HermeticOrmus/LibreUIUX-Claude-Code --skill browser-devtools-mcp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-devtools-mcp
Source: https://github.com/HermeticOrmus/LibreUIUX-Claude-Code/tree/main/plugins/mcp-integrations/skills/browser-devtools-mcp
Command: npx skills add https://github.com/HermeticOrmus/LibreUIUX-Claude-Code --skill browser-devtools-mcp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill bridges the gap between design and implementation by enabling live UI inspection, automated screenshot-to-code workflows, and visual debugging directly within the browser environment.

Core Features & Use Cases

  • Live UI Inspection: Programmatically inspect CSS, computed styles, and element properties.
  • Screenshot-to-Code: Generate code representations from UI screenshots.
  • Visual Debugging: Identify and debug layout issues with visual overlays.
  • Responsive Testing: Capture and analyze UIs across various device breakpoints.
  • Use Case: You can use this skill to automatically capture screenshots of your website on mobile, tablet, and desktop, then analyze them for any layout breaks or usability issues.

Quick Start

Use the browser-devtools-mcp skill to capture a full-page screenshot of the current website and save it as 'live-ui.png'.

Frequently Asked Questions about browser-devtools-mcp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I inspect live UI computed styles and CSS properties programmatically?▼

You can inspect live UI computed styles programmatically by integrating Chrome DevTools and browser automation via MCP to query element properties directly within the active browser environment.

Can I generate code from a browser screenshot for UI recreation?▼

Yes, you can generate code from browser screenshots by using the screenshot-to-code workflow, which captures visual UI layouts and translates them into code representations for automated recreation.

Do I need Playwright MCP to perform visual debugging on live websites?▼

Yes, Playwright MCP is required for browser control, alongside Chrome DevTools Protocol for deep inspection, to effectively identify and debug layout issues using visual overlays on live websites.

What is the best way to automate responsive testing across device breakpoints?▼

The best way to automate responsive testing across device breakpoints is to programmatically capture and analyze full-page screenshots on mobile, tablet, and desktop to detect layout breaks and usability issues.

When should I not use browser automation for UI inspection?▼

You should avoid browser automation for UI inspection when analyzing static design assets without a live DOM, as this approach requires a running browser environment and CDP integration to query computed styles and element properties.

Related Skills

Explore More Software Engineering Skills→
GitnappGitnapp

claude-design-cdp

Automate Claude Design web interfaces via Chrome DevTools Protocol and Playwright.

Community
Advanced
flight505flight505
9

story-generation

Generate Storybook CSF 3.0 stories from React, Vue, and Svelte components.

Community
Intermediate
CleanExpoCleanExpo
1

playwright-browser

Automate headless browser tasks and end-to-end tests with Playwright.

Community
Advanced
pacphipacphi
14

Chrome DevTools

Debug web pages via Chrome DevTools MCP with performance, network, and DOM inspection.

Community
Advanced