rauchg/skills

rauchg/skills is Guillermo Rauch’s collection of reusable skills for AI coding agents. Its documented skill, ui-recording-timeline, turns a UI screen recording into an interactive report for reviewing what appeared, what moved and how long each screen remained visible.

Inspect a UI flow

Use it to examine page loads, navigation, redirects, sign-in flows or app startup. The report pairs a full-window video with a timeline of visual changes, timestamps, screen durations and colored phases. Hover for thumbnails, scrub to a moment or step between changes with the arrow keys. Pink overlays highlight newly painted content; blue overlays highlight content that moved.

Review meaningful changes

The workflow extracts frames and identifies candidate changes, then gives the agent contact sheets to review. The agent selects meaningful changes, groups the recording into phases and labels metrics such as time spent on a blank screen or waiting for content.

The instructions distinguish content and layout changes from cursor movement, spinner rotation and incidental animation. A Python script compares selected frames, detects movement and draws overlays around changed layout elements. The agent checks these overlays before building the report.

Share the results

The output is a portable folder containing an HTML page, the recording and timeline assets. Open it locally or deploy it to share. Playback controls, a paint-list drawer and links to specific video times help others inspect the same moments. Timings come from the recording’s frame timestamps, starting at the first recorded frame.

Installation and requirements

Install with npx skills add https://github.com/rauchg/skills --skill ui-recording-timeline. The workflow requires uv and ffmpeg/ffprobe; Chrome or Chromium is optional for previews. The repository is MIT-licensed.