demo-recorder

demo-recorder is a skill for Claude Code, Codex from sammcj/agentic-coding. It costs 39 tokens per session (1,034 once invoked), scanned A, original, Apache-2.0.

A tool for recording scripted walkthrough videos of web applications. It can also create narration and combine a voice-over with the recorded video.

In plain words
What is it for?
Use it to make product demos, narrated walkthroughs, and dubbed versions of web-app recordings from scripted browser actions.
Why use it?
It replaces repetitive manual screen recording and keeps the on-screen actions and spoken explanation organised by scene.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it to make product demos, narrated walkthroughs, and dubbed versions of web-app recordings from scripted browser actions.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/sammcj/agentic-coding/demo-recorder
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add sammcj/agentic-coding --skill demo-recorder
Clone the repo
git clone --depth 1 https://github.com/sammcj/agentic-coding

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for demo-recorder

README.md
[![agentmods](https://agentmods.dev/badge/skills/sammcj/agentic-coding/demo-recorder/github.svg)](https://agentmods.dev/skills/sammcj/agentic-coding/demo-recorder)
Your own site
<a href="https://agentmods.dev/skills/sammcj/agentic-coding/demo-recorder"><img src="https://agentmods.dev/badge/skills/sammcj/agentic-coding/demo-recorder/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for demo-recorder

Your own site · 80×15
<a href="https://agentmods.dev/skills/sammcj/agentic-coding/demo-recorder"><img src="https://agentmods.dev/badge/skills/sammcj/agentic-coding/demo-recorder.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 39 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,034 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00039 $0.01034
Opus 5.5 $0.00016 $0.00414
Sonnet 5.5 $0.00008 $0.00207
Haiku 4.5 $0.00004 $0.00103

Measured 5d ago against content hash 92c9f6197ca7, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

demo-recorder scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

The scan reads SKILL.md. This mod also ships 6 executable files (assets/examples/openspeccer.mjs, scripts/dub.sh, scripts/encode.sh, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Skills/demo-recorder/SKILL.md · 36 lines

How it starts

The opening of the file, as written. The whole thing — 36 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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/. If a cloney skill is available, activate it first; otherwise cloney --help covers the CLI.
  9. Run $M narrate DEMO=demos/<demo>.mjs VOICE=<character> ENGINE=<engine>. Done when no row says FAILED or "runs past scene". Re-run for a take that said the wrong words (a fresh seed usually fixes it); trim the text of a clip that runs past its scene.
  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.

Read the full file on GitHub · 36 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 5d ago Changed · +1 lines 92c9f6197ca7
  2. 7d ago First seen · 35 lines · 39 tokens per session scan A 24d854c7ee7a

Subscribe to this mod's changes

demo-recorder is a skill published in the GitHub repository sammcj/agentic-coding (164 stars, last pushed 3d ago), licensed Apache-2.0. It adds 39 tokens to every session and 1,034 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-10.

Related

Other skills, from other repositories

bureau

Drive Bureau — the browser stack's installable capability server: a stealth Firefox (Camofox) + daemon that exposes browser tools as MCP-over-HTTP on :8830, plus a CLI for saved browser identities (sessions), social capture / search, adapter health probes, declarative workflows, and Guilde connection. Use when working…

agentproto/ts · 131 tokens

browser

Drive the user's REAL authenticated browser (their logins/cookies) via the local-browser chain — guilde → tunnel → daemon → chrome-devtools-mcp → cloned Chrome. The foundation skill for any "do X in a browser as me" task: navigate, capture (element screenshots + selective content/ld+json/readability), inspect network…

agentproto/ts · 130 tokens

linkedin

Drive the user's real authenticated LinkedIn — via camofox stealth (preferred, distinct session + WhatsApp re-auth alert) or the chrome-devtools chain (fallback). API-first: read feed/profiles/activity, who-reacted/commented, connections, people + content search (who posted about a topic, with resolved permalinks)…

agentproto/ts · 161 tokens

instagram

Drive the user's authenticated Instagram via the browser skill: profiles, media likers/comments, followers/following, search via the web private API; gated like/comment/follow/DM. Use for Instagram research/outreach as the user.

agentproto/ts · 49 tokens

local-browser

Drive the user's real, authenticated Chrome from an agentproto-connected client. Use when a task needs the user's live cookies, sessions, or extensions (Gmail, LinkedIn, GitHub, ad managers, internal tools) rather than a fresh anonymous browser.

agentproto/ts · 54 tokens

x-twitter

Drive the user's authenticated X/Twitter via the browser skill: read timelines/profiles, who-liked/retweeted (Favoriters/Retweeters), search, and gated posts/likes/DMs through X's internal GraphQL API. Use for any 'do X on Twitter/X as me' or build-the-X-graph task.

agentproto/ts · 70 tokens