Framewise — Design skill for Claude Code
Claude Code skills that let coding agents read screen recordings — find what broke, or measure a UI to rebuild it.
How to install Framewise
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open Rohx24/Framewise and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Framewise does
Claude Code skills that let coding agents read screen recordings — find what broke, or measure a UI to rebuild it.
Alternatives in Design
- Doc — Read, create, and edit .docx documents with formatting and layout fidelity 14.6k ★
- Hn Rewrite — Read {{arg1}} (either a file path or GitHub issue URL) and rewrite it in a technical, matter-of-fact style sui 570 ★
- Clipify — Claude Code skill: turn long videos into social-ready clips 549 ★
README
Framewise
Two skills that let your coding agent watch a video.
**Turn a screen recording into the story of a bug: what happened, what it led to, and where it broke.**
Framewise reads every frame and gives your coding agent a timestamped sequence of events, so it can trace a bug from the first click to the final failure instead of guessing from one screenshot.
/watch |
Find what broke in a screen recording, with timestamps. |
/replicate |
Take an interface apart so it can be rebuilt — layouts, plus motion measured frame by frame. |
Runs locally. No API key, no upload.
Why
Sampling screenshots every second loses the thing you needed. A screenshot shows a spinner exists; it can't show that it never stopped, which is the bug. Duration is the finding.
Rebuilding has the same problem in reverse. A still frame can't contain motion, so screenshots leave duration, distance and easing to guesswork.
Install
git clone https://github.com/Rohx24/framewise
cd framewise && pip install -r requirements.txt && ./install.sh
Needs Python 3, `ffmpeg` on PATH, `numpy` and `opencv-python`. Installs `/watch` into `~/.claude/skills/watch` and `/replicate` into `~/.claude/skills/replicate`; pass a directory to `./install.sh` to install somewhere else. To update, `git pull && ./install.sh`.
Narration in a recording is transcribed if `openai-whisper` is installed (`pip install openai-whisper`). Without it everything else still runs.
Try it without a recording — the sample is already in the repo, and `examples/expected/` holds the output it should produce:
python3 scripts/analyze.py examples/sample_bug.mp4 -o /tmp/demo --no-audio
/watch
python3 scripts/analyze.py recording.mov -o repro/
| flag | why |
|---|---|
--frames N |
more or fewer key frames (default 12) |
--max-seconds N |
only analyse the first N seconds of a long recording |
--no-audio |
skip transcription (faster; avoid |
Related Skills
Feedback Studio
Local visual feedback overlay for a site you're building or a Markdown file — click or select anything, leave
Competitor UI Teardown
Reverse-engineer how a competitor's screen is actually built — measure it, don't guess. A Claude Code skill.
Ad Variation Generator
Claude Code skill: generate ad headline variations directly in Figma. Read your product context, find winning
Design Critic
Use when you want an honest read on a design instead of encouragement. What is wrong, ranked by severity, with
Figma Design Extraction
REQUIRED first step whenever the input is a Figma URL or the task says "implement from design" / "match design
Figma Wireflow Connect Skill
Claude Code agent skill that connects Figma screen frames with real Connectors in a design file (createConnect
Related Agents
Broll Worker
Cheap, narrow B-roll worker. Executes specific footage tasks from a B-roll GOD plan (stock video, images, clip
Enumeration Oracle Hunter
Use this agent to find side-channel and response-shape oracles that let an attacker enumerate names, existence
Video Footage Scout
Finds and extracts short, premium, rights-safe real footage for a video project, either from an internal LMS/r