browser-recording

name	browser-recording
description	Records browser sessions via Playwright and converts video to GIF. Use when creating web UI tutorials or demos showing browser interactions.
alwaysApply	false
category	media-generation
tags	["playwright","browser","recording","video","web","tutorial"]
tools	[]
complexity	medium
model_hint	standard
estimated_tokens	500
progressive_loading	true
modules	["modules/spec-execution.md","modules/video-capture.md"]
dependencies	["scry:gif-generation"]

Table of Contents

• Overview
• Required TodoWrite Items
• Process
• Step 1: Validate Playwright Installation
• Step 2: Check Spec File
• Step 3: Execute Recording
• Step 4: Convert to GIF
• Example Playwright Spec
• Playwright Configuration
• Exit Criteria
• Error Handling
• Output Locations
• See Also

Browser Recording Skill

Record browser sessions using Playwright to create video captures of web UI interactions for tutorials and documentation.

When To Use

• Recording browser sessions with Playwright
• Creating web application demo recordings

When NOT To Use

• Terminal-only workflows - use scry:vhs-recording instead
• Static screenshots - use standard screenshot tools

Overview

This skill uses Playwright's built-in video recording to capture browser interactions. The workflow:

1. Validate Playwright installation
2. Execute a Playwright spec with video recording enabled
3. Retrieve the recorded video (WebM format)
4. Convert to GIF using the gif-generation skill

💡 Note: Claude Code 2.0.72+ includes native Chrome integration for interactive browser control. This skill (Playwright) is designed for automated recording workflows, CI/CD, and cross-browser support. For interactive debugging and live testing, consider using native Chrome integration. Both approaches complement each other - develop interactively with Chrome, then automate with Playwright specs.

Required TodoWrite Items

When invoking this skill, create todos for:

- [ ] Validate Playwright is installed and configured
- [ ] Check spec file exists at specified path
- [ ] Execute Playwright spec with video recording
- [ ] Locate and verify video output
- [ ] Convert video to GIF using gif-generation skill

Verification: Run the command with --help flag to verify availability.