New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Browser Video Recording

by nirholas in nirholas/three.ws

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…

Apache-2.0Auto-check passedMedia & Creative

Install Browser Video Recording

skills CLI
$ npx skills add nirholas/three.ws --skill browser-video-recording -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install nirholas/three.ws browser-video-recording --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/nirholas/three.ws.git skills-src && mkdir -p .claude/skills && cp -r skills-src/third_party/designcode-agent-skills/agent-skills/codex/browser-video-recording .claude/skills/browser-video-recording && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
browser-video-recording
GitHub stars
227
Used in
1 other repo
Token cost
~1.5k tokens
SKILL.md length
680 words
Files
7 (incl. scripts)
Skills in repo
92
Repo updated
First seen
Licence
Apache-2.0

At a glance

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…

  • Works in 3 steps: Browser control and source frames: Use… → Local video renderer: Use the bundled… → Optional native recorder integration:…
  • The user asks to record
  • SKILL.md covers Dependency Model, Self-Contained Execution, Optional Native Recorder Support and Capture Workflow, plus 3 more sections
  • Runs Python scripts from its folder; calls python3, ffprobe and ffmpeg

What it does

Browser Video Recording is an agent skill from nirholas/three.ws. 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…

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files, including scripts (for example `demo/PROMPT.md`, `demo/expected-output.md` and `demo/input.md`).

It sits in Media & Creative, covering Video production and Browser testing. It works with Model Context Protocol, FFmpeg, macOS and Playwright. The repository describes itself as: Open-source platform for 3D AI agents. Turn text or a photo into a rigged, animated GLB avatar, give it an LLM brain, memory and a wallet, and embed it anywhere with one web… The licence is Apache-2.0.

When your agent uses it

  • The user asks to record
  • Re-record browser actions
  • Show cursor clicks and zooms
  • Make Dribbble/UI inspiration

Example prompts

  • “/browser-video-recording”

Requirements

  • Python 3

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  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…
  2. Local video renderer: Use the bundled Python script to render screenshots into an MP4 with a natural macOS cursor, subtle click scale, and…
  3. Optional native recorder integration: Use a native recording MCP only when callable and explicitly useful for starting/stopping an actual…

What it can do on your machine

Read from SKILL.md and the folder at commit ddf6e49. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (Python), which the agent can run.

    Shell commands in SKILL.md call:

    • python3
    • ffprobe
    • ffmpeg

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Browser Video Recording loads about 1.5k tokens when it runs. Until then it costs about 139 tokens; SKILL.md has 680 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~139
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from nirholas/three.ws at commit ddf6e49, republished under its Apache-2.0 licence (© nirholas). 680 words, ~1,537 tokens.

Download SKILL.mdSave it as .claude/skills/browser-video-recording/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.
name
browser-video-recording
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.

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.

For the local renderer, 4K 4:3 means 3840x2880. If a native recorder exposes a 4K enum, treat it as an app-side resolution preset and pair it with 4:3 region selection when recording through that MCP.

Capture Workflow

Use browser:control-in-app-browser first. After loading its docs, drive the in-app browser with the Node/browser API:

  • Set viewport to 1920x1440 for 4:3 4K output, then reset it before finishing.
  • Navigate to the requested page and perform actual clicks, backs, searches, and scrolls.
  • Save browser-only screenshots after each important state change. Use names like 01-results-top.png, 02-after-card-click.png, 03-back-results.png.
  • Record the viewport coordinates of each click/scroll target. The final cursor path should land on those points, pause, click, then move to the next meaningful point.

Avoid desktop coordinate automation unless the user explicitly needs system UI. Codex browser visibility may not expose a capturable macOS surface; screenshots from the browser API are the reliable source.

Show full SKILL.md (263 more words)Show less

Motion Rules

Make the cursor feel purposeful:

  • Use sparse, mostly straight cursor paths.
  • Pause briefly on a target before clicking.
  • Do not wander over unrelated UI.
  • Let the page transition happen after the click, not before.
  • Use only subtle click feedback: scale dip/rebound, not decorative rings unless requested.
  • Keep zoom-follow calmer than the cursor. The camera should frame the clicked content, not chase every small mouse move.

Default visual target:

  • Real macOS pointer extracted from the compositor, or an existing transparent cursor asset.
  • Cursor scale 3.0, matching the large cursor style commonly used in edited demo recordings.
  • Click animation strength 15 for a subtle click scale dip.
  • Rotation strength up to 8deg, only from horizontal velocity.

Render Script

Use scripts/render_browser_demo.py for deterministic 60 fps 4:3 4K output:

bash
python3 /path/to/browser-video-recording/scripts/render_browser_demo.py \
  --config /tmp/browser-demo-config.json \
  --output /tmp/browser-demo-4x3-4k-60fps.mp4

Generate a starter config:

bash
python3 /path/to/browser-video-recording/scripts/render_browser_demo.py --write-template

The config supplies:

  • shots: map of state names to screenshot PNG paths.
  • scene_starts: [time, shotName, transition] entries.
  • cursor_keys: [time, x, y] viewport-coordinate entries.
  • camera_keys: [time, x, y, zoom] entries.
  • click_times: click timestamps.
  • duration, fps, output_size, source_size, cursor_scale.

Preferred defaults:

json
{
  "fps": 60,
  "output_size": [3840, 2880],
  "source_size": [1920, 1440]
}

If cursor_asset is omitted, the script briefly shows a solid-color overlay and uses screencapture to extract the real current macOS cursor into a transparent PNG. This is local rendering support, not an MCP dependency.

Verification

Always verify the delivered video:

bash
ffprobe -v error \
  -show_entries stream=codec_name,width,height,r_frame_rate \
  -show_entries format=duration,size \
  -of json /path/to/output.mp4

Extract at least one mid-video thumbnail and inspect it:

bash
ffmpeg -y -ss 8 -i /path/to/output.mp4 -frames:v 1 -update 1 /tmp/browser-demo-thumb.png

Confirm:

  • Resolution is the requested output, usually 3840x2880 for 4:3 4K.
  • Frame rate is 60/1 or equivalent.
  • Duration matches the request.
  • Cursor is visible, natural, and on-target.
  • The video is cropped to browser content, not the desktop.
  • The browser viewport override has been reset.

© nirholas, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 6 other files (scripts) in third_party/designcode-agent-skills/agent-skills/codex/browser-video-recording of nirholas/three.ws.

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

Open the folder on GitHubat commit ddf6e49

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in nirholas/three.ws, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Browser Video Recording next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Browser Video Recording compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Browser Video Recording this skillnirholas/three.ws2271 repos~1.5kAutomated safety check: PassApache-2.0
Record E2E Giflablup/backend.ai-webui133—~907Automated safety check: NotesLGPL-3.0
Render Myth Vs Factgooseworks-ai/goose-skills1.2k—~2.2kAutomated safety check: PassMIT
Michel UI Demo RecorderPackmindHub/packmind317—~6.4kAutomated safety check: PassApache-2.0
Cs Code VideoChenShuo2004/cs-skills193—~2.1kAutomated safety check: PassMIT
Render Chatgpt Chatgooseworks-ai/goose-skills1.2k—~2.2kAutomated safety check: PassMIT

Similar skills

  • Record E2E Gif

    lablup/backend.ai-webui

    Record Playwright e2e tests as one GIF per test case (video → ffmpeg palette GIF) and return a markdown table for a PR description.

    133 GitHub stars~907 tokensUpdated today
    Testing & QAAuto-check: notes

  • Render Myth Vs Fact

    gooseworks-ai/goose-skills

    Assemble a myth-vs-fact kinetic-typography explainer video ad (≈29.5s, 9:16) from N myth/fact pairs + hook / turn / punch copy + palette + a brand end-card PNG + a VO track — a hook, 3 red-strike…

    1.2k GitHub stars~2.2k tokensUpdated today
    Media & CreativeAuto-check passed

  • Michel UI Demo Recorder

    PackmindHub/packmind

    Record polished UI demo videos and screenshots of a running web app using Playwright MCP — for client deliverables, release notes, feature walkthroughs, or bug repros.

    317 GitHub stars~6.4k tokensUpdated today
    Media & CreativeAuto-check passed

  • Cs Code Video

    ChenShuo2004/cs-skills

    用代码做动画视频：页面暴露 render(t)，Playwright 逐帧截图 + FFmpeg 合成 mp4，可接合成配乐、出图和配音。通用模式先明确主题、规格、风格和声音，出风格卡、分镜与关键帧后逐镜制作；Vibe知识大赏模式额外查证来源、记录真实素材许可、先渲 10 秒样片。触发词包括…

    193 GitHub stars~2.1k tokensUpdated today
    Media & CreativeAuto-check passed

  • Render Chatgpt Chat

    gooseworks-ai/goose-skills

    Assemble a ChatGPT chat-reveal video ad from a thread + timeline JSON — one continuous Playwright recording of a ChatGPT mobile chat (user types with the iOS keyboard up → taps send → keyboard…

    1.2k GitHub stars~2.2k tokensUpdated today
    Media & CreativeAuto-check passed

  • Character Animation QA

    calesthio/OpenMontage

    Review local character animation with schema checks, Playwright browser previews, frame sampling, and FFmpeg/ffprobe final output checks.

    65k GitHub stars~389 tokensUpdated 5 days ago
    Media & CreativeAuto-check passed

More from nirholas/three.ws

All 92 skills in this repo

  • Add Shader Cursor Trail

    nirholas/three.ws

    Add the Shaders WebGPU mouse effect used for the Tidal Commons hero: a white twinkling halftone cursor trail driven by ChromaFlow, masked through a DotGrid, finished with chromatic ripples and film…

    227 GitHub starsUsed in 1 repo~760 tokens
    Auto-check passed

  • Publish Project To GitHub

    nirholas/three.ws

    Package a finished local project into an intentional GitHub repository, create a strong README and visual preview, push it safely, configure a public GitHub Pages URL when the project is compatible…

    227 GitHub starsUsed in 1 repo~2.2k tokens
    Auto-check: notes

  • Audit Reference Originality

    nirholas/three.ws

    Audit a website or digital experience against its supplied source references for originality and plagiarism risk.

    227 GitHub starsUsed in 1 repo~1.8k tokens
    Auto-check passed

  • Build Daily Inspiration Sites

    nirholas/three.ws

    Turn a completed daily UI inspiration capture into exactly five original landing-page builds, one per separate Codex task, using Sites.

    227 GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed

  • Write Like Meng On X

    nirholas/three.ws

    Write, rewrite, review, or continuously refine X/Twitter posts in Meng To's current voice using his deduplicated authored-post corpus, personal and product context, shared resources, and Content…

    227 GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed

  • Metamask Agent Wallet

    nirholas/three.ws

    A skill your agent uses when the user asks anything about blockchain wallets, transactions, signing, token transfers, supported chains, wallet balances, perpetual futures trading, prediction…

    227 GitHub stars~4.5k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Browser Video Recording

What does Browser Video Recording do?

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…. ws. 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.

When should I use Browser Video Recording?

Browser Video Recording fits situations like: the user asks to record; re-record browser actions; show cursor clicks and zooms; make Dribbble/UI inspiration.

How do I install Browser Video Recording in Claude Code?

Run `npx skills add nirholas/three.ws --skill browser-video-recording -a claude-code`. Or copy the skill folder (third_party/designcode-agent-skills/agent-skills/codex/browser-video-recording in nirholas/three.ws) into .claude/skills/browser-video-recording in your project. Claude Code loads it when a task matches its description.

How do I install Browser Video Recording in Codex?

Run `npx skills add nirholas/three.ws --skill browser-video-recording -a codex`. Or copy the skill folder (third_party/designcode-agent-skills/agent-skills/codex/browser-video-recording in nirholas/three.ws) into .agents/skills/browser-video-recording in your project. Codex loads it when a task matches its description.

Can I use Browser Video Recording in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add nirholas/three.ws --skill browser-video-recording -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/browser-video-recording, .gemini/skills/browser-video-recording, .github/skills/browser-video-recording and .opencode/skills/browser-video-recording in your project.

What does Browser Video Recording need to run?

Going by SKILL.md and its folder, Browser Video Recording needs Python for the scripts in its folder and the command-line tools its instructions call (python3, ffprobe and ffmpeg). Our summary lists: Python 3.

Does Browser Video Recording access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Browser Video Recording safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Browser Video Recording use?

Browser Video Recording is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Browser Video Recording use?

About 1.5k tokens (SKILL.md is roughly 6.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Browser Video Recording?

Skills that share tags, products or a category with Browser Video Recording: Record E2E Gif (lablup/backend.ai-webui, 133 stars), Render Myth Vs Fact (gooseworks-ai/goose-skills, 1.2k stars), Michel UI Demo Recorder (PackmindHub/packmind, 317 stars) and Cs Code Video (ChenShuo2004/cs-skills, 193 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Browser Video Recording?

nirholas (a GitHub user) maintains it in nirholas/three.ws, which has 227 GitHub stars. The repository holds 92 skills in this directory. The repository was last updated on October 8, 2026.

Source: nirholas/three.ws on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.