OpenSkillIndex← back to search
claude-code

Claude-skill-registry cli-demo-gif

Generate CLI demo GIFs using vhs (Charmbracelet). Use when creating terminal recordings for README files or documentation.

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/cli-demo-gif" ~/.claude/skills/majiayu000-claude-skill-registry-cli-demo-gif && rm -rf "$T"
manifest: skills/data/cli-demo-gif/SKILL.md
source content

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

CommandDescription
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