CLI Demo Generator
Generate professional animated CLI demos as GIFs using VHS terminal recordings — with self-bootstrapping setup, output filtering, and frame-level verification.
A static command list never shows what your tool actually does. This playbook turns shell commands into polished animated GIFs perfect for READMEs and docs.
Who it's for: open-source maintainers, developer advocates, technical writers, tool builders
Example
"Make a demo GIF of my CLI install and build" → A clean animated GIF showing the commands running, ready to drop into a README
CLAUDE.md Template
New here? 3-minute setup guide → | Already set up? Copy the template below.
npx ccplaybooks add cli-demo-generator# 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:
```bash
python3 ${CLAUDE_SKILL_DIR}/scripts/auto_generate_demo.py \
-c "npm install my-package" \
-c "npm run build" \Get new playbooks like this one
One email a week with new Claude Code workflows. Free, like everything here.
No spam. Unsubscribe anytime.
What This Does
Generate professional animated CLI demos as GIFs using VHS terminal recordings — with self-bootstrapping setup, output filtering, and frame-level verification.
What's Inside
The template covers:
- Critical: VHS Parser Limitations
- Approaches
- Advanced Patterns
- Timing & Sizing Reference
- Troubleshooting
- Dependencies
Quick Start
Step 1: Create a Project Folder
Make a dedicated folder for this workflow and open it in Claude Code.
Step 2: Download the Template
Click Download above to save the template, then drop it into your project as CLAUDE.md (or paste it into your existing one).
Step 3: Start Working
Tell Claude what you need in plain language — it will follow the template's workflow automatically. For example:
Make a demo GIF of my CLI install and build
Claude reads the template and runs the steps for you.