playwright-recording

Record browser interaction footage with Playwright for Remotion video compositions.

602|12|Updated Apr 22, 2026
One-click install
npx skills add https://github.com/video-production-buddy/video-production-buddy --skill playwright-recording-video-production-buddy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-recording
Source: https://github.com/video-production-buddy/video-production-buddy/tree/main/.agents/local/skills/playwright-recording
Command: npx skills add https://github.com/video-production-buddy/video-production-buddy --skill playwright-recording-video-production-buddy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright.

What problem does it solve?

This Skill eliminates the hassle of manually screen recording browser interactions for demo videos, app walkthroughs, and Remotion video compositions, which often results in inconsistent footage, poor timing control, and extra post-processing work.

Core Features & Use Cases

  • Automated Browser Interaction Recording: Capture full user flows including navigation, form submissions, scrolling, and login processes with precise timing control.
  • Customizable Video Output: Adjust viewport size, playback speed, and add visual cursor highlights or click effects to make demo footage clear and professional.
  • Use Case: For example, if you need to create a product demo showing a user signing up for your SaaS app, this Skill can automatically record the entire sign-up flow with smooth cursor movements, ready to import into Remotion for final editing.

Quick Start

Use the playwright-recording skill to record a complete walkthrough of your web app's user onboarding flow and save the output video directly to your project's demos folder for use in Remotion compositions.

Frequently Asked Questions about playwright-recording

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

FAQPage Schema
How do I record a web app walkthrough for a Remotion video composition?

To record browser interactions for a demo video, you run configurable Playwright scripts that automate navigation, scrolling, and form submissions, outputting consistent footage with precise timing control.

Can I use Playwright to automate browser screen capture for product demos?

Yes, Playwright can automate browser screen capture for product demos by applying custom viewport sizes, cursor visualizations, and cookie banner dismissal to produce professional, consistent video footage.

How do I add cursor visualization and click effects to a UI flow recording?

You can add cursor visualization and click effects to a UI flow recording by configuring the Playwright-based recording scripts to highlight cursor movements and clicks during the browser capture process.

Does this browser recording approach support custom viewport sizes and playback speed?

Yes, the browser recording approach supports custom viewport sizes and playback speed adjustments, allowing you to customize the video output dimensions and pacing for your demo footage.

What is the best way to capture consistent UI flow footage without manual screen recording?

The best way to capture consistent UI flow footage without manual screen recording is using automated Playwright scripts that handle user flows and dismiss cookie banners, ensuring uniform video output.