browser-recording

name	browser-recording
description	Record a browser flow as a video/GIF for evidence — animations, transitions, and multi-step interactions that a still screenshot cannot prove. Drives the project's own Playwright through a bundled runner, then converts to mp4 + GIF via ffmpeg. Use when the user asks to record a demo, capture a GIF or video of the UI, or when a UI change involves motion or a sequence of steps.
triggers	record, recording, screen recording, gif, record a video, video capture, demo video, record the flow, capture the animation

Browser Recording — video/GIF evidence for UI flows

A still frame cannot prove motion or sequence correctness. When a UI change involves animation, transitions, or a multi-step flow (wizard steps, a modal opening, drag interactions), record it. This skill is the how for the evidence rule in the frontend-design-workflow skill's Phase 3.

What it does

scripts/record_browser.py drives a headless Chromium through the target project's own Playwright install, records the session as webm, and — when ffmpeg is available — converts it to mp4 and a palette-optimized GIF.

python3 <skill-dir>/scripts/record_browser.py \
  --url http://127.0.0.1:5173/settings \
  --scenario /tmp/demo-scenario.mjs \
  --project /path/to/frontend \
  --size 1280x800 --name settings-flow --out /tmp/rec

Last lines of stdout are machine-readable:

WEBM /tmp/rec/settings-flow.webm
MP4 /tmp/rec/settings-flow.mp4
GIF /tmp/rec/settings-flow.gif

Workflow

1. Get the UI reachable at a URL. A dev server, a preview build behind a static server, or any live page. Starting the server is not this skill's job — use the project's normal dev loop (and the skill to surface it to the user).