Product demo videos: a Claude Code skill for narrated walkthroughs
Makes short, voiced walkthrough videos of a web app. The pointer moves in time with the narration, and the finished video comes with zooms, music, captions and a branded intro and outro, with no editing afterwards.
What it makes
Short product walkthrough videos, thirty seconds to two minutes, with a voice that talks the viewer through every click. You describe the flow. The agent writes the narration, records the app while a pointer moves through it in time with the words, then adds zooms, a branded intro and outro, music and captions. The video above came straight out of it, with no editing by hand.
How it works
Every video is a list of beats: one spoken line plus the on-screen actions that go with it.
Script | The agent scouts the app first, so the narration uses the exact labels on screen. |
|---|---|
Voice | ElevenLabs reads each line and returns word-by-word timings. Only changed lines get regenerated. |
Take | A hidden browser records the app at twice the output resolution while the pointer glides, hovers and clicks. Each beat lasts as long as its line, and a click can wait for the exact word that names it. |
Assemble | The voice lands where each beat started, the frame eases in where the take asked for a zoom, and the intro, outro, music and captions go on in one pass. Music ducks under the voice on its own. |
Check | The agent pulls a frame from every beat and looks at each one before calling the video done. |
Change a line, regenerate that clip, record again. Nothing gets edited by hand.
What you need
Node and ffmpeg | The setup script installs Playwright and its browser. |
|---|---|
An ElevenLabs API key | Ideally restricted to Text to Speech, Voices and Music Generation. A free system voice works for rehearsing. For production quality, we recommend their v4 model; the skill’s defaults are a good starting point. |
A demo account | Never record real customer data. |
Any desktop OS | Recording happens in a hidden browser, so it never takes over your mouse. We use it on macOS, and it's built to run on Linux and Windows too. A macOS-only screen mode covers things outside the page, like native menus or a terminal. |
The first time, the agent runs a setup check that names anything missing along with the command that fixes it. Then it makes a short test video from a bundled sample app, so you know the machine is ready before you record your own.
Example prompts
"Make a getting-started video that shows signing up and creating a first project." |
"Record a one-minute walkthrough of inviting a teammate, in the same voice as the last one, with our logo on the intro." |
"The pricing changed. Update the third line of video two and record it again." |
Install
Use Hand to your agent above and paste the result into Claude Code or another coding agent. To install it by hand, copy the product-demo-videos folder from the strideUX skills repo into ~/.claude/skills/.
Ready to try it? Hand it to your agent