Browser Video Recording

When to use this skill

• Use when the user asks to record or re-record browser actions — clicks, scrolls, navigations — into a polished demo video.
• Use when producing Dribbble/UI-inspiration or product demo recordings that need a natural macOS cursor, deliberate click choreography, and calm zoom-follow framing.
• Use when the user asks whether Codex, Playwright, or an MCP can produce a natural browser demo video, since this skill defines the three-layer dependency model (Codex in-app browser capture, local ffmpeg/Pillow renderer, optional native recorder).
• Use when rendering deterministic 60 fps 4:3 4K MP4 output from Codex in-app browser screenshots via scripts/render_browser_demo.py.
• Use when verifying a delivered video's resolution, frame rate, duration, and cursor accuracy with ffprobe and a mid-video thumbnail check.
• Not for general desktop screen recording unrelated to the Codex in-app browser, or for video editing beyond cursor/zoom demo rendering — those need a different recording or editing tool.

Dependency Model

Separate the workflow into three layers:

1. Browser control and source frames: Use the Codex in-app browser through the Browser skill/MCP. Do not use Chrome when the user asks for Codex browser or the project says not to. The browser layer supplies real screenshots and real click/scroll/navigation states.
2. Local video renderer: Use the bundled Python script to render screenshots into an MP4 with a natural macOS cursor, subtle click scale, and calm zoom-follow framing. This does not require a screen-recording MCP.
3. Optional native recorder integration: Use a native recording MCP only when callable and explicitly useful for starting/stopping an actual app recording or opening a generated project. If unavailable, blocked, or unable to capture the Codex browser surface, fall back to the screenshot-to-video renderer and explain the fallback.