Agent skill · gsimone
contact-sheet
Turn a screen recording or any video into analyzable visual-change data — unique frames, per-frame difference timeline, and a tiled contact sheet. Use when asked to analyze a video for layout shifts, layout thrashing, flashes, reload behavior, animation timing, or "what visually happens when" in a recording.
What it needs
About 5k tokens when loaded.
What this skill does
Contact sheet — video visual-change harness One command turns a video into data an agent can actually read: Requires Node.js 18+ and ffmpeg/ffprobe on PATH. The script has no npm, Python, or ImageMagick dependencies. Default agent workflow Read static artifacts first; the HTML is optional: 1. Read report.md. Use its consecutive-state table to find suspicious timestamps, especially NO VISIBLE CHANGE, TINY CHANGE, unexpectedly small changes, or large bounding boxes. 2. Open diff-contact-sheet.png. It is a chronological overview of the highlighted third panel from every captured state transition. 3. Open a matching diffs/S###-to-S###...png for a full-size triptych: previous state current state highlighted diff. Headers include both state numbers and timestamps. Green means a pixel's largest RGB-channel delta exceeded --diff-pixel-threshold; the display mask grows one pixel around it for visibility. Tiny changes also get a yellow locating box. 4. Open the clean PNGs named in report.md only when the triptych needs closer visual confirmation. Use timeline.svg/diff.csv for exact timing. NO VISIBLE CHANGE is meaningful: the captured before/after images match at the configured pixel threshold even though a detected burst, keyboard action, history transition, or invisible DOM/editor state change may have occurred. TINY CHANGE means fewer than 0.05% of extracted pixels changed; inspect the green pixels/yellow box for caret movement, ZWSP rendering, one-pixel flicker, or small layout shifts. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills gsimone/contact-sheet