skills.rest
Yasuui
YasuuiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/Yasuui/hermes-community-skills --skill playwright-screen-recorder
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
henkisdabrohenkisdabro
77

webapp-testing

Automate local web app testing with Playwright and headless Chromium.

Community
Intermediate
exiaoexiao
37

demo-video

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

Community
Intermediate
KhaledaunKhaledaun

playwright-skill

Automate browser testing and form filling with Playwright and Node.js.

Community
Intermediate
tanujsutariatanujsutaria
1

session-checkpoint

Validate iOS build status, inspect Git changes, and assess session goals.

Community
Intermediate