Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

CLI Demo Generator

Turn a list of shell commands into polished animated terminal GIFs using VHS, ready to drop into your README.

Image & VideoIntermediate★ 1,323⑂ 212AI score 9/10Last updated: Aug 8, 2026

What it does

  • Generates VHS tape files from the commands you supply and records them into animated GIFs.
  • Configurable theme, font size, terminal dimensions, and title, with smart timing that gives install/build/test commands longer pauses.
  • Supports self-bootstrapping demos using Hide/Show so cleanup and setup steps never appear in the final GIF.
  • Filters noisy progress output with regex, and works around VHS parser limits (no $, escaped quotes, or backticks) via base64-encoded wrapper scripts.
  • Speeds up finished GIFs with gifsicle instead of re-recording, and extracts frames with ffmpeg so results can be visually verified.
  • Batch mode builds many GIFs from a single YAML config; interactive mode records a live session via asciinema.

Who it's for

  • Open-source maintainers who want animated demos in their README.
  • Developers who re-record the same demo every release and need reproducible tape files.
  • DevRel folks and technical writers documenting internal CLI tools.
  • Anyone tired of re-shooting screen recordings because of one typo.

Examples

  1. Install demo: -c "npm install my-package" -c "npm run build" -o demo.gif produces a README-ready GIF in one command.
  2. Always record from a clean state: add --bootstrap "npm uninstall my-package 2>/dev/null" --speed 2 to hide teardown steps and output a 2x-speed demo.
  3. Batch build: define install / usage / advanced demos in demos.yaml and run batch_generate.py demos.yaml --output-dir ./gifs to render them all at once.

· · · Install guide · · ·

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the cli-demo-generator folder from the GitHub repo daymade/claude-code-skills into my ~/.claude/skills/cli-demo-generator/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/daymade/claude-code-skills.git /tmp/claude-code-skills && cp -r /tmp/claude-code-skills/cli-demo-generator ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal and install VHS: brew install charmbracelet/tap/vhs (on Linux, grab the binary from GitHub Releases or use your package manager).
  2. Install optional tools: brew install gifsicle ffmpeg asciinema for speed-ups, frame verification, and live recording.
  3. For YAML batch configs, install PyYAML: pip3 install pyyaml.
  4. Clone the skill repository: git clone https://github.com/daymade/claude-code-skills.git
  5. Copy the skill folder into Claude Code: mkdir -p ~/.claude/skills && cp -r claude-code-skills/cli-demo-generator ~/.claude/skills/
  6. Restart Claude Code and ask something like "record a GIF demo of my CLI" to trigger the skill.
  7. Confirm demo.gif is produced; if text wraps, increase --width or lower --font-size.
View source on GitHub ↗License: MIT