agent-browser

技能

agent-browser 自带一系列技能，可教会 AI 编码代理如何针对特定工作流程使用该工具。安装一个技能后，你的代理在 Cursor、Claude Code 或 Codex 中即可自动执行浏览器任务，无需人工指导。

可用技能

  • agent-browser — 通用浏览器自动化：导航、快照、表单、截图、数据提取、会话、身份验证、差异对比，以及完整的命令参考。
  • dogfood — 系统性探索式测试。像真实用户一样遍历应用程序，发现漏洞和用户体验问题，并生成包含截图和复现视频的结构化报告。
  • electron — 通过连接内置的 Chrome DevTools 协议端口，自动化任何 Electron 应用（如 VS Code、Slack、Discord、Figma 等）。这是 agent-browser 驱动 Slack macOS 桌面应用等原生桌面应用的方式。
  • slack — 基于浏览器的 Slack 自动化。检查未读消息、导航频道、搜索对话、发送消息并提取数据——无需 API 密钥。

安装

npx skills add vercel-labs/agent-browser --skill agent-browser
npx skills add vercel-labs/agent-browser --skill dogfood
npx skills add vercel-labs/agent-browser --skill electron
npx skills add vercel-labs/agent-browser --skill slack

安装完成后，当代理遇到匹配请求时，将自动激活相应的技能。

agent-browser

核心技能。教会代理掌握完整的 agent-browser API：navigate-snapshot-interact-re-snapshot 工作流、所有命令、命令链式调用、身份验证（认证库与状态持久化）、会话管理、差异对比、JavaScript 执行、带注释的截图、语义定位器和配置。

示例代理交互：

  • “打开 example.com 并填写联系表单”
  • “登录后对仪表板进行截图”
  • “对比首页的预发布版和生产版”

dogfood

一种结构化的探索式测试工作流。代理打开目标网址，系统性地探索应用（导航页面、测试表单、点击按钮、检查控制台错误），并为发现的每个问题记录以下内容：

  • 编号的复现步骤
  • 分步截图
  • 交互式错误的复现视频
  • 严重程度分类

输出是一个位于输出目录中的 Markdown 报告，可直接交付给相关团队。仅需一条提示即可运行，例如“dogfood vercel.com”或“QA http://localhost:3000 — focus on the billing page”。

electron

Electron 应用（如 VS Code、Slack、Discord、Figma、Notion、Spotify 等）基于 Chromium 构建，并暴露一个 Chrome DevTools 协议（CDP）端口，agent-browser 可以连接该端口。此技能教会代理如何启动或连接任意 Electron 应用，然后使用标准的 snapshot-interact 工作流来自动化操作。

由于 Electron 应用基于 Chromium，因此会暴露一个 Chrome DevTools 协议（CDP）端口，agent-browser 可以连接该端口。通过 --remote-debugging-port 启动应用，建立连接后，使用标准的 snapshot-interact 工作流。这正是 slack 技术所基于的基础。

slack

基于浏览器的 Slack 自动化。可通过 agent-browser connect 9222 连接到现有的 Slack 会话，或在新浏览器中打开 Slack，然后使用快照和元素引用导航 UI。涵盖检查未读消息、导航频道和私信、搜索对话、提取消息数据及截图——无需 Slack API 密钥或机器人设置。

源代码

所有技能文件均位于仓库的 skills/ 目录中。