
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:
- 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.
- 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.
- 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 ffmpegandffprobe
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
selectedRegionOnScreenwhen cropping to an embedded browser viewport.


