remotion-video-creation
affaan-m/ECC · Agent Skill
提供使用 Remotion 在 React 中建立影片的 29 條規則,涵蓋 3D、動畫、音訊和字幕。
前往安裝 ↓總覽
| 發布者 | |
|---|---|
| 儲存庫 | affaan-m/ECC ↗ |
| 技能資料夾 | remotion-video-creation |
| 星 | 257,550 |
| 分支 | 38,524 |
| 附帶檔案 | 1 |
| 授權 | MIT |
| 最近更新 | 2026年9月12日 |
| 連結 | 技能原始碼 ↗ · 儲存庫 ↗ |
Mozgi 檢查
我們在技能檔案中發現的內容。詳細資訊需訂閱。
安裝
技能就是一個含 SKILL.md 的資料夾。選擇你的代理,在專案根目錄的終端機(macOS、Linux 或 Windows 的 Git Bash)執行指令。
把提示貼到 Claude、Codex 或其他助理:它會自行檢查並安裝技能。
Install the “remotion-video-creation” skill from mozgi.io (https://mozgi.io/skills/remotion-video-creation/) for me. 1. Download the archive: https://mozgi.io/skills/remotion-video-creation/download If it fails, take the skill folder from the source: https://github.com/affaan-m/ECC/tree/main/docs/ja-JP/skills/remotion-video-creation 2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me. 3. Put the “remotion-video-creation” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.). 4. Make sure <skills folder>/remotion-video-creation/SKILL.md exists. 5. Briefly tell me what this skill does and offer to try it on my task. If you cannot do a step yourself, tell me what to click or type.
git clone --depth 1 --branch main https://github.com/affaan-m/ECC.git /tmp/ECC mkdir -p .claude/skills cp -r /tmp/ECC/docs/ja-JP/skills/remotion-video-creation .claude/skills/remotion-video-creation
重新啟動 Claude Code — 技能就會出現在清單中,手動呼叫:/remotion-video-creation。要套用到所有專案,請放在 ~/.claude/skills。
git clone --depth 1 --branch main https://github.com/affaan-m/ECC.git /tmp/ECC mkdir -p .agents/skills cp -r /tmp/ECC/docs/ja-JP/skills/remotion-video-creation .agents/skills/remotion-video-creation
Codex 會從目前資料夾往上到儲存庫根目錄,在 .agents/skills 中尋找技能;用 /skills 或 $remotion-video-creation 呼叫。所有專案:~/.agents/skills。
git clone --depth 1 --branch main https://github.com/affaan-m/ECC.git /tmp/ECC mkdir -p .cursor/skills cp -r /tmp/ECC/docs/ja-JP/skills/remotion-video-creation .cursor/skills/remotion-video-creation
Cursor 啟動時會載入技能;在 Agent 聊天輸入「/」呼叫。Cursor 也會讀取 .claude/skills 與 .agents/skills。所有專案:~/.cursor/skills。
git clone --depth 1 --branch main https://github.com/affaan-m/ECC.git /tmp/ECC mkdir -p .gemini/skills cp -r /tmp/ECC/docs/ja-JP/skills/remotion-video-creation .gemini/skills/remotion-video-creation
任務符合時,Gemini CLI 會提議啟用技能,由你確認。所有專案:~/.gemini/skills。
安裝前請先檢視 SKILL.md 與相關檔案。點擊檔案即可預覽。
SKILL.md 內容
作者原文 · 唯讀使用場面
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 への動画埋め込み——トリミング、音量、速度、ループ、ピッチ
常見問題
remotion-video-creation 技能有什麼用途?
提供使用 Remotion 在 React 中建立影片的 29 條規則,涵蓋 3D、動畫、音訊和字幕。
如何安裝 remotion-video-creation?
打開本頁的「安裝」區塊並選擇你的代理 — Claude Code、Codex、Cursor 或 Gemini CLI:那裡有把技能資料夾複製到正確位置的現成指令。也可以複製「透過助理」分頁中的提示,讓助理自行檢查並安裝技能。
remotion-video-creation 適用哪些 AI 模型?
技能是純 Markdown 指示(Agent Skills 格式),因此 remotion-video-creation 適用任何讀取 SKILL.md 的代理:Claude Code、Codex、Cursor、Gemini CLI、GitHub Copilot、OpenCode 等。只有在任務符合技能描述時,模型才會載入指示。
remotion-video-creation 是免費的嗎?
此技能由 affaan-m 公開發布,採用 MIT 授權。技能本身免費 — 你只需向 AI 供應商支付實際使用的 token 費用。
安裝技能安全嗎?
技能是代理會遵循的指示,安裝前請閱讀 SKILL.md 及相關檔案。技能資料夾中的腳本只有在代理執行時才會運行 — 留意它的動作,不要授予多餘權限。
技能和 MCP 伺服器或外掛有何不同?
MCP 伺服器或外掛為模型提供新工具 — 會執行並回傳結果的程式碼。技能提供的是知識與流程:如何處理任務、要遵循哪些步驟、好的成果長什麼樣子。它不需要伺服器或 API 金鑰。