skills.rest
justfinethanku
justfinethankuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

cc_chrome_devtools_mcp_skill

Measure Core Web Vitals and export HAR files via Chrome DevTools Protocol.

40|4|Updated Oct 24, 2025
Search Tags:#performance#accessibility#browser automation#web testing#chrome devtools#core web vitals#frontend debugging
One-click install
npx skills add https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill --skill cc-chrome-devtools-mcp-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cc_chrome_devtools_mcp_skill
Source: https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill/tree/main/.
Command: npx skills add https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill --skill cc-chrome-devtools-mcp-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools-mcp, and includes references (resource) components.

What problem does it solve?

This Skill eliminates the guesswork from frontend debugging and testing. Instead of Claude guessing about UI issues or relying on manual screenshots, it gains direct "vision" into your web applications. It automates tedious tasks like performance testing, accessibility validation, and network analysis, allowing Claude to precisely identify and fix problems, saving you significant time and reducing complexity.

Core Features & Use Cases

  • Performance Testing: Automatically measure Core Web Vitals (INP, LCP, CLS) and identify performance bottlenecks.
  • Accessibility Validation: Inspect the accessibility tree, validate WCAG compliance, and ensure inclusive user experiences.
  • Browser Automation: Automate complex user flows like form filling, button clicks, and multi-tab navigation.
  • Use Case: Imagine your website's Core Web Vitals are failing. Use this skill to automatically run a performance trace, identify the largest contentful paint element, and get actionable recommendations to improve load speed.

Quick Start

Test the performance of https://example.com and identify any Core Web Vitals issues.

Frequently Asked Questions about cc_chrome_devtools_mcp_skill

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

FAQPage Schema
How do I measure Core Web Vitals for my website?▼

Core Web Vitals measure performance through INP, LCP, and CLS metrics. This Skill automatically captures these measurements via Chrome DevTools Protocol, identifying bottlenecks like largest contentful paint elements and layout shifts so you can prioritize fixes.

Can I automate browser testing and performance validation without manual screenshots?▼

Yes. Browser automation through Chrome DevTools Protocol lets you script form fills, clicks, and multi-tab navigation while capturing real-time performance traces, screenshots, and accessibility snapshots—eliminating manual testing overhead.

How do I validate accessibility compliance for my web application?▼

Accessibility validation inspects the accessibility tree and WCAG requirements through Chrome DevTools Protocol. The Skill generates an accessibility snapshot showing violations and inclusive design gaps without manual audits.

What network analysis data can I extract from a website?▼

HAR export captures detailed network activity including requests, responses, timing, and resource sizes. This reveals slow endpoints, waterfall bottlenecks, and third-party load impact for performance optimization.

Can I test how my site performs on different devices and browsers?▼

Device emulation and emulation modes let you simulate various screen sizes, network conditions, and browser environments via Chrome DevTools Protocol, testing responsive design and performance across contexts without physical devices.

Do I need a local Chrome installation to use this Skill?▼

Yes. The Skill requires Chrome DevTools Protocol access, which means Chrome or Chromium must be available in your environment. It works with Chrome-based applications and automation scenarios where DevTools access is configured.

Related Skills

Explore More Software Engineering Skills→
zhangdszqzhangdszq
1

baoyu-url-to-markdown

Fetches URLs via Chrome DevTools Protocol and converts pages to Markdown.

Community
Advanced
PantaniPantani
30

tdmcp-test-coverage

Run coverage harnesses, parse results, and spawn targeted test writers.

Community
Advanced
s-hiraokus-hiraoku
21

mcp-chrome-devtools

Automates Chrome DevTools tasks for debugging pages, inspecting network requests, and capturing snapshots.

Community
Basic
CENKSSSCENKSSS

a11y-ally

Audit web accessibility with axe-core, pa11y, and Lighthouse.

Community
Advanced