Stats
Actions
Tags
From claude-inspect
Launches Chromium browser for visual frontend inspection: select elements by hover/click, analyze components, screenshots, network logs, perf metrics.
How this skill is triggered — by the user, by Claude, or both
Slash command
/claude-inspect:inspectThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Opens a Chromium browser, navigates to the URL, and enables visual element selection mode.
Opens a Chromium browser, navigates to the URL, and enables visual element selection mode.
The CLI is located relative to this skill's base directory. Construct the path using the base directory provided at the top of this prompt:
CLI_PATH = <base directory>/../../dist/cli.js
All commands below should be run as: node <CLI_PATH> <command> [args]
node <CLI_PATH> launch $ARGUMENTS to start the browser[Component #N] in chat), read the selection file from .claude-inspect/selections/N.txt for full component detailsnode <CLI_PATH> launch <url> [--headless] # Launch browser
node <CLI_PATH> navigate <url> # Navigate
node <CLI_PATH> screenshot [--fullpage] # Save screenshot
node <CLI_PATH> close # Close browser
node <CLI_PATH> inspect <selector> # Inspect by CSS selector
node <CLI_PATH> select start # Start visual selection
node <CLI_PATH> select wait [--timeout=N] # Wait for user click
node <CLI_PATH> select stop # Stop selection
node <CLI_PATH> logs [--type=error|warn|all] # Console logs
node <CLI_PATH> network [--failed] # Network requests
node <CLI_PATH> perf # Core Web Vitals
node <CLI_PATH> components [--selector=<s>] # Component tree
node <CLI_PATH> find-component <name> # Find source file
node <CLI_PATH> status # Check status
All data is saved to .claude-inspect/ as files. Use Read tool for full data.
| Command | Output |
|---|---|
| screenshot | .claude-inspect/screenshots/{timestamp}.png |
| logs | .claude-inspect/logs/{timestamp}.json |
| network | .claude-inspect/network/{timestamp}.json |
| perf | .claude-inspect/perf/{timestamp}.json |
| inspect | .claude-inspect/inspections/{timestamp}.json |
| components | .claude-inspect/components/{timestamp}.json |
| select wait | .claude-inspect/selections/{timestamp}.json |
npx claudepluginhub tnsqjahong/claude-inspect --plugin claude-inspectControls a live Chrome browser via puppeteer-core for automation, testing, and performance auditing. Use for clicking, typing, screenshots, DOM/AX tree, network interception, HAR export, Lighthouse audits, and device emulation.
Tests and debugs browser apps using Chrome DevTools MCP to inspect DOM, capture console errors, analyze network requests, profile performance, and verify visuals.
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.