name: cli-demo-generator
description: This skill should be used when users want to create animated CLI demos, terminal recordings, or command-line demonstration GIFs. It supports both manual tape file creation and automated demo generation from command descriptions. Use when users mention creating demos, recording terminal sessions, or generating animated GIFs of CLI workflows.
CLI Demo Generator
Generate professional animated CLI demos with ease. This skill supports both automated generation from command descriptions and manual control for custom demos.
When to Use This Skill
Trigger this skill when users request:
- "Create a demo showing how to install my package"
- "Generate a CLI demo of these commands"
- "Make an animated GIF of my terminal workflow"
- "Record a terminal session and convert to GIF"
- "Batch generate demos from this config"
- "Create an interactive typing demo"
Core Capabilities
1. Automated Demo Generation (Recommended)
Use the `auto_gen
Code Examples
README.md
# Skill Demonstrations
This directory contains automated demonstrations of each skill using [VHS (Video Home System)](https://github.com/charmbracelet/vhs) by Charmbracelet.
VHS allows you to write terminal recordings as code, making demos reproducible, version-controllable, and typo-free.
## 📁 Demo Structure
demos/
├── skill-creator/
│ ├── init-skill.tape # Initialize a new skill
│ ├── validate-skill.tape # Validate skill quality
│ └── package-skill.tape # Package for distribution
├── github-ops/
│ └── create-pr.tape # Create pull requests
├── markdown-tools/
│ └── convert-docs.tape # Convert documents
└── generate_all_demos.sh # Generate all GIFs
## 🎬 Generating Demos
### Prerequisites
Install VHS:
**macOS:**
```bash
brew install vhs
Linux (with Go):
go install github.com/charmbracelet/vhs@latest
Or download from:
https://github.com/charmbracelet/vhs/releases
Generate All Demos
### generate_all_demos.sh
#!/bin/bash
set -e
echo "================================================"
echo "Generating Claude Code Skills Demo GIFs"
echo "================================================"
echo ""
Colors for output
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
RED='\033[0;31m'
NC='\033[0m' # No Color
Check if VHS is installed
if ! command -v vhs &> /dev/null; then
echo -e "${RED}Error: VHS is not installed!${NC}"
echo ""
echo "Install VHS to generate demo GIFs:"
echo ""
echo "macOS:"
echo " brew install vhs"
echo ""
echo "Linux (with Go):"
echo " go install github.com/charmbracelet/vhs@latest"
echo ""
echo "Or download from: https://github.com/charmbracelet/vhs/releases"
echo ""
exit 1
fi
echo -e "${GREEN}✓ VHS found${NC}"
echo ""
Find all .tape files
TAPE_FILES=$(find demos -name "*.tape" -type f | sort)
TOTAL=$(echo "$TAPE_FILES" | wc -l | tr -d ' ')
CURRENT=0
echo "Found $TOTAL demo tape files"
echo ""
Generate each demo
for tape_fi
### index.html
Claude Code Skills Marketplace - Demo Gallery
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #333;
line-height: 1.6;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
padding: 60px 20px;
color: white;
}
header h1 {
font-size: 3rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
header p
