claude-code-skills-reference/demos/README.md

Skill Demonstrations

This directory contains automated demonstrations of each skill using VHS (Video Home System) 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
├── doc-to-markdown/
│   └── convert-docs.tape         # Convert documents
└── generate_all_demos.sh         # Generate all GIFs

🎬 Generating Demos

Prerequisites

Install VHS:

macOS:

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

This will:

1. Find all .tape files
2. Generate corresponding .gif files
3. Report success/failure for each demo

Generate a Specific Demo

vhs < skill-creator/init-skill.tape

This creates demos/skill-creator/init-skill.gif.

📝 Creating New Demos

VHS Tape File Format

A .tape file consists of commands that VHS executes in a virtual terminal:

# Output configuration
Output demos/my-skill/my-demo.gif

# Terminal settings
Set FontSize 16
Set Width 1400
Set Height 700
Set Theme "Dracula"
Set Padding 20

# Demo script
Type "echo Hello World" Sleep 500ms
Enter
Sleep 2s

Common VHS Commands

Command	Description	Example
Output	Set output file path	Output demos/skill/demo.gif
Set FontSize	Set terminal font size	Set FontSize 18
Set Width/Height	Set terminal dimensions	Set Width 1400
Set Theme	Set color theme	Set Theme "Dracula"
Type	Type text	Type "ls -la"
Type@<speed>	Type with custom speed	Type@500ms "slow typing"
Enter	Press Enter key	Enter
Sleep	Pause execution	Sleep 2s
Ctrl+C	Send Ctrl+C	Ctrl+C

Demo Guidelines

When creating new demos:

1. Keep demos short - Under 30 seconds ideally
2. Use readable font size - 16-18pt minimum
3. Show realistic usage - Practical, real-world examples
4. Add brief comments - Explain what's happening
5. Use consistent theme - Dracula theme recommended
6. Test before committing - Generate and review the GIF

Example: Creating a New Demo

1. Create the tape file:

touch demos/my-skill/my-workflow.tape

2. Write the demo script:

Output demos/my-skill/my-workflow.gif

Set FontSize 16
Set Width 1400
Set Height 700
Set Theme "Dracula"
Set Padding 20

Type "# My Skill Demo" Sleep 500ms Enter
Sleep 1s

Type "echo 'Step 1: Setup'" Sleep 500ms
Enter
Sleep 2s

Type "echo 'Step 2: Execute'" Sleep 500ms
Enter
Sleep 2s

3. Generate the GIF:

vhs < demos/my-skill/my-workflow.tape

4. Review the output:

open demos/my-skill/my-workflow.gif  # macOS
xdg-open demos/my-skill/my-workflow.gif  # Linux

🎨 Themes

VHS supports various themes. We use "Dracula" for consistency, but you can try:

• Dracula (default)
• Nord
• Monokai
• Solarized Dark
• Tokyo Night

📚 Resources

• VHS Documentation: https://github.com/charmbracelet/vhs
• VHS Examples: https://github.com/charmbracelet/vhs/tree/main/examples
• Tape File Syntax: https://github.com/charmbracelet/vhs/blob/main/syntax.md

🔧 Troubleshooting

VHS not found

Ensure VHS is in your PATH:

which vhs

Permission denied

Make the generation script executable:

chmod +x generate_all_demos.sh

Demo generation fails

Check the tape file syntax:

vhs validate < demos/my-skill/my-demo.tape

GIF file too large

Reduce dimensions or duration:

Set Width 1200  # Smaller width
Set Height 600  # Smaller height
Sleep 1s        # Shorter pauses

📝 Adding Demos to README

After generating demos, add them to the main README.md:

### skill-creator - Skill Development Toolkit

<div align="center">
  <img src="./demos/skill-creator/init-skill.gif" alt="Initialize Skill Demo" width="800"/>
</div>

Guide for creating effective Claude Code skills...

---

Pro Tip: Demos are automatically regenerated by CI/CD when tape files change (coming soon!).