What happens if a test step fails during recording?

The skill includes error handling that identifies failed specs and provides resolutions, such as checking file paths or verifying that the Playwright config has video recording enabled.

Does this skill require Playwright to be installed locally?

Yes, the skill validates your Playwright installation and will guide you through running 'npm install' and 'npx playwright install' if dependencies are missing.

Can I customize the output GIF settings?

Yes, you can adjust parameters like FPS and width during the conversion step to ensure the final GIF is optimized for your specific documentation platform.

How does this differ from Claude's native browser integration?

While native integration is ideal for interactive debugging, this skill uses Playwright specs for automated, repeatable recordings that are better suited for formal documentation and tutorials.

Browser Recording & Tutorial Generator

Name: Browser Recording & Tutorial Generator
Author: athola

byathola

•

123

•

Learning & Documentation

Automates high-quality browser session recordings and GIF conversions for web tutorials and documentation.

This skill streamlines the creation of visual documentation by automating browser interactions through Playwright and converting the captured sessions into optimized GIFs. It handles environment validation, spec execution, and post-processing, making it ideal for developers and technical writers who need to produce consistent, repeatable web UI demonstrations or visual bug reports. While Claude Code offers native browser control for interactive tasks, this skill provides a robust framework for automated, cross-browser, and CI/CD-compatible recording workflows.

Key Features

01Automated Playwright session recording to WebM format

02Support for cross-browser recording (Chromium, Firefox, WebKit)

03123 GitHub stars

04Configurable 'slow-mo' execution for clear visual demonstrations

05Pre-execution environment and dependency validation

06High-quality GIF conversion with optimized FPS and scaling

Use Cases

01Automating the creation of step-by-step web UI tutorials

02Capturing visual evidence for bug reports in automated testing pipelines

03Generating animated GIFs for GitHub READMEs and technical documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add athola/claude-night-market browser-recording

For use in Claude.ai and ChatGPT

Download Skill