cli-demo-generator

1# CLI Demo Generator
2 
3Create professional animated CLI demos. Four approaches, from fully automated to pixel-precise manual control.
4 
5## Quick Start
6 
7**Simplest path** — give commands, get GIF:
8 
9```bash
10python3 ${CLAUDE_SKILL_DIR}/scripts/auto_generate_demo.py \
11  -c "npm install my-package" \
12  -c "npm run build" \
13  -o demo.gif
14```
15 
16**Self-bootstrapping demo** — for repeatable recordings that clean their own state:
17 
18```bash
19python3 ${CLAUDE_SKILL_DIR}/scripts/auto_generate_demo.py \
20  -c "npm install my-package" \
21  -c "npm run build" \
22  -o demo.gif \
23  --bootstrap "npm uninstall my-package 2>/dev/null" \
24  --speed 2
25```
26 
27## Critical: VHS Parser Limitations
28 
29VHS `Type` strings cannot contain `$`, `\"`, or backticks. These cause parse errors:
30 
31```tape
32# FAILS — VHS parser rejects special chars
33Type "echo \"hello $USER\""
34Type "claude() { command claude \"$@\"; }"
35```
36 
37**Workaround: base64 encode the command**, decode at runtime:
38 
39```bash
40# 1. Encode your complex command
41echo 'claude() { command claude "$@" 2>&1 | grep -v "noise"; }' | base64
42# Output: Y2xhdWRlKCkgey4uLn0K
43 
44# 2. Use in tape
45Type "echo Y2xhdWRlKCkgey4uLn0K | base64 -d > /tmp/wrapper.sh && source /tmp/wrapper.sh"
46```
47 
48This pattern is essential for output filtering, function definitions, and any command with shell special characters.
49 
50## Approaches
51 
52### 1. Automated Generation (Recommended)
53 
54```bash
55python3 ${CLAUDE_SKILL_DIR}/scripts/auto_generate_demo.py \
56  -c "command1" -c "command2" \
57  -o output.gif \
58…