skills.rest
AskTinNguyen
AskTinNguyenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

playwright-recording

Automate browser-video recording of UI interactions with Playwright.

1|Updated Jan 26, 2026
Search Tags:#automation#playwright#remotion#screen-recording#video-recording#ui-demo#web-recording
One-click install
npx skills add https://github.com/AskTinNguyen/vesper-team-skills --skill playwright-recording-asktinnguyen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-recording
Source: https://github.com/AskTinNguyen/vesper-team-skills/tree/main/playwright-recording
Command: npx skills add https://github.com/AskTinNguyen/vesper-team-skills --skill playwright-recording-asktinnguyen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Recording high-quality UI demos can be time-consuming and inconsistent across runs, so this skill provides a ready-made Playwright-based workflow to capture browser interactions as video for Remotion-ready outputs.

Core Features & Use Cases

  • Record demo sessions with Playwright’s built-in video capture
  • Configure viewport, output directory, and video size for Remotion-ready assets
  • Provide templates for common demo workflows such as onboarding, feature tours, and form flows

Quick Start

Install Playwright in your project and run the provided recording script to generate a demo video.

Frequently Asked Questions about playwright-recording

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

FAQPage Schema
How do I automate browser video recording for UI demos?▼

To automate browser video recording for UI demos, use Playwright to initialize a browser context with recordVideo options. This workflow provides configurable viewport and video settings to generate repeatable recordings.

What is the best way to record web interactions for Remotion video production?▼

The best way to record web interactions for Remotion is using a Playwright script that captures browser sessions. This generates Remotion-ready assets by configuring the output directory and video size.

Can I configure viewport size and output directory when recording UI walkthroughs?▼

Yes, you can configure viewport size and output directory when recording UI walkthroughs. The Playwright browser context allows you to set specific recordVideo options to ensure the captured footage meets your requirements.

Do I need Node.js and Playwright to capture product walkthrough videos?▼

Yes, you need Playwright and Node.js to capture product walkthrough videos. The script initializes a browser context with recordVideo options and an output directory to store the captured footage.

Why are my Playwright video recordings inconsistent across different runs?▼

Playwright video recordings may be inconsistent across different runs if viewport and video settings are not explicitly configured. Applying a ready-made workflow ensures repeatable recordings by standardizing the browser context configuration.

Related Skills

Explore More Design & Creative Skills→
digitalsambadigitalsamba
1.9k

playwright-recording

Record browser interactions as video using Playwright scripts.

Official
Intermediate
peterbamuhigirepeterbamuhigire
23

modular-saas-architecture

Plan modular SaaS architectures with tenant-scoped modules and feature flags.

Community
Advanced
shige1014-devshige1014-dev

playwright-recording

Record browser interactions as video files using Playwright.

Community
Intermediate
Generous-CorpGenerous-Corp
13

video-proof

Record desktop interactions and compose validation videos with Remotion.

Official
Advanced