chrome-devtools_mrgoonie

Name: chrome-devtools_mrgoonie
Author: jackspace

15stars7forks

How to install chrome-devtools_mrgoonie?

jackspace/claudeskillz/chrome-devtools_mrgoonie

$npx -y skills add jackspace/ClaudeSkillz --skill chrome-devtools_mrgoonie

Installs into the current project.

Summary

Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.

Files · 1

View on GitHub

SKILL.md

1	# Chrome DevTools Agent Skill
2
3	Browser automation via executable Puppeteer scripts. All scripts output JSON for easy parsing.
4
5	## Quick Start
6
7	CRITICAL: Always check `pwd` before running scripts.
8
9	### Installation
10
11	#### Step 1: Install System Dependencies (Linux/WSL only)
12
13	On Linux/WSL, Chrome requires system libraries. Install them first:
14
15	```bash
16	pwd # Should show current working directory
17	cd .claude/skills/chrome-devtools/scripts
18	./install-deps.sh # Auto-detects OS and installs required libs
19	```
20
21	Supports: Ubuntu, Debian, Fedora, RHEL, CentOS, Arch, Manjaro
22
23	macOS/Windows: Skip this step (dependencies bundled with Chrome)
24
25	#### Step 2: Install Node Dependencies
26
27	```bash
28	npm install # Installs puppeteer, debug, yargs
29	```
30
31	#### Step 3: Install ImageMagick (Optional, Recommended)
32
33	ImageMagick enables automatic screenshot compression to keep files under 5MB:
34
35	macOS:
36	```bash
37	brew install imagemagick
38	```
39
40	Ubuntu/Debian/WSL:
41	```bash
42	sudo apt-get install imagemagick
43	```
44
45	Windows:
46	```powershell
47	# Option 1: Chocolatey (recommended)
48	choco install imagemagick
49
50	# Option 2: Scoop
51	scoop install imagemagick
52
53	# Option 3: WinGet
54	winget install ImageMagick.ImageMagick
55
56	# Option 4: Manual download from https://imagemagick.org/script/download.php#windows
57	```
58
59	Fedora/RHEL/CentOS:
60	```bash
61	sudo dnf install ImageMagick
62	# or for older versions:
63	sudo yum install ImageMagick
64	```
65
66	Arch/Manjaro:
67	```bash
68	sudo pacman -S imagemagick
69	```
70
71	Verify installation:
72	```bash
73	# Linux/macOS:
74	magick -version # or: convert -version
75
76	# Windows:
77	magick -version
78	# or: magick.exe -version
79	```
80
81	Without ImageMagick, screenshots >5MB will not be compressed (may fail to load in Gemini/Claude).
82
83	### Test
84	```bash
85	node navigate.js --url https://example.com
86	# Output: {"success": true, "url": "https://example.com", "title": "Example Domain"}
87	```
88
89	## Available Scripts
90
91	All scripts are in `.claude/skills/chrome-devtools/scripts/`
92
93	CRITICAL: Always check `pwd` before running scripts.
94
95	### Script Usage
96	- `./scripts/README.md`
97
98	### Core Automation
99	- `navigate.js` - Navigate to URLs
100	- `screenshot.js` - Capture screenshots (full page or element)
101	- `click.js` - Click elements
102	- `fill.js` - Fill form fields
103	- `evaluate.js` - Execute JavaScript in page context
104
105	### Analysis & Monitoring
106	- `snapshot.js` - Extract interactive elements with metadata
107	- `console.js` - Monitor console messages/errors
108	- `network.js` - Track HTTP requests/responses
109	- `performance.js` - Measure Core Web Vitals + record traces
110
111	## Usage Patterns
112
113	### Single Command
114	```bash
115	pwd # Should show current working directory
116	cd .claude/skills/chrome-devtools/scripts
117	node screenshot.js --url https://example.com --output ./docs/screenshots/page.png
118	```
119	Important: Always save screenshots to `./docs/screenshots` directory.
120
121	### Automatic Image Compression
122	Screenshots are automatically compressed if they exceed 5MB to ensure compatibility with Gemini API and Claude Code (which have 5MB limits). This uses ImageMagick internally:
123
124	```bash
125	# Default: auto-compress if >5MB
126	node screenshot.js --url https://example.com --output page.png
127
128	# Custom size threshold (e.g., 3MB)
129	node screenshot.js --url https://example.com --output page.png --max-size 3
130
131	# Disable compression
132	node screenshot.js --url https://example.com --output page.png --no-compress
133	```
134
135	Compression behavior:
136	- PNG: Resizes to 90% + quality 85 (or 75% + quality 70 if still too large)
137	- JPEG: Quality 80 + progressive encoding (or quality 60 if still too large)
138	- Other formats: Converted to JPEG with compression
139	- Requires ImageMagick installed (see imagemagick skill)
140
141	Output includes compression info:
142	```json
143	{
144	"success": true,
145	"output": "/path/to/page.png",
146	"compressed": true,
147	"originalSize": 8388608,
148	"size": 3145728,
149	"compressionRatio": "62.50%",
150	"url": "https://example.com"
151	}
152	```
153
154	### Chain Commands (reuse browser)
155	```bash
156	# Keep browser open with --close false
157	node navigate.js --url https://example.com/login --close false
158	node fill.js --selector "#email" --value "user@example.com" --close false
159	node fill.js --selector "#password" --value "secret" --close false
160	node click.js --selector "button[type=submit]"
161	```
162
163	### Parse JSON Output
164	```bash
165	# Extract specific fields with jq
166	node performance.js --url https://example.com \| jq '.vitals.LCP'
167
168	# Save to file
169	node network.js --url https://example.com --output /tmp/requests.json
170	```
171
172	## Execution Protocol
173
174	### Working Directory Verification
175
176	BEFORE executing any script:
177	1. Check current working directory with `pwd`
178	2. Verify in `.claude/skills/chrome-devtools/scripts/` directory
179	3. If wrong directory, `cd` to correct location
180	4. Use absolu

People who liked this also viewed

6 picks

Type

chrome-devtools_mrgoonie

15stars7forks

View on GitHub

How to install chrome-devtools_mrgoonie?

jackspace/claudeskillz/chrome-devtools_mrgoonie

$npx -y skills add jackspace/ClaudeSkillz --skill chrome-devtools_mrgoonie

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Chrome DevTools Agent Skill
2
3	Browser automation via executable Puppeteer scripts. All scripts output JSON for easy parsing.
4
5	## Quick Start
6
7	CRITICAL: Always check `pwd` before running scripts.
8
9	### Installation
10
11	#### Step 1: Install System Dependencies (Linux/WSL only)
12
13	On Linux/WSL, Chrome requires system libraries. Install them first:
14
15	```bash
16	pwd # Should show current working directory
17	cd .claude/skills/chrome-devtools/scripts
18	./install-deps.sh # Auto-detects OS and installs required libs
19	```
20
21	Supports: Ubuntu, Debian, Fedora, RHEL, CentOS, Arch, Manjaro
22
23	macOS/Windows: Skip this step (dependencies bundled with Chrome)
24
25	#### Step 2: Install Node Dependencies
26
27	```bash
28	npm install # Installs puppeteer, debug, yargs
29	```
30
31	#### Step 3: Install ImageMagick (Optional, Recommended)
32
33	ImageMagick enables automatic screenshot compression to keep files under 5MB:
34
35	macOS:
36	```bash
37	brew install imagemagick
38	```
39
40	Ubuntu/Debian/WSL:
41	```bash
42	sudo apt-get install imagemagick
43	```
44
45	Windows:
46	```powershell
47	# Option 1: Chocolatey (recommended)
48	choco install imagemagick
49
50	# Option 2: Scoop
51	scoop install imagemagick
52
53	# Option 3: WinGet
54	winget install ImageMagick.ImageMagick
55
56	# Option 4: Manual download from https://imagemagick.org/script/download.php#windows
57	```
58
59	Fedora/RHEL/CentOS:
60	```bash
61	sudo dnf install ImageMagick
62	# or for older versions:
63	sudo yum install ImageMagick
64	```
65
66	Arch/Manjaro:
67	```bash
68	sudo pacman -S imagemagick
69	```
70
71	Verify installation:
72	```bash
73	# Linux/macOS:
74	magick -version # or: convert -version
75
76	# Windows:
77	magick -version
78	# or: magick.exe -version
79	```
80
81	Without ImageMagick, screenshots >5MB will not be compressed (may fail to load in Gemini/Claude).
82
83	### Test
84	```bash
85	node navigate.js --url https://example.com
86	# Output: {"success": true, "url": "https://example.com", "title": "Example Domain"}
87	```
88
89	## Available Scripts
90
91	All scripts are in `.claude/skills/chrome-devtools/scripts/`
92
93	CRITICAL: Always check `pwd` before running scripts.
94
95	### Script Usage
96	- `./scripts/README.md`
97
98	### Core Automation
99	- `navigate.js` - Navigate to URLs
100	- `screenshot.js` - Capture screenshots (full page or element)
101	- `click.js` - Click elements
102	- `fill.js` - Fill form fields
103	- `evaluate.js` - Execute JavaScript in page context
104
105	### Analysis & Monitoring
106	- `snapshot.js` - Extract interactive elements with metadata
107	- `console.js` - Monitor console messages/errors
108	- `network.js` - Track HTTP requests/responses
109	- `performance.js` - Measure Core Web Vitals + record traces
110
111	## Usage Patterns
112
113	### Single Command
114	```bash
115	pwd # Should show current working directory
116	cd .claude/skills/chrome-devtools/scripts
117	node screenshot.js --url https://example.com --output ./docs/screenshots/page.png
118	```
119	Important: Always save screenshots to `./docs/screenshots` directory.
120
121	### Automatic Image Compression
122	Screenshots are automatically compressed if they exceed 5MB to ensure compatibility with Gemini API and Claude Code (which have 5MB limits). This uses ImageMagick internally:
123
124	```bash
125	# Default: auto-compress if >5MB
126	node screenshot.js --url https://example.com --output page.png
127
128	# Custom size threshold (e.g., 3MB)
129	node screenshot.js --url https://example.com --output page.png --max-size 3
130
131	# Disable compression
132	node screenshot.js --url https://example.com --output page.png --no-compress
133	```
134
135	Compression behavior:
136	- PNG: Resizes to 90% + quality 85 (or 75% + quality 70 if still too large)
137	- JPEG: Quality 80 + progressive encoding (or quality 60 if still too large)
138	- Other formats: Converted to JPEG with compression
139	- Requires ImageMagick installed (see imagemagick skill)
140
141	Output includes compression info:
142	```json
143	{
144	"success": true,
145	"output": "/path/to/page.png",
146	"compressed": true,
147	"originalSize": 8388608,
148	"size": 3145728,
149	"compressionRatio": "62.50%",
150	"url": "https://example.com"
151	}
152	```
153
154	### Chain Commands (reuse browser)
155	```bash
156	# Keep browser open with --close false
157	node navigate.js --url https://example.com/login --close false
158	node fill.js --selector "#email" --value "user@example.com" --close false
159	node fill.js --selector "#password" --value "secret" --close false
160	node click.js --selector "button[type=submit]"
161	```
162
163	### Parse JSON Output
164	```bash
165	# Extract specific fields with jq
166	node performance.js --url https://example.com \| jq '.vitals.LCP'
167
168	# Save to file
169	node network.js --url https://example.com --output /tmp/requests.json
170	```
171
172	## Execution Protocol
173
174	### Working Directory Verification
175
176	BEFORE executing any script:
177	1. Check current working directory with `pwd`
178	2. Verify in `.claude/skills/chrome-devtools/scripts/` directory
179	3. If wrong directory, `cd` to correct location
180	4. Use absolu

People who liked this also viewed

6 picks

Type