browser-recording

Solid

Record browser sessions using Playwright for web UI tutorials, converts

Web & Frontend 294 stars 26 forks Updated today MIT

Install

Quality Score: 95/100

Stars 20%

82

Recency 20%

100

Frontmatter 20%

70

Documentation 15%

100

Issue Health 10%

50

License 10%

100

Description 5%

100

Skill Content

## Table of Contents - [Overview](#overview) - [Required TodoWrite Items](#required-todowrite-items) - [Process](#process) - [Step 1: Validate Playwright Installation](#step-1:-validate-playwright-installation) - [Step 2: Check Spec File](#step-2:-check-spec-file) - [Step 3: Execute Recording](#step-3:-execute-recording) - [Step 4: Convert to GIF](#step-4:-convert-to-gif) - [Example Playwright Spec](#example-playwright-spec) - [Playwright Configuration](#playwright-configuration) - [Exit Criteria](#exit-criteria) - [Error Handling](#error-handling) - [Output Locations](#output-locations) - [See Also](#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, an...

Details

Author: athola
Repository: athola/claude-night-market
Created: 6 months ago
Last Updated: today
Language: Python
License: MIT

Integrates with

Playwright · Testing

Similar Skills

Semantically similar based on skill content — not just same category

Code & Development Solid

playwright-screen-recording

Record browser test videos with Playwright for PR review and bug fix verification

1,021 Updated today

Testing & QA Solid

playwright

Browser automation and E2E testing with Playwright. Auto-detects dev servers, writes clean test scripts. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use for cross-browser testing, visual regression, API testing, component testing in TypeScript/JavaScript and Python projects.

160 Updated 2 weeks ago

Web & Frontend Listed

screen-recorder

Records short videos of specific page sections using Playwright's `recordVideo` API, plays scripted interactions (hover, click, focus, scroll, keypress), crops the output to a target element via `ffmpeg`, and saves a `.webm` (or `.mp4` / `.gif`) artifact to `.agent/recordings/`. Use when a still screenshot cannot prove the change — verifying a View Transition, a Motion `layout` morph, a hover stagger, a scroll-driven timeline, an `@starting-style` entry, or any multi-frame interaction. Called by the `animations` skill to validate a generated animation, by the `ux` skill to capture an interaction the reviewer cannot read from code, and by the `reviewer` agent to attach evidence to PR comments on motion-heavy diffs. Triggers on "record this interaction", "capture this animation", "video of this section", "validate the transition visually", "screen recording", "/screen-recorder".

4 Updated yesterday

AI & Automation Solid

ui-demo

Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.

199,464 Updated today

Web & Frontend Listed

web-browser

Allows to interact with web pages by performing actions such as clicking buttons, filling out forms, and navigating links. It works by remote controlling Google Chrome or Chromium browsers using the Chrome DevTools Protocol (CDP). When Claude needs to browse the web, it can use this skill to do so.

335 Updated today