AgentSkillsCN

vhs-terminal-recordings

使用Charmbracelet推出的VHS（Video Hardware Software）工具，制作精美的终端GIF录制。适用于需要为文档、README文件或营销素材创作终端演示、CLI GIF、命令行录制，或生成动画化终端截图的场景。

SKILL.md
--- frontmatter
name: vhs-terminal-recordings
description: Create polished terminal GIF recordings using VHS (Video Hardware Software) by Charmbracelet. Use when asked to create terminal demos, CLI gifs, command-line recordings, or animated terminal screenshots for documentation, READMEs, or marketing.

VHS Terminal Recordings

Create professional terminal GIF/video recordings using VHS.

Quick Start

bash
# Install VHS
brew install vhs

# Run a tape file
vhs demo.tape

Style Settings (Orthogonal Standard)

Use these settings for consistent, polished recordings:

tape
Set Shell "zsh"
Set FontSize 18
Set Width 900
Set Height 500
Set Theme "Catppuccin Frappe"
Set Padding 20
Set Margin 40
Set MarginFill "gradient-bg.png"  # Optional: gradient background image
Set BorderRadius 10

Theme Options

  • •Catppuccin Frappe - Soft purple/blue tones (recommended)
  • •Catppuccin Mocha - Darker variant
  • •Dracula - Purple/pink tones
  • •Tokyo Night - Blue tones
  • •Nord - Cool blue/gray

Syntax Highlighting Setup

Enable zsh syntax highlighting before recording:

tape
Hide
Type "source /opt/homebrew/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh"
Enter
Show

Install if needed: brew install zsh-syntax-highlighting

Tape File Structure

tape
# Header comment describing the demo
Output demo.gif           # Output filename (.gif, .webm, .mp4)

# Style settings
Set Shell "zsh"
Set FontSize 18
Set Width 900
Set Height 500
Set Theme "Catppuccin Frappe"
Set Padding 20

# Hidden setup (env vars, cd, clear)
Hide
Type "export API_KEY=xxx"
Enter
Type "clear"
Enter
Show

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

# End with pause
Sleep 1s

Key Commands

CommandDescription
Type "text"Type text (with realistic timing)
EnterPress enter key
Sleep 500msPause for duration
Hide / ShowHide/show terminal during setup
Ctrl+CSend interrupt signal
Output file.gifSet output file

Timing Guidelines

  • •Sleep 500ms - After typing command, before Enter
  • •Sleep 2s - Short command output
  • •Sleep 3-4s - Longer output or API responses
  • •Sleep 1s - End of recording pause

Example: CLI Demo

tape
# Orthogonal CLI Demo
Output cli-demo.gif

Set Shell "zsh"
Set FontSize 18
Set Width 900
Set Height 500
Set Theme "Catppuccin Frappe"
Set Padding 20
Set BorderRadius 10

# Setup
Hide
Type "source /opt/homebrew/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh"
Enter
Type "export ORTHOGONAL_API_KEY=orth_live_xxx"
Enter
Type "clear"
Enter
Show

# Search
Type "orth search 'web scraping'"
Sleep 500ms
Enter
Sleep 2.5s

# Run command
Type "orth run olostep /v1/scrapes url_to_scrape=https://example.com"
Sleep 500ms
Enter
Sleep 4s

Sleep 1s

Output Formats

tape
Output demo.gif    # Animated GIF (default, best for docs)
Output demo.webm   # WebM video (smaller, web-friendly)
Output demo.mp4    # MP4 video (universal compatibility)

Tips

  1. •Keep it short - 10-20 seconds max for attention
  2. •Hide setup - Use Hide/Show for env vars and cd commands
  3. •Realistic typing - VHS adds natural typing speed automatically
  4. •Clear between sections - Use Type "clear" + Enter if needed
  5. •Test first - Run commands manually before recording

Gradient Background (Optional)

Create gradient-bg.png for professional look:

  • •Use 1200x800px image
  • •Subtle gradient (dark purple to dark blue works well)
  • •Set with Set MarginFill "gradient-bg.png"