Communitygithub.com

JaviMaligno/agilabs-video-studio

公開されたブログ記事を、AGILabsブランドの短いナレーション付きアニメーション解説動画(30〜60秒、1080×1920)に変換し、Remotionを使ってローカルでレンダリングします。

agilabs-video-studio とは?

このスキルは、公開されたブログ記事を完全に制作された短編解説動画に変換するためのエンドツーエンドのワークフローを提供します。スクリプト生成(explainer-script)、アニメーションとタイムライン構成(explainer-animation)、テキスト読み上げ・音声品質保証(narration)の3つのサブスキルを調整し、Remotionプロジェクトで最終的にMP4にレンダリングします。出力はAGILabsブランドに準拠し、全画面・縦向き形式(1080×1920)で、厳格なファクトチェックとソースへの忠実性が組み込まれています。ワークフローの中心には承認ゲートがあり、スクリプトが承認されるまでレンダリングは行われません。また、既存の動画は変更するだけで簡単に再レンダリング可能で、改変された箇所だけTTSを再実行します。Claude Codeや類似のエージェント環境で使用するよう設計されており、プラグインのテンプレートフォルダからrsyncでプロジェクト構造を複製します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/JaviMaligno/agilabs-video-studio/tree/HEAD/skills/article-video

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

記事動画

記事から完成したMP4までの全工程を調整します。他のスキルは詳細を保持しており、必要なステップで読み込んでください。

  • explainer-script: スクリプトの作成とシーンごとのビジュアル選定。
  • explainer-animation: コンポーネントカタログ、タイムライン、特注コンポーネント、静止画。
  • narration: TTS(Cartesia、Kokoroフォールバック)、発音、音声QA。

Remotionプロジェクトはプラグインの template/ フォルダにあります(プラグインとしてインストールされている場合は ${CLAUDE_PLUGIN_ROOT}/template、プラグインリポジトリ内で skills/ の隣)。

譲れない条件

  • ファクトチェック. 画面上または音声上のすべての数値と主張は、記事の文に遡れるようにします。factcheck.md に表(主張、出現箇所、引用した記事の文)を保持します。数値は記事が書いた通りに正確に表示します:同じ丸め、同じ単位、「70%」ではなく「14/20」。不一致はタイムラインで修正し、記事では決して修正しません。ファクトチェックはナレーションと画面上の数値・主張のみを対象とし、それ以外は対象外です。ビジュアルはインパクトのために選ばれ、実験の文字通りの再現ではありません:イラスト的なシーン(実データを自由に再生、明確にするためのマーカー配置、様式化されたメカニズム)は問題ありません。厳密さは記事とそのリポジトリにあります。
  • 声. ナレーションは記事が書かれた通りに話します:一人称(「私は実行しました...」、「私は発見しました...」)、主張は記事と同じ強さにします。記事が慎重な表現なら(「この設定では」、「これら20回の実行では」)、スクリプトも慎重にします。ソースより誇張した表現は避けます。
  • ブランディング. AGILabsのみ:AGILabsバッジと javieraguilar.ai。個人名はカード、ポスター、キャプション、ファイルメタデータのどこにも入れません。
  • 承認ゲート. スクリプトが承認されるまでは何も構築しません。

ワークフロー

  1. 記事を選ぶ. 指定されたものを使用します。指定がない場合は、公開されている記事を読み、2〜3件の候補を提示します。各候補にはタイトル、フックとなる一文、主要な数値(引用)、ビジュアルアイデアを含めます。実験があり、明確な数値と描けるメカニズムがある記事を優先します。担当者に選んでもらいます。

  2. スクリプトを作成する explainer-script を使用:ナレーションの台詞(EN、ESは任意)、シーンごとのビジュアルアイデアをライブラリコンポーネントにマッピングするか「特注」とフラグ付け、すべての数値のソース文。

  3. 承認のため一旦停止. スクリプトを表示して待ちます。必要に応じて編集を適用し、再度表示します。

  4. 動画フォルダを作成する. テンプレートを生成ファイルなしでコピーします:

    • プラグインリポジトリ内: examples/<article-slug>/;
    • 他のリポジトリから: ./video/<article-slug>/。
    rsync -a --exclude node_modules --exclude out --exclude public/audio --exclude public/music \
      --exclude .env "${CLAUDE_PLUGIN_ROOT}/template/" "video/<article-slug>/"
    cd "video/<article-slug>" && npm ci
    

    承認されたスクリプトを script.md としてそのフォルダに保存します。

  5. タイムラインを構築する explainer-animation を使用:src/settings.ts を設定し(articleTitle、voices、subtitles、targetSeconds、poster)、スクリプトから src/timeline.ts を記述します。スクリプトでフラグ付けされた特注コンポーネントがあれば追加し、それぞれに frameState テストを付けます。

  6. Lint: npm run lint。すべての指摘(長さ、キャプションの速度、未知のコンポーネント)を修正します。コンポーネントを追加または変更した場合は npm test も実行します。

  7. ファクトチェック 記事に対して行い、factcheck.md を作成します(上記参照)。

  8. ナレーション: npm run tts、次に npm run audio-qa(narration を参照)。フラグが立ったものはすべて聞きます。npm run lint を再度実行します:実際の台詞の長さが見積もりに置き換わります。

  9. 静止画と確認. シーンごとに1枚、さらに約3秒ごとに1枚の静止画をレンダリングし、すべてのPNGを読みます。ブランド、セーフエリア、あふれの有無、記事と一致する数値、画面上のビートに合ったキャプションを確認します。ビルドが正常でもフレームが正しく見えるとは限りません。

  10. レンダリング: npm run render(縦向きEN)。スペイン語版の場合は -- --es、1920x1080の場合は -- --landscape。その後、npm run audio-qa を再度実行してミックスを測定します(-16 LUFS インテグレーテッド)。

  11. 納品: npm run deliver でポスターPNG、SRT、out/manifest.json を作成します。ポスターを確認します。MP4のパスとポスターを引き渡します。公開は別ステップです。

既存動画の再レンダリング

フォルダを開き、node_modules がない場合は npm ci を実行し、src/timeline.ts または設定を変更して、ステップ6から繰り返します。TTSはテキストが変更された行のみ再音声化します。

ファイルの配置

  • ソース(タイムライン、設定、特注コンポーネント、script.md、factcheck.md)はコミットされます。
  • out/、public/audio/、public/music/、node_modules/、およびすべての .mp4/.wav はコミットされません。
  • .env はTTSキーを保持し、決してコミットまたは印刷されません。

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

関連スキル