| 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
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:
- Validate Playwright installation
- Execute a Playwright spec with video recording enabled
- Retrieve the recorded video (WebM format)
- 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.
