Skip to content
Get packs

Browser Video Recording

Turns browser screenshots into a polished 4K 60fps demo video with a cursor and zoom effects.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
6 files

What it does

When installed, the agent can record browser walkthroughs as smooth demo videos. It captures real screenshots of a web page after each click or scroll, then runs a bundled Python script that stitches them into a 4:3 4K, 60 frames-per-second MP4 with a macOS-style cursor that moves to each target, gives a small click effect, and zooms gently to follow the action. It also checks the finished file's resolution, frame rate, and duration.

Great for

  • Designers making UI inspiration or Dribbble-style walkthrough videos of web pages
  • Product or marketing people who want a quick polished demo of a web app without screen-recording software
  • Developers who already use the Codex in-app browser and want to show a flow to teammates

Skip it if

  • Simply recording your screen live: it builds a video from screenshots, not a real screen capture, so it cannot capture video, audio, or anything outside the browser viewport
  • Situations where the Codex browser or Browser skill is unavailable, since fresh screenshots are required and the fallback is less reliable

Try asking

  • “Record a demo video of searching for a product, opening a result, and going back, in 4:3 4K at 60fps”
  • “Make a Dribbble-style walkthrough video of this landing page with natural cursor clicks and zoom”
  • “Re-record the browser flow from my last video with a slower cursor path and more pause before each click”
Step-by-step guide: how to use Browser Video RecordingInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 6 original files, the MIT licence and an attribution note.

    browser-video-recording.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip browser-video-recording.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip browser-video-recording.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Install the full skill folder so the bundled render script is available, and let the agent use it rather than rewriting the renderer.
  • Run the optional --write-template command first to get a starter config, then tune the click times and camera keys for your page.
  • Ask the agent to verify the output with ffprobe and a thumbnail, and to reset the browser viewport afterwards.

What's inside

  • demo/expected-output.md
  • demo/index.html
  • demo/input.md
  • demo/PROMPT.md
  • scripts/render_browser_demo.py
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.