Agent skill · creative production · github
screen-recording
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.
Why this skill is useful
Provides a detailed workflow for creating annotated GIFs, including specific commands and timing strategies that the AI wouldn't reliably generate on its own.
What it needs
Requires imageio, mss, numpy, pillow, playwright, scipy installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 37,534 stars on the source repository.
What this skill does
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 Core Workflow 1. Capture frames Use Playwright to step through the interaction and capture each frame: 2. Assemble GIF with imageio Use imageio, not PIL, for GIF writing — PIL's GIF encoder merges visually similar frames, which kills animations. 3. Variable frame timing Uniform timing makes everything feel either too fast or too slow. Use variable durations: Phase Duration Why ------- ---------- ----- Fast action (typing, clicking) 100ms Feels natural, keeps energy Pause after action 600-800ms Let the viewer process what happened Hero/final message 500ms+ Main takeaway needs time to land 4. Annotate frames Apply annotations to specific frames using the image-annotations skill: 5. Fade-in annotations For smooth annotation appearance: 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., annotategif.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: Desktop Screen Recording (mss) For recording desktop apps, terminals, or anything outside a browser. Uses mss for fast screen capture. Tested: 3s at 8fps → 24 frames, ~31KB. Keep fps ≤ 10 for reasonable file sizes. Note: PIL.save(saveall=True) works for simple recordings but merges visually similar frames. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills github/screen-recording