Agent skill

Terminal Demo Video Recorder

Records a real tmux end-to-end run with asciinema, converts it to a GIF and MP4, and captures trace viewer screenshots with Playwright.

MITAuto-check passedMedia & Creative

Install Terminal Demo Video Recorder

skills CLI

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

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install liaohch3/claude-tap demo-video --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/demo-video .claude/skills/demo-video && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "demo-video" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/demo-video into .claude/skills/demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-video", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/demo-video

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add liaohch3/claude-tap --skill demo-video -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install liaohch3/claude-tap demo-video --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/demo-video .agents/skills/demo-video && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "demo-video" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/demo-video into .agents/skills/demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-video", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add liaohch3/claude-tap --skill demo-video -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install liaohch3/claude-tap demo-video --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/demo-video .cursor/skills/demo-video && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "demo-video" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/demo-video into .cursor/skills/demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-video", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/liaohch3/claude-tap.git --path .agents/skills/demo-video

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add liaohch3/claude-tap --skill demo-video -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install liaohch3/claude-tap demo-video --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/demo-video .gemini/skills/demo-video && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "demo-video" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/demo-video into .gemini/skills/demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-video", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install liaohch3/claude-tap demo-video

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add liaohch3/claude-tap --skill demo-video -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/demo-video .github/skills/demo-video && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "demo-video" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/demo-video into .github/skills/demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-video", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add liaohch3/claude-tap --skill demo-video -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install liaohch3/claude-tap demo-video --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/demo-video .opencode/skills/demo-video && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "demo-video" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/demo-video into .opencode/skills/demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "demo-video", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: demo-video
GitHub stars: 3.3k
Token cost: ~545 tokens
SKILL.md length: 138 words
Files: 1
Skills in repo: 11
Repo updated: Oct 10, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Records a real tmux end-to-end run with asciinema, converts it to a GIF and MP4, and captures trace viewer screenshots with Playwright.

Works in 3 steps: Record terminal session in tmux with… → Convert .cast to GIF with agg → Convert GIF to MP4 with ffmpeg
Refreshing the README demo GIF after a feature change
SKILL.md covers Proven Workflow, Browser Screenshots (HTML…, Output Targets and Avoid
Calls ffmpeg

What it does

This skill produces demo assets for a project from real runs instead of mock-ups. The agent starts a tmux session, records the terminal with asciinema while an end-to-end script runs, converts the .cast file to a GIF with agg, and turns the GIF into an MP4 with ffmpeg.

For the HTML trace viewer, it attaches Playwright over CDP to a running Chrome or Chromium instance on port 9222 and takes screenshots. Notes recommend clicking elements by their visible text, opening the diff view by button label, and scrolling the container that actually scrolls rather than the window. The first prompt in the recorded run should trigger a tool call so the trace includes tool use.

Targets are docs/demo.gif and an MP4 under .agents/recordings, with optional localized variants. The skill warns against referencing scripts that do not exist and against hardcoding selectors that were not verified in the current viewer build.

When your agent uses it

Refreshing the README demo GIF after a feature change
Recording a terminal session from a real end-to-end run
Converting an asciinema cast into a GIF and an MP4
Capturing screenshots of a local web viewer for documentation

Example prompts

“Record a new demo of the end-to-end run in tmux and export it as docs/demo.gif.”
“Convert demo.cast into an MP4 I can attach to the release post.”
“Take screenshots of the trace viewer's diff view using Playwright on port 9222.”

Requirements

tmux, asciinema and agg
ffmpeg
Playwright with a Chrome or Chromium instance listening on port 9222

Workflow steps

3 steps, taken from the step headings in SKILL.md.

Record terminal session in tmux with asciinema
Convert .cast to GIF with agg
Convert GIF to MP4 with ffmpeg

What it can do on your machine

Read from SKILL.md and the folder at commit e17ed32. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- ffmpeg
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Terminal Demo Video Recorder loads about 545 tokens when it runs. Until then it costs about 30 tokens; SKILL.md has 138 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~30
When it runs · the whole SKILL.md, loaded when a task matches: ~545

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from liaohch3/claude-tap at commit e17ed32, republished under its MIT licence (© liaohch3). 138 words, ~545 tokens.

Download SKILL.mdSave it as .claude/skills/demo-video/SKILL.md (or your agent's skills folder).

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

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.

Files

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

Open the folder on GitHubat commit e17ed32

Compare with similar skills

Terminal Demo Video Recorder next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Terminal Demo Video Recorder compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Terminal Demo Video Recorder this skillliaohch3/claude-tap	3.3k	—	~545	Automated safety check: Pass	MIT	yesterday
Record E2E Giflablup/backend.ai-webui	133	—	~907	Automated safety check: Notes	LGPL-3.0	today
Cs Code VideoChenShuo2004/cs-skills	197	—	~2.1k	Automated safety check: Pass	MIT	3 days ago
Render Chatgpt Chatgooseworks-ai/goose-skills	1.2k	—	~2.3k	Automated safety check: Pass	MIT	today
Character Animation QAcalesthio/OpenMontage	66k	—	~389	Automated safety check: Pass	MIT	7 days ago
Browser Video Recordingnirholas/three.ws	230	1 repos	~1.5k	Automated safety check: Pass	Apache-2.0	today

Similar skills

Record E2E Gif
lablup/backend.ai-webui
Record Playwright e2e tests as one GIF per test case (video → ffmpeg palette GIF) and return a markdown table for a PR description.
133 GitHub stars~907 tokensUpdated today
Testing & QAAuto-check: notes
Cs Code Video
ChenShuo2004/cs-skills
用代码做动画视频：页面暴露 render(t)，Playwright 逐帧截图 + FFmpeg 合成 mp4，可接合成配乐、出图和配音。通用模式先明确主题、规格、风格和声音，出风格卡、分镜与关键帧后逐镜制作；Vibe知识大赏模式额外查证来源、记录真实素材许可、先渲 10 秒样片。触发词包括…
197 GitHub stars~2.1k tokensUpdated 3 days ago
Media & CreativeAuto-check passed
Render Chatgpt Chat
gooseworks-ai/goose-skills
Assemble a ChatGPT chat-reveal video ad from a thread + timeline JSON — one continuous Playwright recording of a ChatGPT mobile chat (user types with the iOS keyboard up → taps send → keyboard…
1.2k GitHub stars~2.3k tokensUpdated today
Media & CreativeAuto-check passed
Character Animation QA
calesthio/OpenMontage
Review local character animation with schema checks, Playwright browser previews, frame sampling, and FFmpeg/ffprobe final output checks.
66k GitHub stars~389 tokensUpdated 7 days ago
Media & CreativeAuto-check passed
Browser Video Recording
nirholas/three.ws
Create polished 60 fps 4:3 4K browser screen-recording style videos from Codex in-app browser captures, with browser-only crop, natural macOS cursor styling, deliberate click choreography…
230 GitHub starsUsed in 1 repo~1.5k tokens
Media & CreativeAuto-check passed
Demo Video
alinaqi/maggy
Record captioned product walkthrough videos of any web app with Playwright + ffmpeg — proof videos for stakeholders, feature demos, bug-fix evidence
707 GitHub stars~1.4k tokensUpdated 17 days ago
Media & CreativeAuto-check passed

Questions about Terminal Demo Video Recorder

What does Terminal Demo Video Recorder do?

Records a real tmux end-to-end run with asciinema, converts it to a GIF and MP4, and captures trace viewer screenshots with Playwright. This skill produces demo assets for a project from real runs instead of mock-ups.cast file to a GIF with agg, and turns the GIF into an MP4 with ffmpeg.

When should I use Terminal Demo Video Recorder?

Terminal Demo Video Recorder fits situations like: refreshing the README demo GIF after a feature change; recording a terminal session from a real end-to-end run; converting an asciinema cast into a GIF and an MP4; capturing screenshots of a local web viewer for documentation.

How do I install Terminal Demo Video Recorder in Claude Code?

Run `npx skills add liaohch3/claude-tap --skill demo-video -a claude-code`. Or copy the skill folder (.agents/skills/demo-video in liaohch3/claude-tap) into .claude/skills/demo-video in your project. Claude Code loads it when a task matches its description.

How do I install Terminal Demo Video Recorder in Codex?

Run `npx skills add liaohch3/claude-tap --skill demo-video -a codex`. Or copy the skill folder (.agents/skills/demo-video in liaohch3/claude-tap) into .agents/skills/demo-video in your project. Codex loads it when a task matches its description.

Can I use Terminal Demo Video Recorder in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add liaohch3/claude-tap --skill demo-video -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/demo-video, .gemini/skills/demo-video, .github/skills/demo-video and .opencode/skills/demo-video in your project.

What does Terminal Demo Video Recorder need to run?

Going by SKILL.md and its folder, Terminal Demo Video Recorder needs the command-line tools its instructions call (ffmpeg). Our summary lists: tmux, asciinema and agg; ffmpeg; Playwright with a Chrome or Chromium instance listening on port 9222.

Does Terminal Demo Video Recorder access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Terminal Demo Video Recorder safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Terminal Demo Video Recorder use?

Terminal Demo Video Recorder is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Terminal Demo Video Recorder use?

About 545 tokens (SKILL.md is roughly 2.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Terminal Demo Video Recorder?

Skills that share tags, products or a category with Terminal Demo Video Recorder: Record E2E Gif (lablup/backend.ai-webui, 133 stars), Cs Code Video (ChenShuo2004/cs-skills, 197 stars), Render Chatgpt Chat (gooseworks-ai/goose-skills, 1.2k stars) and Character Animation QA (calesthio/OpenMontage, 66k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Terminal Demo Video Recorder?

liaohch3 (a GitHub user) maintains it in liaohch3/claude-tap, which has 3,271 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 10, 2026.

Source: liaohch3/claude-tap on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Terminal Demo Video Recorder

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Skill: Demo Video Generation

Proven Workflow

1) Record terminal session in tmux with asciinema

2) Convert .cast to GIF with agg

3) Convert GIF to MP4 with ffmpeg

Browser Screenshots (HTML Viewer)

Reliable UI interactions

Output Targets

Avoid

Files

Compare with similar skills

Similar skills

More from liaohch3/claude-tap

Related

Questions about Terminal Demo Video Recorder

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