playwright-screen-recorder

Automates browser UX recording via Playwright Chromium and ffmpeg to MP4/GIF.

4|1|Updated May 15, 2026

Search Tags:#browser automation #playwright #ffmpeg #screencast #demo video #ux qa #gif mp4

Ready to run

npx skills add https://github.com/Yasuui/hermes-community-skills --skill playwright-screen-recorder

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: playwright-screen-recorder
Source: https://github.com/Yasuui/hermes-community-skills/tree/main/skills/community/playwright-screen-recorder
Command: npx skills add https://github.com/Yasuui/hermes-community-skills --skill playwright-screen-recorder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of creating repeatable browser UX recordings and demos without relying on vision models or manual screen capture for every walkthrough.

Core Features & Use Cases

Flow mode for QA coverage: Clicks through navigation, hovers key UI elements, and tests buttons/islands with smooth cursor pacing for ~1440p/1280p demos.
Cinema mode for presentation: Produces slower pans, hover pauses, and themed moments for polished cinematic product or release videos.
No-vision dependency recording: Uses Playwright/Chromium automation and ffmpeg conversion to generate MP4 and GIF assets for docs and social sharing.

Quick Start

Ask the skill to record your browser UX flow from a running local dev server by setting RECORD_URL and RECORD_OUTPUT, then executing Playwright tests in flow mode.

Frequently Asked Questions about playwright-screen-recorder

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

FAQPage Schema

How do I automate browser UX recording for QA demos without manual screen capture?▼

Automate browser UX recording by driving Chromium with Playwright to execute deterministic interaction flows, then converting the captured WebM output to MP4 or GIF using ffmpeg.

Can I create cinematic product walkthrough videos using Playwright?▼

Yes, you can create cinematic product walkthroughs using Playwright by applying a cinema mode that produces slower pans, hover pauses, and themed moments for polished UI showcases.

Do I need a vision model to generate demo videos from browser automation?▼

No, generating demo videos from browser automation does not require a vision model. The process relies entirely on Playwright/Chromium automation and ffmpeg conversion to generate visual assets.

What's the best way to convert Playwright WebM recordings to GIF or MP4?▼

The best way to convert Playwright WebM recordings to GIF or MP4 is by using ffmpeg, which processes the deterministic browser session captures into shareable formats for documentation and social media.

Does browser automation recording require Node.js and ffmpeg setup?▼

Yes, browser automation recording requires Node.js 18+ and ffmpeg. You also need Playwright with the Chromium browser to execute the interaction flows and capture the initial WebM video.