A complete course on the Skill demonstration video: it navigates your app for real with an automated browser, captures the actual screens step by step, and builds a narrated walkthrough — browser frame, cursor that clicks controls, zoom, and local narration. Everything on your machine, with no API key.
Illustrative diagram of the demo video pipeline
Two sister skills, two goals. This shows a real app being used; the other explains a concept with motion graphics.
Captures the app’s actual screens and animates the cursor + zoom over them. Tutorial/walkthrough on “how to use tool X.”
Motion graphics scenes that explain a concept. No real app — everything is animated HTML. View course →
From the concept of a walkthrough to a narrated MP4 of your app running.
What a demo video is, when to use one, the principle “capture first, animate later,” and the API-key-free stack (agent-browser + HyperFrames + Kokoro).
3 modules · basic →Drive the actual app with agent-browser/Playwright: actions.json, coordinates and bounding boxes, scrolling through long pages, React inputs, and multi-state flows.
4 modules · hands-on →Browser frame, animated cursor, and zoom; premium dark house style; local Kokoro TTS narration; and rendering in HyperFrames with lint, inspect, and the INEMA.CLUB CTA.
3 modules · advanced →One actions.json describes the URL, viewport, and steps. agent-browser navigates the actual app and captures real screens (shots + steps.json).
The fixed viewport becomes the coordinate space. The cursor targets controls, zoom highlights the action, and Kokoro narration is timed to match each step.
HyperFrames runs headless Chrome + FFmpeg and exports the walkthrough in 16:9 with a browser frame and the INEMA.CLUB CTA. No cloud, no API.
It's a self-contained folder: SKILL.md, scripts (capture + composition + narration), references, and sources. Put it in ~/.claude/skills/ (global) or .claude/skills/ (project) and ask Claude Code for a demo video. This entire course explains each part of it.