skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

browser-video-recording

Renders browser screenshots into 60 fps 4:3 4K MP4 videos with macOS cursor animation.

5.7k|685|Updated Feb 3, 2026
Search Tags:#FFmpeg#screenshot#video rendering#demo video#browser recording#4K video#cursor animation
One-click install
npx skills add https://github.com/MengTo/Skills --skill browser-video-recording
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-video-recording
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/codex/browser-video-recording
Command: npx skills add https://github.com/MengTo/Skills --skill browser-video-recording

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Pillow, ffmpeg, ffprobe, and includes scripts (resource) components.

What problem does it solve?

Producing polished browser demo recordings normally requires screen-recording tools that cannot capture the Codex in-app browser surface, leaving agents without a way to create natural-looking product walkthrough videos with cursor clicks and zooms.

Core Features & Use Cases

  • Screenshot-to-Video Rendering: Converts a sequence of in-app browser screenshots into a 60 fps 4:3 4K MP4 using a bundled Python script with ffmpeg.
  • Natural Cursor Choreography: Extracts the real macOS cursor via screencapture matting, then animates deliberate click pauses, subtle click scale dips, and velocity-based rotation.
  • Zoom-Follow Camera: Applies calm camera keyframes that frame clicked content rather than chasing every mouse movement.
  • Verification Workflow: Uses ffprobe and thumbnail extraction to confirm resolution, frame rate, duration, and cursor accuracy.
  • Use Case: Record a product dashboard walkthrough—open an analytics card, hover a chart, change a date range—and deliver a verified 3840x2880 60 fps demo video.

Quick Start

Ask the agent to use the browser-video-recording skill to capture the in-app browser walkthrough of your page and render it as a 60 fps 4:3 4K MP4 with a natural macOS cursor.

Frequently Asked Questions about browser-video-recording

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I record a browser demo video from Codex in-app browser captures?▼

Drive the in-app browser at a 1920x1440 viewport, save screenshots after each state change, then run the bundled render_browser_demo.py script with a JSON config defining scenes, cursor keys, camera keys, and click times to produce a 60 fps 4K MP4.

How to add a natural macOS cursor to a screen recording video?▼

The render script extracts the real macOS cursor by capturing it against green and magenta overlays via swift and screencapture, then mattes it into a transparent PNG. Alternatively, supply your own cursor_asset PNG with a cursor_hotspot in the config.

Can Playwright or an MCP produce a natural browser demo video?▼

A native recording MCP can be used only if it supports 60 fps, 4K resolution, and 4:3 region selection. When unavailable or unable to capture the Codex browser surface, the screenshot-to-video renderer is the fallback path.

What dependencies are required to render browser demo videos?▼

You need python3 with the Pillow package, plus ffmpeg and ffprobe installed locally. Optional macOS cursor extraction uses swift and /usr/sbin/screencapture; otherwise provide a transparent cursor PNG.

Why does my rendered video have the wrong resolution or frame rate?▼

Check the config output_size and fps values, then verify the result with ffprobe showing stream width, height, and r_frame_rate. For 4:3 4K the output should be 3840x2880 at 60/1 fps.

Related Skills

Explore More Design & Creative Skills→
aden-hiveaden-hive
11.0k

hive.browser-automation

Automates Chrome browser interactions via the hive-browser CLI over Chrome DevTools Protocol.

Official
Advanced
az9713az9713

video-shortform

Generate one-shot short-form video clips from prompts and save MP4s.

Community
Intermediate
gajjalaashok75-UIgajjalaashok75-UI
2

enhance-prompt

Transform vague UI ideas into structured prompts for Stitch generation.

Community
Intermediate
PAISHU-AIPAISHU-AI

screenshot

Capture desktop, window, or region screenshots on macOS, Linux, and Windows.

Community
Intermediate