hapo:chrome-devtools

Automate browser interactions with Puppeteer for navigation, screenshots, and element analysis.

54|Updated Jan 21, 2026
One-click install
npx skills add https://github.com/haposoft/cafekit --skill hapo-chrome-devtools
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hapo:chrome-devtools
Source: https://github.com/haposoft/cafekit/tree/main/packages/spec/src/claude/skills/chrome-devtools
Command: npx skills add https://github.com/haposoft/cafekit --skill hapo-chrome-devtools

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates complex browser interactions and analysis using Puppeteer CLI scripts, simplifying tasks like screenshots, performance analysis, and web scraping.

Core Features & Use Cases

  • Browser Automation: Automate browser tasks like navigation, screenshot taking, and element interaction.
  • Performance Analysis: Measure and report Core Web Vitals and performance metrics.
  • Network Monitoring: Track HTTP requests and responses for debugging and optimization.
  • Web Scraping: Extract data from web pages for data mining and automation.
  • Use Case: Need to extract and analyze all the images from a website for SEO optimization? Use this Skill to automate the scraping and processing of images.

Quick Start

To start automating with Chrome DevTools, run the following command:

/hapo:chrome-devtools --url https://example.com --script "page.evaluate(() => document.querySelectorAll('img').map(img => img.src))"

Frequently Asked Questions about hapo:chrome-devtools

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

FAQPage Schema
How do I automate browser interactions and capture screenshots with Puppeteer?

To automate browser interactions with Puppeteer, you execute CLI scripts that navigate to URLs, capture screenshots, and interact with page elements. This Skill handles persistent sessions to automate these tasks directly.

How does Puppeteer measure Core Web Vitals for performance analysis?

Puppeteer measures Core Web Vitals by executing scripts that track and report performance metrics during page navigation. This Skill automates performance profiling to help analyze and optimize web page loading.

Can I use this Skill to extract data and scrape images from a website?

Yes, you can use this Skill for web scraping by executing JavaScript to query page elements. It automates extracting data like image sources from web pages, which is ideal for tasks like SEO optimization.

Do I need Puppeteer installed to run browser automation scripts for web scraping?

Yes, you need Puppeteer installed because this Skill requires it to execute CLI scripts and handle persistent browser sessions. Puppeteer acts as the core engine for navigating URLs and automating interactions.

What is the best way to track HTTP requests for network monitoring in a browser?

The best way to track HTTP requests for network monitoring is by using Puppeteer CLI scripts. This Skill automates network monitoring by tracking HTTP requests and responses for debugging and optimization.

Does browser automation work for analyzing local or untrusted web content?

Yes, browser automation works for analyzing local or untrusted web content. This Skill is specifically ideal for tasks like performance profiling and debugging when working with local or untrusted web environments.