demo-video

demo-video is a skill for Claude Code, Codex from hub-ki/video-generation. It costs 236 tokens per session (13,189 once invoked), scanned B, original, MIT.

A workflow for making a finished demo or guide video from an app or public website, including recording, editing, and visual design.

In plain words
What is it for?
Use it for product demos, feature walkthroughs, how-to guides, onboarding clips, and tours of websites.
Why use it?
It provides a documented path through the many production steps needed to turn an app or screen recording into a presentable video.

Skill for Claude CodeCodex

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

Needs its repository: it runs a file that does not travel with it, so clone the repository first. The line is node <skill>/scripts/make-brand.mjs --from-logo ./assets/logo.svg --name Acme.

Good fit Use it for product demos, feature walkthroughs, how-to guides, onboarding clips, and tours of websites.

Compare 6 skills from other repositories ↓
Install

Getting it into your agent

It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.

Clone the repo
git clone --depth 1 https://github.com/hub-ki/video-generation
agentmods
npx agentmods add skills/hub-ki/video-generation/demo-video

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-video

README.md
[![agentmods](https://agentmods.dev/badge/skills/hub-ki/video-generation/demo-video/github.svg)](https://agentmods.dev/skills/hub-ki/video-generation/demo-video)
Your own site
<a href="https://agentmods.dev/skills/hub-ki/video-generation/demo-video"><img src="https://agentmods.dev/badge/skills/hub-ki/video-generation/demo-video/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-video

Your own site · 80×15
<a href="https://agentmods.dev/skills/hub-ki/video-generation/demo-video"><img src="https://agentmods.dev/badge/skills/hub-ki/video-generation/demo-video.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 236 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 13,189 The whole file, excluding the scripts and references it only reads on demand.
Security scan B 1 finding. 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.00236 $0.13189
Opus 5 $0.00118 $0.06595
Sonnet 5 $0.00047 $0.02638
Haiku 4.5 $0.00024 $0.01319

Measured 11d ago against content hash 0afbbfa45794, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade B, and why

demo-video scanned grade B with 1 finding 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 11d ago.

The scan reads SKILL.md. This mod also ships 15 executable files (examples/starter/narration.mjs, scripts/app-state.mjs, scripts/apply-brand.mjs, …), 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.

Asks for rootmediumPrivilege escalation

A mod that escalates privileges can change anything on the machine, not only the project.

`ffmpeg-static`/`ffprobe-static` packages in `~/.hyperframes-cli` (all platforms, no sudo — **the
skills/demo-video/SKILL.md · 805 lines

How it starts

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

demo-video

You need a finished, designed video of an app. This skill is the tested, batteries-included pipeline. It builds on HyperFrames (HTML→video) but adds the parts that are painful to rediscover: how to record the app yourself, this machine's ffmpeg workarounds, the exact edit recipes, the branded design system, and the traps that waste hours.

Nothing here is branded. The look is one design with swappable tokens; whose brand a video is in is a step, not an assumption — see Phase 0B.

🚦 The phases are grouped by topic, not by order of work

Read this before following anything below in sequence. The capture mechanics are documented first because they belong together, but capture is not the first thing you do:

The concept comes first:  what is this FOR?  →  the arc  →  PLAN.md (+ SCRIPT.md)  →  APPROVED
                          (that is the `video-plan` skill, not this one)             │
                                                                                        │
    ↓ only now does footage exist ──────────────────────────────────────────────────────┘
Phase 0 environment  →  0B brand  →  1A capture / 1B ingest  →  3 prep  →  4 compose
                                                            →  5 verify  →  6 render

Shooting first looks faster and is not: the arc is what changes under review, and every beat captured against an unagreed arc is re-captured. Phase 0 and 0B are the two things you may run early — they install tools and settle the palette. Everything in Phase 1 waits for an approved plan.

🚀 Trying it out — the fast path

🚨 The caller chooses this mode. You never do. You may OFFER it, in one question. You may not conclude it from circumstances, and these in particular are not consent:

  • they attached or unpacked the skill package — that is how someone installs a tool, not a statement about what they want made with it;
  • the request sounds exploratory, or came without a brief;
  • it is the first thing they have asked for;
  • you would find the fast path more convenient.

Read the full file on GitHub · 805 lines

Files

What ships with it

60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

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. 11d ago First seen · 805 lines · 236 tokens per session scan B 0afbbfa45794

Subscribe to this mod's changes

demo-video is a skill published in the GitHub repository hub-ki/video-generation (6 stars, last pushed 18d ago), licensed MIT. It adds 236 tokens to every session and 13,189 once invoked, about $0.0012 per session on Opus 5. A static security scan graded it B with 1 finding (asks for root). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

demo-gif

Record, render, optimize, and embed a demo GIF in a repo's README. Use when asked to add a demo gif, record a demo, show the tool in action, or make a README more visual.

conorbronsdon/demo-gif-skill · 47 tokens

demo-gif

Record and optimize reproducible README demo GIFs. Use when asked to record a demo or add a README GIF.

conorbronsdon/demo-gif-skill · 27 tokens

demo-video

A process for automatically recording feature-demo videos of a local web app using Playwright, a browser-automation tool, and ffmpeg, a video-processing tool. It drives the real app, then adds subtitles, labels, a simulated cursor, zooms, and faster playback for waiting periods.

Kminer2053/demo-video-skill · 261 tokens

slideops

Use when the user asks for slides, a slide deck, or a presentation about a code repository, one of its subsystems, a feature, an architecture area, or its recent changes. Triggers include "make slides", "build a slide deck", "create a presentation", "HTML slides for this repo", "overview deck", "team update slides"…

glukicov/slideops · 223 tokens

ogilvideo

Use this skill when a user asks to analyze, reverse-engineer, plan, prompt, storyboard, direct, animate, improve, or produce a high-quality motion video, agentic AI video, SaaS explainer, product launch film, animated landing-page video, UI motion sequence, screen-recording transformation, or motion-graphics ad. This…

wundercorp/builderstudio-skills · 107 tokens

ogilvideo

Use this skill when a user asks to analyze, reverse-engineer, plan, prompt, storyboard, direct, animate, improve, or produce a high-quality motion video, agentic AI video, SaaS explainer, product launch film, animated landing-page video, UI motion sequence, screen-recording transformation, or motion-graphics ad. This…

wundercorp/builderstudio-skills · 107 tokens