Official agent skill

Screen Recording

by github in github/awesome-copilot

Create annotated animated GIF demos and screen recordings for pull requests and documentation.

OfficialMITAuto-check passedDevelopment

Install Screen Recording

skills CLI
$ npx skills add github/awesome-copilot --skill screen-recording -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install github/awesome-copilot screen-recording --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/github/awesome-copilot.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/screen-recording .claude/skills/screen-recording && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
screen-recording
GitHub stars
40k
Token cost
~2k tokens
SKILL.md length
477 words
Files
1
Skills in repo
417
Repo updated
First seen
Licence
MIT

At a glance

Create annotated animated GIF demos and screen recordings for pull requests and documentation.

  • Works in 5 steps: Capture frames → Assemble GIF with imageio → Variable frame timing → …
  • Tasks that involve Social media graphics
  • SKILL.md covers When to Use This Skill, Prerequisites, Core Workflow and Build as a Script, plus 6 more sections
  • Calls pip and playwright

What it does

Screen Recording is an agent skill from github/awesome-copilot, published by the product's own GitHub organization. Create annotated animated GIF demos and screen recordings for pull requests and documentation. Covers frame capture, timing, imageio-based GIF creation, and per-frame annotation workflows.

Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Social media graphics and Pull requests. It works with GitHub. The repository describes itself as: Community-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot. The licence is MIT.

When your agent uses it

  • Tasks that involve Social media graphics
  • Tasks that involve Pull requests

Example prompts

  • “/screen-recording”

Requirements

  • Python 3

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Capture frames
  2. Assemble GIF with imageio
  3. Variable frame timing
  4. Annotate frames
  5. Fade-in annotations

What it can do on your machine

Read from SKILL.md and the folder at commit 727ff2e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pip
    • playwright

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pip, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Screen Recording loads about 2k tokens when it runs. Until then it costs about 51 tokens; SKILL.md has 477 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~51
When it runs · the whole SKILL.md, loaded when a task matches
~2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from github/awesome-copilot at commit 727ff2e, republished under its MIT licence (© github). 477 words, ~2,003 tokens.

Download SKILL.mdSave it as .claude/skills/screen-recording/SKILL.md (or your agent's skills folder).
name
screen-recording
description
Create annotated animated GIF demos and screen recordings for pull requests and documentation. Covers frame capture, timing, imageio-based GIF creation, and per-frame annotation workflows.

Screen Recording

Create animated GIF demos that show a feature or workflow in action — with annotations, variable timing, and proper pacing. Useful for PR descriptions, documentation, and release notes.

When to Use This Skill

Use this skill when you need to:

  • Record a multi-step UI interaction as an animated GIF
  • Create a demo showing before/after behavior
  • Build annotated walkthroughs for documentation or release notes
  • Show a bug reproduction or fix in action

Prerequisites

bash
pip install playwright Pillow imageio numpy scipy mss -q
playwright install chromium

Core Workflow

1. Capture frames

Use Playwright to step through the interaction and capture each frame:

python
from playwright.async_api import async_playwright

async def record_frames(url, steps, width=1400, height=900):
    """
    steps: list of dicts with 'action' (async callable taking page)
           and 'name' (frame filename)
    """
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page(viewport={"width": width, "height": height})
        await page.goto(url, wait_until="networkidle")

        for step in steps:
            if step.get("action"):
                await step["action"](page)
                await page.wait_for_timeout(step.get("wait", 500))
            await page.screenshot(path=step["name"])

        await browser.close()
2. Assemble GIF with imageio

Use imageio, not PIL, for GIF writing — PIL's GIF encoder merges visually similar frames, which kills animations.

python
import imageio.v3 as iio
from PIL import Image
import numpy as np

frames = []
durations = []

for frame_path, duration_ms in frame_list:
    img = Image.open(frame_path)
    frames.append(np.array(img))
    durations.append(duration_ms)

iio.imwrite("demo.gif", frames, duration=durations, loop=0)
3. Variable frame timing

Uniform timing makes everything feel either too fast or too slow. Use variable durations:

PhaseDurationWhy
Fast action (typing, clicking)100msFeels natural, keeps energy
Pause after action600-800msLet the viewer process what happened
Hero/final message500ms+Main takeaway needs time to land
4. Annotate frames

Apply annotations to specific frames using the image-annotations skill:

python
from PIL import Image, ImageDraw, ImageFont

def annotate_frame(frame_path, annotations, out_path):
    img = Image.open(frame_path)
    draw = ImageDraw.Draw(img)

    for ann in annotations:
        # Apply annotation (rect, arrow, label, etc.)
        pass

    img.save(out_path)
5. Fade-in annotations

For smooth annotation appearance:

python
def apply_fade(base_frame, annotation_layer, alpha):
    """Blend annotation onto frame at given alpha (0.0 to 1.0)"""
    blended = Image.blend(
        base_frame.convert("RGBA"),
        annotation_layer.convert("RGBA"),
        alpha
    )
    return blended.convert("RGB")

# 2-frame pop-in at 10fps: 50% then 100%
faded_frames = [
    apply_fade(base, annotations, 0.5),  # frame 1: half opacity
    apply_fade(base, annotations, 1.0),  # frame 2: full opacity
]

At 10fps, use 2 fade frames (0.2s total). At 30fps, use 3-4 frames. Easing curves look bad at low FPS — simple pop-in is snappier and more readable.

Build as a Script

The annotation logic gets complex for anything beyond trivial demos. Write a dedicated script (e.g., annotate_gif.py) with functions instead of inline code. You'll iterate on timing and placement.

Testing Animations

Always test in isolation first — don't rebuild the full demo to test a fade tweak:

python
# Small test GIF: 10 bare frames → fade frames → 15 hold frames
# Add a frame counter overlay for debugging:
draw.text((10, height - 30), f"F{i}/{total} a={alpha:.0%} FADE",
          fill="white", font=small_font)

Desktop Screen Recording (mss)

For recording desktop apps, terminals, or anything outside a browser. Uses mss for fast screen capture.

python
import mss
from PIL import Image
import time

def record_gif(output_path, region=None, duration=5, fps=8):
    """Record screen region to GIF. region = {left, top, width, height} or None for full screen."""
    with mss.mss() as sct:
        if region is None:
            region = sct.monitors[1]  # primary monitor

        frames = []
        t_end = time.time() + duration
        while time.time() < t_end:
            t0 = time.time()
            shot = sct.grab(region)
            frames.append(Image.frombytes('RGB', shot.size, shot.rgb))
            time.sleep(max(0, 1 / fps - (time.time() - t0)))

    frames[0].save(output_path, save_all=True, append_images=frames[1:],
                   duration=int(1000 / fps), loop=0, optimize=True)
    return len(frames)

record_gif('demo.gif', region={'left': 0, 'top': 0, 'width': 800, 'height': 500}, duration=3)

Tested: 3s at 8fps → 24 frames, ~31KB. Keep fps ≤ 10 for reasonable file sizes.

Note: PIL.save(save_all=True) works for simple recordings but merges visually similar frames. For annotated GIFs with fade effects, use imageio.v3.imwrite instead.

Show full SKILL.md (168 more words)Show less
Combining with window capture
python
# Find window rect, then record it as a GIF
# Reuse find_window() from the ui-screenshots skill
import ctypes
from ctypes import c_int, Structure, byref, windll

class RECT(Structure):
    _fields_ = [('left', c_int), ('top', c_int), ('right', c_int), ('bottom', c_int)]

hwnd = find_window('My App')[0][0]
rect = RECT()
windll.user32.GetWindowRect(hwnd, byref(rect))
region = {'left': rect.left, 'top': rect.top,
          'width': rect.right - rect.left, 'height': rect.bottom - rect.top}
record_gif('app-demo.gif', region=region, duration=5, fps=8)

Diff-Based Cluster Detection

Programmatically find changed regions between frames to decide what to annotate:

python
import numpy as np
from scipy import ndimage

def find_changed_clusters(frame_a, frame_b, threshold=30, min_pixels=300, dilate=5):
    """Find bounding boxes of changed regions between two frames."""
    diff = np.abs(frame_b.astype(float) - frame_a.astype(float)).max(axis=2)
    mask = diff > threshold
    dilated = ndimage.binary_dilation(mask, iterations=dilate)
    labeled, n = ndimage.label(dilated)
    clusters = []
    for i in range(1, n + 1):
        ys, xs = np.where(labeled == i)
        if len(ys) < min_pixels:
            continue
        clusters.append((xs.min(), ys.min(), xs.max(), ys.max(), len(ys)))
    return sorted(clusters, key=lambda c: -c[4])  # largest first

Format Compatibility

FormatVS Code PreviewGitHubBrowser
GIF✅ Animates✅✅
WebP⚠️ Static only✅✅
MP4❌ Broken⚠️✅

GIF is the only universally supported animated format across VS Code preview, GitHub markdown, and browsers.

Guidelines

  1. Type → pause → annotate — during fast action, show NO annotation. Pause first, then annotate
  2. Hero message gets the biggest font — 64pt+ for the main takeaway, 38pt for details
  3. GIF palette does NOT kill gradients — 20 distinct alpha steps survive 256-color palette
  4. 10fps minimum for typing/interaction — lower looks stuttery
  5. Build iteratively — get the frame sequence right first, add annotations second, tune timing last

Limitations

  • GIF is limited to 256 colors per frame — fine for UI screenshots, may show banding on photographic content
  • Large GIFs (50+ frames at high resolution) can be several MB — consider cropping to the relevant area
  • No audio support in GIF — use MP4 for narrated demos (but lose VS Code preview support)

© github, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/screen-recording of github/awesome-copilot.

Open the folder on GitHubat commit 727ff2e

Compare with similar skills

Screen Recording next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Screen Recording compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Screen Recording this skillgithub/awesome-copilot40k—~2kAutomated safety check: PassMIT
Beautify GitHub Readmeoil-oil/beautify-github-readme1.8k—~4.1kAutomated safety check: PassMIT
Beautify GitHub ReadmeZergie/YAMMU1061 repos~3.2kAutomated safety check: PassGPL-3.0
PR Babysitteropeninterpreter/openinterpreter69k3 repos~4.2kAutomated safety check: PassApache-2.0
Check PRonyx-dot-app/onyx32k2 repos~2.3kAutomated safety check: PassMIT
Contributor-First PR MergeHKUDS/OpenHarness16k1 repos~847Automated safety check: PassMIT

Similar skills

  • Beautify GitHub Readme

    oil-oil/beautify-github-readme

    Redesign GitHub README homepages or create project-native pure SVG, hybrid SVG-composed PNG/WebP, and opt-in animated GIF assets.

    1.8k GitHub stars~4.1k tokensUpdated 3 days ago
    DevelopmentAuto-check passed
  • Redesign GitHub README homepages or create standalone GitHub-safe SVG and animated GIF assets around a repository's real theme.

    106 GitHub starsUsed in 1 repo~3.2k tokens
    DevelopmentAuto-check passed
  • PR Babysitter

    openinterpreter/openinterpreter

    Watches an open GitHub pull request until it merges, handling review comments, diagnosing CI failures and retrying flaky checks along the way.

    69k GitHub starsUsed in 3 repos~4.2k tokens
    DevelopmentAuto-check passed
  • Check PR

    onyx-dot-app/onyx

    Checks a GitHub, GitLab, or Perforce (p4) pull request (or merge request, or shelved changelist) for unresolved review comments, failing status checks, and incomplete PR descriptions.

    32k GitHub starsUsed in 2 repos~2.3k tokens
    DevelopmentAuto-check passed
  • Merges external GitHub pull requests while keeping the original author credited, and fixes conflicts after the merge instead of rewriting the contribution.

    16k GitHub starsUsed in 1 repo~847 tokens
    DevelopmentAuto-check passed
  • Opens a GitHub pull request from your current branch with the gh CLI, after reviewing the commits and diff and gathering the details the PR needs.

    70k GitHub starsUsed in 1 repo~1.6k tokens
    DevelopmentAuto-check passed

More from github/awesome-copilot

All 417 skills in this repo
  • Acquire Codebase Knowledge

    github/awesome-copilot

    Official

    Maps an unfamiliar codebase into seven evidence-backed documents in docs/codebase/, using a scan script and templates, for onboarding or architecture write-ups.

    40k GitHub starsUsed in 1 repo~2.3k tokens
    Auto-check passed
  • Azure Architecture Autopilot

    github/awesome-copilot

    Official

    Designs Azure infrastructure from a natural-language description, or diagrams an existing resource group, then refines the design through conversation and deploys it with Bicep.

    40k GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed
  • Draw.io Diagram Generator

    github/awesome-copilot

    Official

    Generates, edits and validates draw.io files with correct mxGraph XML, covering flowcharts, architecture, sequence, ER and UML class diagrams.

    40k GitHub starsUsed in 1 repo~4.9k tokens
    Auto-check passed
  • Credit Risk Data Cleaning

    github/awesome-copilot

    Official

    Cleans raw credit data and screens variables before loan modeling, dropping unstable, noisy or redundant features and writing an Excel report of every step.

    40k GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed
  • Daily Focus Board

    github/awesome-copilot

    Official

    Builds a warm, browser-based daily focus board the user updates by talking to their agent, with Eisenhower priorities, a brain-dump box and kind not-today carryover.

    40k GitHub stars~3k tokensUpdated today
    Auto-check passed
  • Python Pypi Package Builder

    github/awesome-copilot

    Official

    End-to-end skill for building, testing, linting, versioning, and publishing a production-grade Python library to PyPI.

    40k GitHub starsUsed in 1 repo~4.6k tokens
    Auto-check passed

Works with

Questions about Screen Recording

What does Screen Recording do?

Create annotated animated GIF demos and screen recordings for pull requests and documentation. Screen Recording is an agent skill from github/awesome-copilot, published by the product's own GitHub organization. Create annotated animated GIF demos and screen recordings for pull requests and documentation.

When should I use Screen Recording?

Screen Recording fits situations like: tasks that involve Social media graphics; tasks that involve Pull requests.

How do I install Screen Recording in Claude Code?

Run `npx skills add github/awesome-copilot --skill screen-recording -a claude-code`. Or copy the skill folder (skills/screen-recording in github/awesome-copilot) into .claude/skills/screen-recording in your project. Claude Code loads it when a task matches its description.

How do I install Screen Recording in Codex?

Run `npx skills add github/awesome-copilot --skill screen-recording -a codex`. Or copy the skill folder (skills/screen-recording in github/awesome-copilot) into .agents/skills/screen-recording in your project. Codex loads it when a task matches its description.

Can I use Screen Recording in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add github/awesome-copilot --skill screen-recording -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/screen-recording, .gemini/skills/screen-recording, .github/skills/screen-recording and .opencode/skills/screen-recording in your project.

What does Screen Recording need to run?

Going by SKILL.md and its folder, Screen Recording needs the command-line tools its instructions call (pip and playwright). Our summary lists: Python 3.

Does Screen Recording access the network?

SKILL.md contains no URLs. Its commands use pip, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Screen Recording safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Screen Recording use?

Screen Recording is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Screen Recording use?

About 2k tokens (SKILL.md is roughly 8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Screen Recording?

Skills that share tags, products or a category with Screen Recording: Beautify GitHub Readme (oil-oil/beautify-github-readme, 1.8k stars), Beautify GitHub Readme (Zergie/YAMMU, 106 stars), PR Babysitter (openinterpreter/openinterpreter, 69k stars) and Check PR (onyx-dot-app/onyx, 32k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Screen Recording?

github (a GitHub organization, an official publisher) maintains it in github/awesome-copilot, which has 39,748 GitHub stars. The repository holds 417 skills in this directory. The repository was last updated on October 7, 2026.

Source: github/awesome-copilot on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.