본문으로 건너뛰기
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(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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 / 1,000자

이 양식은 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-tap3.3천2026년 10월 22일 업데이트

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-tap3.3천2026년 10월 22일 업데이트

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-tap3.3천2026년 10월 22일 업데이트

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-tap3.3천2026년 10월 22일 업데이트

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-tap3.3천2026년 10월 22일 업데이트

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-tap3.3천2026년 10월 22일 업데이트

liaohch3의 스킬 모두 보기

이 스킬의 문제 신고