OpenParable
Skip to content
← Back to skills

Demo Video

Documents
demo-video

Demo Video is an Agent Skill for documents published in the liaohch3/claude-tap repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.

Generate demo assets (GIF/MP4) from real tmux E2E runs and viewer screenshots using asciinema and Playwright

View on GitHub ↗
QUICK START

How to use this skill

Bring this guide into your coding agent with a prompt tailored to the tool you use.

  1. Open your project in Codex.
  2. Copy and paste the prompt below.
  3. Review files and risks before approving any action.
Prompt to paste
Inspect the Agent Skill at https://github.com/liaohch3/claude-tap/blob/HEAD/.agents/skills/demo-video/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/demo-video, but wait for my approval before writing files or running scripts.

Copying this prompt does not install or run the skill. Review third-party files before use.

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.