Remotion Editor Skill

This skill provides comprehensive guidance for developers building video editors on top of Remotion. It covers everything from low-level timeline math to high-level state management and AI integration.

When to use

Use this skill when:

• Building a timeline-based video editor.
• Implementing interactive canvas elements (DRAG, RESIZE, ROTATE).
• Optimizing React performance for 60fps playhead updates.
• Implementing complex features like Undo/Redo or AI captioning.

Rules Reference

Core Architecture

• State Optimization: Using the "Many Contexts" pattern to avoid global re-renders.
• Undo/Redo: Implementing a robust, memory-efficient history stack.
• Feature Flags: Managing complexity in a growing editor codebase.
• Editor-Remotion Sync: Maintaining consistency between editor state and Remotion.

Timeline & Math

• Timeline Math: Converting between pixels and frames; handling snapping.
• Timeline Interactions: Zooming, scrolling, and performance.
• Keyboard Shortcuts: Focus-aware global listeners.

Canvas & Rendering

• Canvas Logic: UV coordinate mapping and spatial transforms.
• Rendering Pipeline: Exporting videos and tracking job status.

Data & AI

• Asset Lifecycle: Managing blobs, IndexedDB, and remote assets.
• Captioning Workflow: Multi-stage transcription and subtitle editing.