Agent skill

Agent Browser

by clxzl in clxzl/claude-code-best-practice-cn

AI 代理的浏览器自动化 CLI 工具。当用户需要与网站交互时使用,包括导航页面、填写表单、点击按钮、截取屏幕截图、提取数据、测试 Web 应用或自动化任何浏览器任务。触发条件包括"打开网站"、"填写表单"、"点击按钮"、"截取屏幕截图"、"从页面抓取数据"、"测试此 Web 应用"、"登录网站"、"自动化浏览器操作"或任何需要编程式 Web 交互的任务。

MITAuto-check passedProductivity & Automation

Install Agent Browser

skills CLI
$ npx skills add clxzl/claude-code-best-practice-cn --skill agent-browser -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install clxzl/claude-code-best-practice-cn agent-browser --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/agent-browser .claude/skills/agent-browser && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
agent-browser
GitHub stars
132
Token cost
~1.4k tokens
SKILL.md length
112 words
Files
1
Skills in repo
8
Repo updated
First seen
Licence
MIT

At a glance

AI 代理的浏览器自动化 CLI 工具。当用户需要与网站交互时使用,包括导航页面、填写表单、点击按钮、截取屏幕截图、提取数据、测试 Web 应用或自动化任何浏览器任务。触发条件包括"打开网站"、"填写表单"、"点击按钮"、"截取屏幕截图"、"从页面抓取数据"、"测试此 Web 应用"、"登录网站"、"自动化浏览器操作"或任何需要编程式 Web 交互的任务。

  • Works in 4 steps: 导航:agent-browser open → 快照:agent-browser snapshot -i(获取元素引用如… → 交互:使用引用进行点击、填写、选择 → …
  • Tasks that involve Browser automation
  • SKILL.md covers 核心工作流, 常见模式, 引用生命周期(重要) and 语义定位器(引用的替代方案), plus 2 more sections
  • Calls npm and xcrun; reaches site-a.com and site-b.com

What it does

Agent Browser is an agent skill from clxzl/claude-code-best-practice-cn. AI 代理的浏览器自动化 CLI 工具。当用户需要与网站交互时使用,包括导航页面、填写表单、点击按钮、截取屏幕截图、提取数据、测试 Web 应用或自动化任何浏览器任务。触发条件包括"打开网站"、"填写表单"、"点击按钮"、"截取屏幕截图"、"从页面抓取数据"、"测试此 Web 应用"、"登录网站"、"自动化浏览器操作"或任何需要编程式 Web 交互的任务。

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Productivity & Automation, covering Browser automation. The licence is MIT.

When your agent uses it

  • Tasks that involve Browser automation

Example prompts

  • “截取屏幕截图”
  • “从页面抓取数据”
  • “测试此 Web 应用”
  • “/agent-browser”

Requirements

  • Node.js
  • Pre-approved tools (allowed-tools): Bash(agent-browser:*)

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. 导航:agent-browser open
  2. 快照:agent-browser snapshot -i(获取元素引用如 @e1、@e2)
  3. 交互:使用引用进行点击、填写、选择
  4. 重新快照:在导航或 DOM 变更后,获取新的引用

What it can do on your machine

Read from SKILL.md and the folder at commit d084a34. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Bash(agent-browser:*)

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm
    • xcrun

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • site-a.com
    • site-b.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Agent Browser loads about 1.4k tokens when it runs. Until then it costs about 48 tokens; SKILL.md has 112 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~48
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from clxzl/claude-code-best-practice-cn at commit d084a34, republished under its MIT licence (© clxzl). 112 words, ~1,432 tokens.

Download SKILL.mdSave it as .claude/skills/agent-browser/SKILL.md (or your agent's skills folder).
name
agent-browser
description
AI 代理的浏览器自动化 CLI 工具。当用户需要与网站交互时使用,包括导航页面、填写表单、点击按钮、截取屏幕截图、提取数据、测试 Web 应用或自动化任何浏览器任务。触发条件包括"打开网站"、"填写表单"、"点击按钮"、"截取屏幕截图"、"从页面抓取数据"、"测试此 Web 应用"、"登录网站"、"自动化浏览器操作"或任何需要编程式 Web 交互的任务。
allowed-tools
Bash(agent-browser:*)

使用 agent-browser 进行浏览器自动化

核心工作流

每个浏览器自动化都遵循以下模式:

  1. 导航:agent-browser open <url>
  2. 快照:agent-browser snapshot -i(获取元素引用如 @e1、@e2)
  3. 交互:使用引用进行点击、填写、选择
  4. 重新快照:在导航或 DOM 变更后,获取新的引用
bash
agent-browser open https://example.com/form
agent-browser snapshot -i
# 输出:@e1 [input type="email"],@e2 [input type="password"],@e3 [button] "Submit"

agent-browser fill @e1 "user@example.com" agent-browser fill @e2 "password123" agent-browser click @e3 agent-browser wait --load networkidle agent-browser snapshot -i # 检查结果


## 基本命令

```bash
# 导航
agent-browser open <url>              # 导航(别名:goto,navigate)
agent-browser close                   # 关闭浏览器

# 快照
agent-browser snapshot -i             # 带引用的交互元素(推荐)
agent-browser snapshot -i -C          # 包含光标交互元素(带有 onclick、cursor:pointer 的 div)
agent-browser snapshot -s "#selector" # 限定到 CSS 选择器范围

# 交互(使用快照中的 @引用)
agent-browser click @e1               # 点击元素
agent-browser fill @e2 "text"         # 清除并输入文本
agent-browser type @e2 "text"         # 输入文本(不清除)
agent-browser select @e1 "option"     # 选择下拉选项
agent-browser check @e1               # 勾选复选框
agent-browser press Enter             # 按键
agent-browser scroll down 500         # 滚动页面

# 获取信息
agent-browser get text @e1            # 获取元素文本
agent-browser get url                 # 获取当前 URL
agent-browser get title               # 获取页面标题

# 等待
agent-browser wait @e1                # 等待元素出现
agent-browser wait --load networkidle # 等待网络空闲
agent-browser wait --url "**/page"    # 等待 URL 匹配模式
agent-browser wait 2000               # 等待毫秒数

# 捕获
agent-browser screenshot              # 截图到临时目录
agent-browser screenshot --full       # 全页面截图
agent-browser pdf output.pdf          # 保存为 PDF

常见模式

表单提交
bash
agent-browser 打开 https://example.com/signup
agent-browser 截图 -i
agent-browser 填写 @e1 "Jane Doe"
agent-browser 填写 @e2 "jane@example.com"
agent-browser 选择 @e3 "California"
agent-browser 勾选 @e4
agent-browser 点击 @e5
agent-browser 等待网络空闲 --load networkidle
带状态持久化的身份验证
bash
# 登录一次并保存状态
agent-browser 打开 https://app.example.com/login
agent-browser 快照 -i
agent-browser 填充 @e1 "$USERNAME"
agent-browser 填充 @e2 "$PASSWORD"
agent-browser 点击 @e3
agent-browser 等待 --url "**/dashboard"
agent-browser 保存状态 auth.json

在未来的会话中复用

agent-browser state load auth.json agent-browser open https://app.example.com/dashboard


### 数据提取

```bash
agent-browser open https://example.com/products
agent-browser snapshot -i
agent-browser get text @e5           # 获取特定元素文本
agent-browser get text body > page.txt  # 获取全部页面文本

# JSON 输出以便解析
agent-browser snapshot -i --json
agent-browser get text @e1 --json
并行会话
bash
agent-browser --session site1 open https://site-a.com
agent-browser --session site2 open https://site-b.com

agent-browser --session site1 snapshot -i
agent-browser --session site2 snapshot -i

agent-browser session list
可视化浏览器(调试)
bash
agent-browser --headed open https://example.com
agent-browser highlight @e1          # 高亮元素
agent-browser record start demo.webm # 录制会话
本地文件(PDF、HTML)
bash
# 使用 file:// URL 打开本地文件
agent-browser --allow-file-access open file:///path/to/document.pdf
agent-browser --allow-file-access open file:///path/to/page.html
agent-browser screenshot output.png
iOS 模拟器(Mobile Safari)
bash
# 列出可用的 iOS 模拟器
agent-browser device list

# 在特定设备上启动 Safari
agent-browser -p ios --device "iPhone 16 Pro" open https://example.com

# 与桌面端相同的工作流 —— 快照、交互、重新快照
agent-browser -p ios snapshot -i
agent-browser -p ios tap @e1          # 点击(click 的别名)
agent-browser -p ios fill @e2 "text"
agent-browser -p ios swipe up         # 移动端专用手势

# 截取屏幕截图
agent-browser -p ios screenshot mobile.png

# 关闭会话(关闭模拟器)
agent-browser -p ios close

前置要求: macOS 系统,安装 Xcode、Appium(npm install -g appium && appium driver install xcuitest)

真实设备: 支持已预配置的物理 iOS 设备。使用 --device "<UDID>",其中 UDID 来自 xcrun xctrace list devices。

引用生命周期(重要)

引用(@e1、@e2 等)在页面发生变化时会失效。在以下操作后务必重新快照:

  • 点击会触发导航的链接或按钮
  • 表单提交
  • 动态内容加载(下拉菜单、模态框)
bash
agent-browser click @e5              # 导航到新页面
agent-browser snapshot -i            # 必须重新快照
agent-browser click @e1              # 使用新的引用

语义定位器(引用的替代方案)

当引用不可用或不可靠时,使用语义定位器:

bash
agent-browser 查找文本 "登录" 点击
agent-browser 查找标签 "Email" 填写 "user@test.com"
agent-browser 查找角色 按钮 点击 --名称 "提交"
agent-browser 查找占位符 "搜索" 输入 "查询"
agent-browser 查找测试id "submit-btn" 点击

深入文档

参考文档使用场景
references/commands.md包含所有选项的完整命令参考
references/snapshot-refs.md引用生命周期、失效规则、故障排查
references/session-management.md并行会话、状态持久化、并发抓取
references/authentication.md登录流程、OAuth、2FA 处理、状态复用
references/video-recording.md用于调试和文档的录制工作流
references/proxy-support.md代理配置、地理位置测试、轮换代理

即用模板

模板描述
templates/form-automation.sh带验证的表单填写
templates/authenticated-session.sh登录一次,复用状态
templates/capture-workflow.sh带屏幕截图的内容提取
bash
./templates/form-automation.sh https://example.com/form
./templates/authenticated-session.sh https://app.example.com/login
./templates/capture-workflow.sh https://example.com ./output

© clxzl, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/agent-browser of clxzl/claude-code-best-practice-cn.

Open the folder on GitHubat commit d084a34

Compare with similar skills

Agent Browser next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Agent Browser compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Agent Browser this skillclxzl/claude-code-best-practice-cn132—~1.4kAutomated safety check: PassMIT
Agent Browserquran/quran.com-frontend-next1.9k40 repos~3.3kAutomated safety check: PassNone
Dev-Browser CLI AutomationSawyerHood/dev-browser6.7k1 repos~455Automated safety check: PassMIT
Browser Automationopenclaw/openclaw392k—~2.9kAutomated safety check: PassMIT
Camoufox CLIBin-Huang/camoufox-cli3501 repos~4.5kAutomated safety check: PassMIT
BrowserVibiumDev/vibium2.9k—~4.8kAutomated safety check: PassApache-2.0

Similar skills

  • Agent Browser

    quran/quran.com-frontend-next

    Automates browser interactions for web testing, form filling, screenshots, and data extraction.

    1.9k GitHub starsUsed in 40 repos~3.3k tokens
    Productivity & AutomationAuto-check passed
  • Dev-Browser CLI Automation

    SawyerHood/dev-browser

    Browser automation with persistent named pages via the dev-browser CLI. Use when users ask to navigate websites, fill forms, take screenshots, extract web…

    6.7k GitHub starsUsed in 1 repo~455 tokens
    Productivity & AutomationAuto-check passed
  • Browser Automation

    openclaw/openclaw

    A skill your agent uses when controlling web pages with the OpenClaw browser tool, especially multi-step flows, login checks, tab management, or recovery from stale refs/timeouts.

    392k GitHub stars~2.9k tokensUpdated today
    Productivity & AutomationAuto-check passed
  • Camoufox CLI

    Bin-Huang/camoufox-cli

    Anti-detect browser automation CLI & Skills for AI agents. An agent skill from Bin-Huang/camoufox-cli.

    350 GitHub starsUsed in 1 repo~4.5k tokens
    Productivity & AutomationAuto-check passed
  • Browser

    VibiumDev/vibium

    Automate browsers with the Vibium CLI. An agent skill from VibiumDev/vibium.

    2.9k GitHub stars~4.8k tokensUpdated today
    Productivity & AutomationAuto-check passed
  • Test AIRI display-model imports with agent-browser across stage-tamagotchi Electron, stage-web, and stage-pocket mobile web layouts.

    50k GitHub stars~1.1k tokensUpdated today
    Productivity & AutomationAuto-check passed

More from clxzl/claude-code-best-practice-cn

All 8 skills in this repo
  • Vibe To Agentic Framework

    clxzl/claude-code-best-practice-cn

    演示文稿背后的概念框架 —— "从 Vibe Coding 到 Agentic Engineering"的含义、旅程为何如此结构化,以及每张幻灯片如何契合叙事弧线

    132 GitHub stars~1.7k tokensUpdated 5 mo ago
    Auto-check passed
  • Time Skill

    clxzl/claude-code-best-practice-cn

    显示巴基斯坦标准时间(PKT,UTC+5)的当前时间。当用户询问当前时间、巴基斯坦时间或 PKT 时使用. An agent skill from clxzl/claude-code-best-practice-cn.

    132 GitHub stars~119 tokensUpdated 5 mo ago
    Auto-check passed
  • Presentation Structure

    clxzl/claude-code-best-practice-cn

    关于演示文稿幻灯片格式、权重系统、导航和章节结构的知识

    132 GitHub stars~563 tokensUpdated 5 mo ago
    Auto-check passed
  • Presentation Styling

    clxzl/claude-code-best-practice-cn

    关于演示文稿中 CSS 类、组件模式和语法高亮的知识

    132 GitHub stars~563 tokensUpdated 5 mo ago
    Auto-check passed
  • Time SVG Creator

    clxzl/claude-code-best-practice-cn

    创建一个 SVG 时间卡片,显示迪拜的当前时间。将 SVG 写入 agent-teams/output/dubai-time.svg 并更新 agent-teams/output/output.md。

    132 GitHub stars~186 tokensUpdated 5 mo ago
    Auto-check passed
  • Weather SVG Creator

    clxzl/claude-code-best-practice-cn

    创建一个 SVG 天气卡片,显示迪拜的当前温度。将 SVG 写入 orchestration-workflow/weather.svg 并更新 orchestration-workflow/output.md。

    132 GitHub stars~180 tokensUpdated 5 mo ago
    Auto-check passed

Questions about Agent Browser

What does Agent Browser do?

AI 代理的浏览器自动化 CLI 工具。当用户需要与网站交互时使用,包括导航页面、填写表单、点击按钮、截取屏幕截图、提取数据、测试 Web 应用或自动化任何浏览器任务。触发条件包括"打开网站"、"填写表单"、"点击按钮"、"截取屏幕截图"、"从页面抓取数据"、"测试此 Web 应用"、"登录网站"、"自动化浏览器操作"或任何需要编程式 Web 交互的任务。. Agent Browser is an agent skill from clxzl/claude-code-best-practice-cn.

When should I use Agent Browser?

Agent Browser fits situations like: tasks that involve Browser automation.

How do I install Agent Browser in Claude Code?

Run `npx skills add clxzl/claude-code-best-practice-cn --skill agent-browser -a claude-code`. Or copy the skill folder (.claude/skills/agent-browser in clxzl/claude-code-best-practice-cn) into .claude/skills/agent-browser in your project. Claude Code loads it when a task matches its description.

How do I install Agent Browser in Codex?

Run `npx skills add clxzl/claude-code-best-practice-cn --skill agent-browser -a codex`. Or copy the skill folder (.claude/skills/agent-browser in clxzl/claude-code-best-practice-cn) into .agents/skills/agent-browser in your project. Codex loads it when a task matches its description.

Can I use Agent Browser in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add clxzl/claude-code-best-practice-cn --skill agent-browser -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/agent-browser, .gemini/skills/agent-browser, .github/skills/agent-browser and .opencode/skills/agent-browser in your project.

What does Agent Browser need to run?

Going by SKILL.md and its folder, Agent Browser needs the command-line tools its instructions call (npm and xcrun). Our summary lists: Node.js. Its frontmatter pre-approves these tools: Bash(agent-browser:*).

Does Agent Browser access the network?

SKILL.md names 2 domains. In commands or code: site-a.com and site-b.com; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.

Is Agent Browser safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Agent Browser use?

Agent Browser is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Agent Browser use?

About 1.4k tokens (SKILL.md is roughly 5.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Agent Browser?

Skills that share tags, products or a category with Agent Browser: Agent Browser (quran/quran.com-frontend-next, 1.9k stars), Dev-Browser CLI Automation (SawyerHood/dev-browser, 6.7k stars), Browser Automation (openclaw/openclaw, 392k stars) and Camoufox CLI (Bin-Huang/camoufox-cli, 350 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Agent Browser?

clxzl (a GitHub user) maintains it in clxzl/claude-code-best-practice-cn, which has 132 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on May 11, 2026.

Source: clxzl/claude-code-best-practice-cn on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.