Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

video-sync — Annotated Shot-Info Video Renderer

Composites a shots.json breakdown with the source video into a watchable file where the current shot's metadata switches on every cut.

Image & VideoIntermediate★ 306⑂ 36AI score 8/10Last updated: Sep 12, 2026

What it does

  • Merges shots.json (output of the video-shots skill: shot number, in/out, duration, shot size, category, camera movement, visual description, dialogue) with the original video into one file.
  • Picks layout purely from aspect ratio: landscape/square → video on top, info below (vstack); portrait → video left, info right (hstack). The picture is always scaled untouched — no cropping, no stretching.
  • The shot list auto-scrolls with playback and highlights the current row. The active shot is pinned to the second line; scrolling happens only at cuts (--ease, default 0.45s) and freezes inside a shot.
  • Only three screenshots are taken (base plate + dimmed long list + lit long list); scrolling and highlighting are produced by ffmpeg time-window crops, so a 53-shot film renders panels in ~12 seconds.
  • All layout lives in scripts/panel.css — edit the CSS, rerun panels, and you have a new design. Zero npm dependencies, Node standard library only.

Who it's for

  • Video producers, directors and editors who review reference films shot by shot
  • Instructors building cinematography teaching material or "commentary edition" videos
  • Teams already generating shot breakdowns with the companion video-shots skill

Examples

  1. Check geometry first: node scripts/video-sync.mjs plan shots.json --video ref.mp4 returns layout, video area, panel area and output size in seconds.
  2. Render panels and preview in a browser: run panels shots.json --video ref.mp4 --frames frames --lang en, then open panels/panel.html and switch #S07 to inspect individual shots.
  3. One-shot export plus QA: export shots.json --video ref.mp4 -o out.mp4 --frames frames, then pull frames at 5s/30s/60s to verify the panel's shot number and highlight row match the picture.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/eternityspring/reelbench-skills/HEAD/skills/video-sync/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/video-sync folder from the GitHub repo eternityspring/reelbench-skills into my ~/.claude/skills/video-sync/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/eternityspring/reelbench-skills.git /tmp/reelbench-skills && mkdir -p ~/.claude/skills && cp -r /tmp/reelbench-skills/skills/video-sync ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Install the prerequisites: Node.js 18+, ffmpeg, ffprobe, and Chrome/Chromium/Edge (the panel is rendered as HTML in a headless browser).
  2. Clone the repository: git clone https://github.com/eternityspring/reelbench-skills.git
  3. Copy the skill into your Claude Code skills folder: mkdir -p ~/.claude/skills && cp -r reelbench-skills/skills/video-sync ~/.claude/skills/
  4. Copy the companion video-shots skill the same way so you have a source for shots.json.
  5. Verify the install: node ~/.claude/skills/video-sync/scripts/selftest.mjs (106 assertions, no ffmpeg or browser needed).
  6. Restart Claude Code and ask something like "export this video with shot info panels" to trigger the skill.
  7. To restyle the panel, edit ~/.claude/skills/video-sync/scripts/panel.css and rerun only the panels step.
View source on GitHub ↗License: Apache-2.0