
video-shotcraft
Skill把 Claude Code / Codex 变成动效工作室:给它你的网页或产品,就能写分镜、做镜头动画和音效,用 Remotion 渲染产品宣传片、发布视频;交付后可在浏览器工作台里继续改,也能导出剪映草稿。需要本机装 Node.js 与 ffmpeg;Remotion 对公司商用可能要付费许可。
What it does
Tell Claude Code or Codex "make a promo for my product". The agent captures your real pages, picks shots from a library of tuned motion recipes, storyboards the film, animates it with Remotion, cuts it to the beat, adds sound design, checks every frame and hands you a finished MP4 you can keep editing.
It is not a video generator. Every frame is drawn by code from your own screenshots and copy, so the result is sharp, on-brand and fully editable.
How it works

What's new
[!IMPORTANT]
🎬 2026-10 · Shot library refresh
All 216 demos were polished and reviewed. The best versions now make up 124 cards / 150 shots, with fresh Gallery previews and video-shotcraft branding.
- 2026-09 · Motion Workbench. Keep editing the delivered film in a CapCut-style browser editor.
- 2026-08 · video-talkcraft, the narration-video sibling: script + voiceover in, every motion beat locked to the voice (78 narration previews).
- 2026-08 · JianYing (CapCut CN) export. The final film becomes an editable JianYing draft: per-shot clips, native caption tracks, separate SFX/BGM tracks. Verified on JianYing Pro 11.2 for macOS (guide).
❤️ Sponsors
![]() APIMart |
Thanks to APIMart for sponsoring this project! APIMart is a low-cost API platform for AI image & video generation — GPT-Image-2 from $0.006/image, 160+ images per dollar. One async API covers both image and video: submit a task, get an ID, fetch results via polling or callback. Batch tens of thousands of images without timeouts, switch models without changing code. Pay-as-you-go with no monthly fee — sign up here to get started. |
![]() PackyCode |
Access leading AI models through PackyCode with one API endpoint and one API key. Enjoy fast, reliable access with automatic failover and dedicated high-speed routes for Codex and Claude Code. Get started with $1 in free credits, a discount on your first top-up, and savings of up to 80% on eligible routes. Pay in RMB with no currency conversion markups or extra top-up fees. |
|
AWS |
Amazon Web Services (AWS) offers reliable, scalable cloud computing services, including compute, storage and AI. |
Install
Built and tuned for Claude Code and Codex. The simplest way is to hand your agent the link:
Install this skill for me: https://github.com/Vincentwei1021/video-shotcraft
Or with the skills CLI:
npx skills add Vincentwei1021/video-shotcraft
Or by hand:
git clone https://github.com/Vincentwei1021/video-shotcraft.git
cd video-shotcraft
ln -s "$(pwd)" ~/.claude/skills/video-shotcraft # Claude Code
ln -s "$(pwd)" ~/.codex/skills/video-shotcraft # Codex
In mainland China, clone from the AtomGit mirror if GitHub is slow:
git clone https://atomgit.com/VincentWei/video-shotcraft.git.
Use
Just describe the film. No command needed.
| Say | What happens |
|---|---|
Use video-shotcraft to make a promo for my product. | The agent introduces the Ink Press template and asks whether to use it, then captures your pages and builds the film |
Make a launch film for this repo with the Ink Press template. | The fastest path: your screenshots, copy and logo dropped into a validated template |
Use the deck-deal-flyin and row-embed shot cards to present this feature. | You pick the shots by name (copy names straight from the Gallery) |
Design a product close-up inspired by spotlight-hero-card. | One shot, adapted to your product |
Shot library
124 recipe cards in 10 categories, 150 shots in total. Search, filter and copy card names in the Gallery.
Opening & Brand · 11 shots![]() text-as-mask: the product shows through the title | Camera · 13 shots![]() exploded-view: the page tilts and comes apart |
Transitions · 19 shots![]() card-flock-tumble: a flock of cards becomes the headline | Typography · 25 shots![]() flying-words: a word tunnel resolves into the motto |
UI Entrance · 22 shots![]() card-stack: a fan of cards deals into place | Interaction · 13 shots![]() palette-theme-ripple: a new theme ripples across the UI |
Data · 9 shots![]() axis-rescale-shock: the spike breaks the axis | Light & Emphasis · 23 shots![]() spotlight-sweep: a stage light finds the title |
Rhythm · 8 shots![]() paparazzi-flash: three flashes, three crops, one number | Outro · 7 shots![]() input-morph-assemble: the chat box builds the logo |
Each card lives in references/shots/<category>/<card>.md, with its Remotion implementation in
demos/<category>/<card>/ (see demos/README.md for how to wire one into your project).
Motion Workbench
After delivery the skill opens a CapCut-style editor in your browser
(node workbench/scripts/open.mjs <project>). The film is split into shot, transition, caption and SFX tracks
exactly as authored. Select any shot to edit its copy, font sizes and colours, move, trim or speed-ramp clips,
drag in any of the 150 library shots, then export with Remotion. Preview and render are frame-identical.

Workbench guide, every panel with screenshots (Chinese) · Integration contract
What you get
| Output | Details |
|---|---|
| Final film | MP4, 1920×1080, 30 fps, h264, with music and sound design |
| Remotion project | The full source of your film: every shot is a React component you or the agent can change |
| Motion Workbench | Opens after delivery: tracks, inspector, retime, swap shots, export (details) |
| JianYing draft | Optional: an editable JianYing (CapCut CN) project with per-shot clips, captions and audio tracks |
| Social publishing | Optional, when you ask: publish the finished film via Upload-Post to TikTok, Instagram, YouTube, LinkedIn, X and more. Confirm caption and platforms, then dry-run before posting (guide) |
Also in the box: reusable Remotion components (2.5D page camera, captions, flash cuts, digit rolls), 149 SFX and 5 BGM tracks, page-capture scripts, and the production method itself (capture, visual direction, storyboarding, sound design, beat sync, final QA) in references/.
Showcase
Share your film. Made something with video-shotcraft? Submit it with the Showcase issue form. After review it appears on the Showcase page.
Requirements
| Needs | For |
|---|---|
| Node.js and npm | Remotion rendering, the template and the workbench |
| ffmpeg / ffprobe | Frame checks and final QA |
| uv | Only for BGM beat analysis (runs a one-off Python script) |
| puppeteer | Only for page capture; the capture script installs it on demand |
Remotion downloads its own headless Chrome on first render. Tested on macOS; Linux works with the notes below.
Headless Linux / CI notes
Rendering on a headless Linux box (tested: 2 cores, Node 22) hits three walls:
- Concurrency cap.
remotion still/renderfails with "Maximum for --concurrency is 2" on low-core machines. Pass--concurrency=1. - Old headless removal. Recent Chrome/Chromium dropped the old headless mode, so pointing Remotion at system Chromium fails to launch. Use a chrome-headless-shell binary instead of full Chrome.
- Blocked CDN. If remotion.media is unreachable (common in mainland China), the automatic headless-shell
download fails. Pass
--browser-executable=<path-to-local chrome-headless-shell>.
With these three flags, frame renders from the bundled template work.
Repository structure
video-shotcraft/
├── SKILL.md # Agent entry point and core production rules
├── references/
│ ├── pipeline.md # End-to-end production workflow
│ ├── shots/ # 124 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
│ ├── publish-upload-post.md # Optional social publishing (Upload-Post API)
│ └── 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)
├── publish/ # Optional social publisher (stdlib-only Python) + offline tests
├── 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 full workflow see SKILL.md, the production pipeline and the visual QA criteria.
Audio and assets
SFX are organized into 16 scene and 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 index and per-file usage, and
ATTRIBUTION.md for sources and licenses.
Product screenshots bundled with the template are demonstration assets. Replace them with screenshots of your product before publishing, and check whether any product, customer or personal data needs to be anonymized.
License
- Code and docs: Apache-2.0.
- Audio under
assets/audio/: each file under its own license, see ATTRIBUTION.md. - Remotion has its own license: free for individuals and small teams, companies may need a paid license.
Acknowledgements
Many recipes 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 techniques (timing, easing, choreography) re-implemented from scratch; no footage, artwork or brand assets from these films are included. All trademarks belong to their owners, and none of these companies are affiliated with or endorse this project.
Thanks also to Remotion, which powers every demo and template here; Mixkit, the source of the bundled SFX and music under its free license; the game-feel and animation communities whose published principles inform several cards; and Claude Code, with which this library was built, iterated and QA'd using the same workflow the skill teaches.
Follow me
Star history
相關資源

claude-code-video-toolkit
Skill面向 Claude Code 的视频制作工作区:从写稿、AI 配音、配乐、生成画面到用 Remotion 渲染 MP4,内置讲解短视频、产品演示等模板。完整流程需克隆仓库并安装 Node.js 18+,AI 生成环节要自备云 GPU(如 Modal 的免费额度)。
digitalsamba/claude-code-video-toolkit2.3k
OpenMontage
Skill开源的 agent 视频制作系统:克隆仓库后在里面打开 Claude Code 或 Codex 说出需求,agent 按内置流程完成调研、脚本、配音、找素材、字幕与合成,出片前先给分镜和费用确认。需本地装 Python、Node.js 与 FFmpeg,不配 API Key 也能用免费素材出片。
calesthio/OpenMontage68.9k
Remotion Best Practices
SkillRemotion 官方技能:教 agent 用 React 代码制作程序化视频,涵盖新建项目、动画与排版、字幕、地图动画、多媒体处理与渲染,作为路由按需加载各子主题。
remotion-dev/skills5.2k
Remotion CLI
CLI用 React 编写视频,并通过 npx remotion render 在命令行渲染输出,适合 agent 批量生成数据驱动的视频。个人、非营利组织与 3 人以内的公司可免费使用,规模更大的营利公司需购买授权。
remotion-dev/remotion60.8k
Remotion
PluginRemotion 官方出品、收录于 OpenAI 官方插件市场的 Codex 插件:用 React 以编程方式制作视频,内含新建项目、动画与特效、字幕、地图、预览、导出渲染等 12 个技能。个人、非营利组织与 3 人以内的公司免费,更大的营利公司需购买公司许可。
openai/plugins7.5k
Remotion Captions
Skill指导 agent 在 Remotion 视频中处理字幕:统一用 @remotion/captions 的 Caption 类型存成 JSON,可转写音视频生成字幕、导入 .srt 文件,并在合成中显示字幕、制作字幕动画。Remotion 官方技能。
remotion-dev/skills5.2k











