← ClaudeAtlas

remotion-best-practiceslisted

Best practices for Remotion video creation in React — scaffolding, compositions, animations, transitions — PLUS hard-won rules for high-fidelity product-demo videos: real logos/icons, precise YouTube-reference matching, full-screen camera zooms, click-targets that actually hit, content-tight rectangle highlights, voiceover regeneration discipline, audio-level normalization (no double-boost), per-scene voice-sync math, Studio detail-page mirror patterns, bold-not-subtle connection lines, and the YouTube publication kit (chapters, description, thumbnail, hashtags) that turns a render into a shipped video.
anton-abyzov/vskill · ★ 35 · AI & Automation · score 85
Install: claude install-skill anton-abyzov/vskill
# /remotion-best-practices Use this skill any time you are writing a Remotion composition — animated demo videos, product walkthroughs, hackathon submissions, narrated presentations — anything rendered to MP4 via `npx remotion render`. The skill bundles two layers of knowledge: 1. **Remotion fundamentals** — the upstream rule files maintained by the Remotion team at `github.com/remotion-dev/skills` (compositions, animations, fonts, audio, transitions, FFmpeg, captions, etc.). 2. **Demo-video craft rules** — lessons captured from a long iteration cycle building the vskill / Skill Studio hackathon demo. These are the rules that, when broken, produce a "slideshow" instead of a believable product walkthrough. Read both layers before authoring. --- ## Scope and applicability > **The Layer 2 craft rules below were derived from one specific project: the > vskill / Skill Studio hackathon demo (Anthropic / Claude Code "Built with > Opus" hackathon, April 2026).** They reflect the look-and-feel of *that* > product — Studio chrome with breadcrumb header, sidebar tree, dark > verified-skill.com pages with mono fonts, terminal scenes, an editorial > "Inter is AI-slop, distinctive serif is excellence" thesis. > > **Do not apply these rules verbatim to unrelated demos.** A > consumer-mobile, a finance dashboard, a game, or a B2B SaaS pitch will > have its own visual language, its own pacing, and its own audience > expectations. A Save-then-Publish flow, a `verified-skill.com/queue` p