ui-recording-timeline

UI recording timeline

Produces a self-contained folder with index.html and the video. The video fills the window. Below it are a one-line caption and a thin timeline (phase colors, paint ticks, hover thumbnails, scrubbing). Change regions flash on the video at each paint, and a paint list drawer opens with l.

Everything needed is in this skill directory:

• scripts/timeline.py: one CLI with all the steps. Dependencies are declared inline, and uv run installs them.
• assets/template.html: the page. build injects the data into it.

Requirements: ffmpeg/ffprobe and uv on PATH. Chrome or Chromium is needed only for preview.

Below, T means uv run <this skill dir>/scripts/timeline.py. Define it as a shell function, not a variable: zsh doesn't word-split variables. Use the absolute path of the skill directory:

T(){ uv run "/abs/path/to/ui-recording-timeline/scripts/timeline.py" "$@"; }

WD is the output folder. If the user's project has conventions for where research or collateral goes, follow them; otherwise put WD next to the video as <video-stem>-timeline/.

Workflow

1. Extract and find candidate paints

T extract /path/to/recording.mp4 WD     # copies video, writes meta.json (frame timestamps; VFR is fine)
T candidates WD                         # table of frames that differ from the previous frame

Each row has the frame index, time, % changed, kind (change / full / cursor?), and the normalized bbox. Small cursor-like changes are hidden (use --all to show them).

2. Look at the frames, then decide what counts as a paint

Never label from the table alone. Look at the frames:

T sheet WD --frames 0,4,14,26,61 --name overview          # labelled contact sheets -> WD/sheets/*.jpg
T sheet WD --frames 18,19 --crop 0,0,0.25,0.15 --name zoom # zoom into a small change

Read the sheet images with the image viewer. Make sure to include the frame before each candidate, so you can see what changed.