跳到正文
cccskills
免费在 GitHub 公开

demo-video

Create demo GIFs and MP4 videos from real terminal test runs recorded with tmux and asciinema. Capture HTML viewer screenshots through Playwright, with guidance for selecting visible controls and scrolling the correct page containers.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

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

集成工具Playwright

实测评分 未实测

查看安装方法

适用场景

  • Record a real terminal test run as a demo
  • Convert a terminal recording into GIF and MP4 files
  • Capture HTML viewer entries and diff screens
  • Prepare localized versions of demo assets

包含的文件(1)

  • SKILL.md2.1 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Test real Codex CLI sessions through claude-tap, including resumed conversations, multiple tool calls, and image input. Check captured API activity and viewer behavior, then collect screenshots as evidence for a pull request.

中文简介正在准备中。当前显示英语简介。

  • Validate API capture and proxy changes
  • Test resumed conversations with image input
  • Check message rendering and tool call order
liaohch3/claude-tap33072026年10月23日 更新

e2e-test

免费

Run pytest tests for claude-tap after core changes to check the workflow from end to end. Review results for proxy processing, trace storage, cleanup, and viewers, with guidance on where to investigate failures.

中文简介正在准备中。当前显示英语简介。

  • Check the full workflow after proxy changes
  • Verify trace cleanup behavior
  • Check that startup avoids update network requests
liaohch3/claude-tap33072026年10月23日 更新

Test JavaScript embedded in HTML with two complementary layers: Python unit tests for algorithms and Playwright browser tests for page behavior. Check calculations, button states, keyboard input, and navigation using prepared test data.

中文简介正在准备中。当前显示英语简介。

  • Checking algorithms embedded in HTML
  • Testing button states and overlay visibility
  • Verifying keyboard and click navigation
liaohch3/claude-tap33072026年10月23日 更新

Check maintainer documentation locally before automated CI checks run. Find missing metadata, outdated review dates, nonexistent paths in the architecture manifest, and completed plans that still contain unfinished tasks, with guidance for correcting common failures.

中文简介正在准备中。当前显示英语简介。

  • Check required metadata after updating standards
  • Find outdated review dates
  • Verify paths listed in the architecture manifest
liaohch3/claude-tap33072026年10月23日 更新

Record Playwright browser test actions as .webm videos for pull request reviews, bug fix comparisons, and regression evidence. Combine readable pauses, assertions, and terminal logs to show interface behavior alongside automated checks.

中文简介正在准备中。当前显示英语简介。

  • Recording before-and-after behavior for a bug fix
  • Sharing interface changes in a pull request review
  • Saving video evidence of regression test paths
liaohch3/claude-tap33072026年10月23日 更新

Check whether a pull request is ready to merge by combining local lint, formatting, and tests with GitHub Actions status and PR description requirements. Returns a readiness verdict with specific reasons for any failed checks.

中文简介正在准备中。当前显示英语简介。

  • Running local checks before opening a pull request
  • Reviewing an existing pull request’s merge readiness
  • Finding failing or pending GitHub Actions checks
liaohch3/claude-tap33072026年10月23日 更新

查看 liaohch3 的全部技能

报告此技能的问题