Skip to main content
affpapa.org
RU EN
skill CX Codex

vhs — Claude Code skill: terminal recording rules

A skill with 47 rules for VHS .tape files, so your agent writes and reviews terminal recordings that turn into GIFs and videos.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add pproenca/dot-skills --skill vhs -a claude-code
Open on GitHub

What vhs does

VHS is Charmbracelet's tool for playing .tape files into GIFs or videos. This skill hands the agent 47 rules across eight categories: configuration structure, dependency management, command syntax, timing, output optimization, visual quality, CI, and advanced patterns. Each rule carries a priority and a prefix such as config- or timing-.

The content lives in references/ files with explanations and code samples, plus a rule template at assets/templates/_template.md and a compiled guide in AGENTS.md. The agent pulls the right file when you write a new .tape, edit one, or wire GIF generation into CI. It triggers on .tape files, VHS configuration, demo creation, and CLI documentation.

Worth installing if terminal demos live in your repo. The rules insist on an explicit shell, explicit terminal dimensions, and settings placed before commands — skip that and a recording breaks the moment someone runs it elsewhere. The skill does not install VHS itself; it only covers what goes inside .tape.

What it helps with

  • write a .tape file that replays on another machine
  • place Sleep and Wait so command output lands in frame
  • pick an output format and framerate that keep the file small
  • set up GIF generation in CI and cache VHS dependencies
  • review someone else's tape file for common mistakes

Example prompts for the agent

  • write a .tape that records a demo of my CLI tool
  • review demo.tape against the VHS rules and list fixes
  • add a command run with its output and a final pause to the .tape

How to install vhs

1Skills CLI (Vercel)

npx skills add pproenca/dot-skills --skill vhs -a claude-code

2Manually: put the files in place

~/.claude/skills/vhs/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/vhs/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about vhs

How do I install vhs in Claude?

Run npx skills add pproenca/dot-skills --skill vhs -a claude-code. The skill lands in ~/.claude/skills/vhs/SKILL.md.

What does the vhs skill do?

It gives the agent Charmbracelet's rules for .tape files: configuration structure, dependencies, command syntax, timing, output optimization, visual quality, CI, and advanced patterns.

Does the skill record the terminal itself?

No. It helps write and review .tape files; VHS does the actual recording, and the skill does not install it.

Source text

SKILL.md · MIT 
---
name: vhs
description: VHS terminal recording best practices from Charmbracelet (formerly charmbracelet-vhs). This skill should be used when writing, reviewing, or editing VHS tape files to create professional terminal GIFs and videos. Triggers on tasks involving .tape files, VHS configuration, terminal recording, demo creation, or CLI documentation.
---

# Charmbracelet VHS Best Practices

Comprehensive best practices guide for VHS terminal recordings, maintained by Charmbracelet. Contains 47 rules across 8 categories, prioritized by impact to guide creation of professional, portable, and optimized terminal demos.

## When to Apply

Reference these guidelines when:
- Writing new VHS tape files
- Creating terminal demos for documentation
- Setting up CI/CD for automated GIF generation
- Optimizing recording file size and quality
- Troubleshooting tape file issues
- Reviewing tape files for best practices

## Rule Categories by Priority

| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Configuration Structure | CRITICAL | `config-` |
| 2 | Dependency Management | CRITICAL | `deps-` |
| 3 | Command Syntax | HIGH | `cmd-` |
| 4 | Timing & Synchronization | HIGH | `timing-` |
| 5 | Output Optimization | MEDIUM-HIGH | `output-` |
| 6 | Visual Quality | MEDIUM | `visual-` |
| 7 | CI/Automation | MEDIUM | `ci-` |
| 8 | Advanced Patterns | LOW | `advanced-` |

## Quick Reference

### 1. Configuration Structure (CRITICAL)

- [`config-settings-order`](references/config-settings-order.md) - Place all settings before commands
- [`config-output-first`](references/config-output-first.md) - Declare output at file start
- [`config-shell-explicit`](references/config-shell-explicit.md) - Explicitly set shell type
- [`config-typing-speed-global`](references/config-typing-speed-global.md) - Set global TypingSpeed early
- [`config-dimensions-explicit`](references/config-dimensions-explicit.md) - Set explicit terminal dimensions
- [`config-comments-document`](references/config-comments-document.md) - Use comments to document tape structure

### 2. Dependency Management (CRITICAL)

- [`deps-require-early`](references/deps-require-early.md) - Use Require for dependency validation
- [`deps-require-order`](references/deps-require-order.md) - Place Require before settings
- [`deps-require-all`](references/deps-require-all.md) - Require all external commands
- [`deps-system-requirements`](references/deps-system-requirements.md) - Verify system dependencies

### 3. Command Syntax (HIGH)

- [`cmd-type-syntax`](references/cmd-type-syntax.md) - Use correct Type command syntax
- [`cmd-enter-explicit`](references/cmd-enter-explicit.md) - Always follow Type with Enter
- [`cmd-key-repeat`](references/cmd-key-repeat.md) - Use key repeat counts
- [`cmd-ctrl-combinations`](references/cmd-ctrl-combinations.md) - Use Ctrl combinations for terminal control
- [`cmd-hide-show`](references/cmd-hide-show.md) - Use Hide/Show for sensitive operations
- [`cmd-env-variables`](references/cmd-env-variables.md) - Use Env for environment variables
- [`cmd-screenshot`](references/cmd-screenshot.md) - Use Screenshot for static captures
- [`cmd-multiline-type`](references/cmd-multiline-type.md) - Handle multiline commands properly

### 4. Timing & Synchronization (HIGH)

- [`timing-sleep-after-enter`](references/timing-sleep-after-enter.md) - Add Sleep after commands for output
- [`timing-wait-pattern`](references/timing-wait-pattern.md) - Use Wait for dynamic command completion
- [`timing-type-speed-override`](references/timing-type-speed-override.md) - Override TypingSpeed for emphasis
- [`timing-sleep-units`](references/timing-sleep-units.md) - Use explicit time units
- [`timing-final-sleep`](references/timing-final-sleep.md) - End recordings with final Sleep
- [`timing-natural-pauses`](references/timing-natural-pauses.md) - Add natural pauses between actions
- [`timing-wait-timeout`](references/timing-wait-timeout.md) - Set appropriate Wait timeouts
- [`timing-playback-speed`](references/timing-playback-speed.md) - Use PlaybackSpeed for final adjustments

### 5. Output Optimization (MEDIUM-HIGH)

- [`output-format-selection`](references/output-format-selection.md) - Choose output format based on use case
- [`output-framerate`](references/output-framerate.md) - Optimize framerate for file size
- [`output-dimensions-optimize`](references/output-dimensions-optimize.md) - Right-size terminal dimensions
- [`output-loop-offset`](references/output-loop-offset.md) - Use LoopOffset for seamless loops
- [`output-multiple-formats`](references/output-multiple-formats.md) - Generate multiple output formats
- [`output-relative-paths`](references/output-relative-paths.md) - Use relative paths for portability

### 6. Visual Quality (MEDIUM)

- [`visual-font-readable`](references/visual-font-readable.md) - Choose readable font settings
- [`visual-theme-selection`](references/visual-theme-selection.md) - Select appropriate theme
- [`visual-window-decoration`](references/visual-window-decoration.md) - Add window decorations for polish
- [`visual-spacing`](references/visual-spacing.md) - Adjust letter and line spacing
- [`visual-padding-margin`](references/visual-padding-margin.md) - Use padding and margins effectively
- [`visual-cursor-visibility`](references/visual-cursor-visibility.md) - Ensure cursor visibility

### 7. CI/Automation (MEDIUM)

- [`ci-github-action`](references/ci-github-action.md) - Use official VHS GitHub Action
- [`ci-auto-commit`](references/ci-auto-commit.md) - Auto-commit generated assets
- [`ci-golden-files`](references/ci-golden-files.md) - Use golden files for integration testing
- [`ci-matrix-builds`](references/ci-matrix-builds.md) - Generate platform-specific demos
- [`ci-caching`](references/ci-caching.md) - Cache VHS dependencies in CI

### 8. Advanced Patterns (LOW)

- [`advanced-source-include`](references/advanced-source-include.md) - Use Source for reusable tape components
- [`advanced-clipboard`](references/advanced-clipboard.md) - Use Copy and Paste for complex input
- [`advanced-recording-live`](references/advanced-recording-live.md) - Record live sessions then edit
- [`advanced-server-mode`](references/advanced-server-mode.md) - Use server mode for remote access

## How to Use

Read individual reference files for detailed explanations and code examples:

- [Section definitions](references/_sections.md) - Category structure and impact levels
- [Rule template](assets/templates/_template.md) - Template for adding new rules

## Reference Files

| File | Description |
|------|-------------|
| [AGENTS.md](AGENTS.md) | Complete compiled guide with all rules |
| [references/_sections.md](references/_sections.md) | Category definitions and ordering |
| [assets/templates/_template.md](assets/templates/_template.md) | Template for new rules |
| [metadata.json](metadata.json) | Version and reference information |

© pproenca · MIT · pproenca/dot-skills

Similar skills

All skills for Agent setup: memory, context, orchestration →
cli-demo-generator daymade Records terminal commands through VHS and hands back an animated GIF. Useful for README demos and CLI documentation. CX Codex +1 942installs gifgrep openclaw Searches Tenor and Giphy from the CLI, downloads GIF files, and extracts frames or contact sheets for PRs and docs. CX Codex +1 5,200installs smux ShawnPana Controls tmux panes and manages communication between AI agents via tmux-bridge. Useful when multiple agents or background tasks run in parallel panes. CX Codex +1 2,900installs ultrathink intellectronica The skill displays colorful ANSI art of the word "ultrathink" in the terminal. It triggers on the word itself or via /ultrathink. CX Codex +1 1,900installs loops-cli loops-so A skill that tells your agent how to drive the Loops CLI: install, authenticate, manage API keys, and run contact, campaign and transactional email commands. CX Codex +1 1,500installs cli-for-agents cursor Designs and audits terminal tools so coding agents can run commands headlessly without getting stuck in interactive menus. CX Codex +1 1,400installs

From the same set45

uniwind A skill with 45+ rules for Uniwind, the Tailwind bindings for React Native. Useful when setting up a project, building themes or migrating from NativeWind. CX Codex +1 341installs ast-grep A skill with community best practices for writing, reviewing and debugging ast-grep rules for code search, linting and rewriting. CX Codex +1 332installs 37signals-rails A rule set for Ruby on Rails the 37signals way: vanilla Rails, CRUD controllers, rich domain models, Hotwire. Useful when you write or refactor code and want to stay in that school. CX Codex +1 329installs mui-base A skill with 48 rules for building headless React component libraries the MUI Base UI way. Useful when logic and styling stay apart. CX Codex +1 328installs unix-cli A rule set that steers your AI agent when it writes or reviews command-line tools: flags, exit codes, output streams. CX Codex +1 319installs python A skill with 42 Python 3.11+ optimization rules: it steers the agent on async code, data structures and memory use. CX Codex +1 315installs rust-refactor A skill that walks an agent through Rust refactoring: dropping forwarded parameters, splitting large files, migrating types in steps. CX Codex +1 314installs 12-factor-app A skill with 51 rules from the Twelve-Factor App methodology. Useful when you design backend services, APIs or microservices and want a checklist to lean on. CX Codex +1 311installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor