Skills

Browser Video Recording

Create polished 60 fps 4:3 4K browser screen-recording style videos from Codex in-app...

Install

npx skills add MengTo/Skills --skill browser-video-recording -g -a claude-code -y
Repository
MengTo/Skills7.2k
Category
Design
Updated
3d ago
License
MIT
Context cost
Lightabout 1,391 tokens
Runs scripts
Yes, review before use

What it does

Create polished 60 fps 4:3 4K browser screen-recording style videos from Codex in-app browser captures, with browser-only crop, natural macOS cursor styling, deliberate click choreography, zoom-follow framing, ffprobe/thumbnail verification, and optional native recording compatibility checks. Use when the user asks to record or re-record browser actions, show cursor clicks and zooms, make Dribbble/UI inspiration or product demo recordings, or asks whether Codex, Playwright, or an MCP can produce a natural browser demo video.

Browser Video Recording

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.

Self-Contained Execution

This skill is enough for another Codex instance to perform the Python rendering as long as the full skill folder is installed, including scripts/render_browser_demo.py. Codex should run the bundled script instead of recreating the renderer.

Required local tools:

  • python3
  • Python package Pillow
  • ffmpeg and ffprobe

Optional macOS cursor extraction uses swift and /usr/sbin/screencapture. If those are unavailable, provide a transparent PNG through cursor_asset and set cursor_hotspot in the config.

The Browser skill/MCP is still needed for fresh Codex in-app browser screenshots. If it is unavailable, use the best available browser automation screenshot source and state the fallback.

Optional Native Recorder Support

For native app recording, verify the MCP supports:

  • Use frameRate: 60.
  • Use resolutionRawValue: "4K".
  • Use ratioPresetRawValue: "4:3" for region recordings.
  • Use an explicit selectedRegionOnScreen when cropping to an embedded browser viewport.
Read the whole SKILL.md on GitHub

More in Design