skills.rest
sfrangulov
sfrangulovCOMMUNITY
Explore all skills by this author →
GitHub

demo-video-pipeline

Orchestrate Playwright recordings, Remotion overlays, and ElevenLabs voiceovers into demo MP4s.

2|Updated May 4, 2026
Search Tags:#elevenlabs#voiceover#demo video#playwright recording#product walkthrough#remotion overlays#ffmpeg mixing
One-click install
npx skills add https://github.com/sfrangulov/skills --skill demo-video-pipeline
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: demo-video-pipeline
Source: https://github.com/sfrangulov/skills/tree/main/demo-video-pipeline
Command: npx skills add https://github.com/sfrangulov/skills --skill demo-video-pipeline

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires node 20+, pnpm, ffmpeg, playwright, remotion, @remotion/cli, @remotion/media, elevenlabs, and includes scripts (resource) components.

What problem does it solve?

This Skill eliminates the painful, manual process of recording, editing, and synchronizing polished product demo videos by providing an end-to-end pipeline that turns a web UI walkthrough into a finished 30–90s marketing-ready MP4 with overlays and timed voiceover.

Core Features & Use Cases

  • Cinematic, keyboard-driven recording: drives scene-by-scene zoom transitions while Playwright records the browser output for consistent demo takes.
  • Frame-perfect Remotion overlays: layers intro/outro, callouts, count-ups, and pulsing highlights aligned to recorded scenes using a shared timing/markers contract.
  • ElevenLabs voiceover + final mixing: generates multilingual voiceover, syncs it to the scene timeline, and assembles the final video with optional music ducking and LUFS normalization.
  • Use case: create a product walkthrough for LinkedIn/YouTube/Reels where each KPI update is highlighted with a pulsing box and a scripted voice narration.

Quick Start

Generate a voiceover mp3 and render the final demo by following the pipeline phases in the skill rules after you record a Playwright take to public/recording.mp4 and public/markers.json.

Frequently Asked Questions about demo-video-pipeline

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

FAQPage Schema
How do I automate recording a product demo video with voiceover?▼

You can automate a product demo video by orchestrating a Playwright browser recording, adding Remotion overlays, and mixing an ElevenLabs voiceover. This pipeline produces a polished MP4 by aligning scene-based zoom transitions and timed audio narration automatically.

Can I use Remotion to add callouts and highlights to a Playwright recording?▼

Yes, Remotion can layer frame-perfect overlays like callouts, count-ups, and pulsing highlights onto a Playwright recording. The pipeline uses a shared markers.json contract to align Remotion intro and outro graphics with specific scene timings and anchors.

What is the best way to sync ElevenLabs voiceover with a web UI walkthrough?▼

The best way to sync ElevenLabs voiceover with a web UI walkthrough is by using a markers contract that defines per-scene timing. The pipeline generates the voiceover, syncs it to the scene timeline, and assembles the video with audio normalization.

Do I need ffmpeg and Node 20 to generate a marketing reel from a web interface?▼

Yes, you need Node 20+, pnpm, and ffmpeg to generate a marketing reel from a web interface. These dependencies are required to run the Playwright recording, Remotion overlay rendering, and final audio mixing processes.

Does this demo video pipeline support multilingual voiceover generation?▼

Yes, the pipeline supports multilingual voiceover generation through the ElevenLabs API integration. It generates the audio, syncs it to your scene timeline, and assembles the final video with optional music ducking and LUFS normalization.

What are the limitations of using Playwright and Remotion for onboarding screencasts?▼

The pipeline targets React and HTML web interfaces for onboarding screencasts, requiring a markers.json file with headTrimMs and per-scene timing. You also need an optional ElevenLabs API key and companion skills for Remotion and Playwright best practices.

Related Skills

Explore More Marketing & Sales Skills→
segmently-aisegmently-ai

playwright-bowser-core

Automates browser control for persistent Playwright CLI sessions and evidence capture.

Official
Intermediate
barefootfordbarefootford
584

transcribe-audio

Transcribes video audio into timestamped JSON transcripts with word-level timing using WhisperX.

Community
Intermediate
video-production-buddyvideo-production-buddy
602

remotion-best-practices

Enforce Remotion and React best practices for glitch-free programmatic video rendering.

Official
Intermediate
tradertunantetradertunante

video

Automate end-to-end video production for marketing content using AI tools and programmatic frameworks.

Community
Advanced