cli-demo-generator
Generates professional animated CLI demos as GIFs using VHS terminal recordings. Use to create terminal demos, record CLI workflows as GIFs, generate animated documentation, build demo tapes for README files, or showcase any command-line tool visually: record terminal / VHS tape / demo GIF / animate my CLI.
- Installs
- 944
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/daymade/claude-code-skills --skill cli-demo-generator- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads cli-demo-generator automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
CLI Demo Generator
Create professional animated CLI demos. Four approaches, from fully automated to pixel-precise manual control.
Quick Start
Simplest path — give commands, get GIF:
python3 ${CLAUDE_SKILL_DIR}/scripts/auto_generate_demo.py \
-c "npm install my-package" \
-c "npm run build" \
-o demo.gif
Self-bootstrapping demo — for repeatable recordings that clean their own state:
python3 ${CLAUDE_SKILL_DIR}/scripts/auto_generate_demo.py \
-c "npm install my-package" \
-c "npm run build" \
-o demo.gif \
--bootstrap "npm uninstall my-package 2>/dev/null" \
--speed 2
Critical: VHS Parser Limitations
VHS Type strings cannot contain $, \", or backticks. These cause parse errors:
# FAILS — VHS parser rejects special chars
Type "echo \"hello $USER\""
Type "claude() { command claude \"$@\"; }"
Workaround: base64 encode the command, decode at runtime:
# 1. Encode your complex command
echo 'claude() { command claude "$@" 2>&1 | grep -v "noise"; }' | base64
# Output: Y2xhdWRlKCkgey4uLn0K
# 2. Use in tape
Type "echo Y2xhdWRlKCkgey4uLn0K | base64 -d > /tmp/wrapper.sh && source /tmp/wrapper.sh"
This pattern is essential for output filtering, function definitions, and any command with shell special characters.
Approaches
1. Automated Generation (Recommended)
python3 ${CLAUDE_SKILL_DIR}/scripts/auto_generate_demo.py \
-c "command1" -c "command2" \
-o output.gif \
--title "My Demo" \
--theme "Catppuccin Latte" \
--font-size 24 \
--width 1400 --height 600
| Flag | Default | Description |
|---|---|---|
-c | required | Command to include (repeatable) |
-o | required | Output GIF path |
--title | none | Title shown at start |
--theme | Dracula | VHS theme name |
--font-size | 16 | Font size in pt |
--width | 1400 | Terminal width px |
--height | 700 | Terminal height px |
--bootstrap | none | Hidden setup command (repeatable) |
--filter | none | Regex pattern to filter from output |
--speed | 1 | Playback speed multiplier (uses gifsicle) |
--no-execute | false | Generate .tape only |
Smart timing: install/build/test/deploy → 3s, ls/pwd/echo → 1s, others → 2s.
2. Batch Generation
Create multiple demos from one config:
# demos.yaml
demos:
- name: "Install"
output: "install.gif"
commands: ["npm install my-package"]
- name: "Usage"
output: "usage.gif"
commands: ["my-package --help", "my-package run"]
python3 ${CLAUDE_SKILL_DIR}/scripts/batch_generate.py demos.yaml --output-dir ./gifs
3. Interactive Recording
Record a live terminal session:
bash ${CLAUDE_SKILL_DIR}/scripts/record_interactive.sh output.gif --theme "Catppuccin Latte"
# Type commands naturally, Ctrl+D when done
Requires asciinema (brew install asciinema).
4. Manual Tape File
For maximum control, write a tape directly. Templates in assets/templates/:
basic.tape— simple command sequenceinteractive.tape— typing simulationself-bootstrap.tape— self-cleaning demo with hidden setup (recommended for repeatable demos)
Advanced Patterns
These patterns come from production use. See references/advanced_patterns.md for full details.
Self-Bootstrapping Demos
Demos that clean previous state, set up environment, and hide all of it from the viewer:
Hide
Type "cleanup-previous-state 2>/dev/null"
Enter
Sleep 2s
Type "clear"
Enter
Sleep 500ms
Show
Type "the-command-users-see"
Enter
Sleep 3s
The Hide → commands → clear → Show sequence is critical. clear wipes the terminal buffer so hidden commands don't leak into the GIF.
Output Noise Filtering
Filter noisy progress lines from commands that produce verbose output:
# Hidden: create a wrapper function that filters noise
Hide
Type "echo <base64-encoded-wrapper> | base64 -d > /tmp/w.sh && source /tmp/w.sh"
Enter
Sleep 500ms
Type "clear"
Enter
Sleep 500ms
Show
# Visible: clean command, filtered output
Type "my-noisy-command"
Enter
Sleep 3s
Frame Verification
After recording, verify GIF content by extracting key frames:
# Extract frames at specific positions
ffmpeg -i demo.gif -vf "select=eq(n\,100)" -frames:v 1 /tmp/frame.png -y 2>/dev/null
# View the frame (Claude can read images)
# Use Read tool on /tmp/frame.png to verify content
Post-Processing Speed-Up
Use gifsicle to speed up recordings without re-recording:
# 2x speed (halve frame delay)
gifsicle -d2 original.gif "#0-" > fast.gif
# 1.5x speed
gifsicle -d4 original.gif "#0-" > faster.gif
Template Placeholder Pattern
Keep tape files generic with placeholders, replace at build time:
# In tape file
Type "claude plugin marketplace add MARKETPLACE_REPO"
# In build script
sed "s|MARKETPLACE_REPO|$DETECTED_REPO|g" template.tape > rendered.tape
vhs rendered.tape
Timing & Sizing Reference
| Context | Width | Height | Font | Duration |
|---|---|---|---|---|
| README/docs | 1400 | 600 | 16-20 | 10-20s |
| Presentation | 1800 | 900 | 24 | 15-30s |
| Compact embed | 1200 | 600 | 14-16 | 10-15s |
| Wide output | 1600 | 800 | 16 | 15-30s |
See references/best_practices.md for detailed guidelines.
Troubleshooting
| Problem | Solution |
|---|---|
| VHS not installed | brew install charmbracelet/tap/vhs |
| gifsicle not installed | brew install gifsicle |
| GIF too large | Reduce dimensions, sleep times, or use --speed 2 |
| Text wraps/breaks | Increase --width or decrease --font-size |
VHS parse error on $ or \" | Use base64 encoding (see Critical section above) |
| Hidden commands leak into GIF | Add clear + Sleep 500ms before Show |
| Commands execute before previous finishes | Increase Sleep duration |
Tape File Syntax
references/vhs_syntax.md is the full VHS tape-file reference — every command,
setting, and key name, with the argument forms each accepts. Read it when writing
a tape by hand, when a tape parses but behaves unexpectedly, or when you need a
command this SKILL.md does not show an example of.
Dependencies
Required: VHS (brew install charmbracelet/tap/vhs)
Optional: gifsicle (speed-up), asciinema (interactive recording), ffmpeg (frame verification), PyYAML (batch YAML configs)
FAQ
What does the cli-demo-generator skill do?
Generates professional animated CLI demos as GIFs using VHS terminal recordings. Use to create terminal demos, record CLI workflows as GIFs, generate animated documentation, build demo tapes for README files, or showcase any command-line tool visually: record terminal / VHS tape / demo GIF / animate my CLI.
How do I install cli-demo-generator?
Run npx skills add https://github.com/daymade/claude-code-skills --skill cli-demo-generator in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/cli-demo-generator/ (personal) or .claude/skills/cli-demo-generator/ (project).
Which AI agents can use cli-demo-generator?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is cli-demo-generator safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains cli-demo-generator?
It is published by daymade in daymade/claude-code-skills. It has 944 recorded installs.
More from daymade/claude-code-skills
twitter-reader
daymade/claude-code-skills
Fetches Twitter/X post and Article content — text, author, engagement metrics and embedded media — downloading images locally and generating complete Markdown with image references. Use when retrieving a tweet's text or an X Article with images, or pulling post metadata for a Markdown/PKM record. Preferred over Jina alone for X Articles with images.
i18n-expert
daymade/claude-code-skills
This skill should be used when setting up, auditing, or enforcing internationalization/localization in UI codebases (React/TS, i18next or similar, JSON locales), including installing/configuring the i18n framework, replacing hard-coded strings, ensuring en-US/zh-CN coverage, mapping error codes to localized messages, and validating key parity, pluralization, and formatting.
prompt-optimizer
daymade/claude-code-skills
Transforms vague prompts or feature requests into precise, testable specifications using EARS (Easy Approach to Requirements Syntax) grounded in relevant domain theories (GTD, BJ Fogg, Gestalt). Use when requirements lack triggers or measurable outcomes, or the user asks to "optimize my prompt" / "improve this requirement" / "make this more specific".
ppt-creator
daymade/claude-code-skills
Deprecated presentation entry retained as a compatibility notice. Use to check the retirement status of ppt-creator or identify a legacy installation. This package does not generate PPTX files.
qa-expert
daymade/claude-code-skills
Sets up QA testing processes: test strategies, Google Testing Standards test cases, P0-P4 bug tracking, quality metrics, progress reports, autonomous execution via master prompts, and OWASP security testing, with third-party QA handoff docs. Use when establishing QA infrastructure, writing test cases, executing test plans, or tracking bugs. Not for auditing an already-rendered UI (use frontend-visual-qa).
macos-cleaner
daymade/claude-code-skills
Diagnoses and safely reclaims macOS disk space: caches, logs, app remnants, large/duplicate files, Docker/OrbStack, Chromium code-sign clones, developer caches. Use when a Mac is low on storage, shows “Caching needs more space”, or before deleting anything to avoid data loss. Not for Windows/Linux or permission issues (use macos-permissions).
Popular docs & writing skills
grill-with-docs
mattpocock/skills
A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.
lark-markdown
open.feishu.cn
飞书 Markdown：查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件，或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档，也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。
writing-beats
mattpocock/skills
Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.
writing-shape
mattpocock/skills
Writing, exploit: shape raw material into an article, paragraph by paragraph.
writing-fragments
mattpocock/skills
Writing, explore: mine raw fragments, no structure yet.
writing-for-agents
mattpocock/skills
Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.