ui-recording-timeline

97 / 100 · Low risk

Fine to try.

By vvedantb/eva (GitHub) · design · 101 stars · scanned at commit 1bd8b90

Turn a screen recording of a UI (page load, navigation, redirect/auth flow, app startup) into an interactive paint timeline page. You get a full-window video, a timeline of each visual paint with timestamps and durations, and on-video flashes of what was painted (pink) versus what only moved (blue). Use when the user shares a screen recording (.mp4/.mov) and asks for a timeline of paints, frames, or visual changes, a filmstrip, load-performance breakdown, "what painted when", or how long each s…

Works with any agent that supports SKILL.md skills.

What this skill can do

Runs commands on your computer

This is disclosed by the author in the skill's SKILL.md or README.

Found in 9 places.

.agents/skills/ui-recording-timeline/SKILL.md, line 20T(){ uv run "/abs/path/to/ui-recording-timeline/scripts/timeline.py" "$@"; }
.agents/skills/ui-recording-timeline/SKILL.md, line 30T extract /path/to/recording.mp4 WD # copies video, writes meta.json (frame timestamps; VFR is fine)
.agents/skills/ui-recording-timeline/SKILL.md, line 41T sheet WD --frames 0,4,14,26,61 --name overview # labelled contact sheets -> WD/sheets/*.jpg

Show 6 more

.agents/skills/ui-recording-timeline/SKILL.md, line 90T regions WD # move-aware diff for every paint -> regions.json
.agents/skills/ui-recording-timeline/SKILL.md, line 108T build WD # paint thumbnails + WD/index.html
.agents/skills/ui-recording-timeline/scripts/timeline.py, line 36return subprocess.run(cmd, check=True, capture_output=True, **kw)
.agents/skills/ui-recording-timeline/scripts/timeline.py, line 49p = subprocess.Popen(["ffmpeg", "-v", "error", "-i", str(video), "-fps_mode", "passthrough",
.agents/skills/ui-recording-timeline/scripts/timeline.py, line 51stdout=subprocess.PIPE)
.agents/skills/ui-recording-timeline/scripts/timeline.py, line 467subprocess.run([find_chrome(), "--headless=new", "--disable-gpu", "--hide-scrollbars", f"--window-size={a.size}",

Install

Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.

if [ -e ~/.agents/skills/'ui-recording-timeline' ] || [ -L ~/.agents/skills/'ui-recording-timeline' ]; then echo 'A skill folder named ui-recording-timeline already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/vvedantb/eva' "$d" && git -C "$d" checkout --quiet '1bd8b90ceb62d31e79342108c8ddb0a6e4955287' -- '.agents/skills/ui-recording-timeline' && mkdir -p ~/.agents/skills && cp -R "$d"/'.agents/skills/ui-recording-timeline' ~/.agents/skills/'ui-recording-timeline' && rm -rf "$d"; fi

Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'ui-recording-timeline' ~/.claude/skills/'ui-recording-timeline' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.

Badge for your README

The badge for vvedantb/eva shows the score of its lowest-scoring skill.

SkillTrust badge for vvedantb/eva

[![SkillTrust](https://zalavijaysinh.github.io/skilltrust/badges/vvedantb/eva.svg)](https://zalavijaysinh.github.io/skilltrust/repos/vvedantb/eva/)

Score history

Date	Version	Score
2026-11-09	`1bd8b90`	97

Also found in

Identical copies of this skill exist at:

vvedantb/eva/.claude/skills/ui-recording-timeline