Guide · Agent skill

How to use the Browser Video Recording agent skill

Updated 2026-11-02 · written with AI from the project's own documentation and checked against our catalogue data

browser-video-recording is an agent skill: a folder of instructions and a bundled Python script that lets an AI agent such as Codex record a walkthrough of a web page as a polished demo video. It suits designers making UI inspiration clips, product or marketing people who want a quick demo of a web app, and developers who want to show a flow to teammates. After this guide you will know how to install the skill, how to ask for a recording in plain language, and how to check the finished file.

Browser Video RecordingMengTo/Skills · MIT Download the skill

Quick start

1Download and unzip. Download the ZIP from this page and unzip the browser-video-recording folder.
2Place the skill folder. Move it into ~/.claude/skills/, into a project's .claude/skills/, or upload it under Settings → Capabilities → Skills.
3Install the tools. Make sure python3, Pillow, ffmpeg and ffprobe are available, and that the Browser skill or an MCP is connected.
4Describe the walkthrough. Ask for the page, the clicks and scrolls, and the 4:3 4K 60 fps output in plain language.
5Let the agent capture and render. The agent saves browser screenshots and runs scripts/render_browser_demo.py to produce the MP4.
6Verify the output. Run ffprobe and check the thumbnail for resolution, frame rate, duration and cursor placement.

What the skill makes the agent do

The skill does not capture your screen as live video. The agent drives the Codex in-app browser, clicks, scrolls and navigates, and saves a real screenshot after each important state change. A bundled script then stitches those screenshots into an MP4 with a macOS-style cursor that moves to each target, gives a small click effect, and zooms gently to follow the action.

The default output is 3840x2880 (4:3 4K) at 60 frames per second. After rendering, the agent checks the file's resolution, frame rate and duration, and extracts a thumbnail to inspect.

Source material: browser screenshots, not a screen recording, so video, audio and anything outside the browser viewport are not captured.
Output: an MP4 cropped to browser content.
Verification: ffprobe checks plus a mid-video thumbnail.

Install the skill from the ZIP

Download the ZIP for browser-video-recording from this page and unzip it. The skill is the folder that contains SKILL.md and scripts/render_browser_demo.py, so keep the whole folder together.

For a personal install, unzip it into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder. Alternatively, in the Claude apps, open Settings, go to Capabilities and then Skills, and upload the skill there.

Personal: ~/.claude/skills/
Project: .claude/skills/ inside your project
Claude apps: Settings → Capabilities → Skills, then upload

Install the required tools

The renderer needs python3, the Pillow Python package, and ffmpeg with ffprobe. The Browser skill or an MCP is also needed to take fresh Codex in-app browser screenshots.

On macOS, swift and /usr/sbin/screencapture are optional. They let the script extract your real cursor. If they are unavailable, supply a transparent cursor PNG through cursor_asset in the config and set cursor_hotspot.

python3 and Pillow (Python package)
ffmpeg and ffprobe
Optional on macOS: swift and /usr/sbin/screencapture
Browser skill or MCP for fresh screenshots

Ask for a recording with a natural request

You do not need to name the script. Describe the page, the actions and the output you want. The skill triggers on requests to record or re-record browser actions, show cursor clicks and zooms, make Dribbble or UI inspiration or product demo recordings, or ask whether Codex, Playwright or an MCP can produce a natural browser demo video.

A good request names the page, the steps and the format. The brief in the demo folder is a useful model: the page is a local product dashboard, the format is 4:3, 60 fps, 4K, and the actions are opening a card, hovering a chart, changing a date range and returning to the overview.

Use $browser-video-recording to record a walkthrough of my local dashboard: open the analytics card, hover the chart, change the date range, then return to the overview. Output 4:3 4K at 60 fps.
Can Codex or Playwright make a natural browser demo video of this page?
Re-record the checkout flow with clicks and zooms for a Dribbble-style clip.

Check the finished video

The skill tells the agent to verify the output before handing it over. You can ask for the same checks yourself. Confirm the resolution is 3840x2880, the frame rate is 60/1 or equivalent, the duration matches your request, the cursor is visible and on target, the video is cropped to the browser, and the browser viewport override has been reset.

ffprobe -v error \
  -show_entries stream=codec_name,width,height,r_frame_rate \
  -show_entries format=duration,size \
  -of json /path/to/output.mp4

Safety notes: scripts and network

This skill runs scripts: the agent executes the bundled scripts/render_browser_demo.py with python3, and on macOS it may call swift and screencapture to read the cursor. It does not use the network. Review the script before you install it if you need to know exactly what runs on your machine.

The renderer briefly shows a solid-color overlay while extracting the cursor, so expect a short visual flash when no cursor_asset is given.

Runs scripts: yes (python3 renderer; optional swift and screencapture on macOS)
Uses network: no
Keep the full skill folder intact so the script can be found

Tips for better results

Keep cursor paths sparse and mostly straight. The skill is built to pause briefly on each target, click, and then move on, and to let page transitions happen after the click. Ask for subtle click feedback, which is a small scale dip, unless you specifically want rings.

Use the browser-only capture. Avoid asking for desktop automation unless you truly need system UI, because the browser screenshot API is the reliable source.

Name each screenshot state in your request so the flow is easy to follow.
Plan the clicks in viewport coordinates; the skill records them for the cursor path.
Preview the thumbnail before sharing the MP4 with your team.

What people use it for

Designers making Dribbble-style walkthroughs of a web page's interactions.
Product or marketing teams producing a quick demo of a web app without screen-recording software.
Developers showing a teammate a flow they tested in the Codex in-app browser.
Re-recording a flow after the UI changes, using the same steps.

Frequently asked questions

Is browser-video-recording free to use?

The skill is published under the MIT licence, as stated on this page. It still needs python3, Pillow, ffmpeg and ffprobe installed on your machine, and a Browser skill or MCP for screenshots.

What do I need to run browser-video-recording?

You need python3, the Pillow Python package, ffmpeg and ffprobe, and the Codex in-app browser through the Browser skill or an MCP for fresh screenshots. On macOS, swift and /usr/sbin/screencapture are optional for extracting the real cursor.

Does the skill record my screen live?

No. It builds the video from browser screenshots taken after each click or scroll, so it cannot capture audio or anything outside the browser viewport.

Why does the skill need the Browser skill or MCP?

Fresh Codex in-app browser screenshots are required. If that browser is unavailable, the skill says the fallback is less reliable.

How do I install it without macOS cursor extraction?

Provide a transparent PNG as cursor_asset in the config and set cursor_hotspot. The source says this replaces the screencapture step.

Is it safe to run?

The skill runs bundled scripts locally and does not use the network. Review scripts/render_browser_demo.py before installing if you want to confirm what runs.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use browser-video-recording if you already work in the Codex in-app browser and want a polished, cursor-led walkthrough of a web page without screen-recording software. Pick a live screen recorder instead if you need audio, real screen capture, or anything outside the browser.

Download the skill