playwright-recording

Automate browser UI interaction recording with Playwright and export to MP4.

Updated Mar 9, 2026

Search Tags:#typescript #playwright #video production #screen capture #browser recording #demo automation

Ready to run

npx skills add https://github.com/MartinPirate/video-toolkit --skill playwright-recording-martinpirate

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: playwright-recording
Source: https://github.com/MartinPirate/video-toolkit/tree/main/.claude/skills/playwright-recording
Command: npx skills add https://github.com/MartinPirate/video-toolkit --skill playwright-recording-martinpirate

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the process of recording browser interactions, making it simple to create high-quality demo videos, screen captures, and UI interaction recordings for product demos and documentation.

Core Features & Use Cases

Automated Browser Recording: Capture full browser sessions with Playwright.
Scripted Demo Flows: Define precise navigation, clicks, typing, and scrolling actions.
Visual Enhancements: Add animated mouse cursors and browser chrome overlays.
Post-Processing: Convert recordings to MP4 and prepare them for video editing tools like Remotion.
Use Case: Generate a polished 30-second demo video of a new web application feature, complete with a professional browser frame and smooth cursor movements, ready for marketing materials.

Quick Start

Use the playwright-recording skill to record a demo of the website 'https://example.com' and save it to the 'recordings' directory.

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 recording for a web application demo using Playwright?▼

You can automate browser recording for a web application demo by scripting precise navigation, clicks, typing, and scrolling actions with Playwright to capture full browser sessions and generate screen recordings.

Can I add visual enhancements like a custom mouse cursor to Playwright screen captures?▼

Yes, you can add visual enhancements to Playwright screen captures by applying animated mouse cursors and browser chrome overlays during the recording process to create polished, high-quality demo videos.

How do I convert Playwright recordings to MP4 for video editing frameworks like Remotion?▼

You can convert Playwright recordings to MP4 for video editing frameworks like Remotion by using the post-processing features to prepare and integrate the captured browser sessions into your video editing workflow.

What is the best way to script UI interactions for a thirty-second product demo video?▼

The best way to script UI interactions for a product demo video is to define precise navigation and user input simulations that capture the web application feature flow, complete with visual enhancements for marketing materials.

Do I need TypeScript to record browser interactions and create demo videos?▼

TypeScript is used within the skill environment to automate the recording of browser interactions, meaning the scripts and references provided handle the setup and execution needed to create your demo videos.

Are there limitations when using Playwright to record browser sessions for documentation?▼

Playwright recording focuses on capturing scripted browser sessions and UI interactions; post-processing is required to convert these recordings to MP4 and prepare them for integration into video editing tools like Remotion.