remotion-video-creation

스타230,575

포크35,187

업데이트2026년 5월 17일 06:31

Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

affaan-m

affaan-m/ECC

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

使用場面

Remotion のコードを扱い、ドメイン固有の知識が必要な場合にこのスキルを使用してください。

使い方

詳細な説明とコード例については、各ルールファイルをお読みください：

rules/3d.md - Three.js と React Three Fiber を使用して Remotion で 3D コンテンツを作成する
rules/animations.md - Remotion の基本的なアニメーションスキル
rules/assets.md - Remotion で画像、動画、音声、フォントをインポートする
rules/audio.md - Remotion での音声とサウンドの使用——インポート、トリミング、音量、速度、ピッチ
rules/calculate-metadata.md - コンポジションの長さ、サイズ、プロパティを動的に設定する
rules/can-decode.md - Mediabunny を使用してブラウザが動画をデコードできるか確認する
rules/charts.md - Remotion のチャートとデータビジュアライゼーションパターン
rules/compositions.md - コンポジション、静止画、フォルダー、デフォルトプロパティ、動的メタデータの定義
rules/display-captions.md - TikTok スタイルのページと単語ハイライトに対応した Remotion での字幕表示
rules/extract-frames.md - Mediabunny を使用して指定タイムスタンプの動画フレームを抽出する
rules/fonts.md - Remotion で Google フォントとローカルフォントを読み込む
rules/get-audio-duration.md - Mediabunny を使用して音声ファイルの長さ（秒）を取得する
rules/get-video-dimensions.md - Mediabunny を使用して動画ファイルの幅と高さを取得する
rules/get-video-duration.md - Mediabunny を使用して動画ファイルの長さ（秒）を取得する
rules/gifs.md - Remotion のタイムラインと同期した GIF を表示する
rules/images.md - Img コンポーネントを使用して Remotion に画像を埋め込む
rules/import-srt-captions.md - @remotion/captions を使用して .srt 字幕ファイルを Remotion にインポートする
rules/lottie.md - Remotion に Lottie アニメーションを埋め込む
rules/measuring-dom-nodes.md - Remotion で DOM 要素のサイズを測定する
rules/measuring-text.md - テキストサイズの測定、コンテナへのテキスト適合、オーバーフローの確認
rules/sequencing.md - Remotion のシーケンスパターン——遅延、トリミング、項目の長さ制限
rules/tailwind.md - Remotion で TailwindCSS を使用する
rules/text-animations.md - Remotion のタイポグラフィとテキストアニメーションパターン
rules/timing.md - Remotion の補間曲線——線形、イージング、スプリングアニメーション
rules/transcribe-captions.md - Remotion で字幕を生成するための音声文字起こし
rules/transitions.md - Remotion のシーントランジションパターン
rules/trimming.md - Remotion のトリミングパターン——アニメーションの最初または最後をトリミングする
rules/videos.md - Remotion への動画埋め込み——トリミング、音量、速度、ループ、ピッチ

이 저장소의 다른 Skills

같은 저장소

data-scraper-agent

affaan-m/ECC

Build a fully automated AI-powered data collection agent for any public source — job boards, prices, news, GitHub, sports, anything. Runs on a schedule, enriches data with a free LLM (Gemini Flash), stores results in Notion/Sheets/Supabase, and learns from user feedback. Runs 100% free on GitHub Actions. Use when the user wants to monitor, collect, or track any public data automatically.

2026-07-09230.6k

plan-canvas

affaan-m/ECC

Open plans and HTML artifacts in a local browser canvas where the human annotates elements, chats, and approves or requests changes without leaving the page. Use when presenting a plan for review, or when feedback like "move this, change that" is easier pointed at than typed.

continuous-learning-v2

affaan-m/ECC

Instinct-based learning system that observes sessions via hooks, creates atomic instincts with confidence scoring, and evolves them into skills/commands/agents. v2.1 adds project-scoped instincts to prevent cross-project contamination.

2026-07-04230.6k

continuous-learning-v2

affaan-m/ECC

基于本能的学习系统，通过钩子观察会话，创建带置信度评分的原子本能，并将其进化为技能/命令/代理。v2.1版本增加了项目范围的本能，以防止跨项目污染。

2026-07-04230.6k

strategic-compact

affaan-m/ECC

任意の自動コンパクションではなく、タスクフェーズを通じてコンテキストを保持するための論理的な間隔での手動コンパクションを提案します。

2026-07-04230.6k

name	remotion-video-creation
description	Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。
metadata	{"tags":"remotion, video, react, animation, composition, three.js, lottie"}

使用場面

Remotion のコードを扱い、ドメイン固有の知識が必要な場合にこのスキルを使用してください。

使い方

詳細な説明とコード例については、各ルールファイルをお読みください：

rules/3d.md - Three.js と React Three Fiber を使用して Remotion で 3D コンテンツを作成する
rules/animations.md - Remotion の基本的なアニメーションスキル
rules/assets.md - Remotion で画像、動画、音声、フォントをインポートする
rules/audio.md - Remotion での音声とサウンドの使用——インポート、トリミング、音量、速度、ピッチ
rules/calculate-metadata.md - コンポジションの長さ、サイズ、プロパティを動的に設定する
rules/can-decode.md - Mediabunny を使用してブラウザが動画をデコードできるか確認する
rules/charts.md - Remotion のチャートとデータビジュアライゼーションパターン
rules/compositions.md - コンポジション、静止画、フォルダー、デフォルトプロパティ、動的メタデータの定義
rules/display-captions.md - TikTok スタイルのページと単語ハイライトに対応した Remotion での字幕表示
rules/extract-frames.md - Mediabunny を使用して指定タイムスタンプの動画フレームを抽出する
rules/fonts.md - Remotion で Google フォントとローカルフォントを読み込む
rules/get-audio-duration.md - Mediabunny を使用して音声ファイルの長さ（秒）を取得する
rules/get-video-dimensions.md - Mediabunny を使用して動画ファイルの幅と高さを取得する
rules/get-video-duration.md - Mediabunny を使用して動画ファイルの長さ（秒）を取得する
rules/gifs.md - Remotion のタイムラインと同期した GIF を表示する
rules/images.md - Img コンポーネントを使用して Remotion に画像を埋め込む
rules/import-srt-captions.md - @remotion/captions を使用して .srt 字幕ファイルを Remotion にインポートする
rules/lottie.md - Remotion に Lottie アニメーションを埋め込む
rules/measuring-dom-nodes.md - Remotion で DOM 要素のサイズを測定する
rules/measuring-text.md - テキストサイズの測定、コンテナへのテキスト適合、オーバーフローの確認
rules/sequencing.md - Remotion のシーケンスパターン——遅延、トリミング、項目の長さ制限
rules/tailwind.md - Remotion で TailwindCSS を使用する
rules/text-animations.md - Remotion のタイポグラフィとテキストアニメーションパターン
rules/timing.md - Remotion の補間曲線——線形、イージング、スプリングアニメーション
rules/transcribe-captions.md - Remotion で字幕を生成するための音声文字起こし
rules/transitions.md - Remotion のシーントランジションパターン
rules/trimming.md - Remotion のトリミングパターン——アニメーションの最初または最後をトリミングする
rules/videos.md - Remotion への動画埋め込み——トリミング、音量、速度、ループ、ピッチ