demo-video

Orchestrates a pipeline that records app UI, generates narration, and renders narrated demo videos.

3|1|Updated Nov 19, 2025
One-click install
npx skills add https://github.com/lukaskellerstein/claude-my-marketplace --skill demo-video-lukaskellerstein
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: demo-video
Source: https://github.com/lukaskellerstein/claude-my-marketplace/tree/main/plugins/demo-video-plugin/skills/demo-video
Command: npx skills add https://github.com/lukaskellerstein/claude-my-marketplace --skill demo-video-lukaskellerstein

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Producing a narrated product demo video normally requires manual screen recording, voiceover recording, and video editing that is hard to reproduce or re-cut. This Skill turns the process into a deterministic pipeline: a storyboard JSON contract drives UI capture, voiceover generation, timeline reconciliation, and final rendering. ## Core Features & Use Cases - End-to-end pipeline orchestration: Coordinates 13 stages from codebase research and storyboard writing through Playwright or OBS capture, ElevenLabs voiceover, timeline reconciliation, and rendering with Remotion or export to Final Cut Pro with MotionVFX templates. - Deterministic contracts and gates: storyboard.json and timeline.json are validated on every write, measured durations drive timing arithmetic, and four human review gates prevent wasted credits and bad takes. - Use Case: Ask for a 90-second walkthrough of your web app's core flow; the Skill inventories the codebase, drafts a storyboard for approval, seeds deterministic app state, records each section, generates narration, and renders a draft for review before the final cut. ## Quick Start Ask the assistant to create a narrated demo video of this project, then approve the storyboard at the first gate.

Frequently Asked Questions about demo-video

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a narrated demo video of my app automatically?▼

Define a storyboard.json with sections, beats, and narration text, then the pipeline seeds deterministic app state, records each section with Playwright or OBS, generates ElevenLabs voiceover, reconciles measured durations into a timeline, and renders with Remotion or exports to Final Cut Pro.

How to record Electron app UI for a demo video?▼

Electron sections are captured with the launch driver, but Playwright's recordVideo has a known bug producing empty Electron clips. Record with OBS instead by setting the recorder to obs, which also supports pausing through long waits.

Can I export a demo video timeline to Final Cut Pro?▼

Yes, the timeline-to-fcpxml script converts the measured timeline into an FCPXML project validated against Final Cut Pro's DTD, dressed with Motion templates such as MotionVFX DesignStudio. Run the probe export first to confirm templates import without warnings.

Why does my recorded demo clip look empty or fail?▼

Empty clips usually mean app state was not seeded before capture, or the take failed and produced a 0-2 second file. Re-run the app preparation stage to isolate and seed state, rehearse the section unrecorded, then re-capture.

When should I not re-run the whole demo video pipeline?▼

Stages 4 through 11 are individually re-runnable, so fixing one section only requires re-cutting that section using its stable NN-slug id. Re-running the entire pipeline wastes ElevenLabs credits and re-records sections that are already approved.