Skill 詳細

remotion-editor

Remotionでタイムラインベースの動画エディターとインタラクティブツールを構築するためのベストプラクティス。タイムラインの計算、キャンバス、状態を網羅。

一致度直接一致動画編集向けにレビュー済み

出典rayblock/remotion-editor-skill外部ソース

報告インストール数24人気度の参考値

使用前に確認

自動レビューは関連性のみを確認し、安全性や推奨を保証しません。使用前に出典の説明を読んでください。

skills.sh で見る（外部ページ）GitHub で SKILL.md を読む（外部ページ）

保存された出典プレビュー

SKILL.md

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
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](rules/state-optimization.md)**: Using the "Many Contexts" pattern to avoid global re-renders.
- **[Undo/Redo](rules/undo-redo.md)**: Implementing a robust, memory-efficient history stack.
- **[Feature Flags](rules/feature-flags.md)**: Managing complexity in a growing editor codebase.
- **[Editor-Remotion Sync](rules/editor-remotion-sync.md)**: Maintaining consistency between editor state and Remotion.

### Timeline & Math
- **[Timeline Math](rules/timeline-math.md)**: Converting between pixels and frames; handling snapping.
- **[Timeline Interactions](rules/timeline-interactions.md)**: Zooming, scrolling, and performance.
- **[Keyboard Shortcuts](rules/keyboard-shortcuts.md)**: Focus-aware global listeners.

### Canvas & Rendering
- **[Canvas Logic](rules/canvas-logic.md)**: UV coordinate mapping and spatial transforms.
- **[Rendering Pipeline](rules/rendering-pipeline.md)**: Exporting videos and tracking job status.

### Data & AI
- **[Asset Lifecycle](rules/asset-lifecycle.md)**: Managing blobs, IndexedDB, and remote assets.
- **[Captioning Workflow](rules/captioning-workflow.md)**: Multi-stage transcription and subtitle editing.

GitHub で全文を読む