# CLI Demo Generator

Generates professional animated CLI demos as GIFs using VHS terminal recordings.

- Repository: https://github.com/daymade/claude-code-skills (1509 stars)
- Category: Writing
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add daymade/claude-code-skills --skill cli-demo-generator -g -a claude-code -y`
Codex: `npx skills add daymade/claude-code-skills --skill cli-demo-generator -g -a codex -y`
Cursor: `npx skills add daymade/claude-code-skills --skill cli-demo-generator -g -a cursor -y`
Gemini CLI: `npx skills add daymade/claude-code-skills --skill cli-demo-generator -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add daymade/claude-code-skills`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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" \
  -o demo.gif
```

**Self-bootstrapping demo**, for repeatable recordings that clean their own state:

```bash
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:

```tape
# FAILS, VHS parser rejects special chars
Type "echo \"hello $USER\""
Type "claude() { command claude \"$@\"; }"
```

**Workaround: base64 encode the command**, decode at runtime:

```bash
# 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)

```bash
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
```

The rest: https://github.com/daymade/claude-code-skills/blob/HEAD/cli-demo-generator/SKILL.md