muayadjamal/flow-video-recorder

Agent skill: record narrated, captioned demo videos of web (Playwright) and native iOS (Maestro) apps, with…

Before you install: no copy-paste command · license MIT · link reachable

First step: npx skills add muayadjamal/flow-video-recorder # into this project

SECURITY.md ✓

View on GitHub ↗Link checked 2026-11-12 · HTTP 200 · opens the vendor's own site

Install & config

Client config (built from the install command this repo gives)

{
  "mcpServers": {
    "muayadjamal-flow-video-recorder": {
      "command": "npx",
      "args": ["skills"]
    }
  }
}

Parsed from the README we fetched on 2026-10-26; we have not executed it.

command/args come from the install command the repository states. When it is ambiguous, the project README wins.

VS Code (.vscode/mcp.json - the key is servers)

{
  "servers": {
    "muayadjamal-flow-video-recorder": {
      "command": "npx",
      "args": ["skills"]
    }
  }
}

Same server, but VS Code keeps it under <code>servers</code>.

Claude Code (command line)

claude mcp add --transport stdio muayadjamal-flow-video-recorder -- npx skills

Claude Code does not read a config file; add the server with this command.

Key names differ by client: Clients & CLI

Star count: 6 ★ · muayadjamal/flow-video-recorder · read from the GitHub search API · (checked 2026-11-13 20:00:50)
Source: read directly from its GitHub page · type: open-source project
Harvest history: first seen 2026-10-21 · last seen 2026-11-14 · seen 28× · listed by 2 sources
Score: score 203 · 6 ★ · 2 sources · repo
Install: npx skills

FAQ (answers come from our records)

How do I install it?

The repository provides this install command: npx skills. It comes from the repository itself; we cannot guarantee it runs as-is in your client.

Who is it for?

We filed it under these tags: Agent 技能. The tags come from the entry itself, not a taxonomy we imposed.

Who maintains it?

repository muayadjamal/flow-video-recorder；first catalogued 2026-10-21；last seen 2026-11-14。There is no official certification or quality rating here — we record sources and dates only.

An agent skill that records a narrated demo video of your app. Tell Claude Code

以下摘录自该仓库的 README（片段） · 在 GitHub 读完整 README →

It works on two surfaces:
| | Browser | Native iOS |
| Driver | Playwright | Maestro on the simulator |
| Capture | Playwright recordVideo | simctl io recordVideo |
| Cursor, ripple, captions | injected into the page | composited after capture |
| Output | 2560x1440 MP4, supersampled | device-resolution MP4 |
Narration can come from ElevenLabs, OpenAI, the macOS say command, or any local model you can call from a shell line (Piper, Kokoro, a TTS server). With no engine configured the same flow records silently with captions.
## See it working
A two-minute overview of a school management platform, made with every option on: browser chrome, a numbered step header, subtitles that follow the voice, four short zooms that ride the cursor on the clicks that matter, a canvas in the app's own colour, two motion-graphics scenes that explain what the screens cannot show, and the product's own intro and outro cards.
https://github.com/user-attachments/assets/0f77fdf1-53e0-43df-a161-af2c58e53971
Full quality: download the MP4. Every video on edumind.school/course was made with this skill too: 20 walkthroughs of the same platform, about 41 minutes in total, in English and Arabic, covering both the web app and the native parent and teacher apps. Two that go deeper:
The parent app (native iOS)
Exams: from question bank to paper (web)
## Install
Claude Code, as a plugin (updates itself). Two commands, run one after the other:
1. Add the marketplace:
text
/plugin marketplace add muayadjamal/flow-video-recorder
2. Install the plugin:
text
/plugin install flow-video-recorder@flow-video-recorder
Claude Code, Codex, Cursor and other agents, through skills.sh (copies the files so you can edit them):
bash
npx skills add muayadjamal/flow-video-recorder # into this project
npx skills add muayadjamal/flow-video-recorder -g # for every project
npx skills add muayadjamal/flow-video-recorder -g -a claude-code # one agent only
Codex, from inside a session:
text
$skill-installer install https://github.com/muayadjamal/flow-video-recorder
By hand:
bash
git clone https://github.com/muayadjamal/flow-video-recorder ~/.claude/skills/flow-video-recorder
## Requirements
node 20 or newer and ffmpeg on the PATH.
Browser flows: playwright in the target project (npm i -D playwright && npx playwright install chromium).
iOS flows: macOS with Xcode, a booted simulator with your app installed, and Maestro at ~/.maestro/bin/maestro.
Narration, optional: ELEVENLABSAPIKEY or OPENAIAPIKEY in the environment or the project's .env, or TTSCOMMAND for your own engine. On macOS say works with nothing set.
## Usage
Ask for a video in plain language:
> Record a demo video of the checkout flow, with narration.
The skill first asks what goes in the video (voice-over, subtitles, pointer, motion graphics), checks the tools above, copies its helper scripts into the project, writes a flow file for your app, and runs one of:
bash
ELEVENLABSAPIKEY=… BASE=http://localhost:8000 bash /assets/record.sh flow.mjs demo.mp4
ELEVENLABSAPIKEY=… UDID= bash /assets/record-ios.sh flow.mjs demo.mp4
A flow file is a short JavaScript module. Each step says its line, does its clicking, and holds until the line is finished:

Listed badge (optional)

Copy this line into the README if you want the listing mark. Optional, and it does not affect being listed.

[![Listed on Anclum](https://anclum.com/badge/listed.svg)](https://anclum.com/en/s/muayadjamal-flow-video-recorder/)

Source: github · https://github.com/muayadjamal/flow-video-recorder
Browse by field: Agent skills
Traction: 6 ★
Listed by: 2 independent sources
added: today
Security policy: the repository has SECURITY.md at its root (we checked that the file exists, not what it says)

More like this

claude-code-plugin-trackerOpen-source project reacher-z/Awesome-REAOpen-source project eukosh/youtube-kitOpen-source project

All 420 →

Filed under

Agent skills420 entries Open-source repo2,514 From GitHub2,437

Every tag opens the full list for that filter. Counts are the live catalogue figures.

Browse all fields →

← Back to index