playwright-recording

Record browser interactions as WebM video using Playwright.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Playwright recording skill enables capturing real browser interactions as video for demos, app walkthroughs, and UI tutorials, replacing separate screen-capture steps.

Core Features & Use Cases

  • Record browser actions as video output suitable for Remotion-based projects, demos, and product tours.
  • Configure viewport, video size, and output directory to produce production-ready footage.
  • Use cases include demo reels for presentations, onboarding tutorials, and UI walkthroughs of web apps.

Quick Start

Install Playwright in your project and run a sample script to start recording a browser session.

Frequently Asked Questions about playwright-recording

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

FAQPage Schema
How do I record browser interactions as video for a UI walkthrough?▼

To automate browser session recording for product tours, configure a Playwright browser context with recordVideo in your Node.js project. This captures real browser interactions directly as WebM video files, replacing separate screen-capture steps.

Can I use Playwright to capture demo footage for Remotion-based videos?▼

Yes, you can use Playwright to capture demo footage for Remotion-based videos. The skill records browser actions as video output that is suitable for Remotion projects, allowing you to produce production-ready footage for video composition.

What do I need to start recording a browser session with Playwright?▼

To start recording a browser session, you need a Node.js project with Playwright installed. You then run a script that configures a browser context with recordVideo to output WebM files.

How do I configure viewport and video size when recording a web app demo?▼

To configure viewport and video size when recording a web app demo, you adjust the settings within your Playwright script. This configuration allows you to produce production-ready footage tailored to your specific output requirements.

What's the best way to automate onboarding tutorial capture for web apps?▼

The best way to automate onboarding tutorial capture is using Playwright to record browser interactions as video. This approach replaces manual screen-capture steps by directly outputting WebM files of real browser actions.