playwright-recording

Name: playwright-recording
Availability: InStock
Author: shige1014-dev

Record browser interactions as video files using Playwright.

1|Updated Apr 11, 2026

Search Tags:#video #playwright #demo #recording #remotion #ui-automation

Ready to run

npx skills add https://github.com/shige1014-dev/backup-OpenMontage --skill playwright-recording-shige1014-dev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: playwright-recording
Source: https://github.com/shige1014-dev/backup-OpenMontage/tree/main/.agents/skills/playwright-recording
Command: npx skills add https://github.com/shige1014-dev/backup-OpenMontage --skill playwright-recording-shige1014-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, tsx, ts-node.

What problem does it solve?

Recording browser interactions as video for demos, tutorials, and UI walkthroughs can be time-consuming and error-prone; this Skill provides a repeatable Playwright-based approach to record sessions as video assets.

Core Features & Use Cases

Recording demos and UI walkthroughs as video for Remotion-based productions.
Configurable viewport sizes and output settings to fit multiple video formats.
Use Case: generate consistent, scriptable demos of a web app for onboarding, marketing, or QA storytelling.

Quick Start

Create a short demo by running a Playwright script that records a browser session to a video file.

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 demo?▼

You can record browser interactions as video by running a Playwright script that captures a browser session to a video file. This approach provides a repeatable way to generate demo footage and UI walkthroughs for web applications.

Can I use Playwright to generate Remotion-ready video assets?▼

Yes, Playwright can generate Remotion-ready video assets by recording scripted browser sessions. You can configure viewport sizes and output directories to fit the specific video formats required by your Remotion productions.

How do I automate UI walkthroughs for onboarding tutorials?▼

Automating UI walkthroughs for onboarding involves executing scriptable Playwright actions that record browser interactions as video. This creates consistent, repeatable demonstrations of your web application without manual screen recording.

Do I need ts-node and tsx to script browser session recordings?▼

Yes, ts-node and tsx are required dependencies to run the TypeScript scripts that control Playwright. These environments allow you to execute the scripted actions demonstrated in the examples to record your browser sessions.

What is the best way to create consistent QA storytelling videos from web apps?▼

The best way to create QA storytelling videos is using a Playwright-based approach to record browser interactions. It allows configurable viewport sizes and scripted actions, ensuring consistent, error-free video assets for web applications.

What are the limitations of using Playwright for web app recordings?▼

Playwright recordings are limited to scripted browser interactions and require configuring viewport sizes and output directories beforehand. It is designed for generating demo footage and UI walkthroughs, not for capturing arbitrary manual browsing sessions.