Skip to content
video-shotcraft

video-shotcraft

by Vincent Wei
Apache-2.0
Repository Docs
Featured markdown Design & Creative
videoremotionproduct-videomotion-designmarketing

Summary

Turns Claude Code or Codex into a motion-design studio for cinematic Remotion product videos.

Features

  • 104+ tested shot recipe cards with reference Remotion implementations
  • Full production-ready "Ink Press" video template, restyleable per product
  • Real page-screenshot capture pipeline for authentic product UI in motion
  • Beat-synced music support with frame-accurate sync verification
  • 149-effect royalty-free sound library plus BGM options
  • Deterministic, seeded rendering for reproducible output
  • Independent final-review pass against a quality/consistency checklist

Install This Skill

Add this skill to your favorite AI agent in a few steps.

Any AI agent

This skill is plain instructions — it works with any assistant that accepts custom instructions or system prompts.

  1. Copy the skill content with the button below.
  2. Paste it into your agent's instruction file or system prompt (for example AGENTS.md, .cursorrules, or a custom instructions field).
  3. Ask the agent to apply the skill whenever the task matches.

Skill Content

Markdown Content

Copy this content and use it with your preferred AI agent

# video-shotcraft: Cinematic Product Video Creation System

A self-contained production toolkit for Claude Code / Codex: 104+ shot recipe cards (each with a tested Remotion implementation and demo footage), one validated full-length template ("Ink Press"), reusable Remotion components, a royalty-free audio library (149 SFX across 16 categories plus BGM), and a six-stage production workflow.

## Choose a mode before producing anything

1. **Template mode** — reuse the Ink Press template's shot structure, swapping in the new product's screenshots, copy, and branding.
2. **Autonomous creative mode** — the agent independently drives product understanding, visual direction, shot mapping, storyboard, asset capture, and final cut with no stage-by-stage confirmation.
3. **Collaborative mode** — the agent proposes direction; the user confirms at five checkpoints (brief, decisions, visual direction, shot mapping, final storyboard) before final asset capture and rendering proceed.
4. **Single shot mode** — pull one shot recipe card from the gallery and adapt its tested demo implementation to new footage, without producing a full video.

## Core production rules

- Visual language must grow from the target product's existing design system (type, spacing, color, materials) — shot cards supply motion grammar and timing only, never a borrowed look.
- Reproducing real product UI requires real captured screenshots (2x resolution, full-page plus element-level masks); hand-drawn UI is only acceptable outside product-reproduction contexts.
- Each shot carries exactly one dominant motion idea; after key information lands, let the timeline rest (feedback favors longer holds and slower pacing over busy motion).
- When background music is used, analyze true BPM/phase, write the timeline against beat notation, and verify sync error stays within 3 frames; always export both a scored and an SFX-only cut.
- Shot implementation must follow the calibrated demo source tied to each named recipe card rather than reinventing parameters from scratch.
- All randomization uses fixed-seed PRNGs keyed to element index — no `Date.now()` or unseeded `Math.random()` — so renders are reproducible frame-for-frame.
- Verify shots incrementally with `npx remotion still` during production, then run an independent final review against the project's consistency/completeness/fidelity/data-safety checklist before delivery.

## Assets

- `assets/lib/` — Remotion components (PageCam, DigitRoll, Caption, etc.) meant to be copied into a new project and modified, not imported as a library.
- `assets/scripts/capture-template.mjs` — screenshot capture script for turning a live dev server into shot-ready page assets.
- `assets/audio/` — 149 SFX in 16 categories plus BGM options, with attribution notes.
- `demos/` — self-contained reference implementations for each shot card.
- `template/` — the full Ink Press Remotion project, rendered via `npm install && npx remotion render src/index.ts AiflPromo out/promo.mp4`.
- Public shot gallery: https://vincentwei1021.github.io/video-shotcraft/

Description

video-shotcraft is an agent skill that gives Claude Code and Codex everything needed to turn a real product or webpage into a cinematic promo video using Remotion. Instead of generating generic motion graphics, it builds videos out of real page screenshots, 2.5D camera moves, beat-synced cuts, and a library of purpose-built sound effects, so the result looks like it was cut by a motion designer who actually studied the product.

The skill ships with 104+ shot recipe cards (each a named, reusable camera/motion technique with a tested Remotion implementation), 161 rendered motion previews, and a full production-ready template called Ink Press that teams can restyle for their own product instead of starting from a blank timeline. It supports three workflows: reproducing the Ink Press template with a new product's assets, fully autonomous creative direction where the agent makes every storyboard and shot decision, and a collaborative mode with checkpoints for brief, visual direction, shot mapping, and final storyboard approval.

Under the hood it enforces its own quality bar: real screenshots for real product UI (no hand-drawn substitutes), one dominant motion idea per shot, frame-accurate beat sync when music is used, and deterministic seeded randomness so renders are reproducible. A separate review pass checks the finished cut against a consistency and quality checklist before delivery.

Related Skills

Skill: Anti-Slop Design

by Ferousco-dev

New

Stops AI-generated UI from defaulting to purple gradients and templated hero sections by forcing a named design direction first.

Design & Creative
1 views

Skill: Data Visualization

by Anthropic

New

Anthropic's official data-visualization skill: pick the right chart for the data, then build it with ready-to-run matplotlib, seaborn, and plotly patterns.

DevelopmentDesign & Creative
Browse all skills →