# Browser Video Recording

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

- Repository: https://github.com/MengTo/Skills (7170 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add MengTo/Skills --skill browser-video-recording -g -a claude-code -y`
Codex: `npx skills add MengTo/Skills --skill browser-video-recording -g -a codex -y`
Cursor: `npx skills add MengTo/Skills --skill browser-video-recording -g -a cursor -y`
Gemini CLI: `npx skills add MengTo/Skills --skill browser-video-recording -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.

The rest: https://github.com/MengTo/Skills/blob/HEAD/agent-skills/codex/browser-video-recording/SKILL.md