milad-ahmd/demo-recorder

> This skill lives in the main collection: milad-ahmd/agent-skills. Please ⭐ star it there; that's where updates land first.
> Docs: https://milad-ahmd.github.io/agent-skills/skills/demo-recorder/ · Claude Code: /plugin install all-skills --marketplace milad-ahmd/agent-skills
# 🎬 demo-recorder
Record a real demo GIF or video of your CLI or web app for the README and launch posts. An Agent Skill for Claude Code, Cline, Cursor, Codex and other AI coding agents.
Install · Usage · How it works · All skills
> Part of agent-skills, a growing collection of practical skills for AI coding agents.
## 📦 Install
One command (installs the whole collection):
bash
curl -fsSL https://raw.githubusercontent.com/milad-ahmd/agent-skills/main/install.sh | bash -s -- demo-recorder
Manually (Claude Code):
bash
git clone https://github.com/milad-ahmd/demo-recorder /tmp/demo-recorder
mkdir -p ~/.claude/skills && cp -r /tmp/demo-recorder/skills/demo-recorder ~/.claude/skills/
Per project: copy skills/demo-recorder into /.claude/skills/.
Any other agent: paste SKILL.md into your rules or system prompt.
## 💬 Usage
Just ask your agent:
text
Make a demo GIF of this CLI for the README
Record the signup flow as a short video
The full workflow, rules and output format are in SKILL.md.
## 🔎 Sample output
makedemo.py is plain Python 3 with no dependencies. It writes the recording script; VHS (or Playwright, for web apps) does the recording. Real output:
text
$ python3 makedemo.py tape --cmd "mytool --version" --cmd "mytool scan ." --out demo.gif
# Record: vhs demo.tape
# Edit the steps below and re-run vhs after the tool changes.
Output demo.gif
Set Shell "bash"
Set FontSize 22
Set Width 1200
Set Height 600
Set Padding 20
Set Framerate 24
Set TypingSpeed 50ms
Type "mytool --version"
Sleep 400ms
Enter
Wait
Sleep 2s
Type "mytool scan ."
Sleep 400ms
Enter
Wait
Sleep 2s
Sleep 3s
makedemo.py check lists which recording tools you have and how to install the missing ones. It never installs anything itself.