VHS Terminal Recordings
Create polished terminal GIF recordings using VHS (Video Hardware Software) by Charmbracelet.
How to use it
- Hit Copy the whole skill.
- Claude: ⋯ → Download .md, then Customize → Skills → Add → Upload skill.
ChatGPT: make a Project and paste it into Instructions.
Neither? Paste it at the top of a new chat — it works for that chat. - Describe your job in plain words. The AI follows the skill from there.
Claude Code — installs the whole folder, not just SKILL.md
npx degit gooseworks-ai/goose-skills/skills/design/capabilities/terminal-gif-recordings#main ~/.claude/skills/terminal-gif-recordingsFor one project only, change the path to .claude/skills/terminal-gif-recordings.
Not working?
- Check which app you pasted it into — the steps above name the right one.
- Some skills need the paid tier of Claude or ChatGPT.
Paste into Claude, ChatGPT or Cursor.
Show the full text186 lines
VHS Terminal Recordings
Setup
Read your credentials from ~/.gooseworks/credentials.json:
export GOOSEWORKS_API_KEY=$(python3 -c "import json;print(json.load(open('$HOME/.gooseworks/credentials.json'))['api_key'])")
export GOOSEWORKS_API_BASE=$(python3 -c "import json;print(json.load(open('$HOME/.gooseworks/credentials.json')).get('api_base','https://api.gooseworks.ai'))")
If ~/.gooseworks/credentials.json does not exist, tell the user to run: npx gooseworks login
All endpoints use Bearer auth: -H "Authorization: Bearer $GOOSEWORKS_API_KEY"
Create professional terminal GIF/video recordings using VHS.
Quick Start
# Install VHS
brew install vhs
# Run a tape file
vhs demo.tape
Style Settings (Orthogonal Standard)
Use these settings for consistent, polished recordings:
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 variantDracula- Purple/pink tonesTokyo Night- Blue tonesNord- Cool blue/gray
Syntax Highlighting Setup
Enable zsh syntax highlighting before recording:
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
# 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
| Command | Description |
|---|---|
Type "text" |
Type text (with realistic timing) |
Enter |
Press enter key |
Sleep 500ms |
Pause for duration |
Hide / Show |
Hide/show terminal during setup |
Ctrl+C |
Send interrupt signal |
Output file.gif |
Set output file |
Timing Guidelines
Sleep 500ms- After typing command, before EnterSleep 2s- Short command outputSleep 3-4s- Longer output or API responsesSleep 1s- End of recording pause
Example: CLI Demo
# 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
Enter
Type "clear"
Enter
Show
# Search
Type "orth search 'web scraping'"
Sleep 500ms
Enter
Sleep 2.5s
# Run command
Type "curl -s -X POST $GOOSEWORKS_API_BASE/v1/proxy/orthogonal/run \
-H "Authorization: Bearer $GOOSEWORKS_API_KEY" \
-H "Content-Type: application/json" \
-d '{"api":"olostep","path":"/v1/scrapes"}'
Sleep 500ms
Enter
Sleep 4s
Sleep 1s
Output Formats
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
- Keep it short - 10-20 seconds max for attention
- Hide setup - Use
Hide/Showfor env vars and cd commands - Realistic typing - VHS adds natural typing speed automatically
- Clear between sections - Use
Type "clear"+Enterif needed - 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"
| 1 | |
| 2 | name terminal-gif-recordings |
| 3 | 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. |
| 4 | source orthogonal |
| 5 | |
| 6 | |
| 7 | |
| 8 | # VHS Terminal Recordings |
| 9 | |
| 10 | ## Setup |
| 11 | |
| 12 | Read your credentials from ~/.gooseworks/credentials.json: |
| 13 | |
| 14 | export GOOSEWORKS_API_KEY=$(python3 -c "import json;print(json.load(open('$HOME/.gooseworks/credentials.json'))['api_key'])") |
| 15 | export GOOSEWORKS_API_BASE=$(python3 -c "import json;print(json.load(open('$HOME/.gooseworks/credentials.json')).get('api_base','https://api.gooseworks.ai'))") |
| 16 | |
| 17 | |
| 18 | If ~/.gooseworks/credentials.json does not exist, tell the user to run: `npx gooseworks login` |
| 19 | |
| 20 | All endpoints use Bearer auth: `-H "Authorization: Bearer $GOOSEWORKS_API_KEY"` |
| 21 | |
| 22 | |
| 23 | Create professional terminal GIF/video recordings using [VHS]. |
| 24 | |
| 25 | ## Quick Start |
| 26 | |
| 27 | |
| 28 | # Install VHS |
| 29 | brew install vhs |
| 30 | |
| 31 | # Run a tape file |
| 32 | vhs demo.tape |
| 33 | |
| 34 | |
| 35 | ## Style Settings (Orthogonal Standard) |
| 36 | |
| 37 | Use these settings for consistent, polished recordings: |
| 38 | |
| 39 | |
| 40 | Set Shell "zsh" |
| 41 | Set FontSize 18 |
| 42 | Set Width 900 |
| 43 | Set Height 500 |
| 44 | Set Theme "Catppuccin Frappe" |
| 45 | Set Padding 20 |
| 46 | Set Margin 40 |
| 47 | Set MarginFill "gradient-bg.png" # Optional: gradient background image |
| 48 | Set BorderRadius 10 |
| 49 | |
| 50 | |
| 51 | ### Theme Options |
| 52 | |
| 53 | `Catppuccin Frappe` - Soft purple/blue tones (recommended) |
| 54 | `Catppuccin Mocha` - Darker variant |
| 55 | `Dracula` - Purple/pink tones |
| 56 | `Tokyo Night` - Blue tones |
| 57 | `Nord` - Cool blue/gray |
| 58 | |
| 59 | ## Syntax Highlighting Setup |
| 60 | |
| 61 | Enable zsh syntax highlighting before recording: |
| 62 | |
| 63 | |
| 64 | Hide |
| 65 | Type "source /opt/homebrew/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" |
| 66 | Enter |
| 67 | Show |
| 68 | |
| 69 | |
| 70 | Install if needed: `brew install zsh-syntax-highlighting` |
| 71 | |
| 72 | ## Tape File Structure |
| 73 | |
| 74 | |
| 75 | # Header comment describing the demo |
| 76 | Output demo.gif # Output filename (.gif, .webm, .mp4) |
| 77 | |
| 78 | # Style settings |
| 79 | Set Shell "zsh" |
| 80 | Set FontSize 18 |
| 81 | Set Width 900 |
| 82 | Set Height 500 |
| 83 | Set Theme "Catppuccin Frappe" |
| 84 | Set Padding 20 |
| 85 | |
| 86 | # Hidden setup (env vars, cd, clear) |
| 87 | Hide |
| 88 | Type "export API_KEY=xxx" |
| 89 | Enter |
| 90 | Type "clear" |
| 91 | Enter |
| 92 | Show |
| 93 | |
| 94 | # Demo commands |
| 95 | Type "echo 'Hello World'" |
| 96 | Sleep 500ms |
| 97 | Enter |
| 98 | Sleep 2s |
| 99 | |
| 100 | # End with pause |
| 101 | Sleep 1s |
| 102 | |
| 103 | |
| 104 | ## Key Commands |
| 105 | |
| 106 | | Command | Description | |
| 107 | |---------|-------------| |
| 108 | | `Type "text"` | Type text (with realistic timing) | |
| 109 | | `Enter` | Press enter key | |
| 110 | | `Sleep 500ms` | Pause for duration | |
| 111 | | `Hide` / `Show` | Hide/show terminal during setup | |
| 112 | | `Ctrl+C` | Send interrupt signal | |
| 113 | | `Output file.gif` | Set output file | |
| 114 | |
| 115 | ## Timing Guidelines |
| 116 | |
| 117 | `Sleep 500ms` - After typing command, before Enter |
| 118 | `Sleep 2s` - Short command output |
| 119 | `Sleep 3-4s` - Longer output or API responses |
| 120 | `Sleep 1s` - End of recording pause |
| 121 | |
| 122 | ## Example: CLI Demo |
| 123 | |
| 124 | |
| 125 | # Orthogonal CLI Demo |
| 126 | Output cli-demo.gif |
| 127 | |
| 128 | Set Shell "zsh" |
| 129 | Set FontSize 18 |
| 130 | Set Width 900 |
| 131 | Set Height 500 |
| 132 | Set Theme "Catppuccin Frappe" |
| 133 | Set Padding 20 |
| 134 | Set BorderRadius 10 |
| 135 | |
| 136 | # Setup |
| 137 | Hide |
| 138 | Type "source /opt/homebrew/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" |
| 139 | Enter |
| 140 | |
| 141 | Enter |
| 142 | Type "clear" |
| 143 | Enter |
| 144 | Show |
| 145 | |
| 146 | # Search |
| 147 | Type "orth search 'web scraping'" |
| 148 | Sleep 500ms |
| 149 | Enter |
| 150 | Sleep 2.5s |
| 151 | |
| 152 | # Run command |
| 153 | Type "curl -s -X POST $GOOSEWORKS_API_BASE/v1/proxy/orthogonal/run \ |
| 154 | -H "Authorization: Bearer $GOOSEWORKS_API_KEY" \ |
| 155 | -H "Content-Type: application/json" \ |
| 156 | -d '{"api":"olostep","path":"/v1/scrapes"}' |
| 157 | Sleep 500ms |
| 158 | Enter |
| 159 | Sleep 4s |
| 160 | |
| 161 | Sleep 1s |
| 162 | |
| 163 | |
| 164 | ## Output Formats |
| 165 | |
| 166 | |
| 167 | Output demo.gif # Animated GIF (default, best for docs) |
| 168 | Output demo.webm # WebM video (smaller, web-friendly) |
| 169 | Output demo.mp4 # MP4 video (universal compatibility) |
| 170 | |
| 171 | |
| 172 | ## Tips |
| 173 | |
| 174 | **Keep it short** - 10-20 seconds max for attention |
| 175 | **Hide setup** - Use `Hide`/`Show` for env vars and cd commands |
| 176 | **Realistic typing** - VHS adds natural typing speed automatically |
| 177 | **Clear between sections** - Use `Type "clear"` + `Enter` if needed |
| 178 | **Test first** - Run commands manually before recording |
| 179 | |
| 180 | ## Gradient Background (Optional) |
| 181 | |
| 182 | Create `gradient-bg.png` for professional look: |
| 183 | Use 1200x800px image |
| 184 | Subtle gradient (dark purple to dark blue works well) |
| 185 | Set with `Set MarginFill "gradient-bg.png"` |
| 186 |