ReddRadar
Agent skill
cli-demo-gif
Generate CLI demo GIFs using vhs (Charmbracelet). Use when creating terminal recordings for README files or documentation.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/cli-demo-gif
SKILL.md
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, modernDracula- dark purpleTokyo Night- dark blueOne Dark- darkGitHub Dark- GitHub's dark theme
Tips
- Keep GIFs under 1MB for fast loading
- Use
Sleepgenerously so viewers can read output - 50ms typing speed looks natural
- 900x500 works well for most CLIs
- Show 3-5 commands max per GIF
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?