Skip to content
Conduit

skill

app-demo-video

Claude Code skill: turn your web app into a 2-minute sales video (real screen recordings, AI voice, captions, landscape + vertical)

elias-khalil-eng/app-demo-videocommunitylistedunreviewed
Use skill

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/elias-khalil-eng/app-demo-video itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 22, 2026

app-demo-video

A Claude Code skill that turns your running web app into a 2-minute sales video you can send to clients.

It records every important screen of the app live (sharp text, visible cursor, fake demo data), writes a benefit-led script, adds an AI voiceover, captions, music and an end card with your call to action, and renders:

  • a landscape video (1920x1080) for WhatsApp, laptops and YouTube
  • a vertical video (1080x1920) for Instagram Reels, status and TikTok
  • a thumbnail for each, baked in as the first frame so chat apps show it
  • a short message to send along with the video

Install

git clone https://github.com/elias-khalil-eng/app-demo-video ~/.claude/skills/app-demo-video

Then, inside any web app project in Claude Code:

/app-demo-video

or just ask: "make a video of my app that shows all the features".

Claude asks once for the format, caption language, voice and contact details, then works through the whole pipeline. The landscape video comes first for your review; the vertical one follows after you approve it.

Requirements

Claude checks these and asks before installing anything:

  • Node 18+ and Python 3
  • Playwright (Chromium) for recording
  • FFmpeg (winget install --id Gyan.FFmpeg -e --source winget on Windows)
  • HyperFrames via npx hyperframes for composing and rendering
  • For the voice: pip install kokoro-onnx soundfile (Kokoro runs locally, no API key). Voices: English (US, UK), French, Spanish, Italian, Portuguese, Hindi, Japanese, Chinese.

Your app needs a demo or mock data mode, or Claude will propose a small one (it asks first). The video never shows real customer data and never types real passwords.

How long it takes

About 1.5 to 2 hours per 2-minute video on a normal laptop. Clips are recorded at human speed and rendering is CPU heavy. Claude runs the long stages in the background so you can keep working.

What is inside

SKILL.md                 the workflow Claude follows
scripts/rec_lib.mjs      sharp, human-paced Playwright recorder (one clip per feature)
scripts/make_voice.py    one Kokoro voice line per scene, with measured lengths
scripts/build.py         builds the HyperFrames composition from video.config.json
scripts/finalize.py      poster frame, thumbnail baked as frame 0, loudness for phones
scripts/ffbin.py         finds FFmpeg even right after a fresh install
references/config.md     video.config.json fields and an example
references/script.md     how to write the hook, captions and voice lines
references/recording.md  recorder internals, helper API, and known traps

Music is not bundled. Point music in the config at a royalty-free track you are allowed to use, or leave it out.

License

MIT

↑↓ navigate openesc close