Skill: killerapp/vhs-recorder (version 1.0.0)

--- name: vhs-recorder description: Create professional terminal recordings with VHS tape files - guides through syntax, timing, settings, and best practices --- # VHS Recorder Create terminal recordings with Charm's VHS. Use when creating CLI demos, README animations, documentation videos. ## Prerequisites - `vhs` installed (`brew install vhs` / `go install github.com/charmbracelet/vhs@latest`) - `ttyd` and `ffmpeg` on PATH ## Tape File Structure ```tape Output demo.gif # Outputs first Set Width 1200 # Settings second Set Theme "Catppuccin Mocha" Require git # Requirements third Hide # Hidden setup Type "cd /tmp && clear" Enter Show Type "your command" # Main recording Enter Wait Sleep 2s ``` ## Core Commands | Command | Purpose | |---------|---------| | `Type "text"` | Type text (uses TypingSpeed setting) | | `Enter` / `Tab` / `Space` | Key presses | | `Up` / `Down` / `Left` / `Right` | Arrow navigation | | `PageUp` / `PageDown` | Page navigation | | `Ctrl+C` / `Ctrl+D` / `Ctrl+L` | Signal/EOF/clear combos | | `Wait` / `Wait /pattern/` | Wait for prompt or regex match | | `Sleep 2s` | Fixed pause (supports ms/s/m) | | `Hide`/`Show` | Hide setup/cleanup from output | | `Type@50ms "text"` | Override typing speed inline | | `Backspace N` / `Delete N` | Delete N chars back/forward | | `Copy` / `Paste` | Clipboard operations | | `Screenshot path.png` | Capture single frame | | `Env VAR "value"` | Set environment variable | ## Essential Settings | Setting | Default | Notes | |---------|---------|-------| | Width/Height | 1200/600 | Terminal dimensions in pixels | | FontSize | 32 | Text size; FontFamily for custom fonts | | TypingSpeed | 50ms | Per-char delay (override with `Type@Xms`) | | Theme | - | Use `vhs themes` to list all available | | Padding | 40 | Border space; LetterSpacing/LineHeight also available | ## Timing & Patterns **3-2-1 Rule**: 3s after important commands, 2s between actions, 1s for transitions - **Clean start**: `Hide` → `Type "clear"` → `Enter` → `Show` - **Command-wait**: `Type` → `Enter` → `Wait` → `Sleep 2s` - **Fast hidden**: `Type@10ms "setup command"` - **ASCII preview**: `Output demo.ascii` for instant test ## Output Formats | Format | Use Case | |--------|----------| | `.gif` | Web/README (universal) | | `.mp4`/`.webm` | Social media / modern browsers | | `.ascii` | Preview/test (instant, no ffmpeg) | | `frames/` | PNG sequence for post-processing | ## Quick Fixes | Issue | Solution | |-------|----------| | Commands too fast | Add `Wait` + `Sleep 2s` after Enter | | Messy terminal | `Hide` → `clear` → `Show` at start | | Inconsistent pacing | Follow 3-2-1 timing rule | ## CLI Commands ```bash vhs demo.tape # Run tape file vhs themes # List all available themes vhs manual # Show full command reference ``` ## References - [vhs-syntax.md](./references/vhs-syntax.md) - Full command reference - [timing-control.md](./references/timing-control.md) - Pacing strategies - [settings.md](./references/settings.md) - All configuration options - [examples.md](./references/examples.md) - Real-world tape files

path: references/examples.md
content: # VHS Recording Examples

## README Hero Demo
```tape
Output demo.gif
Set Width 1200
Set Height 600
Set FontSize 36
Set Theme "Catppuccin Mocha"
Hide
Type "clear" → Enter
Show
Type "npx create-app my-app" → Enter → Wait /Success/ → Sleep 2s
Type "cd my-app && npm start" → Enter → Wait /Started/ → Sleep 3s
```

## CLI Tool Demo (with hidden setup/cleanup)
```tape
Output demo.gif
Require git
Require node
Hide
Type "cd /tmp && git clone repo && cd repo && clear" → Enter → Sleep 3s
Show
Type "ls -la" → Enter → Wait → Sleep 2s
Type "npm install" → Enter → Wait /added/ → Sleep 2s
Type "npm run demo" → Enter → Wait /Complete/ → Sleep 3s
Hide
Type "cd /tmp && rm -rf repo" → Enter
Show
```

## Docker Workflow
```tape
Output docker.gif
Set Theme "Dracula"
Require docker
Type "docker build -t app ." → Enter → Wait /built/ → Sleep 2s
Type "docker run -d -p 8080:8080 app" → Enter → Wait → Sleep 1s
Type "docker ps" → Enter → Wait → Sleep 2s
Hide
Type "docker stop $(docker ps -q)" → Enter
Show
```

## Git Tutorial (slow typing)
```tape
Output git-tutorial.mp4
Set TypingSpeed 100ms
Type "git init" → Enter → Wait → Sleep 2s
Type "echo '# README' > README.md" → Enter → Sleep 1s
Type "git add ." → Enter → Sleep 1s
Type "git commit -m 'Initial'" → Enter → Wait → Sleep 2s
Type "git log --oneline" → Enter → Wait → Sleep 3s
```

## Error Recovery (dramatic pause + backspace)
```tape
Type "rm -rf production-db/"
Sleep 3s
Backspace 100
Type "rm -rf test-db/" → Enter → Sleep 2s
Type "# Phew!" → Enter → Sleep 2s
```

## Common Patterns

**Clean start**: `Hide → Type "clear" → Enter → Show`

**Command sequence**:
```tape
Type "cmd" → Enter → Wait → Sleep 2s
```

**Quick git flow**:
```tape
Type "git add ." → Enter → Wait → Sleep 500ms
Type "git commit -m 'msg'" → Enter → Wait → Sleep 500ms
Type "git push" → Enter → Wait → Sleep 1s
```

**Screenshot capture**: `Type "cmd" → Enter → Wait → Screenshot shot.png → Sleep 2s`

**Before/After comparison**:
```tape
Type "# Before (slow)" → Enter
Type "time node slow.js" → Enter → Wait → Sleep 3s
Type "# After (fast)" → Enter
Type "time node fast.js" → Enter → Wait → Sleep 3s
```


path: references/settings.md
content: # VHS Settings Reference

**Critical**: Configure ALL settings BEFORE any commands. Settings cannot change mid-recording.

## Dimension Presets

| Use Case | Width | Height | FontSize | Padding |
|----------|-------|--------|----------|---------|
| README hero | 1200 | 600 | 32-46 | 40 |
| Tutorial | 1400 | 800 | 24-28 | 30 |
| Social media | 1920 | 1080 | 46-52 | 60 |
| Compact | 800 | 500 | 20-24 | 20 |

## All Settings

| Setting | Default | Description |
|---------|---------|-------------|
| `Width` | 1200 | Terminal width (px) |
| `Height` | 600 | Terminal height (px) |
| `FontSize` | 32 | Text size (px) |
| `FontFamily` | "JetBrains Mono" | Font (must be installed) |
| `LetterSpacing` | 1 | Character spacing |
| `LineHeight` | 1.4 | Line spacing |
| `Theme` | "Catppuccin Mocha" | Color theme |
| `Padding` | 40 | Border padding (px) |
| `BorderRadius` | 8 | Corner rounding (px) |
| `WindowBar` | Colorful | Window decoration |
| `TypingSpeed` | 50ms | Default typing speed |
| `Framerate` | 60 | Output FPS |
| `PlaybackSpeed` | 1.0 | Playback multiplier |

## Themes
Popular: `Catppuccin Mocha`, `Dracula`, `GitHub Dark`, `Nord`, `Tokyo Night`, `Gruvbox Dark`
List all: `vhs themes`

## WindowBar Options
`Colorful` (macOS-style), `Rings`, `RingsRight`, `None`

## Fonts
Popular: `JetBrains Mono`, `Fira Code`, `Monaco`, `Menlo`, `Source Code Pro`, `Cascadia Code`
Check installed: `fc-list | grep -i "fontname"`

## Configuration Order
```tape
Output demo.gif          # 1. Outputs
Set Width 1200           # 2. Settings
Set Theme "Dracula"
Require git              # 3. Requirements
Type "echo 'Hello'"      # 4. Commands
```

## Quick Test
Use ASCII for fast iteration:
```tape
Output test.ascii
# ... settings and commands
```
Run: `vhs test.tape && cat test.ascii`


path: references/timing-control.md
content: # VHS Timing Control Reference

## 3-2-1 Timing Rule

| Situation | Timing |
|-----------|--------|
| After commands | `Sleep 3s` or `Wait` |
| Between actions | `Sleep 2s` |
| Quick pause | `Sleep 1s` |
| Dramatic pause | `Sleep 5s` |

## TypingSpeed

| Speed | Use Case |
|-------|----------|
| `50ms` | Natural, readable (default) |
| `100ms` | Slow tutorial/teaching |
| `25ms` | Fast, experienced user |
| `10ms` | Instant (hidden setup) |

Per-command override: `Type@500ms "emphasis"`, `Type@10ms "boilerplate"`

## Wait vs Sleep

| Type | When to Use |
|------|-------------|
| `Wait` | Variable command duration, sync with output |
| `Wait /pattern/` | Specific text in command output |
| `Wait+Screen /pat/` | Text anywhere on screen |
| `Wait@30s /pattern/` | Custom timeout (default 15s) |
| `Sleep 2s` | Fixed delays, reading time, dramatic effect |

## Core Patterns

**Command-Wait-Pause** (most common):
```tape
Type "command" → Enter → Wait → Sleep 2s
```

**Quick Succession**:
```tape
Type "git add ." → Enter → Wait → Sleep 500ms
Type "git commit -m 'msg'" → Enter → Wait → Sleep 500ms
```

**Fast Hidden Setup**:
```tape
Hide → Type@10ms "setup commands" → Enter → Sleep 500ms → Show
```

## PlaybackSpeed & Framerate

| Setting | Values | Use |
|---------|--------|-----|
| `PlaybackSpeed` | 0.5 (slow), 1.0 (normal), 2.0 (fast) | Final video speed |
| `Framerate` | 24 (small), 30 (standard), 60 (smooth) | Output FPS |

## Anti-Patterns

- **Wrong**: `Type "npm install" → Enter → Type "npm start"` (no wait!)
- **Right**: `Type "npm install" → Enter → Wait /added/ → Sleep 1s → Type "npm start"`
- **Wrong**: Inconsistent pauses (0s, 5s, 0s, 2s)
- **Right**: Consistent rhythm (2s after each command)


path: references/vhs-syntax.md
content: # VHS Tape File Syntax Reference

## File Structure
1. Output Declaration → 2. Settings → 3. Requirements → 4. Hidden Setup → 5. Commands → 6. Hidden Cleanup

## Command Reference

| Command | Syntax | Description |
|---------|--------|-------------|
| `Output` | `Output file.gif` | Declare output (gif/mp4/webm/frames/) |
| `Type` | `Type "text"` | Type text at global TypingSpeed |
| `Type@` | `Type@500ms "text"` | Type with custom speed |
| `Enter` | `Enter` | Press Enter |
| `Wait` | `Wait` | Wait for shell prompt |
| `Wait` | `Wait /pattern/` | Wait for output text |
| `Wait+Screen` | `Wait+Screen /pat/` | Wait for text anywhere on screen |
| `Wait@` | `Wait@5s /pattern/` | Wait with custom timeout |
| `Sleep` | `Sleep 2s` | Fixed pause |
| `Up/Down` | `Up 2`, `Down 1` | Arrow navigation |
| `Left/Right` | `Left 5`, `Right 3` | Arrow navigation |
| `Backspace` | `Backspace 10` | Delete characters |
| `Tab/Space` | `Tab 2`, `Space 3` | Tab/space keys |
| `PageUp/Down` | `PageUp` | Page navigation |
| `Ctrl+` | `Ctrl+C`, `Ctrl+D` | Control key combos |
| `Copy` | `Copy "text"` | Copy to clipboard |
| `Paste` | `Paste` | Paste from clipboard |
| `Hide` | `Hide` | Stop recording (setup/cleanup) |
| `Show` | `Show` | Resume recording |
| `Require` | `Require git` | Fail-fast dependency check |
| `Env` | `Env VAR "value"` | Set environment variable |
| `Screenshot` | `Screenshot file.png` | Capture frame |
| `Set` | `Set Width 1200` | Configure setting |

## Wait Strategy Selection
- `Wait` (no args) - Shell prompt returns
- `Wait /pattern/` - Text in last command output
- `Wait+Screen /pattern/` - Text anywhere on screen
- `Sleep <duration>` - Known fixed delays

## Hidden Sections
Use `Hide`/`Show` for: installing deps, cloning repos, building, creating test files, clearing terminal.

## Multi-Stage Pattern
```tape
# Stage 1: Problem
Type "git status" → Enter → Wait → Sleep 2s
# Stage 2: Fix
Type "git add ." → Enter → Type "git commit -m 'fix'" → Enter → Wait
# Stage 3: Verify
Type "git status" → Enter → Wait → Sleep 3s
```


Security scan verdicts — ClawScan: suspicious | static analysis: clean | VirusTotal: suspicious | SkillSpector: suspicious (CRITICAL)