Sandbox
@Vincentwei1021/video-shotcraft

Remotion video skill for Claude Code and Codex

This skill gives agents a structured way to create cinematic product videos with Remotion. It provides shot cards, motion previews, production rules, and a ready-to-run template so the agent can plan, animate, and sound-design the film in a repeatable way.

8,015 stars729 forksTypeScriptUpdated 8d ago
I Gave My AI Agent a Skill — It Made This Cinematic Product Video
Yihao Wei2.1k views • 1 month ago

Videos about this repo

Who it's for

Builders who want Claude Code or Codex to produce product promos, demos, and launch videos with reusable motion patterns.

What it delivers

You can hand your agent a product and get a structured promo video workflow instead of a blank page.

What it does

Shot recipe cards

A library of shot cards with purpose, energy, timing, parameters, implementation notes, and pitfalls.

Motion previews

A browsable gallery of motion styles so you can pick a visual pattern before building the video.

Remotion template

A production-ready promo template with shots, transitions, and cinematic sound design.

Production pipeline

Guidance for capture, storyboarding, visual direction, beat sync, sound design, and final QA.

Post-delivery workbench

A browser-based editor for adjusting shot properties, timing, captions, and motion before export.

JianYing export

Scripts and guidance for exporting the finished film into an editable JianYing draft.

How to get it

  1. 1The most direct way: hand the repo link to your agent. In Claude Code / Codex or a…
    Install this skill for me: https://github.com/Vincentwei1021/video-shotcraft
  2. 2The agent will clone the repo and link it into your skills directory. Or install with…
    npx skills add Vincentwei1021/video-shotcraft
  3. 3Run
    git clone https://github.com/Vincentwei1021/video-shotcraft.git
    cd video-shotcraft
    ln -s "$(pwd)" ~/.claude/skills/video-shotcraft   # Claude Code
    # or
    ln -s "$(pwd)" ~/.codex/skills/video-shotcraft    # Codex
  4. 4Then make requests like
    Use video-shotcraft to create a promo for my desktop product.
    Use the deck-deal-flyin and row-embed shot cards to present this feature.
    Design a product close-up inspired by spotlight-hero-card.

README

video-shotcraft logovideo-shotcraft logo

video-shotcraft

GitHub stars AtomGit Star Gallery

Vincentwei1021%2Fvideo-shotcraft | Trendshift Vincentwei1021%2Fvideo-shotcraft | Trendshift

An agent skill for crafting cinematic product videos: 157 shot recipe cards · 214 styles · 214 motion previews · a production-ready template

English | 中文 | 日本語

video-shotcraft is an AI agent skill that turns Claude Code or Codex into a motion-design studio: point it at your product and it storyboards, animates, and sound-designs a cinematic promo, marketing, launch, or demo video with Remotion — real page captures, 2.5D camera moves, beat-synced cuts, and film-grade SFX included.

🖼️ Browse all 214 motion previews in the live Gallery »

✨ What's new

[!IMPORTANT]

🔥 2026-08 · New in the series: video-talkcraft, for narration videos

video-talkcraft is the narration-video installment of this series. Hand it a script plus a finished voiceover and every motion beat locks to the voice: word-level timestamps aligned locally (median 20–40 ms per character), 78 motion recipe cards, a 7-layer anti-slideshow shot system (continuous camera curves, parallax planes, idle/yield lifecycle, breathing environment), plain-cut subtitles, and triple-gate QA. Same recipe-card + Remotion workflow as here, retuned for talking content.

🎙️ Project page » · 🖼️ Browse all 78 narration motion previews »

[!IMPORTANT]

🛠️ 2026-09 · New: the Motion Workbench — keep editing the delivered film in your browser

After delivery the skill opens a CapCut-style workbench (node workbench/scripts/open.mjs <project>). The film is decomposed into shot / transition / caption / SFX tracks exactly as authored; select any shot and edit its copy, font sizes and colours in a schema-driven inspector, move, trim or speed-ramp clips, drag any of the 216 demo motions in from the library, then export with Remotion. Preview and render are frame-identical (pixel-parity verified).

Motion Workbench

🧭 Workbench guide — every panel and feature, with screenshots » (Chinese) · 🔌 Integration contract »

  • 🌟 2026-08 · 48 new shot recipe cards — the library grows from 104 to 152 cards / 209 previews. Distilled from 209 candidate motions through eight rounds of frame-by-frame review against reference footage, then folded into the regular Gallery categories with full recipe cards, native Remotion components (demos/<category>/<name>/<Component>.tsx, deterministic and driven by the normalized progress t — see demos/README.md for the wiring snippet), and motion previews. All de-branded: neutral placeholder copy and a single swappable ACCENT color variable.
  • 🎞️ 2026-08 · JianYing (CapCut CN) project export — after final delivery the film can be exported as an editable JianYing draft: the plate is cut per shot (retime/reorder/grade), captions are rebuilt as native text tracks (content/size/color editable), SFX/BGM land on separate audio tracks. Verified on JianYing Pro 11.2 for macOS; see references/jianying-export.md.

🎬 Showcase

The 38-second Gallery intro below was itself produced with this skill — storyboard, shot implementation, and sound design were all done by an agent following the toolkit's methodology:

https://github.com/user-attachments/assets/cba2df8a-4b2e-4247-bace-d0b1dea9c2bd

▶️ Watch in HD on YouTube

Browse every shot card and motion preview online: Gallery — search, filter, switch between variants, and copy selected shot-card names.

🚀 Quick start

The most direct way: hand the repo link to your agent. In Claude Code / Codex or a similar agent, just say:

Install this skill for me: https://github.com/Vincentwei1021/video-shotcraft

The agent will clone the repo and link it into your skills directory. Or install with the skills CLI / manually:

npx skills add Vincentwei1021/video-shotcraft
git clone https://github.com/Vincentwei1021/video-shotcraft.git
cd video-shotcraft
ln -s "$(pwd)" ~/.claude/skills/video-shotcraft   # Claude Code
# or
ln -s "$(pwd)" ~/.codex/skills/video-shotcraft    # Codex

Then make requests like:

Use video-shotcraft to create a promo for my desktop product.
Use the deck-deal-flyin and row-embed shot cards to present this feature.
Design a product close-up inspired by spotlight-hero-card.

If no shot card is specified, the skill introduces the built-in video template first and asks whether to use it; you can also pick shots in the Gallery before starting.

📼 Video template: Ink Press

The skill ships with Ink Press — a validated, complete promo template: 36.2 seconds, 1920×1080, 30fps, 10 shots in a paper-ink-amber style, with 2.5D real-page camera moves, title cards, transitions, and a fully pinned cinematic SFX pass:

https://github.com/user-attachments/assets/4cf5af51-98f3-4af2-8ab2-7267f470513d

▶️ Watch in HD on YouTube

To use it, just tell your agent:

Use video-shotcraft to make a promo for my product with the Ink Press template.

The agent swaps in your product's screenshots, copy, and branding to reproduce the same quality — the fastest, most reliable path to a finished film.

More templates are on the way.

Headless / CI notes

Rendering on a headless Linux box (tested: 2 cores, Node 22) hits three walls worth knowing:

  1. Concurrency capremotion still/render fails with "Maximum for --concurrency is 2" on low-core machines. Fix: pass --concurrency=1.
  2. Old Headless removal — recent Chrome/Chromium dropped old headless mode; pointing Remotion at system chromium fails to launch. Fix: use a chrome-headless-shell binary instead of full Chrome.
  3. Blocked CDN — if remotion.media is unreachable, the automatic headless-shell download is rejected. Fix: --browser-executable=<path-to-local chrome-headless-shell>.

With these three flags, frame renders from the bundled template work.

📦 What's included

ContentDescription
157 shot recipe cardsPurpose, energy, suggested duration, parameters, implementation notes, and known pitfalls
214 motion previewsCovering 214 styles; searchable and filterable in the online Gallery
Remotion implementationsTuned TSX demos containing the actual easing and timing parameters for each card
Complete video templateA validated 36.2-second, 1920×1080, 30fps product promo with 10 shots
Components and assets2.5D page camera, captions, flash cuts, digit rolls, SFX, and capture scripts
Production methodologyCapture, visual direction, storyboarding, sound design, beat sync, and final QA
JianYing project exportLoad the film into JianYing (CapCut CN) for further editing — per-shot speed, captions, and audio all editable (verified on macOS 11.2)
Motion workbenchBrowser timeline editor opened after delivery: split the film into tracks, edit exposed shot properties, retime, drag in any of the 216 demo motions, export via Remotion

The toolkit primarily targets web and desktop product promos, while individual shot cards can also be used in feature demos, brand films, launch videos, and other motion projects.

🗂 Repository structure

video-shotcraft/
├── SKILL.md                 # Agent entry point and core production rules
├── references/
│   ├── pipeline.md          # End-to-end production workflow
│   ├── shots/               # 157 shot recipe cards in 10 functional categories
│   ├── sequences/           # Reusable full-video structures and sequence patterns
│   ├── aesthetic-rules.md   # Visual QA criteria
│   ├── music-beat-sync.md   # BGM analysis and beat-sync methodology
│   ├── sound-design.md      # Sound-design guidance and examples
│   ├── jianying-export.md   # JianYing (CapCut CN) project-export guide
│   └── workbench.md         # Motion workbench: manifest contract + editability rules
├── demos/                   # Remotion reference implementations (same categories)
├── gallery/                 # Static motion-preview Gallery
├── template/                # Runnable complete video template
├── jianying-export/         # JianYing draft installers (mac tested / win untested)
├── workbench/               # Post-delivery motion workbench (Vite + Remotion Player)
└── assets/
    ├── lib/                 # Reusable Remotion components
    ├── scripts/             # Page-asset capture scripts
    └── audio/               # Audio assets
        ├── bgm/             # 5 BGM options
        └── sfx/<category>/  # 149 SFX across 16 scene categories

For the complete workflow and implementation requirements, see SKILL.md, the production pipeline, and the visual QA criteria.

🔊 Audio and asset notes

Audio files under assets/audio/ may be used according to their respective license terms. See ATTRIBUTION.md for sources and license details.

SFX are organized into 16 scene/material categories (transition impact riser camera ui text paper film light data scifi mech glass fluid crowd counter) — pick the category first, then the timbre. See sound-design.md for the category index and per-file usage.

Product screenshots bundled with the template are demonstration assets. Replace them with screenshots from the target product before publishing, and verify whether any product, customer, or personal data needs to be anonymized.

🙏 Acknowledgements

Many shot recipes in this library were distilled by studying the motion language of outstanding official product films — including promos from ClickUp, Perplexity, Slack, Notion, Figma, Framer, Bear, Raycast, Pitch, Miro, Superhuman, and Loom. The cards document motion techniques (timing, easing, choreography) re-implemented from scratch; no footage, artwork, or brand assets from these films are included in this repository. All trademarks belong to their respective owners, and none of these companies are affiliated with or endorse this project. Per-batch sourcing notes for the 48 cards added in 2026-08 live in references/shots/ATTRIBUTION.md.

Special thanks to:

  • Remotion — the React-based video framework that powers every demo and template here. Note that Remotion has its own license (free for individuals and small teams; companies may need a paid license).
  • Mixkit — source of the SFX and music assets bundled under their free commercial license.
  • The game-feel and animation communities whose published principles (e.g. Vlambeer's screenshake talks, classic animation timing) inform several cards.
  • Claude Code — this library itself was built, iterated, and QA'd with an AI coding agent, using the same workflow the skill teaches.

Follow me

Follow Vincent on X Follow Vincent on Douyin Follow Vincent on Red Note

⭐ Star history

Star History ChartStar History Chart

Files in the repo

Repository payload18 top-level entries
  • .claude-plugin
  • .github
  • agents
  • assets
  • demos
  • gallery
  • jianying-export
  • references
  • template
  • workbench
  • .gitignore
  • LICENSE
  • package-lock.json
  • package.json
  • README_CN.md
  • README_JA.md
  • README.md
  • SKILL.md

Discussion (0)

Ask about usage, or say what you built with it

Sign in to join the discussion.

No comments yet. Be the first to say what this is good for.

More skills

Vincentwei1021/
anything2explainer

Topic in, narrated explainer video out. A Claude Code / Codex skill that turns any topic into a black-canvas motion-graphics explainer video with TTS voiceover, subtitles and a chapter progress bar. Chinese or English; every frame drawn in code with Remotion.

666

Taste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop

86k

Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams—self-contained HTML with motion and crisp export.

57k
img2threejs/
img2threejs

Rebuild the object in a reference image as a code-only, procedural, quality-gated, animation-ready Three.js model. Token-efficient image-to-3D.

16k