demo-video

Record browser interactions and encode them into MP4, GIF, or WebM videos.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/TrendpilotAI/invesco-demo --skill demo-video-trendpilotai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: demo-video
Source: https://github.com/TrendpilotAI/invesco-demo/tree/main/skills/demo-video
Command: npx skills add https://github.com/TrendpilotAI/invesco-demo --skill demo-video-trendpilotai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright-core, ffmpeg, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation of high-quality product demo videos by recording browser interactions, saving significant manual effort and ensuring consistent, polished output.

Core Features & Use Cases

  • Automated Recording: Captures browser actions using Playwright CDP screencast.
  • Video Encoding: Utilizes FFmpeg to convert recorded frames into various video formats (MP4, GIF, WebM).
  • Customizable Sequences: Allows detailed planning and execution of specific demo workflows.
  • Use Case: Quickly generate a walkthrough video for a new web application feature, demonstrating its functionality step-by-step for marketing or training purposes.

Quick Start

Run the node script to record a demo sequence and then use the bash script to convert frames to video.

Frequently Asked Questions about demo-video

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

FAQPage Schema
How do I automate product demo recording from browser interactions?

Automate product demo recording by capturing browser interactions through Playwright CDP screencast. The captured frames are then encoded into video files using FFmpeg, allowing you to generate step-by-step walkthroughs without manual screen recording.

Can I encode browser recordings into MP4, GIF, or WebM formats?

Yes, you can encode browser recordings into MP4, GIF, or WebM formats. The Skill utilizes FFmpeg to convert captured Playwright screencast frames into your desired video format for marketing materials or tutorials.

Do I need Playwright and FFmpeg to generate web application demo videos?

Yes, you need both Playwright and FFmpeg to generate web application demo videos. Playwright-core handles the automated browser interaction and frame capture, while FFmpeg processes and encodes these frames into the final video file.

What is the best way to create a walkthrough video for a new web app feature?

The best way to create a walkthrough video for a new web app feature is automating the sequence with Playwright. It records the specific demo workflows via CDP screencast, and FFmpeg encodes the frames into a polished, consistent video output.

Does Playwright CDP screencast support customizable sequences for product showcases?

Yes, Playwright CDP screencast supports customizable sequences for product showcases. You can plan and execute specific demo workflows in detail, and the Skill will capture the browser actions step-by-step to ensure accurate product demonstrations.

Why use automated browser recording instead of manual screen capture for product demos?

Automated browser recording ensures consistent, polished output for product demos while saving significant manual effort. By scripting interactions with Playwright and encoding with FFmpeg, you eliminate human error and easily reproduce demo workflows.