dogfood by vercel-labs/agent-browser
npx skills add https://github.com/vercel-labs/agent-browser --skill dogfood系统性地探索 Web 应用程序,发现问题,并为每个发现生成一份包含完整复现证据的报告。
仅 目标 URL 是必需的。其他所有内容都有合理的默认值——除非用户明确提供覆盖值,否则请使用默认值。
| 参数 | 默认值 | 示例覆盖值 |
|---|---|---|
| 目标 URL | (必填) | vercel.com, http://localhost:3000 |
| 会话名称 | 域名 slug 化(例如,vercel.com -> vercel-com) | --session my-session |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 输出目录 | ./dogfood-output/ | 输出目录:/tmp/qa |
| 范围 | 整个应用 | 专注于账单页面 |
| 认证 | 无 | 登录到 user@example.com |
如果用户说类似“dogfood vercel.com”的话,请立即使用默认值开始。除非提到认证但缺少凭据,否则不要询问澄清性问题。
始终直接使用 agent-browser——永远不要使用 npx agent-browser。直接二进制文件使用快速的 Rust 客户端。npx 通过 Node.js 路由,速度明显较慢。
1. 初始化 设置会话、输出目录、报告文件
2. 认证 如果需要,登录并保存状态
3. 定位 导航到起点,拍摄初始快照
4. 探索 系统地访问页面并测试功能
5. 记录 截图 + 记录发现的每个问题
6. 收尾 更新摘要计数,关闭会话
mkdir -p {OUTPUT_DIR}/screenshots {OUTPUT_DIR}/videos
将报告模板复制到输出目录并填写标题字段:
cp {SKILL_DIR}/templates/dogfood-report-template.md {OUTPUT_DIR}/report.md
启动一个命名会话:
agent-browser --session {SESSION} open {TARGET_URL}
agent-browser --session {SESSION} wait --load networkidle
如果应用需要登录:
agent-browser --session {SESSION} snapshot -i
# 识别登录表单引用,填写凭据
agent-browser --session {SESSION} fill @e1 "{EMAIL}"
agent-browser --session {SESSION} fill @e2 "{PASSWORD}"
agent-browser --session {SESSION} click @e3
agent-browser --session {SESSION} wait --load networkidle
对于 OTP/邮箱验证码:询问用户,等待他们的回复,然后输入验证码。
登录成功后,保存状态以备潜在重用:
agent-browser --session {SESSION} state save {OUTPUT_DIR}/auth-state.json
拍摄带注释的初始截图和快照以了解应用结构:
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/initial.png
agent-browser --session {SESSION} snapshot -i
识别主要的导航元素,并规划出要访问的各个部分。
阅读 references/issue-taxonomy.md 以获取完整的查找内容列表和探索清单。
策略——系统地遍历应用:
在每个页面:
agent-browser --session {SESSION} snapshot -i
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/{page-name}.png
agent-browser --session {SESSION} errors
agent-browser --session {SESSION} console
根据你的判断决定深入的程度。在核心功能上花费更多时间,在次要页面上花费较少时间。如果在一个区域发现了一组问题,请进行更深入的调查。
步骤 4 和 5 同时进行——在一次遍历中探索和记录。当你发现问题时,停止探索,立即记录它,然后再继续。不要先探索整个应用,然后再记录。
每个问题都必须是可复现的。当你发现有问题时,不要只是记下来——要用证据来证明它。目标是让阅读报告的人能够清楚地看到发生了什么并可以重放它。
根据问题选择适当级别的证据:
这些问题需要用户交互才能复现——使用完整的复现过程,包括视频和分步截图:
agent-browser --session {SESSION} record start {OUTPUT_DIR}/videos/issue-{NNN}-repro.webm
agent-browser --session {SESSION} screenshot {OUTPUT_DIR}/screenshots/issue-{NNN}-step-1.png
sleep 1
# 执行操作(点击、填写等)
sleep 1
agent-browser --session {SESSION} screenshot {OUTPUT_DIR}/screenshots/issue-{NNN}-step-2.png
sleep 1
# ...继续直到问题显现
3. 捕获损坏状态。 暂停以便查看者能够看到,然后拍摄带注释的截图:
sleep 2
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/issue-{NNN}-result.png
4. 停止视频:
agent-browser --session {SESSION} record stop
5. 在报告中编写带编号的复现步骤,每个步骤都引用其对应的截图。
这些问题无需交互即可看到——单张带注释的截图就足够了。不需要视频,也不需要多步复现:
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/issue-{NNN}.png
在报告中写一个简短的描述并引用截图。将 复现视频 设置为 N/A。
对于所有问题:
目标是找到 5-10 个记录良好的问题,然后收尾。证据的深度比总数更重要——5 个有完整复现的问题胜过 20 个描述模糊的问题。
探索完成后:
### ISSUE- 块都必须在总数中有所体现。agent-browser --session {SESSION} close
snapshot -i — 用于查找可点击/可填充的元素(按钮、输入框、链接)snapshot (无标志) — 用于读取页面内容(文本、标题、数据列表)rm 截图、视频或报告。不要关闭会话并重新开始。向前工作,而不是向后。type 而不是 fill——它会逐个字符地输入。仅在视频录制之外且速度重要时使用 fill。sleep 1,在最终结果截图前添加 sleep 2。视频应该能以 1 倍速观看——审阅报告的人需要看到发生了什么,而不是一连串瞬间的状态变化。agent-browser 命令相互独立时,将它们批量放在单个 shell 调用中(例如,agent-browser ... screenshot ... && agent-browser ... console)。使用 agent-browser --session {SESSION} scroll down 300 进行滚动——不要使用 key 或 evaluate 来滚动。| 参考资料 | 何时阅读 |
|---|---|
| references/issue-taxonomy.md | 会话开始时——校准要查找的内容、严重性级别、探索清单 |
| 模板 | 用途 |
|---|---|
| templates/dogfood-report-template.md | 复制到输出目录作为报告文件 |
每周安装量
13.7K
仓库
GitHub Stars
24.7K
首次出现
Feb 24, 2026
安全审计
安装于
codex12.9K
opencode12.8K
gemini-cli12.8K
cursor12.8K
github-copilot12.8K
kimi-cli12.7K
Systematically explore a web application, find issues, and produce a report with full reproduction evidence for every finding.
Only the Target URL is required. Everything else has sensible defaults -- use them unless the user explicitly provides an override.
| Parameter | Default | Example override |
|---|---|---|
| Target URL | (required) | vercel.com, http://localhost:3000 |
| Session name | Slugified domain (e.g., vercel.com -> vercel-com) | --session my-session |
| Output directory | ./dogfood-output/ | Output directory: /tmp/qa |
| Scope | Full app | Focus on the billing page |
| Authentication | None | Sign in to user@example.com |
If the user says something like "dogfood vercel.com", start immediately with defaults. Do not ask clarifying questions unless authentication is mentioned but credentials are missing.
Always use agent-browser directly -- never npx agent-browser. The direct binary uses the fast Rust client. npx routes through Node.js and is significantly slower.
1. Initialize Set up session, output dirs, report file
2. Authenticate Sign in if needed, save state
3. Orient Navigate to starting point, take initial snapshot
4. Explore Systematically visit pages and test features
5. Document Screenshot + record each issue as found
6. Wrap up Update summary counts, close session
mkdir -p {OUTPUT_DIR}/screenshots {OUTPUT_DIR}/videos
Copy the report template into the output directory and fill in the header fields:
cp {SKILL_DIR}/templates/dogfood-report-template.md {OUTPUT_DIR}/report.md
Start a named session:
agent-browser --session {SESSION} open {TARGET_URL}
agent-browser --session {SESSION} wait --load networkidle
If the app requires login:
agent-browser --session {SESSION} snapshot -i
# Identify login form refs, fill credentials
agent-browser --session {SESSION} fill @e1 "{EMAIL}"
agent-browser --session {SESSION} fill @e2 "{PASSWORD}"
agent-browser --session {SESSION} click @e3
agent-browser --session {SESSION} wait --load networkidle
For OTP/email codes: ask the user, wait for their response, then enter the code.
After successful login, save state for potential reuse:
agent-browser --session {SESSION} state save {OUTPUT_DIR}/auth-state.json
Take an initial annotated screenshot and snapshot to understand the app structure:
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/initial.png
agent-browser --session {SESSION} snapshot -i
Identify the main navigation elements and map out the sections to visit.
Read references/issue-taxonomy.md for the full list of what to look for and the exploration checklist.
Strategy -- work through the app systematically:
At each page:
agent-browser --session {SESSION} snapshot -i
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/{page-name}.png
agent-browser --session {SESSION} errors
agent-browser --session {SESSION} console
Use your judgment on how deep to go. Spend more time on core features and less on peripheral pages. If you find a cluster of issues in one area, investigate deeper.
Steps 4 and 5 happen together -- explore and document in a single pass. When you find an issue, stop exploring and document it immediately before moving on. Do not explore the whole app first and document later.
Every issue must be reproducible. When you find something wrong, do not just note it -- prove it with evidence. The goal is that someone reading the report can see exactly what happened and replay it.
Choose the right level of evidence for the issue:
These require user interaction to reproduce -- use full repro with video and step-by-step screenshots:
agent-browser --session {SESSION} record start {OUTPUT_DIR}/videos/issue-{NNN}-repro.webm
agent-browser --session {SESSION} screenshot {OUTPUT_DIR}/screenshots/issue-{NNN}-step-1.png
sleep 1
# Perform action (click, fill, etc.)
sleep 1
agent-browser --session {SESSION} screenshot {OUTPUT_DIR}/screenshots/issue-{NNN}-step-2.png
sleep 1
# ...continue until the issue manifests
3. Capture the broken state. Pause so the viewer can see it, then take an annotated screenshot:
sleep 2
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/issue-{NNN}-result.png
4. Stop the video:
agent-browser --session {SESSION} record stop
5. Write numbered repro steps in the report, each referencing its screenshot.
These are visible without interaction -- a single annotated screenshot is sufficient. No video, no multi-step repro:
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/issue-{NNN}.png
Write a brief description and reference the screenshot in the report. Set Repro Video to N/A.
For all issues:
Append to the report immediately. Do not batch issues for later. Write each one as you find it so nothing is lost if the session is interrupted.
Increment the issue counter (ISSUE-001, ISSUE-002, ...).
Aim to find 5-10 well-documented issues , then wrap up. Depth of evidence matters more than total count -- 5 issues with full repro beats 20 with vague descriptions.
After exploring:
### ISSUE- block must be reflected in the totals.agent-browser --session {SESSION} close
snapshot -i — for finding clickable/fillable elements (buttons, inputs, links)snapshot (no flag) — for reading page content (text, headings, data lists)| Reference | When to Read |
|---|---|
| references/issue-taxonomy.md | Start of session -- calibrate what to look for, severity levels, exploration checklist |
| Template | Purpose |
|---|---|
| templates/dogfood-report-template.md | Copy into output directory as the report file |
Weekly Installs
13.7K
Repository
GitHub Stars
24.7K
First Seen
Feb 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykFail
Installed on
codex12.9K
opencode12.8K
gemini-cli12.8K
cursor12.8K
github-copilot12.8K
kimi-cli12.7K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
AI代码审查工具 - 自动化安全漏洞检测与代码质量分析 | 支持多领域检查清单
1,200 周安装
AI智能体长期记忆系统 - 精英级架构,融合6种方法,永不丢失上下文
1,200 周安装
AI新闻播客制作技能:实时新闻转对话式播客脚本与音频生成
1,200 周安装
Word文档处理器:DOCX创建、编辑、分析与修订痕迹处理全指南 | 自动化办公解决方案
1,200 周安装
React Router 框架模式指南:全栈开发、文件路由、数据加载与渲染策略
1,200 周安装
Nano Banana AI 图像生成工具:使用 Gemini 3 Pro 生成与编辑高分辨率图像
1,200 周安装
rmtype instead of fill -- it types character-by-character. Use fill only outside of video recording when speed matters.sleep 1 between actions and sleep 2 before the final result screenshot. Videos should be watchable at 1x speed -- a human reviewing the report needs to see what happened, not a blur of instant state changes.agent-browser commands in a single shell call when they are independent (e.g., agent-browser ... screenshot ... && agent-browser ... console). Use agent-browser --session {SESSION} scroll down 300 for scrolling -- do not use key or evaluate to scroll.