Communitygithub.com

vercel-labs/dogfood

웹 애플리케이션을 체계적으로 탐색하고 버그, UX 문제 등을 찾아내는 스킬입니다. 'dogfood', 'QA', '탐색적 테스트', '이슈 찾기', '버그 헌트', '이 앱/사이트/플랫폼 테스트' 요청 시 또는 웹 애플리케이션 품질 검토 시 사용합니다. 단계별 스크린샷, 재현 비디오 및 상세 재현 단계를 포함한 구조화된 보고서를 생성하여 결과물을 담당 팀에 직접 전달할 수 있습니다.

dogfood란 무엇인가요?

이 스킬은 웹 애플리케이션의 체계적인 탐색(도그푸딩)을 자동화하여 버그, UX 문제 및 기타 결함을 찾아내고 완전한 재현 증거를 포함한 보고서를 생성합니다. 사용자가 특정 URL(예: 'dogfood vercel.com')을 제공하면 기본 설정으로 즉시 시작되며, 추가 인증이 필요한 경우에만 질문합니다. 작업 흐름은 초기화, 인증, 오리엔테이션, 탐색, 문서화, 마무리의 6단계로 구성됩니다. 각 이슈 발견 시 즉시 재현 비디오와 단계별 스크린샷을 기록하여 보고서에 추가하므로, 세션이 중단되어도 결과가 손실되지 않습니다. 기능적 이슈(UX, 콘솔 오류 등)는 비디오와 여러 스크린샷이 필요하지만, 정적 이슈(오타, 로드 시 시각적 결함 등)는 단일 주석 스크린샷으로 충분합니다. `agent-browser`의 직접 바이너리를 사용하여 빠른 Rust 클라이언트를 활용하며, 테스트는 사용자 관점에서 이루어지므로 대상 앱의 소스 코드를 읽지 않습니다. 최종 보고서는 5-10개의 잘 문서화된 이슈를 목표로 하며, 각 이슈는 심각도별로 분류되어 담당 팀에 바로 전달할 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vercel-labs/agent-browser/tree/main/skill-data/dogfood
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

도그푸드(Dogfood)

웹 애플리케이션을 체계적으로 탐색하고 이슈를 찾아내며, 모든 발견 사항에 대한 완전한 재현 증거를 포함한 보고서를 생성합니다.

설정

대상 URL만 필수입니다. 나머지는 합리적인 기본값을 사용하며, 사용자가 명시적으로 재정의를 제공하는 경우에만 변경하세요.

매개변수기본값재정의 예시
대상 URL(필수)vercel.com, http://localhost:3000
세션 이름슬러그화된 도메인 (예: vercel.com -> vercel-com)--session my-session
출력 디렉터리./dogfood-output/Output directory: /tmp/qa
범위전체 앱Focus on the billing page
인증없음Sign in to [email protected]

사용자가 "dogfood vercel.com"과 같이 말하면 기본값으로 즉시 시작하세요. 인증이 언급되었지만 자격 증명이 누락된 경우가 아니라면 명확한 질문을 하지 마세요.

항상 agent-browser를 직접 사용하세요. npx agent-browser를 사용하지 마세요. 직접 바이너리는 빠른 Rust 클라이언트를 사용합니다. npx는 Node.js를 통해 실행되므로 상당히 느립니다.

작업 흐름

1. 초기화    세션, 출력 디렉터리, 보고서 파일 설정
2. 인증      필요한 경우 로그인, 상태 저장
3. 오리엔테이션  시작점으로 이동, 초기 스냅샷 촬영
4. 탐색      페이지를 체계적으로 방문하고 기능 테스트
5. 문서화    발견된 각 이슈 스크린샷 및 녹화
6. 마무리    요약 개수 업데이트, 세션 종료

1. 초기화

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 domcontentloaded

2. 인증

앱에 로그인이 필요한 경우:

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
# 이를 대상 앱의 로그인 후 URL, 텍스트 또는 JS 조건으로 대체:
agent-browser --session {SESSION} wait --url "{POST_LOGIN_URL_PATTERN}"
# 또는:
# agent-browser --session {SESSION} wait --text "{POST_LOGIN_TEXT}"
# agent-browser --session {SESSION} wait --fn "{POST_LOGIN_CONDITION}"

OTP/이메일 코드의 경우: 사용자에게 물어보고 응답을 기다린 후 코드를 입력하세요.

성공적인 로그인 후 재사용 가능하도록 상태를 저장합니다:

agent-browser --session {SESSION} state save {OUTPUT_DIR}/auth-state.json

3. 오리엔테이션

앱 구조를 이해하기 위해 초기 주석 스크린샷과 스냅샷을 촬영합니다:

agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/initial.png
agent-browser --session {SESSION} snapshot -i

주요 탐색 요소를 식별하고 방문할 섹션을 매핑합니다.

4. 탐색

찾아야 할 항목의 전체 목록과 탐색 체크리스트는 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

얼마나 깊이 들어갈지는 판단에 따르세요. 핵심 기능에 더 많은 시간을 할애하고 주변 페이지에는 덜 할애하세요. 한 영역에서 이슈 클러스터를 발견하면 더 깊이 조사하세요.

5. 이슈 문서화 (재현 우선)

4단계와 5단계는 함께 진행됩니다 — 한 번의 패스로 탐색하고 문서화합니다. 이슈를 발견하면 탐색을 중단하고 즉시 문서화한 후 계속 진행하세요. 먼저 전체 앱을 탐색하고 나중에 문서화하지 마세요.

모든 이슈는 재현 가능해야 합니다. 문제가 있는 것을 발견하면 기록만 하지 말고 증거로 증명하세요. 목표는 보고서를 읽는 사람이 정확히 무슨 일이 일어났는지 보고 재현할 수 있어야 한다는 것입니다.

이슈에 적합한 증거 수준을 선택하세요:

대화형 / 동작 관련 이슈 (기능, UX, 동작 시 콘솔 오류)

이러한 이슈는 재현을 위해 사용자 상호작용이 필요합니다 — 비디오 및 단계별 스크린샷을 통한 완전한 재현을 사용하세요:

  1. 재현 비디오 시작 재현하기 전에:
agent-browser --session {SESSION} record start {OUTPUT_DIR}/videos/issue-{NNN}-repro.webm
  1. 인간 속도로 단계를 진행하세요. 동작 사이에 1-2초 멈추어 비디오를 시청 가능하게 만드세요. 각 단계에서 스크린샷을 촬영합니다:
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
# ...이슈가 나타날 때까지 계속
  1. 깨진 상태를 캡처합니다. 시청자가 볼 수 있도록 멈춘 후 주석 스크린샷을 촬영합니다:
sleep 2
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/issue-{NNN}-result.png
  1. 비디오를 중지합니다:
agent-browser --session {SESSION} record stop
  1. 각각 해당 스크린샷을 참조하는 번호가 매겨진 재현 단계를 보고서에 작성합니다.

정적 / 로드 시 표시되는 이슈 (오타, 플레이스홀더 텍스트, 잘린 텍스트, 정렬 불량, 로드 시 콘솔 오류)

이러한 이슈는 상호작용 없이도 표시됩니다 — 단일 주석 스크린샷으로 충분합니다. 비디오, 여러 단계 재현 불필요:

agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/issue-{NNN}.png

간단한 설명을 작성하고 보고서에서 스크린샷을 참조합니다. 재현 비디오는 해당 없음으로 설정합니다.

모든 이슈에 대해:

  1. 즉시 보고서에 추가하세요. 이슈를 나중에 일괄 처리하지 마세요. 각 이슈를 찾는 즉시 작성하여 세션이 중단되어도 손실되지 않도록 합니다.

  2. 이슈 카운터를 증가시킵니다 (ISSUE-001, ISSUE-002, ...).

6. 마무리

5-10개의 잘 문서화된 이슈를 찾고 마무리합니다. 증거의 깊이가 총 개수보다 중요합니다 — 완전한 재현이 있는 이슈 5개가 모호한 설명이 있는 이슈 20개보다 낫습니다.

탐색 후:

  1. 보고서를 다시 읽고 요약 심각도 개수가 실제 이슈와 일치하도록 업데이트합니다. 모든 ### ISSUE- 블록이 총계에 반영되어야 합니다.
  2. 세션을 종료합니다:
agent-browser --session {SESSION} close
  1. 사용자에게 보고서가 준비되었음을 알리고 결과를 요약합니다: 총 이슈 수, 심각도별 분류, 가장 중요한 항목.

지침

  • 재현이 전부입니다. 모든 이슈는 증거가 필요하지만 증거를 이슈에 맞추세요. 대화형 버그는 비디오와 단계별 스크린샷이 필요합니다. 정적 버그(오타, 플레이스홀더 텍스트, 로드 시 표시되는 시각적 결함)는 단일 주석 스크린샷만 필요합니다.
  • 증거 수집 전 재현 가능성을 확인하세요. 비디오를 녹화하거나 스크린샷을 찍기 전에 이슈가 최소 한 번의 재시도로 재현 가능한지 확인합니다. 일관되게 재현할 수 없으면 유효한 이슈가 아닙니다.
  • 정적 이슈에 대해 비디오를 녹화하지 마세요. 오타나 잘린 텍스트는 비디오의 이점이 없습니다. 사용자 상호작용, 타이밍 또는 상태 변경과 관련된 이슈에 대해 비디오를 저장하세요.
  • 대화형 이슈의 경우 각 단계를 스크린샷으로 찍으세요. 이전, 동작, 이후를 캡처하여 누군가 전체 시퀀스를 볼 수 있도록 합니다.
  • 스크린샷에 매핑되는 재현 단계를 작성하세요. 보고서의 각 번호 단계는 해당 스크린샷을 참조해야 합니다. 독자가 브라우저를 건드리지 않고도 시각적으로 단계를 따라갈 수 있어야 합니다.
  • 올바른 스냅샷 명령을 사용하세요.
    • snapshot -i — 클릭/입력 가능한 요소(버튼, 입력, 링크)를 찾는 경우
    • snapshot (플래그 없음) — 페이지 콘텐츠 읽기(텍스트, 제목, 데이터 목록)
  • 철저하되 판단력을 사용하세요. 테스트 스크립트를 따르는 것이 아닙니다 — 실제 사용자처럼 탐색하는 것입니다. 뭔가 이상하면 조사하세요.
  • 점진적으로 결과를 작성하세요. 발견하는 대로 각 이슈를 보고서에 추가하세요. 세션이 중단되면 결과가 보존됩니다. 모든 이슈를 마지막에 일괄 처리하지 마세요.
  • 출력 파일을 절대 삭제하지 마세요. 세션 중에 스크린샷, 비디오 또는 보고서를 rm 하지 마세요. 세션을 닫고 다시 시작하지 마세요. 앞으로만 진행하고 뒤로 가지 마세요.
  • 대상 앱의 소스 코드를 절대 읽지 마세요. 사용자로서 테스트하는 것이지 코드를 감사하는 것이 아닙니다. 테스트 중인 앱의 HTML, JS 또는 구성 파일을 읽지 마세요. 모든 결과는 브라우저에서 관찰한 내용에서 비롯되어야 합니다.
  • 콘솔을 확인하세요. 많은 이슈가 UI에서는 보이지 않지만 JS 오류 또는 실패한 요청으로 나타납니다.
  • 로봇이 아닌 사용자처럼 테스트하세요. 일반적인 워크플로를 엔드-투-엔드로 시도하세요. 실제 사용자가 클릭할 것을 클릭하고 현실적인 데이터를 입력하세요.
  • 인간처럼 입력하세요. 비디오 녹화 중 양식 필드를 채울 때는 fill 대신 type을 사용하세요 — 문자별로 입력합니다. 비디오 녹화 외부에서 속도가 중요할 때만 fill을 사용하세요.
  • 재현 비디오를 인간을 위해 속도를 조절하세요. 동작 사이에 sleep 1을 추가하고 최종 결과 스크린샷 전에 sleep 2를 추가하세요. 비디오는 1배속으로 시청 가능해야 합니다 — 보고서를 검토하는 인간은 무슨 일이 일어났는지 확인해야 하지, 순간적인 상태 변화의 흐릿한 이미지를 보는 것이 아닙니다.
  • 명령을 효율적으로 사용하세요. 독립적인 여러 agent-browser 명령을 단일 셸 호출로 묶으세요 (예: agent-browser ... screenshot ... && agent-browser ... console). 스크롤에는 agent-browser --session {SESSION} scroll down 300을 사용하세요 — key 또는 evaluate를 사용하여 스크롤하지 마세요.

참조

참조읽을 시기
references/issue-taxonomy.md세션 시작 시 — 찾을 항목, 심각도 수준, 탐색 체크리스트 조정

템플릿

템플릿목적
templates/dogfood-report-template.md보고서 파일로 출력 디렉터리에 복사

Individual skills in this repo

This repo contains 8 individual skills — each has its own dedicated page.

agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to

vercel-labs/agentcore

Run agent-browser on AWS Bedrock AgentCore cloud browsers. Use when the user wants to use AgentCore, run browser automation on AWS, use a cloud browser with AWS credentials, or needs a managed browser session backed by AWS infrastructure. Triggers include "use agentcore", "run on AWS", "cloud browser with AWS", "bedrock browser", "agentcore session", or any task requiring AWS-hosted browser automation.

vercel-labs/derive-client

Reverse-engineer a website's internal API by recording browser traffic into a HAR file, then generate a standalone client or CLI that calls the endpoints directly, with no browser needed after the first recording. Use when asked to "derive a client", "build a CLI for <site>", "reverse engineer this site's API", "record network requests", "turn this site into an API", or when the same site will be automated repeatedly and direct HTTP calls would beat driving the browser every time.

vercel-labs/electron

Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.

vercel-labs/protected-vercel-deployments

Access and test Vercel deployments protected by Vercel Authentication, SSO, or Deployment Protection with agent-browser. Use when a preview or production URL redirects to a Vercel login page, returns a protection 401 or 403, or needs short-lived Trusted Sources OIDC authentication instead of a static bypass secret or public exception.

vercel-labs/slack

Interact with Slack workspaces using browser automation. Use when the user needs to check unread channels, navigate Slack, send messages, extract data, find information, search conversations, or automate any Slack task. Triggers include "check my Slack", "what channels have unreads", "send a message to", "search Slack for", "extract from Slack", "find who said", or any task requiring programmatic Slack interaction.

vercel-labs/vercel-sandbox

Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include "Vercel Sandbox browser", "microVM Chrome", "agent-browser in sandbox", "browser automation on Vercel", or any task requiring Chrome in a Vercel Sandbox.

vercel-labs/webmcp-gen

Build and validate experimental WebMCP tools for an existing web page. Use when an agent needs to expose a site's real workflows as page tools, create webmcp.init.js, define deterministic checks, or compare WebMCP with accessibility-tree automation.

관련 스킬

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community