Agent Browser
quran/quran.com-frontend-next
Automates browser interactions for web testing, form filling, screenshots, and data extraction.
AI 代理的浏览器自动化 CLI 工具。当用户需要与网站交互时使用,包括导航页面、填写表单、点击按钮、截取屏幕截图、提取数据、测试 Web 应用或自动化任何浏览器任务。触发条件包括"打开网站"、"填写表单"、"点击按钮"、"截取屏幕截图"、"从页面抓取数据"、"测试此 Web 应用"、"登录网站"、"自动化浏览器操作"或任何需要编程式 Web 交互的任务。
$ npx skills add clxzl/claude-code-best-practice-cn --skill agent-browser -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install clxzl/claude-code-best-practice-cn agent-browser --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "agent-browser" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/agent-browser into .claude/skills/agent-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agent-browser", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/agent-browserType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add clxzl/claude-code-best-practice-cn --skill agent-browser -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install clxzl/claude-code-best-practice-cn agent-browser --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/agent-browser .agents/skills/agent-browser && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "agent-browser" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/agent-browser into .agents/skills/agent-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agent-browser", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add clxzl/claude-code-best-practice-cn --skill agent-browser -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install clxzl/claude-code-best-practice-cn agent-browser --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/agent-browser .cursor/skills/agent-browser && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "agent-browser" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/agent-browser into .cursor/skills/agent-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agent-browser", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/clxzl/claude-code-best-practice-cn.git --path .claude/skills/agent-browser--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add clxzl/claude-code-best-practice-cn --skill agent-browser -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install clxzl/claude-code-best-practice-cn agent-browser --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/agent-browser .gemini/skills/agent-browser && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "agent-browser" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/agent-browser into .gemini/skills/agent-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agent-browser", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install clxzl/claude-code-best-practice-cn agent-browserInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add clxzl/claude-code-best-practice-cn --skill agent-browser -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/agent-browser .github/skills/agent-browser && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "agent-browser" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/agent-browser into .github/skills/agent-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agent-browser", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add clxzl/claude-code-best-practice-cn --skill agent-browser -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install clxzl/claude-code-best-practice-cn agent-browser --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/clxzl/claude-code-best-practice-cn.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/agent-browser .opencode/skills/agent-browser && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "agent-browser" agent skill from https://github.com/clxzl/claude-code-best-practice-cn/tree/main/.claude/skills/agent-browser into .opencode/skills/agent-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agent-browser", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
agent-browserAI 代理的浏览器自动化 CLI 工具。当用户需要与网站交互时使用,包括导航页面、填写表单、点击按钮、截取屏幕截图、提取数据、测试 Web 应用或自动化任何浏览器任务。触发条件包括"打开网站"、"填写表单"、"点击按钮"、"截取屏幕截图"、"从页面抓取数据"、"测试此 Web 应用"、"登录网站"、"自动化浏览器操作"或任何需要编程式 Web 交互的任务。
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.
4 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit d084a34. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
npmxcrunFrom the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
site-a.comsite-b.comFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from clxzl/claude-code-best-practice-cn at commit d084a34, republished under its MIT licence (© clxzl). 112 words, ~1,432 tokens.
.claude/skills/agent-browser/SKILL.md (or your agent's skills folder).每个浏览器自动化都遵循以下模式:
agent-browser open <url>agent-browser snapshot -i(获取元素引用如 @e1、@e2)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 # 保存为 PDFagent-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# 登录一次并保存状态
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.jsonagent-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 --jsonagent-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 listagent-browser --headed open https://example.com
agent-browser highlight @e1 # 高亮元素
agent-browser record start demo.webm # 录制会话# 使用 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 模拟器
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 等)在页面发生变化时会失效。在以下操作后务必重新快照:
agent-browser click @e5 # 导航到新页面
agent-browser snapshot -i # 必须重新快照
agent-browser click @e1 # 使用新的引用当引用不可用或不可靠时,使用语义定位器:
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 | 带屏幕截图的内容提取 |
./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
Just SKILL.md in .claude/skills/agent-browser of clxzl/claude-code-best-practice-cn.
Open the folder on GitHubat commit d084a34
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Agent Browser this skillclxzl/claude-code-best-practice-cn | 132 | — | ~1.4k | Automated safety check: Pass | MIT | |
| Agent Browserquran/quran.com-frontend-next | 1.9k | 40 repos | ~3.3k | Automated safety check: Pass | None | |
| Dev-Browser CLI AutomationSawyerHood/dev-browser | 6.7k | 1 repos | ~455 | Automated safety check: Pass | MIT | |
| Browser Automationopenclaw/openclaw | 392k | — | ~2.9k | Automated safety check: Pass | MIT | |
| Camoufox CLIBin-Huang/camoufox-cli | 350 | 1 repos | ~4.5k | Automated safety check: Pass | MIT | |
| BrowserVibiumDev/vibium | 2.9k | — | ~4.8k | Automated safety check: Pass | Apache-2.0 |
quran/quran.com-frontend-next
Automates browser interactions for web testing, form filling, screenshots, and data extraction.
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…
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.
Bin-Huang/camoufox-cli
Anti-detect browser automation CLI & Skills for AI agents. An agent skill from Bin-Huang/camoufox-cli.
VibiumDev/vibium
Automate browsers with the Vibium CLI. An agent skill from VibiumDev/vibium.
moeru-ai/airi
Test AIRI display-model imports with agent-browser across stage-tamagotchi Electron, stage-web, and stage-pocket mobile web layouts.
clxzl/claude-code-best-practice-cn
演示文稿背后的概念框架 —— "从 Vibe Coding 到 Agentic Engineering"的含义、旅程为何如此结构化,以及每张幻灯片如何契合叙事弧线
clxzl/claude-code-best-practice-cn
显示巴基斯坦标准时间(PKT,UTC+5)的当前时间。当用户询问当前时间、巴基斯坦时间或 PKT 时使用. An agent skill from clxzl/claude-code-best-practice-cn.
clxzl/claude-code-best-practice-cn
关于演示文稿幻灯片格式、权重系统、导航和章节结构的知识
clxzl/claude-code-best-practice-cn
关于演示文稿中 CSS 类、组件模式和语法高亮的知识
clxzl/claude-code-best-practice-cn
创建一个 SVG 时间卡片,显示迪拜的当前时间。将 SVG 写入 agent-teams/output/dubai-time.svg 并更新 agent-teams/output/output.md。
clxzl/claude-code-best-practice-cn
创建一个 SVG 天气卡片,显示迪拜的当前温度。将 SVG 写入 orchestration-workflow/weather.svg 并更新 orchestration-workflow/output.md。
Categories
AI 代理的浏览器自动化 CLI 工具。当用户需要与网站交互时使用,包括导航页面、填写表单、点击按钮、截取屏幕截图、提取数据、测试 Web 应用或自动化任何浏览器任务。触发条件包括"打开网站"、"填写表单"、"点击按钮"、"截取屏幕截图"、"从页面抓取数据"、"测试此 Web 应用"、"登录网站"、"自动化浏览器操作"或任何需要编程式 Web 交互的任务。. Agent Browser is an agent skill from clxzl/claude-code-best-practice-cn.
Agent Browser fits situations like: tasks that involve Browser automation.
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.
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.
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.
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:*).
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.
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.
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.
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.
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.
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.