# rauchg/skills

> A collection of open-source agent skills by Guillermo Rauch, starting with a skill that turns UI screen recordings into interactive paint timelines.

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.

## Features
- Self-contained agent skill folders with SKILL.md instructions
- Install via npx skills add rauchg/skills
- ui-recording-timeline skill for screen recordings
- Interactive paint timeline with timestamps, phase colors, hover thumbnails, and scrubbing
- Pink flash for painted content and blue slide for moved content
- Painted regions snapped to layout elements
- Template-matching move detection and cursor learning
- Static output folder with index.html and video
- Python script run with uv for frame extraction and page building

## Integrations
Claude, ffmpeg, uv, Chrome, Chromium

## Platforms
API, CLI

## Pricing
Open Source

## Links
- Website: https://github.com/rauchg/skills
- Documentation: https://www.skills.sh/rauchg/skills/ui-recording-timeline
- Repository: https://github.com/rauchg/skills
- EveryDev.ai: https://www.everydev.ai/tools/rauchg-skills