vhs

Techniques for creating deterministic terminal demo screencasts with VHS

8 stars

Best use case

vhs is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Techniques for creating deterministic terminal demo screencasts with VHS

Teams using vhs should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/vhs/SKILL.md --create-dirs "https://raw.githubusercontent.com/juspay/AI/main/.claude/skills/vhs/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/vhs/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How vhs Compares

Feature / AgentvhsStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Techniques for creating deterministic terminal demo screencasts with VHS

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# VHS Demo Recording

[VHS](https://github.com/charmbracelet/vhs) records terminal sessions by scripting keystrokes in `.tape` files and rendering them as GIFs. Use `Wait+Screen /regex/` to synchronize with interactive TUI elements instead of fragile fixed `Sleep` durations. VHS can only detect text *appearing* on screen, not disappearing — keep this constraint in mind when designing wait conditions.

## Non-Deterministic TUI Responses

When recording an LLM-powered TUI, detecting when a response is **complete** requires special care. Naive approaches all fail:

| Approach | Why it fails |
|---|---|
| Fixed `Sleep` | Not deterministic |
| Unique marker in prompt (`XYZENDXYZ`) | Appears in the typed prompt on screen — `Wait+Screen` matches immediately |
| Math formula (`347+829` → wait for `1176`) | LLM computes the answer in its visible *thinking trace* before the response finishes |
| `Wait+Line /^MARKER$/` | TUI padding/borders prevent exact line matching |
| `Hide` + type marker | `Hide` only hides VHS command log, not terminal content |

### The concatenation trick

Ask the LLM to **concatenate two words** and print the result. The prompt contains both words *separately* but never the combined string:

```tape
Type "briefly explain this repo. Then print ALFA concatenated with BRAVO."
Enter
Wait+Screen /ALFABRAVO/
```

**Why it works:**
1. **Typed prompt** shows `...ALFA concatenated with BRAVO` — no `ALFABRAVO`
2. **Thinking trace** says "I need to concatenate ALFA and BRAVO" — no `ALFABRAVO`
3. **Response** outputs `ALFABRAVO` — the only match

Use uncommon words (ALFA, BRAVO, ZULU) so the combined form can't appear accidentally.

## Tips

- **Run VHS from the correct CWD** — it inherits the working directory. If the prompt references "this repo", the CWD must be the repo root, not a subdirectory.
- **Inspect GIF frames** when debugging timing issues:
  ```bash
  ffmpeg -i demo.gif -vf "select='eq(n\,100)'" -vsync vfr /tmp/frame.png
  ```

## Nix Integration

- If the project uses Nix, create a dedicated `flake.nix` for the demo (e.g., `doc/demo/flake.nix`) so anyone can reproduce the recording with `nix run`.
- **Reference tape by Nix store path** in flake apps (`vhs "${./.}/demo.tape"`) — don't `cd` into the store, as it may contain a `flake.nix` that confuses `nix run` inside the recording.

Related Skills

programming-essay

8
from juspay/AI

Write a programming essay or blog post in the voice of the canon — Spolsky, Yegge, Graham, Mickens, Dijkstra, Brooks, Nystrom, Kleppmann, patio11. Invoke when the user wants to argue an idea about software, architecture, languages, or the craft — not a debugging war story (use debugging-story for that), not a tutorial, not a release note. The audience is working developers worldwide with taste and strong opinions of their own.

nix-typescript

8
from juspay/AI

pnpm + Nix build conventions. Covers fetchPnpmDeps hash management and dependency workflow.

nix-rust-leptos

8
from juspay/AI

Conventions for building Leptos CSR apps with Nix (crane + Trunk).

nix-justfile

8
from juspay/AI

Conventions for writing justfile recipes in Nix-based projects.

nix-health

8
from juspay/AI

Use this when diagnosing or fixing a user's Nix installation — checks flakes, version, caches, max-jobs, direnv, rosetta, trusted-users, and shell config

nix-haskell

8
from juspay/AI

Use this when working on a Haskell project with Nix. Covers haskell-flake setup, adding/overriding dependencies, package settings, and devShell configuration.

nix-flake

8
from juspay/AI

Use this when writing or editing a flake.nix. Covers flake-parts, perSystem, formatter, shell scripts, and package conventions.

nix-ci

8
from juspay/AI

Use this when setting up CI for a GitHub repository — offers GitHub Actions or Vira depending on the project

frontend-design

8
from juspay/AI

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

cargo-watch

8
from juspay/AI

Run cargo-watch in the background for continuous clippy feedback during code editing.

swe-cli-skills

12
from SylphAI-Inc/skills

Senior engineer CLI expertise for AI agents — workflows, safety guardrails, gotchas, and anti-patterns across cloud, IaC, containers, databases, dev tools, and platforms

DevOps & Infrastructure

PicoClaw Fleet

11
from EricGrill/agents-skills-plugins

Orchestrate a fleet of remote PicoClaw workers over SSH for fast, ephemeral one-shot tasks.

DevOps & Infrastructure