Record and transcode web app demos with Playwright and FFmpeg.
npx skills add https://github.com/ZzAve/teambalance-app --skill demo-video-zzave
Please help me install this Agent Skill. Skill: demo-video Source: https://github.com/ZzAve/teambalance-app/tree/main/.agents/skills/demo-video Command: npx skills add https://github.com/ZzAve/teambalance-app --skill demo-video-zzave
This Skill helps produce high-quality, flicker-free demo videos or GIFs of running web apps by automating the process of driving the app with headless Playwright, capturing a live caption bar, recording, transcoding, and verifying frames.
Run the 'demo-video' skill and follow the on-screen prompts to select the application you want to record, set the recording parameters, and execute the recording process.
High-intent search queries and answers about installing and using this skill.
To record a web app demo without screen flickering, you can automate the process using headless Playwright to drive the app and FFmpeg to transcode the output. This approach eliminates common UI recording artifacts by capturing and verifying frames before delivering the final mp4 video.
Automating web app video production is best handled by driving the application with headless Playwright and recording the interactions. This method ensures accurate, repeatable interactions while transcoding the result with FFmpeg to create polished, flicker-free mp4 demos or GIFs for showcases.
Yes, you need Node.js, Playwright, and FFmpeg installed in your environment to record web app demos. This Skill relies on headless Playwright for accurate web interactions and FFmpeg for the transcoding process required to produce the final video output.
Yes, you can extract and inspect frames from a web app recording before exporting. The Skill provides a frame verification method that allows you to check for any visual issues or recording artifacts, ensuring the final mp4 product meets your quality standards.
UI recordings often flicker due to inconsistent frame rates during screen capture. Using FFmpeg to transcode the recorded video into an mp4 format stabilizes the output, and combined with Playwright's headless driving, it eliminates the typical flickering artifacts found in web app demos.
aktsmmAutomate browser interactions and UI testing via Playwright MCP.
tpottEmbed SRT subtitles into WEBM, MP4, or MKV videos using ffmpeg.
letta-aiAutomate end-to-end testing of local web applications with Playwright.
vm0-aiAutomate browser navigation, form filling, screenshots, and data extraction.
