haidrrrry/claude-remotion-skill

Claude Remotion Skill – 概要

概要 – AnthropicのClaude (Claude Code, Claude Desktopなど) 用のオープンソースの エージェントスキル です。このスキルをインストールすると、簡単な英語でClaudeに動画の作成や編集を依頼できます。ClaudeはRemotionプロジェクト (動画用のReact + TypeScriptコード) を作成し、レンダリングを行い、ffmpegでフレームを抽出してチェックし、問題を修正した上で、洗練されたモーショングラフィックスクリップを返します。

重要性 – AIによる動画生成を、テキストから動画を生成するモデルによる「単調なフェード」から、プロの設計ルール（スプリング、スタッガード・エントランス、カラーグレーディング、グレイン、Ken Burnsエフェクトなど）に従った 決定論的でコードベースのモーショングラフィックス へと進化させます。出力結果は他のコードプロジェクトと同様に、完全に再レンダリング可能で編集可能です。

主要コンポーネント

• remotion-motion-graphics/ – Claudeが読み込むスキルフォルダ。
• SKILL.md – ワークフローの説明と10の譲れないモーションルール。
• references/ – すぐに使えるモーションパターンのスニペットと設計ガイドライン。
• assets/theme.ts – 色、イージング、スプリングのプリセットを定義する単一のテーマファイル。
• examples/ – すぐに実行可能なコンポジションを示すRemotionプロジェクト例。

始め方

1. リポジトリをクローンします。
2. remotion-motion-graphics フォルダを ~/.claude/skills (ユーザーごと) または プロジェクト内の .claude/skills (プロジェクトごと) にコピーします。
3. Claude Desktopで生成された .skill ファイルをアップロードするか、フォルダを自動的に認識するClaude Codeを使用します。
4. Claudeにプロンプトを入力します（例: “make a 3‑second logo sting”）。Claudeがスキルを読み込み、Remotionコードを書き、npm run renderを実行し、フレームを抽出・検査して、最終的なMP4を返します。

Claudeに依頼できること

• ロゴイントロ、縦型TikTok/Reelイントロ、キネティックタイポグラフィ字幕、ローワーサード、製品説明動画などの作成。
• モーションデザインの詳細（スタッガー、イージング、グレイン、Ken Burns）の追加や修正。
• 字幕と音声の同期、またはアニメーションとビートの同期。

設計哲学（「10のルール」） – 線形補間は使用せず、常にスプリング/ベジェ曲線を使用する。2〜3のプロパティを同時にアニメーション化する。すべての要素をスタッガー（ずらす）させる。素早い終了アニメーションを提供する。レイヤー順序は背景メッシュ → アセット → グラフィックス → グレーディング → グレイン/ビネット。静止画にはKen Burnsエフェクトを適用する。微細な呼吸モーションを追加する。タイミングはFPSに基づく。すべてのスタイルを単一の theme.ts に保持する。常にレンダリング → 検査 → 修正 → 再レンダリングのサイクルを回す。

デモと例 – README内のGIF/MP4デモで短いモーショングラフィックスクリップを確認できます。examples/ フォルダには4つの完全なコンポジション（プロフィールプロモ、Focus Catアプリプロモ、自己修正デモ、ビート同期コード編集）が含まれており、npm install と提供されたスクリプトでローカルでレンダリング可能です。

ライセンスとコミュニティ – MITライセンスで、自由に使用・フォーク可能です。プルリクエスト（新しいモーションパターン、パレット、バグ修正）による貢献を歓迎します。スターを付けていただけるとプロジェクトの認知度向上につながります。

---

非専門家向け要約

スキルをインストールしてClaudeに話しかけるだけで、Claudeがプロ並みのアニメーション動画を作成・レンダリングしてくれます。After Effectsは不要で、ずっと保持・調整可能なコードとして手に入ります。