A self-contained production capability library: 106 shot recipe cards (with demo implementation source code and a motion sample gallery), a validated complete promo video template, reusable components and audio assets, and a six-stage workflow. The current focus is web/desktop product promo videos, but the shot cards themselves are a general-purpose motion vocabulary—you can also draw individual cards to make a single shot in any video.
When to use this skill
Use when:
- Creating a cinematic product promo, product launch, or desktop/web application demo video.
- Naming or requesting the
Ink Press(Ink Press) template or reproducing the template promo effect. - Implementing a specific motion-design shot card (e.g.,
deck-deal-flyin,row-embed,spotlight-hero-card). - Needing 2.5D camera movements (PageCam), beat-synced video cuts with Remotion, and sound design.
Instructions
Step 1: Introduce the template and confirm the route
Every time this skill is invoked,before starting any asset collection, storyboarding, or implementation, first explain to the user:
- Currently, one
template/fromvalidated 36.2-second product promo template Ink Press (Ink Press): 1920×1080, 30fps, paper-and-ink amber style, with 10 complete shots, 2.5D real-page camera moves, title cards, transitions, and pre-configured cinematic SFX; it can be adapted simply by replacing the target product's screenshots, copy, and brand information. - Using the template is the fastest path with the most guaranteed quality; if the user wants an entirely new visual language, then go through the free creation process.
Ask explicitly:"Do you want to use this ready-made template to produce this video?" Tell the user they can go to https://vincentwei1021.github.io/video-shotcraft/ to browse the motion samples.
- User confirms use: first read
template/TEMPLATE.mdin full, then execute according to the template route. - User explicitly does not use: follow
references/pipeline.mdStage 0 to continue, taking the free creation or single-shot route. - User has not yet decided: stop here and wait for a choice; do not apply the template by default, and do not start production.
Exceptions：
- If the user names the Ink Press template (e.g., "use the Ink Press template to make a promo for my product"), treat the template route as already chosen, and directly read
template/TEMPLATE.mdto execute. - If the user explicitly specifies certain shot cards (e.g., "use
deck-deal-flyinandrow-embedto make this video"), treat the route as already chosen, and directly read the corresponding shot cards anddemos/<卡名>/implementation source code.
Step 2: Choose one of three usages
- Complete promo video (template route): read
template/TEMPLATE.md, and adapt shot by shot by replacing assets according to the "guide for reproducing with a different product". - Complete promo video (free creation): follow
references/pipeline.mdsix stages (starting with the three kickoff questions at Stage 0). - Single shot/single motion effect: choose a card from
references/shots/, read the full card +demos/<卡名>/implementation source code, and adapt it to the target assets.
Step 3: When to read which file
| Timing | Read |
|---|---|
| Project kickoff | pipeline.md(Stage 0 three questions) |
| User has selected BGM | music-beat-sync.md(analyze first, then storyboard) |
| Taking the template route | template/TEMPLATE.md full text |
| Storyboard design | sequences/ segment templates;shots/ All frontmatter; read the full text of the selected card |
| Implement shot by shot | The full text of that shot card + demos/<卡名>/ the full implementation source code + assets/lib/ the corresponding component |
| Sound design | sound-design.md + assets/audio/ |
| Acceptance | aesthetic-rules.md Run the full text through the checklist (executed by an independent subagent) |
Examples
Example 1: Template route (Ink Press)
"用 Ink Press 模板给我的 Desktop Product 做一支 30 秒宣传片"
-> 自动选择模板路线，阅读 template/TEMPLATE.md，进行截图采集与素材替换。
Example 2: Specified shot card
"参考 deck-deal-flyin 和 row-embed 镜头卡制作我的产品 Demo 动效"
-> 自动选择单镜头/组合镜头路线，阅读 references/shots/ 与 demos/ 源码进行定制化实现。
Best practices
- Real screenshots: To reproduce an existing page, you must use real screenshots. From the first step, start the dev server and use a headless browser to capture 2x textures + layout.json.
- Product-native visual language: Extract tokens (fonts, font sizes, color scheme, corner radii) from the product/website design system; do not fabricate an unrelated skin.
- One effect per shot and a sense of breathing: Each shot conveys only one effect; wordmarks/important frames settle on the beat with a hold ≥1s.
- Strong-rhythm BGM strictly on beat: Use
librosato analyze the real BPM/time signature,beatF(n)determine the frame count, with cut point error ≤3f. - Reference demo source code: Before using a shot card, first read
demos/<卡名>/the tuned parameter truths and known-pitfall-avoidance patterns. - Deterministic rendering: Prohibit
Date.now()/Math.random(), use fixed-seed pseudorandomness.
References
template/TEMPLATE.md— Ink Press template structure and product-swap reproduction guidereferences/pipeline.md— Six-stage production process specificationreferences/aesthetic-rules.md— Visual review and acceptance checklistreferences/music-beat-sync.md— Music rhythm analysis and on-beat timeline calculationreferences/sound-design.md— SFX sound phrasing and sound effect asset pairing guide- https://vincentwei1021.github.io/video-shotcraft/ — Motion samples and an online gallery of 106 shot cards