record-video

star 2.0k

Record and upload a short browser interaction video artifact

ColeMurray By ColeMurray schedule Updated 5/17/2026

name: record-video description: Record and upload a short browser interaction video artifact

record-video

Use this skill when a UI verification depends on interaction over time: opening menus, clicking through flows, dragging, typing, navigation, loading states, transitions, or animation.

Key Facts

Use agent-browser record as the primary recorder. Record directly to an .mp4 path so agent-browser encodes the recording as a silent MP4 that can be uploaded with upload-media.

Required Workflow

  1. Open the target page with agent-browser open.
  2. Set the viewport explicitly when layout matters.
  3. Use agent-browser snapshot -i to inspect accessible names/selectors before recording.
  4. Start recording with agent-browser record start <path>.mp4.
  5. Perform the interaction being verified.
  6. Always run agent-browser record stop.
  7. Use ffprobe to read actual encoded dimensions and duration before upload.
  8. Report the returned artifactId and what interaction was verified.

Command Pattern

set -e
agent-browser open "$URL"
agent-browser set viewport 1512 982
agent-browser snapshot -i

STARTED_AT_MS=$(date +%s%3N)
agent-browser record start /tmp/opencode/demo.mp4
recording_started=1
cleanup_recording() {
  if [ "${recording_started:-0}" = "1" ]; then
    agent-browser record stop || true
  fi
}
trap cleanup_recording EXIT

interaction_exit_code=0
agent-browser click "[data-testid=settings]" || interaction_exit_code=$?
agent-browser wait 1000 || interaction_exit_code=$?

agent-browser record stop
recording_started=0
trap - EXIT

ENDED_AT_MS=$(date +%s%3N)
PROBE_JSON=$(ffprobe -v error -print_format json -show_streams -show_format /tmp/opencode/demo.mp4)
DURATION_MS=$(node -e 'const p=JSON.parse(process.argv[1]); const v=(p.streams||[]).find((s)=>s.codec_type==="video")||{}; const d=Number(v.duration ?? p.format?.duration); console.log(Math.max(1, Math.round(d * 1000)));' "$PROBE_JSON")
DIMENSIONS=$(node -e 'const p=JSON.parse(process.argv[1]); const v=(p.streams||[]).find((s)=>s.codec_type==="video")||{}; console.log(JSON.stringify({width:Number(v.width),height:Number(v.height)}));' "$PROBE_JSON")
upload-media /tmp/opencode/demo.mp4 \
  --artifact-type video \
  --caption "What this recording verifies" \
  --source-url "$URL" \
  --duration-ms "$DURATION_MS" \
  --recording-started-at "$STARTED_AT_MS" \
  --recording-ended-at "$ENDED_AT_MS" \
  --dimensions "$DIMENSIONS" \
  --truncated false \
  --has-audio false
exit "$interaction_exit_code"

Guardrails

  • Do not leave a recording active. Always run agent-browser record stop after starting.
  • Do not claim a video was uploaded unless upload-media returned an artifact ID.
  • Keep recordings short and focused on the behavior being verified.
  • Prefer stable selectors such as [data-testid=...], [data-clear-completed], or #todo-title. Avoid fragile text selectors when labels contain apostrophes or dynamic text.
  • Do not use requested viewport dimensions as video dimensions. Use ffprobe metadata from the encoded MP4.
  • If a recording command fails, run agent-browser record stop to clear any active recording, then upload any available MP4.
Install via CLI
npx skills add https://github.com/ColeMurray/background-agents --skill record-video
Repository Details
star Stars 1,954
call_split Forks 301
navigation Branch main
article Path SKILL.md
More from Creator