Use this skill when the user asks to test, verify, interact with, or automate web pages and browsers. Trigger for requests involving Chrome automation, browser testing, web scraping, screenshot capture, element selection, or checking web applications. Also trigger when user mentions "browser tools" explicitly.
Automate Chrome for web testing and interaction using DevTools Protocol. Trigger for browser testing, web scraping, screenshot capture, element selection, or checking web applications.
/plugin marketplace add lttr/claude-marketplace/plugin install browser-tools@lttr-claude-marketplaceThis skill is limited to using the following tools:
scripts/browser-console.jsscripts/browser-cookies.jsscripts/browser-eval.jsscripts/browser-nav.jsscripts/browser-pick.jsscripts/browser-screenshot.jsscripts/browser-start.jsscripts/package.jsonChrome DevTools Protocol automation for agent-assisted web testing and interaction. Uses Chrome running on :9222 with remote debugging.
Run /browser-tools:setup once after plugin installation - This installs dependencies and creates global symlinks for all browser scripts.
When user asks to test, verify, or interact with web pages using browser tools:
IMPORTANT: Use command names directly (e.g., browser-start), NOT full paths (e.g., ~/bin/browser-start). Commands are in PATH after setup.
All scripts located in skills/browser-tools/scripts/:
By default use the persistent profile at /tmp/chrome-profile-browser-tools.
browser-start --profile # Persistent profile
browser-start # Fresh profile
Launch Chrome with remote debugging on port 9222. Use --profile to maintain login state between sessions.
browser-nav https://example.com
browser-nav https://example.com --new
Navigate to URLs. Use --new to open in new tab instead of current tab.
browser-eval 'document.title'
browser-eval 'document.querySelectorAll("a").length'
browser-eval 'Array.from(document.querySelectorAll("h1")).map(h => h.textContent)'
Execute JavaScript in active tab. Runs in async context. Use for:
browser-screenshot
Capture current viewport, returns temp file path. Use Read tool to show screenshot to user.
browser-pick # Uses default message "Select element(s)"
browser-pick "Select the submit button"
Interactive element picker - Launches UI overlay for user to click and select elements. Returns element details (tag, id, class, text, html, parent hierarchy). Message parameter is optional.
Use when:
Controls:
browser-console # Stream logs until Ctrl+C or kill
browser-console --url http://... # Navigate and exit after load
browser-console --url http://... --no-exit # Navigate then keep streaming
browser-console --level error,warn # Filter by log level
Capture console logs (log, warn, error, info, debug) from Chrome. Includes stack traces for errors and page errors.
Modes:
--url): Navigates to URL and exits after page load. Captures logs during page initialization.Claude Code usage:
# Page load logs - auto-exits after load
browser-console --url http://localhost:3000
# Workflow monitoring - run in background, kill when done
browser-console &
browser-nav http://localhost:3000
browser-eval "triggerSomeAction()"
# Check logs via BashOutput, kill via KillShell
browser-cookies
Display all cookies for current tab (domain, path, httpOnly, secure flags). Use for debugging auth issues.
# Start browser with persistent profile
browser-start --profile
# Navigate to dev server
browser-nav http://localhost:3000
# Test functionality
browser-eval 'document.querySelector("#new-feature").textContent'
# Take screenshot
SCREENSHOT=$(browser-screenshot)
# Then use Read tool to show screenshot at $SCREENSHOT path
browser-start --profile
browser-nav https://app.example.com/login
browser-cookies
browser-start
browser-nav https://example.com
browser-eval 'Array.from(document.querySelectorAll(".product")).map(p => ({name: p.querySelector(".title").textContent, price: p.querySelector(".price").textContent}))'
google-chrome binary--remote-debugging-port=9222/tmp/chrome-profile-browser-tools when using --profilechrome-remote-interface (installed via /browser-tools:setup)This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.