VHS Terminal Recordings

Create polished terminal GIF recordings using VHS (Video Hardware Software) by Charmbracelet.

How to use it

  1. Hit Copy the whole skill.
  2. 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.
  3. 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-recordings

For 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.
Step-by-step guide with screenshots · Ask in the forum

Paste into Claude, ChatGPT or Cursor.

Show the full text186 lines
terminal-gif-recordings/SKILL.md186 lines4.2 KBpushed 96d agoRawView on GitHub

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 variant
  • Dracula - Purple/pink tones
  • Tokyo Night - Blue tones
  • Nord - 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 Enter
  • Sleep 2s - Short command output
  • Sleep 3-4s - Longer output or API responses
  • Sleep 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

  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"
1---
2name: terminal-gif-recordings
3description: 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.
4source: orthogonal
5---
6 
7 
8# VHS Terminal Recordings
9 
10## Setup
11 
12Read your credentials from ~/.gooseworks/credentials.json:
13```bash
14export GOOSEWORKS_API_KEY=$(python3 -c "import json;print(json.load(open('$HOME/.gooseworks/credentials.json'))['api_key'])")
15export GOOSEWORKS_API_BASE=$(python3 -c "import json;print(json.load(open('$HOME/.gooseworks/credentials.json')).get('api_base','https://api.gooseworks.ai'))")
16```
17 
18If ~/.gooseworks/credentials.json does not exist, tell the user to run: `npx gooseworks login`
19 
20All endpoints use Bearer auth: `-H "Authorization: Bearer $GOOSEWORKS_API_KEY"`
21 
22 
23Create professional terminal GIF/video recordings using [VHS](https://github.com/charmbracelet/vhs).
24 
25## Quick Start
26 
27```bash
28# Install VHS
29brew install vhs
30 
31# Run a tape file
32vhs demo.tape
33```
34 
35## Style Settings (Orthogonal Standard)
36 
37Use these settings for consistent, polished recordings:
38 
39```tape
40Set Shell "zsh"
41Set FontSize 18
42Set Width 900
43Set Height 500
44Set Theme "Catppuccin Frappe"
45Set Padding 20
46Set Margin 40
47Set MarginFill "gradient-bg.png" # Optional: gradient background image
48Set 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 
61Enable zsh syntax highlighting before recording:
62 
63```tape
64Hide
65Type "source /opt/homebrew/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh"
66Enter
67Show
68```
69 
70Install if needed: `brew install zsh-syntax-highlighting`
71 
72## Tape File Structure
73 
74```tape
75# Header comment describing the demo
76Output demo.gif # Output filename (.gif, .webm, .mp4)
77 
78# Style settings
79Set Shell "zsh"
80Set FontSize 18
81Set Width 900
82Set Height 500
83Set Theme "Catppuccin Frappe"
84Set Padding 20
85 
86# Hidden setup (env vars, cd, clear)
87Hide
88Type "export API_KEY=xxx"
89Enter
90Type "clear"
91Enter
92Show
93 
94# Demo commands
95Type "echo 'Hello World'"
96Sleep 500ms
97Enter
98Sleep 2s
99 
100# End with pause
101Sleep 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```tape
125# Orthogonal CLI Demo
126Output cli-demo.gif
127 
128Set Shell "zsh"
129Set FontSize 18
130Set Width 900
131Set Height 500
132Set Theme "Catppuccin Frappe"
133Set Padding 20
134Set BorderRadius 10
135 
136# Setup
137Hide
138Type "source /opt/homebrew/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh"
139Enter
140 
141Enter
142Type "clear"
143Enter
144Show
145 
146# Search
147Type "orth search 'web scraping'"
148Sleep 500ms
149Enter
150Sleep 2.5s
151 
152# Run command
153Type "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"}'
157Sleep 500ms
158Enter
159Sleep 4s
160 
161Sleep 1s
162```
163 
164## Output Formats
165 
166```tape
167Output demo.gif # Animated GIF (default, best for docs)
168Output demo.webm # WebM video (smaller, web-friendly)
169Output demo.mp4 # MP4 video (universal compatibility)
170```
171 
172## Tips
173 
1741. **Keep it short** - 10-20 seconds max for attention
1752. **Hide setup** - Use `Hide`/`Show` for env vars and cd commands
1763. **Realistic typing** - VHS adds natural typing speed automatically
1774. **Clear between sections** - Use `Type "clear"` + `Enter` if needed
1785. **Test first** - Run commands manually before recording
179 
180## Gradient Background (Optional)
181 
182Create `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 

Discussion