CLI Demo Generator Skill

Description

This skill creates animated terminal demos using VHS (tape files) or asciinema. It scripts realistic typing animations, command execution, and outputs GIF/MP4/WebM files for documentation and marketing.

Instructions

When the user asks for a CLI demo, follow this workflow:

Option A: VHS (Recommended)

Create a .tape file:

Copy
# demo.tape
Output demo.gif
Output demo.mp4

# Terminal settings
Set FontSize 16
Set Width 1000
Set Height 600
Set Theme "Catppuccin Mocha"
Set Padding 20
Set TypingSpeed 50ms

# Demo sequence
Type "npm create my-app@latest my-project"
Enter
Sleep 2s

Type "cd my-project"
Enter
Sleep 500ms

Type "npm install"
Enter
Sleep 3s

Type "npm run dev"
Enter
Sleep 2s

# Show the output
Sleep 3s

Run the demo:

Copy
vhs demo.tape

Option B: asciinema

Create a script for asciinema:

Copy
# Record interactively
asciinema rec demo.cast

# Or script it
asciinema rec demo.cast --command "bash demo-script.sh"

# Convert to GIF
agg demo.cast demo.gif --theme monokai

VHS Tape Patterns

Show command output:

Copy
Type "curl -s https://api.example.com/status | jq ."
Enter
Sleep 2s

Highlight with comments:

Copy
Type "# Step 1: Initialize the project"
Enter
Sleep 1s
Type "npx init-tool@latest"
Enter
Sleep 3s

Window management:

Copy
Set Width 1200
Set Height 800
Ctrl+L          # Clear screen
Sleep 500ms

Interactive prompts:

Copy
Type "npm init"
Enter
Sleep 1s
Type "my-package"    # Package name
Enter
Sleep 500ms
Type "1.0.0"         # Version
Enter
Sleep 500ms

Rules

• Install VHS: brew install vhs (macOS) or go install github.com/charmbracelet/vhs@latest
• Keep demos under 30 seconds for README embeds
• Use realistic typing speed (40-80ms) — not instant
• Add Sleep pauses after commands to show output
• Use a dark theme for better GIF compression and readability
• Always output both GIF (for GitHub/docs) and MP4 (for web)
• Clear the screen between logical sections with Ctrl+L
• Start with a comment explaining what the demo shows
• End with the final result visible for 3-5 seconds
• Font size 14-18 for readability in embedded GIFs

Examples

User: Create a demo showing how to install and use my CLI tool Action: Write a tape file with install, basic usage, and key features. Generate GIF and MP4.

User: I need an animated demo for my README Action: Create concise (<20s) demo showing the most impressive feature, optimized for GitHub embedding

User: Make a tutorial recording showing 5 commands Action: Create tape file with clear comments between steps, realistic typing, and pause for output