dogfood

软件研发 Agent 与技能管理 3 文件 EN 原文

系统性地探索和测试一个 Web 应用

Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.

说明语言:英文

来源vercel-labsagent-browser ↗ 查看原文件 ↗版权归原作者,请遵循原仓库许可
安装
npx skills add https://github.com/vercel-labs/agent-browser --skill dogfood

需要已安装 skills CLI。也可以直接从源仓库 clone。

在星云中查看 ↗
SKILL.md 原文

name: dogfood description: Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams. allowed-tools: Bash(agent-browser:), Bash(npx agent-browser:) ---

Dogfood

Systematically explore a web application, find issues, and produce a report with full reproduction evidence for every finding.

Setup

Only the Target URL is required. Everything else has sensible defaults -- use them unless the user explicitly provides an override.

ParameterDefaultExample override
Target URL_(required)_vercel.com, http://localhost:3000
Session nameSlugified domain (e.g., vercel.com -> vercel-com)--session my-session
Output directory./dogfood-output/Output directory: /tmp/qa
ScopeFull appFocus on the billing page
AuthenticationNoneSign in to [email protected]

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.

Workflow

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

1. Initialize

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 domcontentloaded

2. Authenticate

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
# Replace this with the target app's post-login URL, text, or JS condition:
agent-browser --session {SESSION} wait --url "{POST_LOGIN_URL_PATTERN}"
# Or:
# agent-browser --session {SESSION} wait --text "{POST_LOGIN_TEXT}"
# agent-browser --session {SESSION} wait --fn "{POST_LOGIN_CONDITION}"

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

3. Orient

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.

4. Explore

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.

5. Document Issues (Repro-First)

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:

Interactive / behavioral issues (functional, ux, console errors on action)

These require user interaction to reproduce -- use full repro with video and step-by-step screenshots:

  1. Start a repro video _before_ reproducing:
agent-browser --session {SESSION} record start {OUTPUT_DIR}/videos/issue-{NNN}-repro.webm
  1. Walk through the steps at human pace. Pause 1-2 seconds between actions so the video is watchable. Take a screenshot at each step:
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
  1. 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
  1. Stop the video:
agent-browser --session {SESSION} record stop
  1. Write numbered repro steps in the report, each referencing its screenshot.

Static / visible-on-load issues (typos, placeholder text, clipped text, misalignment, console errors on load)

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:

  1. 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.
  1. Increment the issue counter (ISSUE-001, ISSUE-002, ...).

6. Wrap Up

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:

  1. Re-read the report and update the summary severity counts so they match the actual issues. Every ### ISSUE- block must be reflected in the totals.
  2. Close the session:
agent-browser --session {SESSION} close
  1. Tell the user the report is ready and summarize findings: total issues, breakdown by severity, and the most critical items.

Guidance

References

ReferenceWhen to Read
references/issue-taxonomy.mdStart of session -- calibrate what to look for, severity levels, exploration checklist

Templates

TemplatePurpose
templates/dogfood-report-template.mdCopy into output directory as the report file
同类技能
agent-browseragentcoreask-mattbrowser-actbrowser-act-skill-forgebrowser-usechief-of-staffclaude-handoff
本页内容来自开源项目 vercel-labs, 版权归原作者所有。
本站仅作技能索引与分享,所有 Skill 版权归其原作者所有。