playwright-recording

Record browser interactions as videos using Playwright.

Updated May 23, 2026
One-click install
npx skills add https://github.com/xingBaGan/FANovelist --skill playwright-recording-xingbagan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-recording
Source: https://github.com/xingBaGan/FANovelist/tree/main/src/openharness/openmontage/.claude/skills/playwright-recording
Command: npx skills add https://github.com/xingBaGan/FANovelist --skill playwright-recording-xingbagan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, @playwright/test, puppeteer, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill allows you to capture browser interactions as videos, enabling the creation of demo videos, app walkthroughs, and UI flows for Remotion videos.

Core Features & Use Cases

  • Browser Interaction Recording: Capture actions like clicking, typing, and scrolling within a browser.
  • Video Output: Save recordings as videos that can be used for demos or tutorials.
  • Use Case: Use this Skill to create a step-by-step guide for a web application or to showcase a product's features.

Quick Start

Use the playwright-recording skill to record a demonstration of the 'https://example.com' website.

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 a video using Playwright?

You can record browser interactions as a video using Playwright by leveraging this Skill to capture clicking, typing, and scrolling actions, producing video output ideal for demos and UI flows.

Can I use Playwright to create demo videos for web applications?

Yes, you can use Playwright to create demo videos for web applications. This Skill captures browser interactions and saves them as videos, making it ideal for step-by-step guides and product feature showcases.

What dependencies do I need to capture UI flows as video with Playwright?

To capture UI flows as video with Playwright, you need the playwright, @playwright/test, and puppeteer libraries installed in your environment to enable the required browser automation and video recording capabilities.

What is the best way to automate video-based documentation for web app walkthroughs?

Automating video-based documentation for web app walkthroughs is best achieved by recording browser interactions with Playwright. This Skill captures UI flows directly, generating video output for tutorials and documentation.

Does Playwright video recording work for creating Remotion videos?

Yes, Playwright video recording works for creating Remotion videos. This Skill records browser interactions and outputs video files that can be directly used for Remotion video compositions and tutorials.