agentleFS
YardonYanYardonYan/ui-design-skills/skills/tooling/agent-browser/SKILL.md

agent-browser

Skill0 starsChanged yesterdayApache-2.0View on GitHub

无头浏览器自动化 CLI,为 AI Agent 优化:无障碍树快照与 ref 提取,精准网页操作。用于需要读取页面、点击、填表、拿结构化输出的场景。

  • Installs packages

189 other projects use a version of this, 3 of them edited.

Adopted by

Most recently taken up by

Used with

Projects with it also use time-skill, dep-refs and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • Recepay6358Skill

    time-skill

    Display the current time in Pakistan Standard Time (PKT, UTC+5). Use when the user asks for the current time, Pakistan time, or PKT.

    Also in 6 projects that use this

  • betacatslingSkill

    dep-refs

    Use when needs to inspect TypeScript export references in the z-code workspace, list exports from a file, verify whether an export is unused before deletion, investigate who imports a symbol during refactors, or combine pnpm knip unused-export results with pnpm dep:refs symbol-level reference tracing.

    Also in 5 projects that use this

  • betacatslingSkill

    feature-boundary-planner

    Map a ZCode behavior change to current UI surfaces, state owners, protocol commands, persistence, and validation. Use for impact analysis, product-boundary planning, or an implementation handoff grounded in the checked-out source.

    Also in 5 projects that use this

  • nicepkgSkill

    community-led-growth

    Expert in community-led growth (CLG) - leveraging user communities to drive acquisition, retention, and expansion. Covers building developer communities, user groups, ambassador programs, and turning customers into advocates. Knows the difference between community as a feature vs community as a growth engine, and how to measure community ROI. Use when "community-led, CLG, ambassador program, champion program, user community, developer community, word of mouth, user group, " mentioned.

    Also in 5 projects that use this

  • nicepkgSkill

    ph-community-outreach

    Engage Reddit, Indie Hackers, Hacker News and other communities for Product Hunt launches. Use this skill to identify relevant communities, craft appropriate posts, and drive cross-platform engagement without appearing spammy.

    Also in 5 projects that use this

  • Recepay6358Skill

    weather-svg-creator

    Creates an SVG weather card showing the current temperature for Dubai. Writes the SVG to orchestration-workflow/weather.svg and updates orchestration-workflow/output.md.

    Also in 6 projects that use this

  • +3 more from nicepkg

The file

Files
SKILL.md

核心功能: 本技能提供中文交互、化工作流场景等能力。

Agent Browser

Fast browser automation using accessibility tree snapshots with refs for deterministic element selection.

Why Use This Over Built-in Browser Tool

Use agent-browser when:

  • Automating multi-step workflows
  • Need deterministic element selection
  • Performance is critical
  • Working with complex SPAs
  • Need session isolation

Use built-in browser tool when:

  • Need screenshots/PDFs for analysis
  • Visual inspection required
  • Browser extension integration needed

Core Workflow

agent-browser open https://example.com
agent-browser snapshot -i --json

agent-browser click @e2
agent-browser fill @e3 "text"

agent-browser snapshot -i --json

Key Commands

Navigation

agent-browser open <url>
agent-browser back | forward | reload | close

Snapshot (Always use -i --json)

agent-browser snapshot -i --json          # Interactive elements, JSON output
agent-browser snapshot -i -c -d 5 --json  # + compact, depth limit
agent-browser snapshot -s "#main" -i      # Scope to selector

Interactions (Ref-based)

agent-browser click @e2
agent-browser fill @e3 "text"
agent-browser type @e3 "text"
agent-browser hover @e4
agent-browser check @e5 | uncheck @e5
agent-browser select @e6 "value"
agent-browser press "Enter"
agent-browser scroll down 500
agent-browser drag @e7 @e8

Get Information

agent-browser get text @e1 --json
agent-browser get html @e2 --json
agent-browser get value @e3 --json
agent-browser get attr @e4 "href" --json
agent-browser get title --json
agent-browser get url --json
agent-browser get count ".item" --json

Check State

agent-browser is visible @e2 --json
agent-browser is enabled @e3 --json
agent-browser is checked @e4 --json

Wait

agent-browser wait @e2                    # Wait for element
agent-browser wait 1000                   # Wait ms
agent-browser wait --text "Welcome"       # Wait for text
agent-browser wait --url "**/dashboard"   # Wait for URL
agent-browser wait --load networkidle     # Wait for network
agent-browser wait --fn "window.ready === true"

Sessions (Isolated Browsers)

agent-browser --session admin open site.com
agent-browser --session user open site.com
agent-browser session list

State Persistence

agent-browser state save auth.json        # Save cookies/storage
agent-browser state load auth.json        # Load (skip login)

Screenshots & PDFs

agent-browser screenshot page.png
agent-browser screenshot --full page.png
agent-browser pdf page.pdf

Network Control

agent-browser network route "**/ads/*" --abort           # Block
agent-browser network route "**/api/*" --body '{"x":1}'  # 实现说明:
agent-browser network requests --filter api              # View

Cookies & Storage

agent-browser cookies                     # Get all
agent-browser cookies set name value
agent-browser storage local key           # Get localStorage
agent-browser storage local set key val

Tabs & Frames

agent-browser tab new https://example.com
agent-browser tab 2                       # Switch to tab
agent-browser frame @e5                   # Switch to iframe
agent-browser frame main                  # Back to main

Snapshot Output Format

{
  "success": true,
  "data": {
    "snapshot": "...",
    "refs": {
      "e1": {"role": "heading", "name": "Example Domain"},
      "e2": {"role": "button", "name": "Submit"},
      "e3": {"role": "textbox", "name": "Email"}
    }
  }
}

Best Practices

  1. Always use -i flag - Focus on interactive elements
  2. Always use --json - Easier to parse
  3. Wait for stability - agent-browser wait --load networkidle
  4. Save auth state - Skip login flows with state save/load
  5. Use sessions - Isolate different browser contexts
  6. Use --headed for debugging - See what's happening

示例

agent-browser open https://www.google.com
agent-browser snapshot -i --json
agent-browser fill @e1 "AI agents"
agent-browser press Enter
agent-browser wait --load networkidle
agent-browser snapshot -i --json
agent-browser get text @e3 --json
agent-browser get attr @e4 "href" --json

Example: Multi-Session Testing

agent-browser --session admin open app.com
agent-browser --session admin state load admin-auth.json
agent-browser --session admin snapshot -i --json

agent-browser --session user open app.com
agent-browser --session user state load user-auth.json
agent-browser --session user snapshot -i --json

Installation

npm install -g agent-browser
agent-browser install                     # Download Chromium
agent-browser install --with-deps         # Linux: + system deps

Credits

Skill Elkrief ([@MaTriXy](

agent-browser CLI by [Vercel Labs](

安装与配置

运行环境

  • Agent平台: 支持SKILL.md的任意AI Agent(Claude Code / Cursor / Codex / Gemini CLI等)
  • 操作系统: Windows / macOS / Linux

依赖说明

依赖项类型是否必需获取方式
LLM APIAPI必需由Agent内置LLM提供

API Key 配置

  • 本Skill基于Markdown指令,无需额外API Key(除内容中明确标注的外部API)

可用性分类

  • 分类: MD+execute(纯Markdown指令,部分功能需要exec命令行执行能力)
  • 说明: 基于Markdown的AI Skill,通过自然语言指令驱动Agent执行任务

能力清单

  • Headless browser automation CLI optimized for AI agents with accessibility
  • 触发关键词: automation, browser, , optimized, headless, agent, agents

典型场景

场景输入输出
基础使用用户请求处理结果

不适用于:需要人工判断的复杂决策场景

使用指南

  1. 确认运行环境满足依赖说明中的要求
  2. 根据适用场景选择合适的使用方式
  3. 执行操作并检查输出结果
  4. 如遇错误,参考错误处理章节

异常应对机制

错误场景原因处理方式
配置错误参数缺失或格式错误检查依赖说明中的配置要求
运行时错误运行环境不满足确认运行环境符合依赖说明
网络错误连接超时或不可达检查网络连接后重试,参考国内替代方案

疑问汇总

Q1: 如何开始使用Agent Browser?

A: 请先阅读使用流程章节,确认环境满足依赖说明中的要求。

Q2: 遇到错误怎么办?

A: 请参考错误处理章节,按照表格中的处理方式操作。

Q3: Agent Browser有什么限制?

A: 请参考已知限制章节了解具体限制。

能力边界

  • 需要LLM支持,无LLM环境无法使用
  • 复杂场景可能需要人工辅助判断
  • 性能取决于底层模型能力

用户问题解答

Q1: Agent Browser支持哪些输入格式?

A1: 无头浏览器自动化CLI,为AI Agent优化,支持无障碍树快照与引用提取,精准网页操作。支持文本指令和结构化参数输入,具体格式参考使用流程章节。

Q2: 需要配置API Key吗?

A2: 是的,部分功能需要配置对应平台的API Key。请在依赖说明章节查看具体要求,并通过环境变量安全配置。

Q3: 命令行执行失败怎么办?

A3: 检查命令参数是否正确,确认运行环境支持exec能力。如遇权限问题,请参照错误处理章节排查。

安全申明

安全风险防范

风险项等级防护措施验证方法
API密钥泄露高通过环境变量配置,禁止硬编码定期检查代码和配置文件
命令执行风险高仅执行白名单命令,避免拼接用户输入使用沙箱环境测试
网络通信安全中使用HTTPS协议,验证SSL证书定期检查证书有效期
敏感数据暴露高输出结果中不包含密钥、令牌等敏感信息日志脱敏审查
未授权访问中限制访问权限,实施认证机制定期审计访问日志

使用前请确认已阅读依赖说明章节,确保运行环境满足安全要求。

效能分析

操作场景手动耗时自动化耗时效率提升
文件解析与提取5-10分钟/个<5秒/个60-120x
批量文件处理(100个)8-16小时<5分钟96-192x
API调用与响应解析2-3分钟/次<1秒/次120-180x
多接口数据聚合15-30分钟<10秒90-180x
命令执行与结果收集3-5分钟/次<2秒/次90-150x
重复任务批量执行因任务而异线性缩减5-50x
错误排查与修复10-30分钟<30秒20-60x

特色分析

对比维度Agent Browser传统手动方式通用脚本工具
自动化程度全流程自动完全手动部分自动
错误处理内置错误恢复依赖人工经验基本try-catch
可复用性参数化配置一次性脚本模板化
安全合规内置安全检查无安全保障无安全保障
适用场景无头浏览器自动化CLI,为AI Agent优化,支持无障碍树快照与引用提取,精准通用场景通用场景

功能介绍

  • 自动化执行: 无头浏览器自动化CLI,为AI Agent优化,支持无障碍树快照与引用提取,精准网页操作
  • 文件处理: 支持多种文件格式的读取、解析和写入操作
  • API集成: 通过标准化接口调用外部服务并处理响应
  • 命令执行: 在安全沙箱中执行系统命令并收集结果
  • 信息检索: 快速搜索和过滤目标数据

用户问题解答

Q1: Agent Browser支持哪些输入格式?

A1: 无头浏览器自动化CLI,为AI Agent优化,支持无障碍树快照与引用提取,精准网页操作。支持文本指令和结构化参数输入,具体格式参考使用流程章节。

Q2: 需要配置API Key吗?

A2: 是的,部分功能需要配置对应平台的API Key。请在依赖说明章节查看具体要求,并通过环境变量安全配置。

Q3: 命令行执行失败怎么办?

A3: 检查命令参数是否正确,确认运行环境支持exec能力。如遇权限问题,请参照错误处理章节排查。

异常修复

针对Agent Browser使用中可能遇到的常见问题,提供以下排查方案:

错误类型原因分析解决方案
API认证失败(401)API密钥错误或过期检查密钥配置,重新生成token
接口限流(429)请求频率超出限制降低调用频率,启用重试退避策略
响应超时(504)网络延迟或服务端负载过高增加超时阈值,检查网络连接
文件不存在路径错误或文件未创建检查路径拼写,确认文件已生成
文件格式不支持扩展名不在支持列表中转换为支持的格式后重试
权限不足当前用户无读写权限检查文件权限,以管理员身份运行
命令执行失败参数错误或环境依赖缺失检查命令语法,确认依赖已安装
进程超时命令执行时间过长增加超时设置,优化命令参数
网络连接失败DNS解析失败或防火墙拦截检查网络配置,确认代理设置

Agent Browser通用排查步骤

  1. 检查输入参数: 确认所有必填参数已提供且格式正确
  2. 查看日志输出: 定位具体错误行和异常类型
  3. 验证环境配置: 确认依赖库版本和运行环境满足要求
  4. 逐步调试: 缩小问题范围,隔离故障模块

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.