cli-demo-generator by daymade/claude-code-skills
npx skills add https://github.com/daymade/claude-code-skills --skill cli-demo-generator轻松生成专业的动画 CLI 演示。此技能支持根据命令描述自动生成,也支持手动控制以创建自定义演示。
当用户请求以下内容时触发此技能:
使用 auto_generate_demo.py 脚本进行快速、自动的演示创建。这是最简单且最常用的方法。
基本用法:
scripts/auto_generate_demo.py \
-c "npm install my-package" \
-c "npm run build" \
-o demo.gif
带选项的用法:
scripts/auto_generate_demo.py \
-c "command1" \
-c "command2" \
-o output.gif \
--title "Installation Demo" \
--theme "Dracula" \
--width 1400 \
--height 700
脚本参数:
-c, --command:要包含的命令(可指定多次)广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
-o, --output:输出 GIF 文件路径(必需)--title:演示标题(可选,在开始时显示)--theme:VHS 主题(默认:Dracula)--font-size:字体大小(默认:16)--width:终端宽度(默认:1400)--height:终端高度(默认:700)--no-execute:仅生成磁带文件,不执行 VHS智能功能:
使用 batch_generate.py 根据配置文件创建多个演示。
配置文件(YAML):
demos:
- name: "Install Demo"
output: "install.gif"
title: "Installation"
theme: "Dracula"
commands:
- "npm install my-package"
- "npm run build"
- name: "Usage Demo"
output: "usage.gif"
commands:
- "my-package --help"
- "my-package run"
用法:
scripts/batch_generate.py config.yaml --output-dir ./demos
何时使用批量生成:
使用 record_interactive.sh 录制实时终端会话。
用法:
scripts/record_interactive.sh output.gif \
--theme "Dracula" \
--width 1400
录制过程:
何时使用交互式录制:
为了获得最大控制权,可以使用模板手动创建 VHS 磁带文件。
可用模板:
assets/templates/basic.tape - 简单的命令演示assets/templates/interactive.tape - 打字模拟示例工作流程:
cp assets/templates/basic.tape my-demo.tapevhs < my-demo.tape完整的 VHS 语法参考请查阅 references/vhs_syntax.md。
使用自动生成以获得快速结果:
scripts/auto_generate_demo.py \
-c "echo 'Hello World'" \
-c "ls -la" \
-o hello-demo.gif \
--title "Hello Demo"
创建一个批量配置文件并使用批量生成:
demos-config.yamlscripts/batch_generate.py demos-config.yaml --output-dir ./output使用交互式录制来捕捉真实行为:
scripts/record_interactive.sh my-workflow.gif
# 自然地输入命令
# 完成后按 Ctrl+D
创建手动磁带文件以实现精确控制:
--no-execute 生成基础磁带文件vhs < custom-demo.tape全面的指南请参考 references/best_practices.md。关键建议:
计时:
尺寸:
主题:
时长:
# macOS
brew install vhs
# Linux (通过 Go)
go install github.com/charmbracelet/vhs@latest
# macOS
brew install asciinema
# Linux
sudo apt install asciinema
解决方案:
Output demo.mp4解决方案:
--font-size 18--width 1600--theme "Dracula"用户请求:"创建一个演示来展示 npm install"
scripts/auto_generate_demo.py \
-c "npm install my-package" \
-o install-demo.gif \
--title "Package Installation"
用户请求:"创建一个演示来展示使用 git clone、install 和 run 进行项目设置"
scripts/auto_generate_demo.py \
-c "git clone https://github.com/user/repo.git" \
-c "cd repo" \
-c "npm install" \
-c "npm start" \
-o setup-demo.gif \
--title "Project Setup" \
--theme "Nord"
用户请求:"为我的 CLI 工具的所有功能生成演示"
features-demos.yaml:demos:
- name: "Help Command"
output: "help.gif"
commands: ["my-tool --help"]
- name: "Init Command"
output: "init.gif"
commands: ["my-tool init", "ls -la"]
- name: "Run Command"
output: "run.gif"
commands: ["my-tool run --verbose"]
2. 全部生成:
scripts/batch_generate.py features-demos.yaml --output-dir ./demos
用户请求:"录制我交互式使用我的 CLI 工具"
scripts/record_interactive.sh my-session.gif --theme "Tokyo Night"
# 用户自然地输入命令
# Ctrl+D 完成
auto_generate_demo.py - 根据命令列表自动生成演示batch_generate.py - 根据 YAML/JSON 配置生成多个演示record_interactive.sh - 录制并转换交互式终端会话vhs_syntax.md - 完整的 VHS 磁带文件语法参考best_practices.md - 演示创建指南和最佳实践templates/basic.tape - 基本命令演示模板templates/interactive.tape - 交互式打字演示模板examples/batch-config.yaml - 批量配置文件示例必需:
可选:
pip install pyyamlVHS 支持多种输出格式:
Output demo.gif # GIF(默认,最适合文档)
Output demo.mp4 # MP4(对于长演示,压缩效果更好)
Output demo.webm # WebM(文件大小更小)
根据使用场景选择:
此技能提供三种主要方法:
auto_generate_demo.py)- 快速、简单、智能默认值batch_generate.py)- 多个演示、一致的设置record_interactive.sh)- 实时录制、真实输出选择最适合用户需求的方法。对于大多数情况,自动生成是最快、最方便的选项。
每周安装数
131
代码仓库
GitHub 星标数
713
首次出现
2026年1月20日
安全审计
安装于
claude-code113
opencode106
codex105
gemini-cli102
cursor96
github-copilot96
Generate professional animated CLI demos with ease. This skill supports both automated generation from command descriptions and manual control for custom demos.
Trigger this skill when users request:
Use the auto_generate_demo.py script for quick, automated demo creation. This is the easiest and most common approach.
Basic Usage:
scripts/auto_generate_demo.py \
-c "npm install my-package" \
-c "npm run build" \
-o demo.gif
With Options:
scripts/auto_generate_demo.py \
-c "command1" \
-c "command2" \
-o output.gif \
--title "Installation Demo" \
--theme "Dracula" \
--width 1400 \
--height 700
Script Parameters:
-c, --command: Command to include (can be specified multiple times)-o, --output: Output GIF file path (required)--title: Demo title (optional, shown at start)--theme: VHS theme (default: Dracula)--font-size: Font size (default: 16)--width: Terminal width (default: 1400)--height: Terminal height (default: 700)--no-execute: Generate tape file only, don't execute VHSSmart Features:
Use batch_generate.py for creating multiple demos from a configuration file.
Configuration File (YAML):
demos:
- name: "Install Demo"
output: "install.gif"
title: "Installation"
theme: "Dracula"
commands:
- "npm install my-package"
- "npm run build"
- name: "Usage Demo"
output: "usage.gif"
commands:
- "my-package --help"
- "my-package run"
Usage:
scripts/batch_generate.py config.yaml --output-dir ./demos
When to Use Batch Generation:
Use record_interactive.sh for recording live terminal sessions.
Usage:
scripts/record_interactive.sh output.gif \
--theme "Dracula" \
--width 1400
Recording Process:
When to Use Interactive Recording:
For maximum control, create VHS tape files manually using templates.
Available Templates:
assets/templates/basic.tape - Simple command demoassets/templates/interactive.tape - Typing simulationExample Workflow:
cp assets/templates/basic.tape my-demo.tapevhs < my-demo.tapeConsult references/vhs_syntax.md for complete VHS syntax reference.
Use automated generation for quick results:
scripts/auto_generate_demo.py \
-c "echo 'Hello World'" \
-c "ls -la" \
-o hello-demo.gif \
--title "Hello Demo"
Create a batch configuration file and use batch generation:
demos-config.yaml with all demo definitionsscripts/batch_generate.py demos-config.yaml --output-dir ./outputUse interactive recording to capture real behavior:
scripts/record_interactive.sh my-workflow.gif
# Type commands naturally
# Ctrl+D when done
Create manual tape file with precise control:
--no-executevhs < custom-demo.tapeRefer to references/best_practices.md for comprehensive guidelines. Key recommendations:
Timing:
Sizing:
Themes:
Duration:
# macOS
brew install vhs
# Linux (via Go)
go install github.com/charmbracelet/vhs@latest
# macOS
brew install asciinema
# Linux
sudo apt install asciinema
Solutions:
Output demo.mp4Solutions:
--font-size 18--width 1600--theme "Dracula"User request: "Create a demo showing npm install"
scripts/auto_generate_demo.py \
-c "npm install my-package" \
-o install-demo.gif \
--title "Package Installation"
User request: "Create a demo showing project setup with git clone, install, and run"
scripts/auto_generate_demo.py \
-c "git clone https://github.com/user/repo.git" \
-c "cd repo" \
-c "npm install" \
-c "npm start" \
-o setup-demo.gif \
--title "Project Setup" \
--theme "Nord"
User request: "Generate demos for all my CLI tool features"
features-demos.yaml:demos:
- name: "Help Command"
output: "help.gif"
commands: ["my-tool --help"]
- name: "Init Command"
output: "init.gif"
commands: ["my-tool init", "ls -la"]
- name: "Run Command"
output: "run.gif"
commands: ["my-tool run --verbose"]
2. Generate all:
scripts/batch_generate.py features-demos.yaml --output-dir ./demos
User request: "Record me using my CLI tool interactively"
scripts/record_interactive.sh my-session.gif --theme "Tokyo Night"
# User types commands naturally
# Ctrl+D to finish
auto_generate_demo.py - Automated demo generation from command listsbatch_generate.py - Generate multiple demos from YAML/JSON configrecord_interactive.sh - Record and convert interactive terminal sessionsvhs_syntax.md - Complete VHS tape file syntax referencebest_practices.md - Demo creation guidelines and best practicestemplates/basic.tape - Basic command demo templatetemplates/interactive.tape - Interactive typing demo templateexamples/batch-config.yaml - Example batch configuration fileRequired:
Optional:
pip install pyyamlVHS supports multiple output formats:
Output demo.gif # GIF (default, best for documentation)
Output demo.mp4 # MP4 (better compression for long demos)
Output demo.webm # WebM (smaller file size)
Choose based on use case:
This skill provides three main approaches:
auto_generate_demo.py) - Quick, easy, smart defaultsbatch_generate.py) - Multiple demos, consistent settingsrecord_interactive.sh) - Live recording, real outputChoose the approach that best fits the user's needs. For most cases, automated generation is the fastest and most convenient option.
Weekly Installs
131
Repository
GitHub Stars
713
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
claude-code113
opencode106
codex105
gemini-cli102
cursor96
github-copilot96
Skills CLI 使用指南:AI Agent 技能包管理器安装与管理教程
40,000 周安装
GitHub SEO 优化指南:寄生虫SEO、GEO与精选列表创建,提升技术项目可见性
105 周安装
Claude技能创建器教程:AI技能开发与迭代优化全流程指南
199 周安装
Zod TypeScript 模式验证库:运行时数据验证与静态类型推断
199 周安装
React Native 测试模式与工具:TDD、工厂模式、模拟模块与自定义渲染函数
197 周安装
Hyva Create Module:快速创建 Magento 2 模块的 AI 工具
196 周安装
LlamaGuard AI 内容审核模型 - 7B 参数安全分类,过滤暴力、犯罪等有害内容
196 周安装