skills.rest
MatrixReligio
MatrixReligioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

recording

Record web app demos with Playwright and output video plus timeline JSON.

39|7|Updated Jan 23, 2026
Search Tags:#timeline#browser automation#Playwright#recording#video generation#screen recording
One-click install
npx skills add https://github.com/MatrixReligio/ProductVideoCreator --skill recording
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: recording
Source: https://github.com/MatrixReligio/ProductVideoCreator/tree/main/.claude/skills/recording
Command: npx skills add https://github.com/MatrixReligio/ProductVideoCreator --skill recording

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates browser demos by recording a web application using Playwright, producing a single continuous screen recording with a precise action timeline to simplify demos, QA, and documentation.

Core Features & Use Cases

  • Continuous recording: captures a full demo in one go without segmentation.
  • Timeline-based output: records timestamps for each user action and event to facilitate analysis and synchronization with subtitles or notes.
  • Realistic data & pacing: encourages the use of meaningful data and realistic delays to mirror real user interactions.
  • Demos & QA workflows: useful for product demos, onboarding, and automated testing videos.

Quick Start

Provide the target URL to record and run the Playwright-based script to produce a timeline.json alongside the video.

Frequently Asked Questions about recording

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

FAQPage Schema
How do I record browser demos with Playwright?▼

Record browser demos by running a Playwright-based script that captures continuous screen video and generates a timeline JSON file with timestamped user actions. The script outputs both the video and timeline to a configured directory, suitable for product demos, onboarding, and QA workflows.

What output does Playwright browser recording produce?▼

Playwright recording produces two files: a continuous screen video capture and a timeline.json containing precise timestamps for each user action and event, enabling synchronization with subtitles, notes, or further analysis.

Can I record web app demos at specific URLs with Playwright?▼

Yes, Playwright recording automates capturing web applications at any local or remote URL, producing realistic demos with meaningful data and natural interaction delays that mirror genuine user behavior.

Do I need Node.js to use browser recording with Playwright?▼

Yes, Node.js with Playwright installed is required to run the recording automation. This environment captures the web app and generates both video and timeline outputs.

What are timeline recordings used for in QA and product documentation?▼

Timeline-based recordings capture timestamped action sequences during browser automation, enabling precise correlation between user interactions and video frames for QA validation, automated testing documentation, and reproducible demo workflows.

Related Skills

Explore More Software Engineering Skills→
hiroto0701hiroto0701

webapp-testing

Automate local web application testing with Playwright and manage development servers.

Community
Intermediate
MatrixReligioMatrixReligio
39

subtitles

Generate synchronized bilingual subtitles from voiceover_metadata.json for Remotion video projects.

Official
Intermediate
MartinPirateMartinPirate

playwright-recording

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

Community
Intermediate
gerald-icagerald-ica

openscreen

Record screens and edit videos with timeline-based tools for WebM export.

Community
Intermediate