Agent skill

CLI Demo Generator

by daymade in daymade/claude-code-skills

Generates professional animated CLI demos as GIFs using VHS terminal recordings.

MITAuto-check passedDevelopment

Install CLI Demo Generator

skills CLI
$ npx skills add daymade/claude-code-skills --skill cli-demo-generator -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install daymade/claude-code-skills cli-demo-generator --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/daymade/claude-code-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/cli-demo-generator .claude/skills/cli-demo-generator && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
cli-demo-generator
GitHub stars
1.4k
Token cost
~1.7k tokens
SKILL.md length
475 words
Files
11 (incl. scripts, references, assets)
Skills in repo
102
Repo updated
First seen
Licence
MIT

At a glance

Generates professional animated CLI demos as GIFs using VHS terminal recordings.

  • Works in 4 steps: Automated Generation (Recommended) → Batch Generation → Interactive Recording → …
  • Create terminal demos
  • SKILL.md covers Quick Start, Critical: VHS Parser Limitations, Approaches and Advanced Patterns, plus 4 more sections
  • Runs Python and Shell scripts from its folder; calls python3, brew and bash

What it does

CLI Demo Generator is an agent skill from daymade/claude-code-skills. Generates professional animated CLI demos as GIFs using VHS terminal recordings. Use to create terminal demos, record CLI workflows as GIFs, generate animated documentation, build demo tapes for README files, or showcase any command-line tool visually: record terminal / VHS tape / demo GIF / animate my CLI.

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 15 other files, including scripts, reference files and assets (for example `assets/examples/batch-config.yaml`, `references/advanced_patterns.md` and `references/best_practices.md`).

It sits in Development. The repository describes itself as: Professional Claude Code skills marketplace featuring production-ready skills for enhanced development workflows. The licence is MIT.

When your agent uses it

  • Create terminal demos
  • Record CLI workflows as GIFs
  • Generate animated documentation
  • Build demo tapes for README files

Example prompts

  • “Use the cli-demo-generator skill to generate professional animated CLI demos as GIFs using VHS terminal recordings”
  • “/cli-demo-generator”

Requirements

  • Python 3
  • Node.js
  • A Bash shell

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Automated Generation (Recommended)
  2. Batch Generation
  3. Interactive Recording
  4. Manual Tape File

What it can do on your machine

Read from SKILL.md and the folder at commit 3c268d6. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 3 files in scripts/ (Python and Shell), which the agent can run.

    Shell commands in SKILL.md call:

    • python3
    • brew
    • bash
    • ffmpeg

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

CLI Demo Generator loads about 1.7k tokens when it runs, and up to ~6.1k if it reads all its reference files. Until then it costs about 82 tokens; SKILL.md has 475 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~82
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~6.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from daymade/claude-code-skills at commit 3c268d6, republished under its MIT licence (© daymade). 475 words, ~1,702 tokens.

Download SKILL.mdSave it as .claude/skills/cli-demo-generator/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.
name
cli-demo-generator
description
Generates professional animated CLI demos as GIFs using VHS terminal recordings. Use to create terminal demos, record CLI workflows as GIFs, generate animated documentation, build demo tapes for README files, or showcase any command-line tool visually: record terminal / VHS tape / demo GIF / animate my CLI.

CLI Demo Generator

Create professional animated CLI demos. Four approaches, from fully automated to pixel-precise manual control.

Quick Start

Simplest path — give commands, get GIF:

bash
python3 ${CLAUDE_SKILL_DIR}/scripts/auto_generate_demo.py \
  -c "npm install my-package" \
  -c "npm run build" \
  -o demo.gif

Self-bootstrapping demo — for repeatable recordings that clean their own state:

bash
python3 ${CLAUDE_SKILL_DIR}/scripts/auto_generate_demo.py \
  -c "npm install my-package" \
  -c "npm run build" \
  -o demo.gif \
  --bootstrap "npm uninstall my-package 2>/dev/null" \
  --speed 2

Critical: VHS Parser Limitations

VHS Type strings cannot contain $, \", or backticks. These cause parse errors:

tape
# FAILS — VHS parser rejects special chars
Type "echo \"hello $USER\""
Type "claude() { command claude \"$@\"; }"

Workaround: base64 encode the command, decode at runtime:

bash
# 1. Encode your complex command
echo 'claude() { command claude "$@" 2>&1 | grep -v "noise"; }' | base64
# Output: Y2xhdWRlKCkgey4uLn0K

# 2. Use in tape
Type "echo Y2xhdWRlKCkgey4uLn0K | base64 -d > /tmp/wrapper.sh && source /tmp/wrapper.sh"

This pattern is essential for output filtering, function definitions, and any command with shell special characters.

Approaches

bash
python3 ${CLAUDE_SKILL_DIR}/scripts/auto_generate_demo.py \
  -c "command1" -c "command2" \
  -o output.gif \
  --title "My Demo" \
  --theme "Catppuccin Latte" \
  --font-size 24 \
  --width 1400 --height 600
FlagDefaultDescription
-crequiredCommand to include (repeatable)
-orequiredOutput GIF path
--titlenoneTitle shown at start
--themeDraculaVHS theme name
--font-size16Font size in pt
--width1400Terminal width px
--height700Terminal height px
--bootstrapnoneHidden setup command (repeatable)
--filternoneRegex pattern to filter from output
--speed1Playback speed multiplier (uses gifsicle)
--no-executefalseGenerate .tape only

Smart timing: install/build/test/deploy → 3s, ls/pwd/echo → 1s, others → 2s.

2. Batch Generation

Create multiple demos from one config:

yaml
# demos.yaml
demos:
  - name: "Install"
    output: "install.gif"
    commands: ["npm install my-package"]
  - name: "Usage"
    output: "usage.gif"
    commands: ["my-package --help", "my-package run"]
bash
python3 ${CLAUDE_SKILL_DIR}/scripts/batch_generate.py demos.yaml --output-dir ./gifs
3. Interactive Recording

Record a live terminal session:

bash
bash ${CLAUDE_SKILL_DIR}/scripts/record_interactive.sh output.gif --theme "Catppuccin Latte"
# Type commands naturally, Ctrl+D when done

Requires asciinema (brew install asciinema).

4. Manual Tape File

For maximum control, write a tape directly. Templates in assets/templates/:

  • basic.tape — simple command sequence
  • interactive.tape — typing simulation
  • self-bootstrap.tape — self-cleaning demo with hidden setup (recommended for repeatable demos)

Advanced Patterns

These patterns come from production use. See references/advanced_patterns.md for full details.

Self-Bootstrapping Demos

Demos that clean previous state, set up environment, and hide all of it from the viewer:

tape
Hide
Type "cleanup-previous-state 2>/dev/null"
Enter
Sleep 2s
Type "clear"
Enter
Sleep 500ms
Show

Type "the-command-users-see"
Enter
Sleep 3s

The Hide → commands → clear → Show sequence is critical. clear wipes the terminal buffer so hidden commands don't leak into the GIF.

Output Noise Filtering

Filter noisy progress lines from commands that produce verbose output:

tape
# Hidden: create a wrapper function that filters noise
Hide
Type "echo <base64-encoded-wrapper> | base64 -d > /tmp/w.sh && source /tmp/w.sh"
Enter
Sleep 500ms
Type "clear"
Enter
Sleep 500ms
Show

# Visible: clean command, filtered output
Type "my-noisy-command"
Enter
Sleep 3s
Frame Verification

After recording, verify GIF content by extracting key frames:

bash
# Extract frames at specific positions
ffmpeg -i demo.gif -vf "select=eq(n\,100)" -frames:v 1 /tmp/frame.png -y 2>/dev/null

# View the frame (Claude can read images)
# Use Read tool on /tmp/frame.png to verify content
Show full SKILL.md (192 more words)Show less
Post-Processing Speed-Up

Use gifsicle to speed up recordings without re-recording:

bash
# 2x speed (halve frame delay)
gifsicle -d2 original.gif "#0-" > fast.gif

# 1.5x speed
gifsicle -d4 original.gif "#0-" > faster.gif
Template Placeholder Pattern

Keep tape files generic with placeholders, replace at build time:

tape
# In tape file
Type "claude plugin marketplace add MARKETPLACE_REPO"

# In build script
sed "s|MARKETPLACE_REPO|$DETECTED_REPO|g" template.tape > rendered.tape
vhs rendered.tape

Timing & Sizing Reference

ContextWidthHeightFontDuration
README/docs140060016-2010-20s
Presentation18009002415-30s
Compact embed120060014-1610-15s
Wide output16008001615-30s

See references/best_practices.md for detailed guidelines.

Troubleshooting

ProblemSolution
VHS not installedbrew install charmbracelet/tap/vhs
gifsicle not installedbrew install gifsicle
GIF too largeReduce dimensions, sleep times, or use --speed 2
Text wraps/breaksIncrease --width or decrease --font-size
VHS parse error on $ or \"Use base64 encoding (see Critical section above)
Hidden commands leak into GIFAdd clear + Sleep 500ms before Show
Commands execute before previous finishesIncrease Sleep duration

Tape File Syntax

references/vhs_syntax.md is the full VHS tape-file reference — every command, setting, and key name, with the argument forms each accepts. Read it when writing a tape by hand, when a tape parses but behaves unexpectedly, or when you need a command this SKILL.md does not show an example of.

Dependencies

Required: VHS (brew install charmbracelet/tap/vhs)

Optional: gifsicle (speed-up), asciinema (interactive recording), ffmpeg (frame verification), PyYAML (batch YAML configs)

© daymade, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 10 other files (scripts, references, assets) in cli-demo-generator of daymade/claude-code-skills.

  • SKILL.md
  • assets/examples/batch-config.yaml
  • assets/templates/basic.tape
  • assets/templates/interactive.tape
  • assets/templates/self-bootstrap.tape
  • references/advanced_patterns.md
  • references/best_practices.md
  • references/vhs_syntax.md
  • scripts/auto_generate_demo.py
  • scripts/batch_generate.py
  • scripts/record_interactive.sh

Open the folder on GitHubat commit 3c268d6

Compare with similar skills

CLI Demo Generator next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

CLI Demo Generator compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
CLI Demo Generator this skilldaymade/claude-code-skills1.4k—~1.7kAutomated safety check: PassMIT
Finishing a Development Branchobra/superpowers296k5 repos~1.9kAutomated safety check: PassMIT
Typescript Advanced Typesrolling-scopes/rsschool-app10k24 repos~4.2kAutomated safety check: PassMPL-2.0
PR Babysitteropeninterpreter/openinterpreter69k3 repos~4.2kAutomated safety check: PassApache-2.0
Code Review ChecklistshareAI-lab/learn-claude-code78k5 repos~1.1kAutomated safety check: PassMIT
Greplooponyx-dot-app/onyx32k4 repos~3.3kAutomated safety check: PassMIT

Similar skills

  • Walks the last step of a branch: confirm tests pass, detect the git environment, ask how to integrate, carry out your choice and clean up the worktree.

    296k GitHub starsUsed in 5 repos~1.9k tokens
    DevelopmentAuto-check passed
  • Typescript Advanced Types

    rolling-scopes/rsschool-app

    Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications.

    10k GitHub starsUsed in 24 repos~4.2k tokens
    DevelopmentAuto-check passed
  • PR Babysitter

    openinterpreter/openinterpreter

    Watches an open GitHub pull request until it merges, handling review comments, diagnosing CI failures and retrying flaky checks along the way.

    69k GitHub starsUsed in 3 repos~4.2k tokens
    DevelopmentAuto-check passed
  • Code Review Checklist

    shareAI-lab/learn-claude-code

    Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.

    78k GitHub starsUsed in 5 repos~1.1k tokens
    DevelopmentAuto-check passed
  • Greploop

    onyx-dot-app/onyx

    Iteratively improves a PR (GitHub), MR (GitLab), or shelved changelist (Perforce) until Greptile gives it a 5/5 confidence score with zero unresolved comments.

    32k GitHub starsUsed in 4 repos~3.3k tokens
    DevelopmentAuto-check passed
  • Guidelines

    akash-network/node

    Behavioral guidelines to reduce common LLM coding mistakes. An agent skill from akash-network/node.

    1.1k GitHub starsUsed in 22 repos~577 tokens
    DevelopmentAuto-check passed

More from daymade/claude-code-skills

All 102 skills in this repo
  • Video Comparer

    daymade/claude-code-skills

    This skill should be used when comparing two videos to analyze compression results or quality differences.

    1.4k GitHub starsUsed in 1 repo~1.4k tokens
    Auto-check: notes
  • Doc To Markdown

    daymade/claude-code-skills

    Converts DOCX/PDF/PPTX and saved HTML/HTM to high-quality Markdown with automatic post-processing.

    1.4k GitHub stars~2.5k tokensUpdated today
    Auto-check passed
  • Interaction Design Board

    daymade/claude-code-skills

    Generates several distinct, clickable HTML interaction prototypes for one product surface into a Design Board and collects selection/remix feedback before implementation.

    1.4k GitHub stars~2.7k tokensUpdated today
    Auto-check passed
  • Auto Repo Setup

    daymade/claude-code-skills

    Diagnoses and repairs repository setup and guarded Git workflows for Claude Code or Codex — environment repair, startup sync, hook auditing, collaborator handoff.

    1.4k GitHub stars~2.6k tokensUpdated today
    Auto-check: notes
  • Bigdata Skill

    daymade/claude-code-skills

    Pulls Bigdata.com (RavenPack) financial and news data via the official bigdata-client SDK and /v1/ REST endpoints — structured financials, prices, analyst estimates, entity-sentiment series…

    1.4k GitHub stars~3.7k tokensUpdated today
    Auto-check passed
  • Bilibili Source

    daymade/claude-code-skills

    Fetches real, citable Bilibili (B站) video data — stats, metadata, tags, and full danmaku text — via login-free API calls, never hand-typed or estimated.

    1.4k GitHub stars~2.2k tokensUpdated today
    Auto-check passed

Categories

Questions about CLI Demo Generator

What does CLI Demo Generator do?

Generates professional animated CLI demos as GIFs using VHS terminal recordings. CLI Demo Generator is an agent skill from daymade/claude-code-skills. Generates professional animated CLI demos as GIFs using VHS terminal recordings.

When should I use CLI Demo Generator?

CLI Demo Generator fits situations like: create terminal demos; record CLI workflows as GIFs; generate animated documentation; build demo tapes for README files.

How do I install CLI Demo Generator in Claude Code?

Run `npx skills add daymade/claude-code-skills --skill cli-demo-generator -a claude-code`. Or copy the skill folder (cli-demo-generator in daymade/claude-code-skills) into .claude/skills/cli-demo-generator in your project. Claude Code loads it when a task matches its description.

How do I install CLI Demo Generator in Codex?

Run `npx skills add daymade/claude-code-skills --skill cli-demo-generator -a codex`. Or copy the skill folder (cli-demo-generator in daymade/claude-code-skills) into .agents/skills/cli-demo-generator in your project. Codex loads it when a task matches its description.

Can I use CLI Demo Generator in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add daymade/claude-code-skills --skill cli-demo-generator -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/cli-demo-generator, .gemini/skills/cli-demo-generator, .github/skills/cli-demo-generator and .opencode/skills/cli-demo-generator in your project.

What does CLI Demo Generator need to run?

Going by SKILL.md and its folder, CLI Demo Generator needs Python and a shell for the scripts in its folder and the command-line tools its instructions call (python3, brew, bash and ffmpeg). Our summary lists: Python 3; Node.js; A Bash shell.

Does CLI Demo Generator access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is CLI Demo Generator safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does CLI Demo Generator use?

CLI Demo Generator is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does CLI Demo Generator use?

About 1.7k tokens (SKILL.md is roughly 6.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 4.4k tokens, read only when the agent opens those files.

What are the alternatives to CLI Demo Generator?

Skills that share tags, products or a category with CLI Demo Generator: Finishing a Development Branch (obra/superpowers, 296k stars), Typescript Advanced Types (rolling-scopes/rsschool-app, 10k stars), PR Babysitter (openinterpreter/openinterpreter, 69k stars) and Code Review Checklist (shareAI-lab/learn-claude-code, 78k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains CLI Demo Generator?

daymade (a GitHub user) maintains it in daymade/claude-code-skills, which has 1,443 GitHub stars. The repository holds 102 skills in this directory. The repository was last updated on October 7, 2026.

Source: daymade/claude-code-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.