skills.rest
vathymut
vathymutCOMMUNITY
Explore all skills by this author →
Website𝕏@vathymutGitHub

screen-recording

Automate annotated GIF and screen recording creation with Playwright, Pillow, imageio, and mss.

Updated Apr 19, 2026
Search Tags:#screen recording#bug reproduction#feature documentation#animated GIF#UI demonstration
One-click install
npx skills add https://github.com/vathymut/copilot-skills --skill screen-recording-vathymut
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: screen-recording
Source: https://github.com/vathymut/copilot-skills/tree/main/.github/skills/screen-recording
Command: npx skills add https://github.com/vathymut/copilot-skills --skill screen-recording-vathymut

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, Pillow, imageio, numpy, scipy, mss, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill solves the problem of creating detailed, annotated screen recordings and animated GIF demos, which are essential for pull requests, documentation, and release notes.

Core Features & Use Cases

  • Animated GIF Demos: Captures and animates user interactions for visual explanations.
  • Annotation: Applies text and other visual markers to highlight key points in the demo.
  • Variable Timing: Allows customization of frame durations to enhance clarity.
  • Use Case: When you need to show a user how to perform a specific task in an application or to demonstrate a feature's functionality.

Quick Start

Run the screen-recording skill to create an annotated GIF of the feature 'User Profile Settings'.

Frequently Asked Questions about screen-recording

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

FAQPage Schema
How do I create an annotated animated GIF for a pull request or documentation?▼

To create an annotated animated GIF for pull requests, you can automate browser interactions using Playwright and process the captured frames with Pillow and imageio to add text annotations and variable frame timing.

How do I record a browser UI interaction for bug reproduction?▼

Recording a browser UI interaction for bug reproduction involves automating the sequence with Playwright, capturing the screen output, and compiling the frames into a visual demonstration using image processing libraries.

Does this screen recording approach work with desktop applications or only browser environments?▼

This approach supports both browser and desktop environments: it uses Playwright for capturing browser interactions and the mss library for desktop screen recording to generate software demonstrations.

Can I customize the frame duration in animated GIFs to improve feature documentation clarity?▼

You can customize frame durations in animated GIFs by applying variable timing during the image processing phase, allowing you to slow down or pause specific frames to enhance feature documentation clarity.

What libraries are required to automate UI demonstration and screen recording?▼

Automating UI demonstrations and screen recordings requires Playwright for browser automation, mss for desktop capture, and Pillow, imageio, numpy, and scipy for image processing and GIF assembly.

What is the best way to highlight specific features in a software demonstration GIF?▼

The best way to highlight features in a software demonstration GIF is to apply visual annotations such as text and markers to the captured frames, emphasizing key points during the image processing stage.

Related Skills

Explore More Software Engineering Skills→
hafiznaveedchuhan-ctrlhafiznaveedchuhan-ctrl

browser-use

Automate browser navigation, form filling, and data extraction via Playwright MCP.

Community
Intermediate
usepowershellusepowershell
9

pr-screenshots

Capture Playwright screenshots and embed them into GitHub pull request descriptions.

Community
Intermediate
zcacereszcaceres
7

record-gif

Capture web page interactions with Playwright and encode them into GIFs using ffmpeg.

Community
Intermediate
DanielKerridgeDanielKerridge
56

record-screen

Record Chrome browser tabs to MP4 or WebM video via CLI.

Community
Advanced