Skills Guide

Browser Automation

VerifiedCaution

Automate browser interactions: open pages, get interactive snapshots, click, fill forms, take screenshots and read JS-rendered content.

Download and use
Sby Skills Guide Bot
DevelopmentIntermediate
7/25/2026
Claude Code
#browser-automation#web-scraping#javascript-rendering#dom-interaction#screenshot

Recommended for

Backend developerClaude CodeCode reviewFrontend developerFullstack developerRefactoring

Automated summary

Automates a real browser to open web pages, interact with elements (click, fill), take screenshots, and extract JavaScript-rendered content.

Strengths

  • Real browser interaction handling dynamic JS rendering.
  • Provides interactive snapshot with refs for precise actions.
  • Maintains session state across commands without context loss.
  • Structured JSON output for easy integration.

Limitations

  • Requires prior installation of the agent-browser CLI tool.
  • Only supported on Linux (per declared compatibility).
  • Does not replace agent-search for simple information retrieval.
When to use it

Use when you need full browser interaction (click, form) or JavaScript-rendered content that static reading cannot provide.

When not to use it

Avoid for simple public information searches or static pages; prefer agent-search instead.

Security analysis

Caution
Quality score90/100

The skill instructs an agent to use a browser automation tool via exec_command. Although it contains explicit guardrails (no shell chaining, read-first, avoid destructive actions), the combination of browser control and shell access warrants a 'caution' rating.

Findings
  • •Uses exec_command to invoke a browser automation CLI, which inherently carries the risk of unintended browser actions if the agent is misled.
  • •While the skill includes guardrails against destructive actions and shell chaining, the underlying tool's power demands caution.
How this analysis is made

Examples

Open a page and get interactive snapshot
Open https://example.com and show me all clickable elements with their refs.
Click a button and capture the result
Go to https://example.com/form, click the button with ref @e2, then take a screenshot of the page.
Fill a form and submit
Navigate to https://example.com/login, fill the username field @e1 with 'testuser', fill the password field @e2 with 'password123', then click the submit button @e3.

name: "agent-browser" description: "浏览器自动化 workflow：打开网页、获取可交互 snapshot、点击、填写表单、截图与读取 JS 渲染内容。用户需要真实 browser interaction、DOM refs、页面操作或截图时使用。" compatibility: "linux" allowed-tools: "exec_command" metadata: hypo.category: "pure" hypo.backend: "exec" hypo.exec_profile: "cli-json" hypo.triggers: "browser,浏览器,网页,页面,网页交互,网页操作,点击,点一下,按钮,链接,表单,截图,打开网页,js渲染,dom,页面元素,snapshot" hypo.risk: "medium" hypo.dependencies: "agent-browser" hypo.cli_package: "agent-browser" hypo.cli_commands: "agent-browser" hypo.io_format: "json-stdio"

Agent Browser 使用指南

定位 (Positioning)

agent-browser 是真实浏览器自动化 workflow，用于打开网页、读取 JS 渲染后的页面内容、生成带 ref 的交互式 snapshot、执行点击/填写/等待/截图等动作。

适用场景 (Use When)

  • 用户需要真实 browser interaction，而不是普通网页搜索。
  • 页面依赖 JavaScript 渲染，agent-search 或直接 web_read 不够用。
  • 用户要点击按钮、填写表单、等待页面状态变化、抓取交互元素或截图。

与 Agent Search 的边界

  • 普通公开信息检索、事实核验、读静态页面，优先使用 agent-search。
  • 只有当需要真实浏览器状态、页面交互、DOM refs 或 screenshot 时，才切到 agent-browser。

工具与接口 (Tools)

  • 通过 exec_command 调用 agent-browser CLI。
  • 默认所有 inspect 类调用都加 --json，这样 stdout 返回结构化 JSON。
  • 同一轮浏览器任务中，使用稳定的 --session <name> 维持页面状态；推荐值如 --session agent-browser.
  • 常用命令模板见 references/command-patterns.md。

标准流程 (Workflow)

  1. 先用 agent-browser --json --session <name> open <url> 打开页面。
  2. 再用 agent-browser --json --session <name> snapshot -i 获取可交互元素和 ref。
  3. 后续点击、填写、获取文本、截图等操作都复用同一个 --session。
  4. 页面较慢时，先调用 wait，再做 snapshot 或后续动作。
  5. 输出时总结关键页面状态和操作结果，不要直接堆完整 JSON。

参数约定 (Parameters)

  • 打开页面： agent-browser --json --session <name> open <url>
  • 获取交互式 snapshot： agent-browser --json --session <name> snapshot -i
  • 点击 ref： agent-browser --json --session <name> click @e2
  • 填写输入框： agent-browser --json --session <name> fill @e3 "value"
  • 读取文本： agent-browser --json --session <name> get text @e1
  • 截图： agent-browser --json --session <name> screenshot <path>

边界与风险 (Guardrails)

  • 不要用 shell chaining，例如 &&；每一步用单独的 exec_command，靠 --session 维持浏览器状态。
  • 默认保持 read-first。未经用户明确要求，不要提交表单、下单、登录、删除内容或触发其他破坏性动作。
  • 页面交互前优先先做 snapshot -i，不要盲点选择器。
  • 涉及登录态、cookie、下载文件或跨站操作时，要明确说明风险和当前步骤。

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/browser-automation-mryiqgyd/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/browser-automation-mryiqgyd' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/browser-automation-mryiqgyd/download' --output '.skill-downloads/browser-automation-mryiqgyd/SKILL.md.part' && mv '.skill-downloads/browser-automation-mryiqgyd/SKILL.md.part' '.skill-downloads/browser-automation-mryiqgyd/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

Environment declared by the author: linux

Tools declared by the author (check availability in your agent): exec_command

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.

Claude Code
test -f '.skill-downloads/browser-automation-mryiqgyd/SKILL.md' && test -s '.skill-downloads/browser-automation-mryiqgyd/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/agent-browser' && cp -R '.skill-downloads/browser-automation-mryiqgyd' '.claude/skills/agent-browser'

OpenSkills

OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.

Official OpenSkills installation
openskills install './.skill-downloads/browser-automation-mryiqgyd'

openskills read 'browser-automation-mryiqgyd'

Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.

For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.

openskills sync

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/browser-automation-mryiqgyd/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills

React Hook Form Best Practices

Development

Master React Hook Form: avoid anti-patterns, manage subscriptions, and handle reset, dirty state, and controlled inputs correctly.

Claude CodeCursorWindsurf+2intermediateSafe 108,623
Skills Guide Bot

Emotion to Mantine Migration

Development

Migrate Emotion styled-components to Mantine components with style props and CSS modules. Use when converting .styled.tsx files or removing @emotion imports.

Claude CodeCursorWindsurf+1intermediateSafe 48,981
Skills Guide Bot

Scope Creep Detector

Development

Analyzes git diffs against a stated intent to detect scope creep, unrelated files, broad PRs, and oversized changes, then suggests keep, split, or justify actions.

Claude CodeCursorCodexintermediateSafe 135,015
Skills Guide Bot