---
name: Demo Video Generation
slug: demo-video-generation
category: Automation
description: Demo Video Generation records terminal sessions in tmux with asciinema and converts them to GIF and MP4 demo assets, then captures viewer screenshots via Playwright for documentation. Use it to create realistic demos from real E2E runs and UI views.
github: "https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/demo-video"
language: Python
stars: 3064
forks: 266
install: "npx degit https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/demo-video ~/.claude/skills/demo-video"
installs_to: ~/.claude/skills/demo-video
source_path: .agents/skills/demo-video/SKILL.md
collection_size: 11
category_size: 1523
collection_url: "https://dirskills.com/collections/liaohch3/claude-tap"
added: 2026-08-17T07:09:15.507Z
last_synced: 2026-08-17T07:09:15.507Z
canonical_url: "https://dirskills.com/skills/demo-video-generation"
---

# Demo Video Generation

Demo Video Generation records terminal sessions in tmux with asciinema and converts them to GIF and MP4 demo assets, then captures viewer screenshots via Playwright for documentation. Use it to create realistic demos from real E2E runs and UI views.

**Install:**

```bash
npx degit https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/demo-video ~/.claude/skills/demo-video
```

## README

# Skill: Demo Video Generation

Generate demo assets from a real tmux E2E run and viewer screenshots.

## Proven Workflow

### 1) Record terminal session in tmux with asciinema

```bash
tmux new-session -d -s demo -x 160 -y 46
tmux send-keys -t demo "asciinema rec /tmp/claude-tap-recordings/demo.cast" Enter
tmux send-keys -t demo "cd /path/to/claude-tap && scripts/run_real_e2e_tmux.sh" Enter
# ... wait until run finishes ...
tmux send-keys -t demo "exit" Enter
```

Notes:

- `Enter` is the submit key for Claude Code TUI in tmux.
- Use tool-triggering first prompt text so trace includes `tool_use`.

### 2) Convert `.cast` to GIF with `agg`

```bash
agg /tmp/claude-tap-recordings/demo.cast /tmp/claude-tap-recordings/demo.gif
```

### 3) Convert GIF to MP4 with ffmpeg

```bash
ffmpeg -y -i /tmp/claude-tap-recordings/demo.gif -movflags +faststart -pix_fmt yuv420p .agents/recordings/demo.mp4
```

## Browser Screenshots (HTML Viewer)

Use Playwright CDP to attach to a running Chrome/Chromium instance on port `9222`.

```python
browser = playwright.chromium.connect_over_cdp("http://127.0.0.1:9222")
page = browser.contexts[0].pages[0]
```

### Reliable UI interactions

- Click entries by visible text content, for example:

```python
page.query_selector('text="轮次 22"').click()
```

- Open diff view by clicking button text:

```python
page.query_selector('text="对比上次"').click()
```

- For SPA/overflow layouts, scroll actual scrollable containers (not `window`):

```python
page.evaluate("""
() => {
  for (const el of document.querySelectorAll('*')) {
    if (el.scrollHeight > el.clientHeight) {
      el.scrollTop += 300;
    }
  }
}
""")
```

## Output Targets

- `docs/demo.gif`
- `.agents/recordings/demo.mp4`
- Optional localized variants (`docs/demo_zh.gif`, `.agents/recordings/demo_zh.mp4`)

## Avoid

- Do not reference non-existent scripts such as `cast_to_gif_ultra.py` or `make_final_demo_v2.py`.
- Do not hardcode selectors like `.detail` unless verified in the current viewer build.