skills.rest
MoizIbnYousaf
MoizIbnYousafCOMMUNITY
Explore all skills by this author →
Website𝕏@MoizIbnYousafGitHub

remotion-best-practices

Provides domain rules for writing, animating, and rendering Remotion React video compositions.

31|5|Updated Mar 12, 2026
Search Tags:#captions#animation#webgl#remotion#video rendering#programmatic video#react video
One-click install
npx skills add https://github.com/MoizIbnYousaf/marketing-cli --skill remotion-best-practices-moizibnyousaf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-best-practices
Source: https://github.com/MoizIbnYousaf/marketing-cli/tree/main/skills/remotion-best-practices
Command: npx skills add https://github.com/MoizIbnYousaf/marketing-cli --skill remotion-best-practices-moizibnyousaf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Writing programmatic videos in Remotion fails in non-obvious ways: CSS animations freeze during frame-by-frame renders, native media elements desync from the timeline, and hardcoded asset paths break in Lambda renders. This Skill grounds the agent in the correct Remotion patterns before any composition code is written. ## Core Features & Use Cases - Hard Rules & Anti-Patterns: Enforces frame-driven animation via useCurrentFrame, interpolate, and spring; forbids CSS transitions, Tailwind animate-* classes, and native img/video/audio elements. - On-Demand Rule Corpus: Indexes 30+ rule files covering timing, sequencing, transitions, captions, subtitles, audio visualization, fonts, Lottie, 3D with Three.js, Mapbox flyovers, and HtmlInCanvas WebGL effects. - Render Pipeline Guidance: Covers npx remotion studio preview, one-frame still sanity checks, full renders, and the --gl=angle flag required for WebGL output. - Use Case: A user asks for a CRT terminal glitch effect video. The Skill loads the HtmlInCanvas rules, applies the frame-driven onPaint pattern, scaffolds the composition under marketing/video/, and verifies it with a still render before the full render. ## Quick Start Ask the agent to scaffold a new Remotion composition with a frame-driven fade-in animation and render a one-frame preview to verify it.

Frequently Asked Questions about remotion-best-practices

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

FAQPage Schema
How do I animate elements in a Remotion video?▼

Drive every animation from useCurrentFrame() combined with interpolate() or spring(). CSS transitions, @keyframes, and Tailwind animate-* classes are forbidden because Remotion renders frame-by-frame and wall-clock animations freeze or stutter during rendering.

How do I render a Remotion video from the command line?▼

Run npx remotion render MyComposition out/video.mp4 after previewing with npx remotion studio. Always run a one-frame check first with npx remotion still MyComposition --frame=30 --scale=0.25 to catch missing assets and font issues in seconds.

Why does my Remotion render show blank frames with WebGL effects?▼

Blank frames occur because the default GL backend fails in headless renders. Add --gl=angle to the render command and set Config.setChromiumOpenGlRenderer("angle") in remotion.config.ts for parity with the Studio preview.

Can I use native img or video tags in Remotion compositions?▼

No, native img, video, and audio elements do not sync to Remotion's frame clock, causing video desync and audio drift. Use Img, Video, and Audio from @remotion/media, and reference public assets via staticFile() instead of hardcoded paths.

What are the limitations of HtmlInCanvas in Remotion?▼

HtmlInCanvas requires Chrome 149+ with the canvas-draw-element flag enabled, so non-Chromium machines cannot render it. Nesting HtmlInCanvas inside another HtmlInCanvas throws an error, and WebGL effects inside it require the --gl=angle render flag.

When should I not use this Remotion knowledge skill?▼

Do not use it to assemble finished MP4s from existing slide PNGs, which belongs to the video-content workflow, or for inspiration-to-MP4 pipelines from reference URLs. It is a knowledge layer for writing Remotion code, not an end-to-end video production pipeline.

Related Skills

Explore More Design & Creative Skills→
koralliskorallis
90

brand-guidelines

Create brand guidelines covering visual identity, tone of voice, and usage rules.

Community
Basic
engmiguelamaral-pngengmiguelamaral-png

webinar-content-repurposer

Transform webinar transcripts into blog posts, social posts, emails, and sales one-pagers.

Community
Advanced
whyiloveher2411whyiloveher2411

hyperframes-media

Automate audio, music, and sound effect asset creation for HyperFrames compositions.

Community
Advanced
barefootfordbarefootford
589

cut

Builds video edit timelines from processed footage libraries and exports them to NLE editors.

Community
Advanced