原始内容
name: remotion-editor description: Best practices for building video editors and interactive tools with Remotion metadata: tags: [remotion, editor, timeline, canvas, video-editing, react-performance] author: rayBlock
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.