Browser Skill for Claude

Minimal Chrome DevTools Protocol tools for browser automation and scraping. Use when you need to start Chrome, navigate pages, execute JavaScript, take screenshots, or interactively pick DOM elements. Triggers include "browse website", "scrape page", "take screenshot", "automate browser", "extract DOM", "web scraping".

3k tokens

context cost

the whole folder, loaded on every use

files

ships runnable scripts

copies elsewhere

how many repositories repackaged it

303

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/iamzhihuix/happy-claude-skills --skill browser

The instruction itself

9 sections, as written by the author

Browser Tools

Minimal CDP tools for collaborative site exploration and scraping.

Credits: Based on Mario Zechner's article What if you don't need MCP?, adapted from Factory.ai.

Setup

Before first use, install dependencies:

npm install --prefix skills/browser

Start Chrome

./skills/browser/scripts/start.js              # Fresh profile
./skills/browser/scripts/start.js --profile    # Copy your profile (cookies, logins)

Start Chrome on :9222 with remote debugging.

Navigate

./skills/browser/scripts/nav.js https://example.com
./skills/browser/scripts/nav.js https://example.com --new

Navigate current tab or open new tab.

Evaluate JavaScript

./skills/browser/scripts/eval.js 'document.title'
./skills/browser/scripts/eval.js 'document.querySelectorAll("a").length'

Execute JavaScript in active tab (async context).

IMPORTANT: The code must be a single expression or use IIFE for multiple statements:

Single expression: 'document.title'
Multiple statements: '(() => { const x = 1; return x + 1; })()'
Avoid newlines in the code string - keep it on one line

Screenshot

./skills/browser/scripts/screenshot.js

Screenshot current viewport, returns temp file path.

Pick Elements

./skills/browser/scripts/pick.js "Click the submit button"

Interactive element picker. Click to select, Cmd/Ctrl+Click for multi-select, Enter to finish.

Workflow

Start Chrome with start.js --profile to mirror your authenticated state.
Drive navigation via nav.js https://target.app or open secondary tabs with --new.
Inspect the DOM using eval.js for quick counts, attribute checks, or extracting JSON payloads.
Capture artifacts with screenshot.js for visual proof or pick.js when you need precise selectors or text snapshots.

Usage Notes

Start Chrome first before using other tools
The --profile flag syncs your actual Chrome profile so you're logged in everywhere
JavaScript evaluation runs in an async context in the page
Pick tool allows you to visually select DOM elements by clicking on them

Other skills for the same job

different authors, same section of the catalogue

Safe Browser

by browserbase

vendor

Build local constrained-browser agents with a safe_browser tool that owns CDP, enforces a domain allowlist with Fetch interception, and lets a runtime Claude Agent SDK agent complete browsing tasks without raw browser, shell, or CDP access. Use when the user wants an agent to browse or scrape while staying on approved domains, demo blocked off-domain navigation, or generate a safe browser client.

17k tokens

Kimi Webbridge

by mxyhi

| Kimi WebBridge lets AI control the user's real browser — navigate, click, type, read, screenshot, and interact with any website using the user's actual login sessions. Use this skill whenever the user wants to interact with websites, automate browser tasks, scrape web content, or perform any action requiring a real browser. Also use when the user mentions "browser", "webpage", "open URL", "screenshot", or asks to read/interact with any website. Use even for simple-sounding browser requests — the daemon handles all complexity.

4k tokens

Brightdata Core Workflow A

by ComeOnOliver

| Scrape structured data with Bright Data Scraping Browser using Playwright/Puppeteer. Use when scraping JavaScript-rendered pages, SPAs, or sites requiring browser interaction. Trigger with phrases like "brightdata scraping browser", "brightdata playwright", "brightdata puppeteer", "scrape SPA with brightdata", "browser scraping".

2k tokens

Agentcore Browser Web Scraping

by aws-samples

Build production web scraping on Bedrock AgentCore Browser — connect Playwright over signed CDP WebSocket, drive extraction with an LLM agent over fixed tool primitives (navigate, scroll, extract-by-selector, screenshot), reuse login state via Browser Profiles with a DCV live-view login flow, detect login walls without false positives, and route through an external proxy. Use when scraping dynamic or login-gated sites (X/Twitter, Reddit, Instagram, YouTube, forums) with AgentCore Browser, when scraped results come back empty on lazy-loaded pages, when Google SSO fails silently in the cloud browser, or when a target site blocks AWS egress IPs.

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

Use this skill to query your Google NotebookLM notebooks directly from Claude Code for source-grounded, citation-backed answers from Gemini. Browser automation, library management, persistent auth. Drastically reduced hallucinations through document-only responses.

Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based testing.

Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.

2k tokens

How to use it

Copy the folder

Take iamzhihuix/browser from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.

Install what it needs

The instructions reference npm. Without those the skill loads but fails at the first command.