Agent Skills › liaohch3/claude-tap › demo-video

demo-video

GitHub

基于 tmux 和 asciinema 录制终端会话，经 agg 转 GIF、ffmpeg 转 MP4 生成演示视频。结合 Playwright CDP 控制浏览器截图，实现从 E2E 运行到多格式 Demo 资产的自动化生成流程。

.agents/skills/demo-video/SKILL.md liaohch3/claude-tap

Trigger Scenarios

需要生成终端操作演示视频需要将 asciinema 记录转换为 GIF 或 MP4 需要截取 HTML 查看器界面作为演示素材

Install

npx skills add liaohch3/claude-tap --skill demo-video -g -y

More Options

Non-standard path

npx skills add https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/demo-video -g -y

Use without installing

npx skills use liaohch3/claude-tap@demo-video

指定 Agent (Claude Code)

npx skills add liaohch3/claude-tap --skill demo-video -a claude-code -g -y

安装 repo 全部 skill

npx skills add liaohch3/claude-tap --all -g -y

预览 repo 内 skill

npx skills add liaohch3/claude-tap --list

SKILL.md

Frontmatter

{
    "name": "demo-video",
    "description": "Generate demo assets (GIF\/MP4) from real tmux E2E runs and viewer screenshots using asciinema and Playwright",
    "user_invocable": true
}

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

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`

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

3) Convert GIF to MP4 with ffmpeg

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.

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:

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

Open diff view by clicking button text:

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

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

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.