skills.rest
digitalsamba
digitalsambaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

playwright-recording

Record browser interactions as video using Playwright scripts.

1.9k|321|Updated Dec 9, 2025
Search Tags:#automation#video#playwright#demo#recording#remotion#ui-walkthrough
One-click install
npx skills add https://github.com/digitalsamba/claude-code-video-toolkit --skill playwright-recording
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-recording
Source: https://github.com/digitalsamba/claude-code-video-toolkit/tree/main/.claude/skills/playwright-recording
Command: npx skills add https://github.com/digitalsamba/claude-code-video-toolkit --skill playwright-recording

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill enables recording browser interactions as video using Playwright, making it easy to produce demo videos and app walkthroughs for Remotion pipelines without manual, tedious screen recording.

Core Features & Use Cases

  • Recording browser interactions as video to capture demos, UI flows, and walkthroughs for Remotion-based projects.
  • Configurable viewport sizes and video output to align with Remotion requirements and reduce post-production effort.
  • Use Case: Generate repeatable product demos by scripting a browser flow and exporting a WebM suitable for inclusion in Remotion pipelines.

Quick Start

Use the playwright-recording skill to scaffold a simple demo recording with a script at scripts/record-demo.ts and run via npx ts-node scripts/record-demo.ts or npx tsx scripts/record-demo.ts.

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 product demos?▼

You can record browser interactions as video by scripting a browser flow with Playwright. This approach captures repeatable product demos and UI walkthroughs, outputting a portable video file.

Can I use Playwright to capture UI walkthroughs for Remotion videos?▼

Yes, Playwright can capture UI walkthroughs for Remotion videos. The workflow exports WebM recordings configured to align with Remotion pipeline requirements, reducing manual screen recording and post-production effort.

How do I start recording a browser demo with a Playwright script?▼

To start recording a browser demo, scaffold a script at scripts/record-demo.ts and run it using npx ts-node or npx tsx. This executes the Playwright workflow and produces a video recording.

Is viewport size configurable when recording browser demos with Playwright?▼

Viewport size is configurable when recording browser demos with Playwright. You can adjust the viewport and video output settings to align with your Remotion requirements and desired recording dimensions.

What is the best way to generate repeatable UI flows for video?▼

The best way to generate repeatable UI flows for video is to script the browser interactions with Playwright. This ensures consistent, high-quality recordings by automating the capture process instead of relying on manual screen recording.

Related Skills

Explore More Software Engineering Skills→
ovachieverovachiever
52

Playwright Browser Automation

Automate browser testing with Playwright across multiple viewports and UX validations.

Community
Intermediate
rbrown101010rbrown101010

create-remotion-video

Render React components into MP4 or WebM videos using Remotion.

Community
Advanced
MarbleSodasMarbleSodas

hyperframes

Render HTML compositions with GSAP timelines into MP4/WebM videos via FFmpeg.

Community
Advanced
exiaoexiao
37

demo-video

Record browser interactions and encode frames into MP4, GIF, or WebM videos.

Community
Intermediate