skills/b-open-io/prompts/cli-demo-gif

cli-demo-gif

SKILL.md

CLI Demo GIF Generator

Generate terminal demo GIFs using vhs. When asked to create a CLI demo GIF, produce a .tape file and render it.

Steps

1. Create tape file

Place tape files in docs/demo/ to keep the project root clean:

mkdir -p docs/demo

Write the tape file with appropriate settings for the project's CLI:

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

Type "command --help"
Enter
Sleep 2s

2. For unpublished CLI packages

Use Hide/Show to configure aliases before the visible demo starts:

Hide
Type "alias mycli='bun run src/cli/index.ts'"
Enter
Sleep 500ms
Show

Type "mycli --help"
Enter
Sleep 2s

3. Render the GIF

vhs docs/demo/cli.tape

Tape Command Reference

Command Description
Output <path> Output file path (.gif, .mp4, .webm)
Set Shell "bash" Shell to use
Set FontSize <n> Font size
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

Default Settings

Use these defaults unless the user specifies otherwise:

  • Theme: Catppuccin Mocha
  • TypingSpeed: 50ms
  • Width: 900, Height: 500
  • FontSize: 16
  • Output directory: docs/demo/
Weekly Installs
47
GitHub Stars
8
First Seen
Jan 24, 2026
Installed on
opencode41
gemini-cli40
cursor39
codex38
claude-code38
github-copilot35