CLI Demo GIF Generator Skill

CLI Demo GIF Generator

Create polished terminal demo GIFs using vhs.

Prerequisites

brew install vhs

Usage

1. Create tape file

Place in docs/demo/ to keep root clean:

mkdir -p docs/demo

2. Tape file structure

# Description comment
Output docs/demo/demo.gif

Set Shell "bash"
Set FontSize 16
Set Width 900
Set Height 500
Set Padding 20
Set Theme "Catppuccin Mocha"
Set TypingSpeed 50ms

# Commands here
Type "command --help"
Enter
Sleep 2s

3. For unpublished CLI packages

Use Hide/Show to set up aliases silently before the visible demo:

# Set up alias without showing it
Hide
Type "alias mycli='bun run src/cli/index.ts'"
Enter
Sleep 500ms
Show

# Now show the demo with clean commands
Type "mycli --help"
Enter
Sleep 2s

4. Generate GIF

vhs docs/demo/cli.tape

Tape Commands Reference

| Command | Description | |---------|-------------| | Output <path> | Output file path (.gif, .mp4, .webm) | | Set Shell "bash" | Shell to use | | Set FontSize <n> | Font size (16 recommended) | | Set Width <n> | Terminal width in pixels | | Set Height <n> | Terminal height in pixels | | Set Padding <n> | Padding around terminal | | Set Theme "<name>" | Color theme | | Set TypingSpeed <duration> | Delay between keystrokes | | Type "<text>" | Type text | | Enter | Press enter | | Sleep <duration> | Wait (e.g., 2s, 500ms) | | Hide | Stop recording | | Show | Resume recording | | Ctrl+C | Send interrupt |

Recommended Themes

Catppuccin Mocha - dark, modern
Dracula - dark purple
Tokyo Night - dark blue
One Dark - dark
GitHub Dark - GitHub's dark theme

Tips

Keep GIFs under 1MB for fast loading
Use Sleep generously so viewers can read output
50ms typing speed looks natural
900x500 works well for most CLIs
Show 3-5 commands max per GIF

Agent Skills: CLI Demo GIF Generator

Skill Files