Claude Skill MartBrowse skillsWhat is a Skill?
Back to list

video-shotcraft: Cinematic Product Video Builder

Turns a frontend project or webpage into a cinematic product promo video using Remotion, real page screenshots, 2.5D camera moves, beat-synced cuts and sound design.

Image & VideoAdvanced4,305381AI score 8/10Last updated: Aug 9, 2026

What it does

A self-contained production library that turns your web/desktop product into a cinematic promo video rendered with Remotion.

  • 152 shot recipe cards, each with demo source code and an animated sample in an online gallery — treat them as a reusable motion vocabulary.
  • A validated "Ink Press" template: a fully renderable Remotion project where you swap screenshots, copy and branding.
  • Three explicit modes: use the template as-is, let the agent create freely end-to-end, or co-create with checkpoints (brief → visual direction → shot mapping → storyboard).
  • Real-page capture pipeline: spins up your dev server, screenshots full pages at 2x, cuts out elements, and emits a layout.json coordinate table to drive 2.5D camera work.
  • Sound design & beat sync: 149 commercially licensed SFX plus BGM, librosa-based BPM/phase and kick/snare/hihat detection, timelines written in beatF(n), and post-render verification within 3 frames. Always delivers a with-BGM and SFX-only version.
  • Built-in QA: per-shot remotion still checks, ffmpeg frame extraction reviews, and a clean-context subagent doing an independent final review before delivery.

Who it's for

  • Developers and indie makers who want a demo/launch video straight from their real landing page.
  • Product teams that need the video to inherit the product's own design tokens (type scale, colors, spacing) instead of a generic "promo skin".
  • Frontend engineers already comfortable with Remotion and code-driven video.
  • Motion designers who just need one polished shot (deck fly-in, orbiting close-up, etc.).

Examples

  1. Template route: "Use the Ink Press template to make a promo for my SaaS" → template mode locks in; swap screenshots, copy and logo, then npx remotion render src/index.ts AiflPromo out/promo.mp4.
  2. Autonomous route: "Read this repo and produce a 30s promo, don't ask me anything" → the agent runs brief → styleframe → shot mapping → storyboard → render without pausing.
  3. Single shot: "Give me an 8s clip where my dashboard cards fly in using deck-deal-flyin" → it reads the full card plus the exact demo TSX so tuned easing and timing are preserved.
  4. Beat-synced edit: supply a track and it analyzes real BPM/phase and drum hits first, pins transitions to beats, then re-extracts audio from the render to verify cut accuracy.

· · · Install guide · · ·

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 SKILL.m folder from the GitHub repo Vincentwei1021/video-shotcraft into my ~/.claude/skills/video-shotcraft/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/Vincentwei1021/video-shotcraft.git ~/.claude/skills/video-shotcraft

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

  1. Prerequisites: install Node.js 18+ with npm, Python 3 (for the local gallery and beat analysis), and ffmpeg. Chrome/Chromium helps with headless page capture.
  2. Create the skills folder: run mkdir -p ~/.claude/skills.
  3. Clone the repo: git clone https://github.com/Vincentwei1021/video-shotcraft.git ~/.claude/skills/video-shotcraft
  4. Verify: ls ~/.claude/skills/video-shotcraft should show SKILL.md, references/, template/, demos/, assets/, and gallery/.
  5. Optional template setup: cd ~/.claude/skills/video-shotcraft/template && npm install, then npx remotion render src/index.ts AiflPromo out/promo.mp4 to confirm rendering works.
  6. Browse the gallery: open https://vincentwei1021.github.io/video-shotcraft/library.html and copy the names of shot cards you like.
  7. Run Claude Code in your project folder and ask, e.g. "use video-shotcraft to make a promo for this site". The skill does a read-only product inspection first, then proposes the three modes.
  8. Safety note: because it captures your real pages, replace any customer, personal, internal or live data with dummy content before capture.
View source on GitHubLicense: Apache-2.0