video-shotcraft

Create cinematic product videos from shot recipe cards using Remotion, real page screenshots, and beat-synced sound design.

1|Updated Jul 19, 2026
One-click install
npx skills add https://github.com/leobbaroni/maestro --skill video-shotcraft-leobbaroni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: video-shotcraft
Source: https://github.com/leobbaroni/maestro/tree/main/skills/maestro/library/video-shotcraft
Command: npx skills add https://github.com/leobbaroni/maestro --skill video-shotcraft-leobbaroni

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires remotion, @remotion/cli, @remotion/three, @react-three/fiber, three, react, vitest, pyJianYingDraft, librosa, scipy, and includes references (resource) and assets (resource) components.

What problem does it solve? Turning a frontend project or webpage into a polished product promo video normally requires motion design expertise, camera choreography, and audio editing skills that most developers lack. This Skill provides a complete production system—157 tuned shot recipe cards, a validated reference template, reusable components, and a staged pipeline—so an AI agent can produce a cinematic product video from real page captures. ## Core Features & Use Cases - 157 Shot Recipe Cards: A vocabulary of motion shots (openings, UI entrances, camera moves, transitions, outros) across ten categories, each with parameter tables, known pitfalls, and tuned Remotion demo implementations to copy. - Three Production Modes: Direct template replacement (Ink Press), autonomous free creation, or co-creation with user sign-off gates at brief, visual direction, shot mapping, and storyboard stages. - Real-Page Capture Workflow: Headless-browser capture of full-page 2x screenshots, element cutouts, and layout coordinates so animations land in real page slots instead of floating mockups. - Beat-Synced Sound Design: librosa-based BPM/beat-grid analysis, a 149-file categorized SFX library, frame-pinned SFX tables, and post-render audio offset verification. - Use Case: Point the agent at your web app's local dev server, pick shots from the hosted gallery, and receive a rendered 1080p promo video with captions, transitions, and sound—plus an optional Jianying (CapCut) editable project export. ## Quick Start Use video-shotcraft to turn my frontend project into a product promo video, starting with a read-only product inspection and mode recommendation.

Frequently Asked Questions about video-shotcraft

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a product promo video from my website with Remotion?▼

Start a local dev server for your product, then let the skill capture full-page 2x screenshots, element cutouts, and a layout coordinate file with its capture script. Choose a production mode (template, autonomous, or co-creation), pick shot cards, and the agent builds and renders the Remotion timeline.

What are shot cards in video-shotcraft?▼

Shot cards are 157 recipe documents covering openings, UI entrances, camera moves, transitions, and outros. Each card defines intent, motion parameters, sound notes, and known traps, and points to a tuned Remotion demo implementation you copy into your project rather than rewriting from scratch.

How do I sync video cuts to background music beats?▼

Run the beat-grid analysis with librosa: fit a least-squares grid to detected beats for true BPM and phase, classify kick/snare/hihat transients, then write the timeline in beat numbers via a beatF() helper. After rendering, extract the audio track and verify cut errors stay within 3 frames.

Can I export the finished video to Jianying or CapCut for editing?▼

Yes. Render a plate version without captions or SFX, then the jianying-export module builds a draft with per-shot video segments, native text tracks, and audio lanes using pyJianYingDraft. Mac Jianying 11.2 is verified; Windows support is implemented but untested on real hardware.

Why does text look blurry in 3D Remotion camera shots?▼

Chromium rasterizes 3D composited layers at layout width then upscales on GPU, so transform scale magnifies an already downsampled texture. Use the CSS zoom property for layout-level scaling, capture pages at 2x and hero elements at 4x, and check the texture resolution chain before touching camera or depth-of-field settings.

When should I not use the Ink Press template mode?▼

Skip the template when the product's visual identity conflicts with the paper-and-ink editorial style, or when you need a new visual direction rather than a shot-for-shot reproduction. Autonomous or co-creation modes derive typography, color, and materials from the product's own design tokens instead.