AI Skill MartBrowse skillsPromptsProgramsLearnWhat is a Skill?
 
← Back to list

video-shotcraft — Cinematic Product Video Pipeline

Turns a frontend project or webpage into a cinematic product promo with Remotion, real page captures, 124 shot cards, beat sync and sound design.

Image & VideoAdvanced★ 17,890⑂ 1,695AI score 9/10Last updated: Oct 29, 2026

What it does

  • Builds cinematic product promo videos from your frontend project or website: spins up a local dev server, captures full pages at 2x with a headless browser, extracts element cut-outs and a layout.json coordinate table so the real UI becomes film footage.
  • Ships 124 shot recipe cards with demo source code and an animated sample gallery, a production-verified full promo template (Ink Press), and reusable components (PageCam 2.5D camera, ClipCard, DigitRoll, FlashCut, Caption, VerticalTicker, motion helpers).
  • Three mutually exclusive production modes — template reskin, fully autonomous creation, or guided co-creation with confirmation gates — plus a fourth usage: pulling a single shot card for any video.
  • Audio pipeline: librosa-based BPM/phase grid fitting, kick/snare/hihat transient detection, beat-locked transitions verified to ≤3 frames post-render, Freesound SFX search/download with license and attribution records, and dual delivery (with and without BGM).
  • Quality gates throughout: per-shot npx remotion still checks, ffmpeg frame review, and a mandatory clean-context subagent final review before delivery; afterwards it opens a motion workbench on localhost:5198 and can export a CapCut/剪映 project.

Who it's for

  • Developers and solo founders who must produce their own launch or feature videos for a web/SaaS product.
  • Frontend engineers using or learning Remotion (React-based video rendering).
  • Creators who already have a video and just need SFX found, swapped or beat-aligned.

Example uses

  1. "Make a 30-second promo for my dashboard project" → read-only product inspection → three modes proposed with reasoning → capture, storyboard, render.
  2. "Use the Ink Press template for my product" → skips questions, goes straight to template mode, swapping screenshots, copy and branding.
  3. "Just find candidate SFX for the card fly-in at 0:02" → returns Freesound candidates with preview links (CC0 first), no downloads, no visual edits, no re-render.

· · · 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/Vincentwei1021/video-shotcraft/HEAD/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 AI 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. Create the skills directory: mkdir -p ~/.claude/skills
  2. Clone the repo: git clone https://github.com/Vincentwei1021/video-shotcraft.git ~/.claude/skills/video-shotcraft
  3. Verify prerequisites: Node.js 18+ (node -v) and Python 3 (python3 -V); ffmpeg is handy for frame checks.
  4. To use the template, run cd ~/.claude/skills/video-shotcraft/template && npm install. Some demos also need npm i @remotion/motion-blur and three @react-three/fiber @remotion/three.
  5. For SFX sourcing, get a Freesound API key and export it as described in assets/scripts/sfx-source.py.
  6. Restart Claude Code, then ask something like "use video-shotcraft to make a promo video for this project".
  7. Browse the animated samples at https://vincentwei1021.github.io/video-shotcraft/ and pass the shot card names you like for faster results.
  8. For commercial work, check Remotion's separate license terms yourself.
View source on GitHub ↗License: Apache-2.0