New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Demo Recorder

by sammcj in sammcj/agentic-coding

A skill your agent uses when the user wants a scripted screen-recording demo video of a web app, a narration script or text-to-speech voice-over for one, or a dubbed cut.

Apache-2.0Auto-check passedMedia & Creative

Install Demo Recorder

skills CLI
$ npx skills add sammcj/agentic-coding --skill demo-recorder -a claude-code

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

GitHub CLI
$ gh skill install sammcj/agentic-coding demo-recorder --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/sammcj/agentic-coding.git skills-src && mkdir -p .claude/skills && cp -r skills-src/Skills/demo-recorder .claude/skills/demo-recorder && 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/

Facts

Skill name
demo-recorder
GitHub stars
162
Token cost
~879 tokens
SKILL.md length
457 words
Files
11 (incl. scripts, assets)
Skills in repo
64
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses when the user wants a scripted screen-recording demo video of a web app, a narration script or text-to-speech voice-over for one, or a dubbed cut.

  • Works in 10 steps: Create a task per step below, phrased… → Write demos/.mjs exporting options,… → In setup(), record against a throwaway… → …
  • The user wants a scripted screen-recording demo video of a web app
  • SKILL.md covers Workflow and Gotchas
  • Runs JavaScript and Shell scripts from its folder; calls make and ffmpeg

What it does

Demo Recorder is an agent skill from sammcj/agentic-coding. Use when the user wants a scripted screen-recording demo video of a web app, a narration script or text-to-speech voice-over for one, or a dubbed cut.

Its SKILL.md is about 880 tokens, which your agent loads only when the skill is triggered. The skill folder holds 14 other files, including scripts and assets (for example `assets/examples/openspeccer.md`, `package-lock.json` and `scripts/dub.sh`).

It sits in Media & Creative, covering Text to speech and voice and Video production. The repository describes itself as: Agentic Coding Rules, Templates etc... The licence is Apache-2.0.

When your agent uses it

  • The user wants a scripted screen-recording demo video of a web app
  • A narration script
  • Text-to-speech voice-over for one

Example prompts

  • “/demo-recorder”

Requirements

  • Node.js
  • A Bash shell

Workflow steps

10 steps, taken from the first numbered list in SKILL.md.

  1. Create a task per step below, phrased with its completion criterion, then work them to completion.
  2. Write demos/.mjs exporting options, setup(), run(h, ctx) and teardown(ctx), modelled on assets/examples/openspeccer.mjs; the h helpers are…
  3. In setup(), record against a throwaway copy of the target so on-camera edits leave the user's repo untouched.
  4. Call h.scene("") at the start of each narrated section.
  5. Write demos/.md: one ## N. Title section per scene in recording order, an _On screen: ..._ note, then the spoken text at about 2.2 words…
  6. Run $M record encode DEMO=demos/.mjs. Done when ~/Downloads/demo-recorder//timings.tsv lists every scene and you have viewed every image…
  7. Fix what the stills show (missed click, wrong tab, personal paths via options.hide), then repeat step 6.
  8. Ask which Cloney character and engine to use (offer $M voices; defaults are in scripts/narrate.sh --help), unless the user records clips…
  9. Run $M narrate DEMO=demos/.mjs VOICE= ENGINE=. Done when no row says FAILED or "runs past scene"; trim the text of any that do and re-run.
  10. Run $M dub DEMO=demos/.mjs. Done when its table has no (no clip) row; then report ~/Downloads/demo-recorder//demo-dubbed.mp4.

What it can do on your machine

Read from SKILL.md and the folder at commit 2f25ced. 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

    Ships 5 files in scripts/ (JavaScript and Shell), which the agent can run.

    Shell commands in SKILL.md call:

    • make
    • 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

Demo Recorder loads about 879 tokens when it runs. Until then it costs about 41 tokens; SKILL.md has 457 words of instructions outside code blocks.

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

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); the scripts in this folder are not scanned.

SKILL.md

The full file from sammcj/agentic-coding at commit 2f25ced, republished under its Apache-2.0 licence (© sammcj). 457 words, ~879 tokens.

Download SKILL.mdSave it as .claude/skills/demo-recorder/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.
name
demo-recorder
description
Use when the user wants a scripted screen-recording demo video of a web app, a narration script or text-to-speech voice-over for one, or a dubbed cut.
metadata.version
2026-10-09

Drives headless Chromium through a scripted walkthrough, encodes a silent 3K 60fps demo.mp4, then optionally voices the narration with Cloney and dubs it on. Below, $M means make -f <this-skill-dir>/Makefile; run it from the directory holding demos/; output goes to ~/Downloads/demo-recorder/<demo>/ unless OUT= says otherwise. $M help lists the targets; each script in scripts/ takes --help.

Workflow

  1. Create a task per step below, phrased with its completion criterion, then work them to completion.
  2. Write demos/<demo>.mjs exporting options, setup(), run(h, ctx) and teardown(ctx), modelled on assets/examples/openspeccer.mjs; the h helpers are in scripts/lib/recorder.mjs.
  3. In setup(), record against a throwaway copy of the target so on-camera edits leave the user's repo untouched.
  4. Call h.scene("<name>") at the start of each narrated section.
  5. Write demos/<demo>.md: one ## N. Title section per scene in recording order, an _On screen: ..._ note, then the spoken text at about 2.2 words per second of scene (example: assets/examples/openspeccer.md).
  6. Run $M record encode DEMO=demos/<demo>.mjs. Done when ~/Downloads/demo-recorder/<demo>/timings.tsv lists every scene and you have viewed every image in ~/Downloads/demo-recorder/<demo>/stills/.
  7. Fix what the stills show (missed click, wrong tab, personal paths via options.hide), then repeat step 6.
  8. Ask which Cloney character and engine to use (offer $M voices; defaults are in scripts/narrate.sh --help), unless the user records clips themselves as N.wav in ~/Downloads/demo-recorder/<demo>/audio/.
  9. Run $M narrate DEMO=demos/<demo>.mjs VOICE=<character> ENGINE=<engine>. Done when no row says FAILED or "runs past scene"; trim the text of any that do and re-run.
  10. Run $M dub DEMO=demos/<demo>.mjs. Done when its table has no (no clip) row; then report ~/Downloads/demo-recorder/<demo>/demo-dubbed.mp4.
Show full SKILL.md (197 more words)Show less

Gotchas

  • Chromium needs its own sandbox and Cloney needs Metal; both fail inside the agent sandbox, so run record and narrate unsandboxed.
  • record installs Playwright into the skill directory on first run; that needs network access.
  • Check clips with ffprobe and ffmpeg -af volumedetect; never play audio, leave listening to the user.
  • Breeze takes 35-75 s per clip. narrate.sh caches renders and re-renders only sections whose text or voice changed, so edit and re-run freely. Delete ~/Downloads/demo-recorder/<demo>/audio/.narrate/N.* to re-render one clip; FORCE=1 re-renders all.
  • Pass VOICE/ENGINE on every narrate for a non-default voice; omitting them re-renders every clip in the default voice.
  • Without Cloney, narrate and dub skip with a message; $M demo still produces the silent cut.
  • dub.sh pairs clip N.wav with the Nth scene in timings.tsv; keep section numbers in scene order.
  • The cursor is an injected overlay that only moves on mouse events; h.moveTo onto whatever the narration names, and h.wait before the next h.scene so the narration has room.
  • Keep spaces out of the DEMO path; make splits it and mangles the output folder name.
  • ~/Downloads/demo-recorder/<demo>/frames/ runs to about 800 MB per 90 s; offer to delete it once the cut is final.

© sammcj, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 10 other files (scripts, assets) in Skills/demo-recorder of sammcj/agentic-coding.

  • SKILL.md
  • .gitignore
  • Makefile
  • assets/examples/openspeccer.md
  • assets/examples/openspeccer.mjs
  • package-lock.json
  • scripts/dub.sh
  • scripts/encode.sh
  • scripts/lib/recorder.mjs
  • scripts/narrate.sh
  • scripts/record.mjs

Open the folder on GitHubat commit 2f25ced

Compare with similar skills

Demo 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.

Demo Recorder compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Demo Recorder this skillsammcj/agentic-coding162—~879Automated safety check: PassApache-2.0
DaVinci AutoEdit Agentliuluhaixiu/DaVinci-AutoEdit-Agent484—~2.8kAutomated safety check: NotesMIT
Ergo Remotion Videoitwanger/toBeBetterJavaer18k—~1.1kAutomated safety check: PassNone
Agent Video PipelineJayceHuang/agent-video-pipeline105—~1.8kAutomated safety check: PassMIT
Paper Collage Explainer Generatortl2012tl/comfyUI-llama-TE2414 repos~5.2kAutomated safety check: PassNone
AI Video Production Assistantwanghui2323/ai-video-maker101—~924Automated safety check: PassMIT

Similar skills

  • DaVinci AutoEdit Agent

    liuluhaixiu/DaVinci-AutoEdit-Agent

    Guides an approval-gated video editing pipeline from raw footage to an audited DaVinci Resolve timeline, with scripting, optional TTS and a blueprint at each stage.

    484 GitHub stars~2.8k tokensUpdated 4 mo ago
    Media & CreativeAuto-check: notes

  • Ergo Remotion Video

    itwanger/toBeBetterJavaer

    把口播稿做成二哥风格的 Remotion 视频，包括整理视频用稿、火山 TTS 配音、音画对齐、逐章动画预览和导出带配音的 MP4。用户说“做视频”“口播稿转视频”“Remotion”“继续做下一章”“出片”“渲染”“改读音”“配音读错了”，或给出 docs/src/ai/video/ 下的稿子要做成视频时使用。共享工具、配置和素材在…

    18k GitHub stars~1.1k tokensUpdated yesterday
    Media & CreativeAuto-check passed

  • Agent Video Pipeline

    JayceHuang/agent-video-pipeline

    Orchestrate a configurable, debuggable local pipeline from approved narration packages to timed audio, captions, visual assets, semantic motion, rendered video, optional avatar compositing…

    105 GitHub stars~1.8k tokensUpdated 1 mo ago
    Media & CreativeAuto-check passed

  • Paper Collage Explainer Generator

    tl2012tl/comfyUI-llama-TE

    For creators, educators, and social-video editors who need a tactile paper-collage language for narration, knowledge points, opinions, or abstract topics.

    241 GitHub starsUsed in 4 repos~5.2k tokens
    Media & CreativeAuto-check passed

  • AI Video Production Assistant

    wanghui2323/ai-video-maker

    Turns an idea, article, outline or audio file into a sourced, reviewable AI video, tracking whether narration uses a human, synthetic or cloned voice.

    101 GitHub stars~924 tokensUpdated 1 mo ago
    Media & CreativeAuto-check passed

  • Media Gen

    clacky-ai/openclacky

    Generate or edit images, videos, or audio in the current task.

    1.2k GitHub stars~7.5k tokensUpdated today
    Media & CreativeAuto-check passed

More from sammcj/agentic-coding

All 64 skills in this repo

  • Yue2 Music

    sammcj/agentic-coding

    A skill your agent uses when generating songs with YuE2, covering a recording via SheetSage2 audio-to-ABC, editing a score or lyrics with melody preservation, or building a reproducible listening…

    162 GitHub stars~2.3k tokensUpdated 2 days ago
    Auto-check passed

  • Bento Slides

    sammcj/agentic-coding

    A skill your agent uses when creating or editing Bento (.bento.html) slide decks, including any request for a single-file HTML slide deck.

    162 GitHub stars~2.9k tokensUpdated 2 days ago
    Auto-check passed

  • Idrive Backup

    sammcj/agentic-coding

    A skill your agent uses whenever the user wants you to manage, discuss or diagnose iDrive Backup configuration on macOS

    162 GitHub stars~1.7k tokensUpdated 2 days ago
    Auto-check: notes

  • Piper Tts Training

    sammcj/agentic-coding

    Train custom TTS voices for Piper (ONNX format) using fine-tuning or from-scratch approaches.

    162 GitHub stars~1.4k tokensUpdated 2 days ago
    Auto-check passed

  • PPTX To Md

    sammcj/agentic-coding

    Convert a PPTX slide deck into per-slide markdown that preserves both the verbatim text and the meaning of embedded screenshots, diagrams and charts in their original layout positions.

    162 GitHub stars~1.8k tokensUpdated 2 days ago
    Auto-check passed

  • Skill Creator Primer

    sammcj/agentic-coding

    You MUST load this skill before the skill-creator skill AND before making ANY change to, or conducting a review of ANY Agent Skill.

    162 GitHub stars~9.8k tokensUpdated 2 days ago
    Auto-check passed

Categories

Questions about Demo Recorder

What does Demo Recorder do?

A skill your agent uses when the user wants a scripted screen-recording demo video of a web app, a narration script or text-to-speech voice-over for one, or a dubbed cut. Demo Recorder is an agent skill from sammcj/agentic-coding. Use when the user wants a scripted screen-recording demo video of a web app, a narration script or text-to-speech voice-over for one, or a dubbed cut.

When should I use Demo Recorder?

Demo Recorder fits situations like: the user wants a scripted screen-recording demo video of a web app; A narration script; text-to-speech voice-over for one.

How do I install Demo Recorder in Claude Code?

Run `npx skills add sammcj/agentic-coding --skill demo-recorder -a claude-code`. Or copy the skill folder (Skills/demo-recorder in sammcj/agentic-coding) into .claude/skills/demo-recorder in your project. Claude Code loads it when a task matches its description.

How do I install Demo Recorder in Codex?

Run `npx skills add sammcj/agentic-coding --skill demo-recorder -a codex`. Or copy the skill folder (Skills/demo-recorder in sammcj/agentic-coding) into .agents/skills/demo-recorder in your project. Codex loads it when a task matches its description.

Can I use Demo 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 sammcj/agentic-coding --skill demo-recorder -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-recorder, .gemini/skills/demo-recorder, .github/skills/demo-recorder and .opencode/skills/demo-recorder in your project.

What does Demo Recorder need to run?

Going by SKILL.md and its folder, Demo Recorder needs JavaScript and a shell for the scripts in its folder and the command-line tools its instructions call (make and ffmpeg). Our summary lists: Node.js; A Bash shell.

Does Demo 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 Demo 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Demo Recorder use?

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

How many tokens does Demo Recorder use?

About 879 tokens (SKILL.md is roughly 3.5k 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 Demo Recorder?

Skills that share tags, products or a category with Demo Recorder: DaVinci AutoEdit Agent (liuluhaixiu/DaVinci-AutoEdit-Agent, 484 stars), Ergo Remotion Video (itwanger/toBeBetterJavaer, 18k stars), Agent Video Pipeline (JayceHuang/agent-video-pipeline, 105 stars) and Paper Collage Explainer Generator (tl2012tl/comfyUI-llama-TE, 241 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Demo Recorder?

sammcj (a GitHub user) maintains it in sammcj/agentic-coding, which has 162 GitHub stars. The repository holds 64 skills in this directory. The repository was last updated on October 9, 2026.

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