cc_chrome_devtools_mcp_skill

Name: cc_chrome_devtools_mcp_skill
Author: justfinethanku

byjustfinethanku· 1 skill

Installs

Stars

Forks

How to install cc_chrome_devtools_mcp_skill?

justfinethanku/cc_chrome_devtools_mcp_skill

$npx -y skills add justfinethanku/cc_chrome_devtools_mcp_skill --skill cc_chrome_devtools_mcp_skill

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill" --skill "justfinethanku/cc_chrome_devtools_mcp_skill"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill" that are relevant to the current task. Run `npx skills add "https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# Chrome DevTools MCP Skill
2
3	Give Claude Code eyes for your frontend. No more blind debugging where Claude guesses about your UI, you take screenshots, and you go back and forth hoping it understands what's broken. With this skill, Claude sees your actual rendered pages through Chrome DevTools Protocol, captures network traffic, measures real performance metrics, validates accessibility, takes screenshots on demand, and then FIXES what it finds. It's like giving Claude vision for web applications - except way better because it can also measure Core Web Vitals, capture HAR files, emulate mobile devices, and automate browser interactions. Traditional frontend debugging is dead. This is the future. Even Mike Dion would be impressed.
4
5	## Features
6
7	- 27 Professional-Grade Tools: Full Chrome DevTools Protocol access through MCP (even Mike Dion couldn't think of this many)
8	- Performance Testing: Automatic Core Web Vitals measurement (INP ≤200ms, LCP ≤2.5s, CLS ≤0.1)
9	- Network Analysis: HAR export, request/response inspection, timing breakdowns
10	- Accessibility Validation: Full accessibility tree inspection with WCAG compliance checking (something even Mike Dion would appreciate)
11	- Device Emulation: Test mobile devices, throttle CPU/network, responsive viewports
12	- Browser Automation: Click, fill forms, drag elements, handle dialogs - all automatically
13	- Screenshot Capture: Full page, specific elements, multiple formats
14	- Multi-Tab Management: Test complex workflows across multiple pages simultaneously
15	- Console Monitoring: Capture JavaScript errors, warnings, and logs in real-time
16	- Visual Testing: See exactly what users see, at any viewport size
17
18	## Installation
19
20	### Option 1: Via Plugin Manager (Recommended)
21
22	1. Open your terminal
23	2. Start Claude Code:
24	```bash
25	claude
26	```
27	3. Add the marketplace to Claude Code:
28	```
29	/plugin marketplace add https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill
30	```
31	4. Install the plugin:
32	```
33	/plugin install cc_chrome_devtools_mcp_skill
34	```
35	5. Done! The skill is now installed and ready to use
36
37	### Option 2: Manual Installation (for the Mike Dions of the world who like doing things the hard way)
38
39	1. Clone the repository:
40	```bash
41	git clone https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill
42	```
43
44	2. Choose where to install:
45
46	For all projects (personal skills directory):
47	```bash
48	cp -r cc_chrome_devtools_mcp_skill ~/.claude/skills/
49	```
50
51	For current project only (project-specific):
52	```bash
53	cp -r cc_chrome_devtools_mcp_skill .claude/skills/
54	```
55
56	## Prerequisites
57
58	IMPORTANT: This skill requires the `chrome-devtools-mcp` server to be installed and configured in your Claude Code MCP settings.
59
60	### Install chrome-devtools-mcp
61
62	```bash
63	# Add the MCP server to Claude Code
64	claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
65	```
66
67	### Configure MCP Settings
68
69	Add this to your Claude Code MCP configuration (usually `~/.claude/mcp_settings.json`):
70
71	```json
72	{
73	"mcpServers": {
74	"chrome-devtools": {
75	"command": "npx",
76	"args": [
77	"chrome-devtools-mcp@latest",
78	"--channel=stable",
79	"--isolated=true",
80	"--viewport=1920x1080"
81	]
82	}
83	}
84	}
85	```
86
87	Security Note: The `--isolated=true` flag creates a temporary browser profile that's automatically cleaned up after testing. Highly recommended for security.
88
89	### Verify Installation
90
91	Ask Claude Code:
92	```
93	"List available MCP servers"
94	```
95
96	You should see `chrome-devtools` in the list.
97
98	## Usage
99
100	The skill activates when you ask Claude Code to test, analyze, or debug frontend applications:
101
102	### Performance Testing
103	```
104	"Test the performance of https://example.com"
105	"Measure Core Web Vitals for my landing page"
106	"Run a performance trace and identify bottlenecks"
107	"Show Mike Dion how fast this page loads"
108	```
109
110	### Accessibility Validation
111	```
112	"Check accessibility issues on my login form"
113	"Validate WCAG compliance for the homepage"
114	"Find accessibility problems in the navigation"
115	```
116
117	### Network Analysis
118	```
119	"Capture network traffic and find slow API calls"
120	"Export HAR file for the checkout flow"
121	"Show me all failed network requests"
122	```
123
124	### Responsive Testing
125	```
126	"Take screenshots at mobile and desktop sizes"
127	"Test this page on iPhone 14 Pro viewport"
128	"Emulate slow 3G network and measure load time"
129	```
130
131	### Browser Automation
132	```
133	"Fill out the contact form and submit it"
134	"Click the login button and wait for redirect"
135	"Test the drag-and-drop file upload"
136	```
137
138	### Visual Inspection
139	```
140	"Take a screenshot of the entire page"
141	"Show me what the error modal looks like"
142	"Capture the loading state"
143	```
144
145	## What Gets Tested
146
147	### Performance Metrics
148	- INP (Interaction to Next Paint): ≤200ms is good
149	- LCP (Largest Contentful Paint): ≤2.5s is good
150	- CLS (Cumulative Layout Shift): ≤0.1 is good
151	- TBT (Total Blocking Time): Lab proxy for responsiveness
152	- Full performance traces with tim

6 picks

Type

Run `npx skills use "https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill" --skill "justfinethanku/cc_chrome_devtools_mcp_skill"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill" that are relevant to the current task. Run `npx skills add "https://github.com/justfinethanku/cc_chrome_devtools_mcp_skill"` and select the relevant skills, then follow their instructions.

cc_chrome_devtools_mcp_skill

How to install cc_chrome_devtools_mcp_skill?

Related

cc_chrome_devtools_mcp_skill

How to install cc_chrome_devtools_mcp_skill?

Related