Chrome Devtools

secondsky/claude-skills

196 repo stars
Updated July 25, 2026
secondsky/claude-skills

Automate the browser with Puppeteer CLI scripts for screenshots, performance analysis, scraping, and form automation.

About

This skill provides browser automation via Puppeteer CLI scripts for screenshots, performance analysis, network monitoring, web scraping, and form automation. A developer uses it to verify and debug web pages, capture visuals, or script repetitive browser interactions.

Puppeteer CLI scripts
Screenshots & performance analysis
Network monitoring & scraping
Form automation & JS debugging

Chrome Devtools by the numbers

Data as of Jul 28, 2026 (Skillselion catalog sync)

/plugin marketplace add secondsky/claude-skills

/plugin install chrome-devtools@claude-skills

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/secondsky/claude-skills/plugins/chrome-devtools.svg)](https://skillselion.com/skills/secondsky/claude-skills/plugins/chrome-devtools)

repo stars	★ 196
Last updated	July 25, 2026
Repository	secondsky/claude-skills ↗

What it does

Automate the browser with Puppeteer CLI scripts for screenshots, performance analysis, scraping, and form automation.

README.md

Chrome DevTools Agent Skill

Browser automation, debugging, and performance analysis using Puppeteer CLI scripts.

Overview

This skill enables Claude to automate browsers, take screenshots, analyze performance, monitor network traffic, perform web scraping, automate forms, and debug JavaScript through executable Puppeteer scripts.

Features

Browser Navigation - Navigate to URLs with configurable wait conditions
Screenshots - Capture full pages or specific elements with auto-compression
Form Automation - Fill fields and click buttons with CSS or XPath selectors
DOM Inspection - Extract interactive elements with metadata for debugging
Performance Analysis - Measure Core Web Vitals and record traces
Network Monitoring - Track HTTP requests/responses
Console Monitoring - Capture console messages and errors

Installation

1. System Dependencies (Linux/WSL only)

cd skills/chrome-devtools/scripts
./install-deps.sh

2. Node Dependencies

# Preferred: Using bun (faster)
bun install

# Alternative: Using npm
npm install

3. Optional: ImageMagick (for auto-compression)

# macOS
brew install imagemagick

# Ubuntu/Debian
sudo apt-get install imagemagick

Quick Start

# Navigate to URL
bun navigate.js --url https://example.com

# Take screenshot
bun screenshot.js --url https://example.com --output page.png

# Fill form field
bun fill.js --selector "#email" --value "user@example.com"

# Click button
bun click.js --selector "button[type=submit]"

# Discover selectors
bun snapshot.js --url https://example.com | jq '.elements'