ui-redline-walkthrough skill
A skill that turns two UI screenshots into an animated redline clip with red ink marks, a morph to the fix and MP4 export.
- 59 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill runs local Python scripts, Chromium and `ffmpeg` and writes clip files into the working folder.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/ui-redline-walkthroughDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill runs local Python scripts, Chromium and `ffmpeg` and writes clip files into the working folder.
This is third-party code. Review the repository files before installing.
What it does
ui-redline-walkthrough is a Claude skill that takes before and after screenshots of one screen and builds a clip in the spirit of a designer marking up a printout. Red circles, arrows and handwritten notes flag problems on the real interface, then the screen morphs step by step into the fix. The skill first asks for the list of improvements, then measures screenshot elements, redraws the interface in HTML and animates it as a function of time. The result is a self-contained HTML file and an MP4 that `scripts/export_mp4.py` renders frame by frame through Chromium. Guides in `references/` cover intake, measuring, choreography and a review checklist.
Who it is for. Designers and product teams who need to show UI changes in a clip for a review, changelog or announcement without manual editing.
Good fit when
- A client needs to see what changed on a screen and why in a 20-second video.
- A release changelog is being prepared and each interface improvement should be shown visually.
- There are two redesign screenshots and a social clip must be built from them quickly.
- Design review is written, and comments are easier to read when drawn over the screen.
Not a fit when
- A clip with real screen recording of the app is wanted: the skill animates from images.
- There is only one screenshot and no after state.
- A full editing studio with voiceover and scene transitions is needed.
Example request
Make a redline walkthrough from these two chat screenshots. Show three improvements: the heading, the line width and the send button.Limitations
It needs Python 3.9 with `numpy`, `pillow` and `scipy`, `playwright` with Chromium and `ffmpeg` on `PATH`. Both screenshots must show the same screen at the same zoom, and the list of improvements is best supplied up front or the agent will ask. Installation is manual: copy the folder into `~/.claude/skills/` or upload the packaged `.skill` file in Claude settings. The repository's example is limited to a single chat redesign clip.
How to disable. Delete the `ui-redline-walkthrough` folder from `~/.claude/skills/` or remove the skill in Claude settings. Python libraries and Chromium stay on the system.
FAQ
What is the output?
One HTML file with the animation and an MP4 rendered from it frame by frame. The repository example runs 19 seconds at 3200 by 1800 and 60 fps.
What do I give the skill?
Two screenshots of one screen at the same zoom and a numbered list of improvements, ideally with a reason for each.
How do I preview before exporting?
Open `assets/template.html` in a browser: space pauses, arrow keys seek. The finished HTML works the same way.
Do I need a browser?
Yes, Chromium from `playwright` renders the frames for the MP4. Install it with `playwright install chromium`.
Does it work outside Claude?
`SKILL.md` is written for Claude, though other agents read the skill format. The README describes installation only for Claude Code and Claude.
Discussion
No questions or reviews yet.
Related
SkillsA Claude Code skill that builds motion graphics in code: 21 ready looks, five questions, three approval stills and an MP4 render.
A free Claude skill that writes a build spec, picks cinematic media, builds a landing page and checks it with screenshots
A Claude Code skill that makes a Korean motion-graphics video from one request, from script to ElevenLabs voice, music and QA
A Claude Code skill that records a product in the browser, composes a video with chapters and captions and masters the MP4 locally
A skill that turns narration text into a 20-second chunky-pixel explainer at 1920×1080 with voice-over and an editable project.
The Video by Reference skill learns style from a sample clip and builds an animated short from code with an original soundtrack
README in short
Shows an example clip, installation, environment requirements, repository contents and a demo run through the template.