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)