スキル remotion-best-practices
📦

remotion-best-practices

安全

RemotionとReactでプログラム的にビデオを作成

こちらからも入手できます: remotion-dev

プログラム的にビデオを構築するには、Remotionのコンポジションシステム、アニメーションパターン、およびメディア処理を理解する必要があります。このスキルは、ReactコンポーネントとRemotion APIを使用してプロフェッショナルなビデオを作成するためのドメイン固有のベストプラクティスを提供します。

対応: Claude Codex Code(CC)
📊 70 十分
1

スキルZIPをダウンロード

2

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

3

オンにして利用開始

テストする

「remotion-best-practices」を使用しています。 テキストのフェードインアニメーションを作成

期待される結果:

useCurrentFrameでspringヘルパーを使用して、最初の60フレームで不透明度を0から1にアニメーション化します。テキスト要素のstyle.opacityプロパティに補間された値を適用してください。

「remotion-best-practices」を使用しています。 バックグラウンド музыкиを追加する方法

期待される結果:

RemotionからAudioコンポーネントをインポートし、srcプロップで音声ファイルパスを 指定し、コンポジションでラップします。音量にはvolumeプロップ、速度調整にはPlaybackRateを使用してください。

セキュリティ監査

安全
v1 • 2/24/2026

Static analyzer flagged 555 patterns that are all false positives. The backtick patterns are markdown code fences in documentation files, not shell execution. The crypto warnings hit YAML frontmatter fields. Network findings are documentation URLs and example code. This is a documentation-only skill with no executable code that poses security risks.

32
スキャンされたファイル
3,157
解析された行数
0
検出結果
1
総監査数
セキュリティ問題は見つかりませんでした
監査者: claude

品質スコア

38
アーキテクチャ
100
保守性
87
コンテンツ
26
コミュニティ
100
セキュリティ
91
仕様準拠

作れるもの

ソーシャルメディアビデオの作成

Remotionコンポジションを使用して、一貫したブランディング、字幕、アニメーションを備えたソーシャルプラットフォーム用の自動化されたビデオコンテンツを作成します

データ可視化ビデオ

JSONデータソースから動的に更新されるアニメーション付きのチャート、グラフ、データ可視化を備えた説明ビデオを生成します

教育コンテンツ制作

オンラインコース用に同期された字幕、コードハイライト、ステップバイステップアニメーションを備えたチュートリアルビデオを作成します

これらのプロンプトを試す

基本的なコンポジションセットアップ 
アニメーション付きのテキストを表示するRemotionコンポジションを作成 帮助 meを作成してください。コンポジションは1920x1080で30fps、5秒間にしてください。
イージングを使用したアニメーション 
springアニメーションを使用して要素がフェードインしてスライドアップする方法を show meしてください。useCurrentFrameとspring設定を含んでください。
メディアアセットの統合 
ビデオファイルをインポートしてテキスト字幕をオーバーレイする必要があります。Videoコンポーネントの適切な使用方法 とタイムラインとの字幕の同期を show meしてください。
高度なシーケンス処理 
トランジションを備えた複数のシーンをシーケンス化する方法を explainしてください。複雑なビデオコンポジションのためにtrim、offset、duration制御を含んでください。

ベストプラクティス

  • ビデオエクスポート中に決定論的なレンダリングを確実にするために、常にuseCurrentFrame()でアニメーションを駆動してください
  • ネストされた要素をレンダリングアーティファクトを避けるために適切なレイアウトプロップを持つSequenceコンポーネントを使用してください
  • 出力ビデオでのflikkeringや欠落コンテンツを防ぐために、レンダリング前にフォントとアセットをプリロードしてください

回避

  • Remotionコンポジション内でReact Three FiberのuseFrame()を使用しないでください
  • 複雑なアニメーションではインラインオブジェクトスタイルを避けて、不必要な再レンダリングを防止してください
  • Remotionはヘッドレス環境でレンダリングされるため、ブラウザAPIが利用可能であると決して 가정하지 마세요

よくある質問

Remotionはどのビデオ形式をサポートしていますか？
Remotionはブラウザがデコードできる形式をサポートし，通常はMP4（H.264）、WebM、MOVです。レンダリング前にcan-decodeユーティリティを使用して形式の互換性を確認してください。
Remotionのレンダリングパフォーマンスを最適化する方法は？
コンポーネントにはmemo()を使用し、JSXでインライン関数を避け、アセットをプリロードし、適切な場合はSequenceコンポーネントでlayout='none'を使用してレイアウト計算を減少させます。
RemotionをTypeScriptで使用できますか？
はい、Remotionは組み込みの型定義を持つ優れたTypeScriptサポートを持っています。すべてのフックとコンポーネントは、より良い開発者Experienceのために完全に型付けされています。
異なるビデオアスペクト比に対処する方法は？
useVideoConfig()を使用してコンポジションの尺寸にアクセスし、幅と高さに基づいてレスポンシブ値を計算します。フルカバーレイアウトにはAbsoluteFillの使用を検討してください。
SequenceとAbsoluteFillの違いは何ですか？
Sequenceはタイムラインでのタイミングとレイヤリングを制御し、AbsoluteFillは要素をコンポジション全体を埋めるように配置します。它们は異なる目的を果たし、しばしば一緒に使用されます。
ビデオに字幕を追加する方法は？
@remotion/captionsパッケージを使用してimportSrt()でSRTファイルを解析し、useCurrentFrame()と同期させたレンダリングテキスト要素に字幕データをマッピングしてください。

開発者の詳細

作成者

remotion-dev

ライセンス

MIT

リポジトリ

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/remotion-best-practices

参照

main

ファイル構成

📁 rules/

📁 assets/

📄 charts-bar-chart.tsx

📄 text-animations-typewriter.tsx

📄 text-animations-word-highlight.tsx

📄 3d.md

📄 animations.md

📄 assets.md

📄 audio.md

📄 calculate-metadata.md

📄 can-decode.md

📄 charts.md

📄 compositions.md

📄 display-captions.md

📄 extract-frames.md

📄 fonts.md

📄 get-audio-duration.md

📄 get-video-dimensions.md

📄 get-video-duration.md

📄 gifs.md

📄 images.md

📄 import-srt-captions.md

📄 lottie.md

📄 measuring-dom-nodes.md

📄 measuring-text.md

📄 sequencing.md

📄 tailwind.md

📄 text-animations.md

📄 timing.md

📄 transcribe-captions.md

📄 transitions.md

📄 trimming.md

📄 videos.md

📄 SKILL.md