chore(claude): add record demo skill (#403)

Author: zimeg

.claude/skills/record-demo/SKILL.md

@@ -0,0 +1,44 @@
+---
+name: record-demo
+description: Record terminal demos as GIFs using VHS tape files. Use when asked to record a demo, create a terminal recording, or generate a GIF of CLI usage.
+argument-hint: <description>
+---
+
+Record a demo of `$ARGUMENTS` using VHS.
+
+1. **Check VHS is installed**: Run `which vhs`. If not found, tell the user to install it with `brew install vhs`.
+
+2. **Create a `.tape` file** in `demos/` (create the directory if needed). Use this template:
+
+   ```tape
+   # Demo: <description>
+   Output demos/<name>.gif    # Always use .gif format
+
+   Set Shell "zsh"
+   Set FontSize 16
+   Set Width 1200
+   Set Height 600
+   Set Theme "Catppuccin Mocha"
+   Set TypingSpeed 75ms
+   Set Padding 20
+
+   Type "<command>"
+   Sleep 500ms
+   Enter
+   Sleep 3s
+   ```
+
+3. **VHS Tape DSL reference**: For the full command reference, see [vhs-reference.md](vhs-reference.md).
+
+4. **Tips for good demos**:
+   - Add `Sleep` after commands to let output render and be readable
+   - Use `Hide`/`Show` to run setup commands invisibly
+   - Keep demos short and focused (under 30 seconds)
+   - Add a `Sleep 3s` at the end so viewers can see final output
+   - Always add a `Sleep 500ms` pause after each `Type` line (before `Enter`) to mimic a human pause
+   - For this project, use `./bin/slack` directly as the CLI binary path (do NOT export PATH)
+   - When demoing from an app directory, use `Hide` to `cd` into the app, then use `../bin/slack` as the binary path
+   - Prefer passing app IDs directly (e.g. `--app A12345`) to avoid interactive prompts when the ID is known
+5. **Run the recording**: Execute `vhs <filename>.tape` to generate the output file.
+
+6. **Review**: Open the `demos/` directory with `open demos/` so the user can review the output.

.claude/skills/record-demo/vhs-reference.md

@@ -0,0 +1,58 @@
+# VHS Tape DSL Reference
+
+## Output
+
+- `Output <path>.gif` - Create a GIF output at the given path
+
+## Require
+
+- `Require <string>` - Ensure a program is on the $PATH to proceed
+
+## Settings
+
+- `Set FontSize <number>` - Set the font size of the terminal
+- `Set FontFamily <string>` - Set the font family of the terminal
+- `Set Height <number>` - Set the height of the terminal
+- `Set Width <number>` - Set the width of the terminal
+- `Set LetterSpacing <float>` - Set the font letter spacing (tracking)
+- `Set LineHeight <float>` - Set the font line height
+- `Set LoopOffset <float>%` - Set the starting frame offset for the GIF loop
+- `Set Theme <json|string>` - Set the theme of the terminal
+- `Set Padding <number>` - Set the padding of the terminal
+- `Set Framerate <number>` - Set the framerate of the recording
+- `Set PlaybackSpeed <float>` - Set the playback speed of the recording
+- `Set MarginFill <file|#000000>` - Set the file or color the margin will be filled with
+- `Set Margin <number>` - Set the size of the margin (no effect without MarginFill)
+- `Set BorderRadius <number>` - Set terminal border radius, in pixels
+- `Set WindowBar <string>` - Set window bar type (Rings, RingsRight, Colorful, ColorfulRight)
+- `Set WindowBarSize <number>` - Set window bar size, in pixels (default: 40)
+- `Set TypingSpeed <time>` - Set the typing speed of the terminal (default: 50ms)
+
+## Sleep
+
+- `Sleep <time>` - Sleep for a set amount of time in seconds
+
+## Type
+
+- `Type "<characters>"` - Type characters into the terminal
+- `Type@<time> "<characters>"` - Type characters with a custom delay between each character
+
+## Keys
+
+All keys accept an optional `@<time>` delay and an optional repeat `[number]`.
+
+- `Escape` - Press the Escape key
+- `Backspace` - Press the Backspace key
+- `Delete` - Press the Delete key
+- `Insert` - Press the Insert key
+- `Enter` - Press the Enter key
+- `Space` - Press the Space key
+- `Tab` - Press the Tab key
+- `Up` / `Down` / `Left` / `Right` - Press arrow keys
+- `PageUp` / `PageDown` - Press Page Up/Down keys
+- `Ctrl+<key>` - Press Control + key (e.g. `Ctrl+C`)
+
+## Display
+
+- `Hide` - Hide subsequent commands from the output
+- `Show` - Show subsequent commands in the output

.gitignore

@@ -37,3 +37,6 @@ package-lock.json
 
 # End to End Test files
 test-e2e
+
+# VHS demo recordings
+demos/