Flow Video Recorder

Use when the user wants to record a screen-capture video of a flow through an app: a walkthrough, product demo, feature tour, or reproduction, driven either in a browser with Playwright or in a native iOS app on the simulator with Maestro, with a visible cursor and tap ripple, on-screen step captions, an optional voice-over (ElevenLabs, OpenAI, macOS say, or any local TTS) in sync with the picture, optional motion-graphics explainer scenes spliced between recorded steps with animated transitions, and high-resolution MP4 output. Triggers: "record a demo video", "make a walkthrough / tour video"

6 starsImages, Video & Audio

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add muayadjamal/flow-video-recorder --skill flow-video-recorder

Manual install

git clone --depth 1 https://github.com/muayadjamal/flow-video-recorder.git /tmp/flow-video-recorder
mkdir -p ~/.claude/skills
cp -r /tmp/flow-video-recorder/. ~/.claude/skills/flow-video-recorder

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Flow Video Recorder

Records a flow through your app to a polished MP4: a cursor that glides and
ripples on every click, a caption pill per step, crisp output, and, when a
text-to-speech engine is configured, a human voice explaining what is happening
as it happens. It records two surfaces:

| | Browser | Native iOS |
|---|---|---|
| Driver | Playwright | Maestro (XCUITest) |
| Capture | `recordVideo` → webm | `simctl io recordVideo` → mov |
| Cursor, ripple, captions | injected into the page | composited afterwards |
| Entry point | `record.sh` | `record-ios.sh` |
| Example flow | `flow.example.mjs` | `flow.ios.example.mjs` |

`<skill>` below means wherever this skill is installed, for example
`~/.claude/skills/flow-video-recorder` or `.claude/skills/flow-video-recorder`.

## Quality: always the best, unless told otherwise

Every recording uses the best quality available unless the user asks otherwise. That means the ElevenLabs `eleven_v4` model for narration when ElevenLabs is the engine (also when clips come through the ElevenLabs connector: pass `model_id: eleven_v4`), a 2560×1440 master at `CRF=16` for browser flows, and `CRF=16` for iOS. These are the defaults in the assets; the resolution question below is where the user lowers or raises them.

## The one decision worth understanding first

**The picture is paced to the audio, not the other way round.** Every narration
clip is synthesized and measured before the app opens. A step then says its

Read the full skill on GitHub

Details

Skill name: flow-video-recorder
Repository: muayadjamal/flow-video-recorder
License: MIT
Repo updated: 29 October 2026

FAQ

What does the Flow Video Recorder skill do?

How do I install the Flow Video Recorder skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add muayadjamal/flow-video-recorder --skill flow-video-recorder. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Flow Video Recorder popular?

It lives in muayadjamal/flow-video-recorder, which has 6 GitHub stars and 0 forks.

Related skills

H3 Multimodal Lora Training

chengyansen-ai/h3-multimodal-lora-training

Plan, audit, configure, run when authorized, evaluate, and package MiniMax H3 LoRA training for images, video, stereo audio, motion, and true Ref2VA reference conditioning. Use when a user wants an auditable H3 LoRA dataset or training run; do not use for prompt-only Hailuo generation or unrelated image-model LoRA training.

Images, Video & Audio

Electrical Takeoff

hamzaabduljabbar/autoConst-electrical-takeoff

Lighting/electrical fixture takeoff from a vector PDF drawing set. Runs drawing-pack QA, reads the luminaire schedule (OCR when it is drawn as outlines) and asks for approval of the fixture list, then counts every fixture by tag AND by drawn symbol, measures linear runs in feet from the vectors, verifies with crops, and writes an Excel BOQ with derived quantities plus a clickable HTML drawing viewer with every fixture marked. Use when someone wants an electrical, lighting or fixture takeoff, a luminaire count, linear feet of light fixtures, or to audit a lighting count.

Images, Video & Audio

HTML to Explainer Video

amliuyong/html-to-explainer-video

把任意主题做成讲解/科普视频并渲染成 MP4（HTML/CSS/GSAP 画面 + 确定性逐帧渲染 + 配音（默认阿里云百炼，可切 edge-tts / 火山）+ 词级硬字幕）。触发场景：要做科普/讲解/教学/知识/产品类视频、「讲一下 X 做成视频」、要挑某种视觉风格（极简/数据/赛博/电影感/品牌）出片、要出抖音封面/竖版封面/9:16 封面、要用 html-video 那种模板化画面但更稳的音画同步、anything2explainer 换 HTML 渲染，或提到 html-to-explainer-video / HTML 讲解视频 / explainer video / MG 视频。内置 23 个模板风格（8 类）与 40+ 动作词汇的动效库，主题驱动模板编排；支持 4K60、快门运动模糊、多进程提速、断点续渲；流程含六个用户确认点（渲染通道是硬闸门）。独立可移植，不依赖 html-video / anything2explainer。

Images, Video & Audio

Arcade Rom 3d Remaster

muzbox1973/arcade-rom-3d-remaster

Turn a classic arcade ROM set (MAME .zip such as galaga.zip, pacman.zip, digdug.zip, xevious.zip) that the user provides into a browser 3D remaster - the original program ROMs run unmodified on an emulated board, only the picture is replaced by a Three.js voxel renderer, and the original sound-chip performance is re-rendered in high quality. Use this whenever the user hands over a MAME/arcade ROM file or zip and wants it renewed, remastered, rebuilt in 3D, "리뉴얼", "리마스터", "3D로 만들어", "롬파일로 게임 만들어", or wants an old arcade game to look modern while playing exactly like the original - even if they

Images, Video & Audio

Image Upload

iamzifei/image-upload-skill

Upload images to hosting providers and get shareable URLs 新手引导：输入 `/图床新手`、「这个怎么用」「第一次用」「能干嘛」时，走 SKILL.md 的〈新手上路〉，不要直接开始干活。

Images, Video & Audio

3dprint Scout

madrobotnet/3dprint-scout

Designs 3D-printable parts reference-first: finds existing models, then builds in Fusion, OpenSCAD, Blender or Python, verifies the mesh, saves STL/3MF. Use to 3D print an object. Not for STL edits or resin.

Images, Video & Audio

Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.