cli-demo-generator
Generates professional animated CLI demos as GIFs using VHS terminal recordings. Handles tape file creation, self-bootstrapping demos with hidden setup, output noise filtering, post-processing speed-up, and frame-level verification. Use when users want to create terminal demos, record CLI workflows
By daymade · 831 installs
npx skills add daymade/claude-code-skills --skill cli-demo-generator
Source repository · Upstream listing
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:
Self bootstrapping demo — for repeatable recordings that clean their own state:
Critical: VHS Parser Limitations
VHS Type strings cannot contain $ , \" , or backticks. These cause parse errors:
Workaround: base64 encode the command , decode at runtime:
This pattern is essential for output filtering, function definitions, and any command with shell special characters.
Approaches
1. Automated Generation (Recommended)
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:
3. Interactive Recording
Record a live terminal session:
Requires asciinema ( brew install asciinema ).
4. Manual Tape File
For maximum control, write a tape directly. Templates in assets/templates/ :
basic.tape — simple command sequence
interactive.tape — typing simulation
self 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:
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:
Frame Verification
After recording, verify GIF content by extracting key frames:
Post Processing Speed Up
Use gifsicle to speed up recordings without re recording:
Template Placeholder Pattern
Keep tape files generic with placeholders, replace at build time:
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)