Communitygithub.com

ultimate-claude-render

HTMLアニメーション(GSAP)のシーンを1フレームずつレンダリングし、ナレーション、ワード単位の字幕、写真・動画挿入、実機アプリ画面、BGM、エフェクトを施し、-14 LUFSでミックス、自動QAまで行う動画制作スキル(Reels、Shorts、TikTok、YouTube、広告、プロダクトデモなど)。Linux、macOS、Windows対応。

ultimate-claude-render とは?

このスキルは、Claudeのコード生成能力を活用して、あらゆるブランド向けの動画(Reels、Shorts、TikTok、YouTube広告、プロダクトデモ)を完全プログラムで自動生成します。ユーザーはHTML + GSAPでシーンを記述し、`ucr` コマンドでフレームキャプチャ、音声合成(Edge/ElevenLabs/Fal/独自ファイル対応)、ワード単位の字幕、BGMと効果音のミキシング、-14 LUFSへのマスタリング、そしてQAレポートまでをワンコマンドで実行できます。プロジェクトは `narracao.txt`(台本)、`projeto.json`(設定)、`cena.html`(アニメーション)とブランド定義ファイル(`marca.json`)で構成され、すべてが決定論的で再現可能。`ucr doctor` で依存関係をチェックし、`ucr stills` で低コストにフレーム確認、`ucr preview` でリアルタイムプレビューも可能。QAではフレームの静止・黒落ち・音量・テキスト安全領域違反などを自動検出し、最終出力として高ビットレート版(22 Mb/s)と軽量版(30 fps)の2種類のMP4を生成します。

対応✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/PedroHenrique0713/ultimate-claude-render/tree/HEAD/skills/ultimate-claude-render

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

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

ドキュメント

ultimate claude render

動画とはHTMLページであり、その状態は時間 t の関数です。Claudeがシーンを書き、エンジンが各フレームを要求し(window.__seek(t))、Chromiumヘッドレスでスクリーンショットを撮り、ffmpegが音声、BGM、エフェクトと結合します。「録画」ではありません。すべては決定論的で、再実行可能です。

このリポジトリはエンジン+音声スクリプト+このスキルです。各ユーザーの動画は、このリポジトリ外のプロジェクトフォルダに置かれます。

1行も書く前に

  1. ucr doctor を実行します。 ffmpeg、Python(numpy/scipy)、Chromiumが不足している場合、正確なインストールコマンドを表示します。
  2. リポジトリを探します。 スキルは ucr instalar-skill でインストールされ、リポジトリはクローンされた場所にあります(ucr がPATHにあるか、node <repo>/bin/ucr.mjs で実行)。見つからない場合は、クローン先を尋ねてください。エンジンを再実装しないでください。
  3. 制作前に計画を立てます(動画の作り直しは高コスト):完全な台本、フォーマット、ブランド、利用可能なメディア、出典付きの数字、各フレーズに表示する内容。ユーザーが各ステップで承認します:台本 → スタイルフレーム(ucr stills) → プレビュー → 最終レンダリング。台本とフレームが承認される前に、動画全体をレンダリングしないでください。
  4. 既存のブランドを優先します。 ユーザーのブランドブック、Webサイト、アプリを読み、marca.json(色、フォント、ロゴ)を作成します。決してアイデンティティを創作したり、ロゴを再デザインしたりしないでください。テンプレート的に見えるクライアント素材は不合格です。実際の写真、色、ロゴを使用してください。

フロー

ucr novo meu-video --marca <marca-folder|_modelo|exemplo> --formato vertical
# narracao.txt、projeto.json、cena.htmlを編集
ucr tudo meu-video          # prep → midia → voz → tempos → batidas → sons → mix → render → QA

個別ステップ:ucr prep|midia|voz|tempos|batidas|sons|mix|render|qa <pasta>。低コスト確認:ucr stills <pasta> 2,8.5,15(任意の瞬間のPNGを生成、動画レンダリングなし)。リアルタイムプレビュー:ucr preview <pasta> --audio。

プロジェクトフォルダの構成:

ファイル説明
projeto.jsonフォーマット、fps、ブランド、音声、間、ミックス、レンダリング設定
narracao.txt話される台本;音声、字幕、シーンのタイミングになる
cena.htmlシーン(あなたが書くもの)
marca/ または別パスの marcamarca.json + フォント + ロゴ
midia/写真、動画、trilha.mp3、sfx/<tipo>/
build/、.ucr/、saida/生成物;バージョン管理しない

シーンの書き方

スケルトン:リポジトリの exemplos/modelo-cena.html を参照。<script> の順序が重要です(GSAP → marca → projeto → tema → tempos → midia → batidas → motor)。完全なAPIは references/motor-api.md にあります。以下は概要です:

  • M.fundo()、M.camera()、M.marca()、M.legendas(F, { chaves: [...] })、M.grande(texto, { t, fim })
  • M.celular(pai, {x,y,B})、M.janela(pai, {...})、M.terminal(pai, {linhas})、M.cursor/clicar/tocar
  • M.foto(pai, 'nome', {...})、M.video(pai, 'nome', { som: true })(midia/ から、ucr midia 実行後)
  • M.T('palavras') = これらの単語が発声される瞬間。すべての発話にアンカーしてください。固定秒数で指定しないでください。台本のフレーズを変更しても、シーンの他の部分がずれません。
  • M.som(t, 'tipo') でエフェクトをマーク;M.batida(t) でBGMのビートに合わせたカット。

シーンの黄金律:

  1. すべては t のみに依存します。 タイムラインのトゥイーン(M.tl)、カウンター、描画は M.ATUALIZAR.push(t => ...) で行います。setInterval、Date.now()、play() 付きの <video>、CSSアニメーションは使用禁止。
  2. プラットフォームの安全領域: QAが領域外のテキストを検出します(縦型:上部14%、下部25%)。
  3. 静止は視聴者を離脱させます。 約1.5秒以上の静止は避けてください(QAが測定し、視聴者はスキップします)。M.camera() でシーンを3D揺らします。暗い背景の暗いカードは動きに紛れるので、枠線と輝きを追加してください。
  4. 各発話でフレームを変更します。 新しいフレーズごとに、新しい画像または新しい動きを。
  5. レンダリング前に: 3〜4箇所で ucr stills を実行します。スクリプトエラー(変数の重複、ナレーションにない単語)は即座にページエラーメッセージとして表示されます。

オーディオ

  • 音声: projeto.json → voz.provedor:edge(無料、キー不要;テスト用、商用利用不可)、elevenlabs、fal、または arquivo(事前録音;Deepgram nova-3 でタイミング取得)。画面上のテキストは narracao.txt の内容、タイミングは音声から取得。
  • 間: "respiros": {"2": 1.2} = 2番目のフレーズの後に1.2秒の無音(画像表示に時間が必要な場合)。
  • BGM: midia/trilha.mp3(商用ライセンス必須!)または "sintetica"(オリジナル、ライセンス不要)。音声に合わせて自動で音量を下げます(ダッキング)。
  • エフェクト: 合成(whoosh、インパクト、クリック、きらめき、上昇、シャッター、ポップ、キー、重低音、紙)または midia/sfx/<tipo>/ 内のファイル。
  • マスター: −14 LUFS、−1.5 dBTP(Reels/TikTok/Shorts対応)、最終ファイルで測定。

詳細と落とし穴:references/audio.md。

QAと納品

レンダリングは自動でQAを実行します(saida/<nome> - QA.txt):サイズ、色(BT.709マーク)、静止フレーム、黒落ち区間、ラウドネス、ピーク、安全領域外テキスト。QAが緑でも承認ではありません:MP4を開き、フレームを確認し、聴いてください。QAの指摘と実際に確認した内容を報告してください。「完了」と宣言する前に必ず確認すること。

出力:saida/<nome>.mp4(納品用、22 Mb/s)および saida/<nome> - leve.mp4(30 fps、メッセージ送信用)。

問題発生時

  • シーンが準備完了にならない(A cena não ficou pronta):スクリプトエラー(ページのエラーメッセージが即座に表示される)、またはエラーがなければ <script>/メディアのパスが間違っている(その場合90秒のタイムアウト待ち)。
  • レンダリングが遅い:references/armadilhas.md を参照(filter blur、backdrop-filter、全画面blend、ページ内 <video>)。
  • 一部分のみ再レンダリング:ucr render <pasta> --de 30 --ate 38(パラメータが同じ場合、以前のレンダリングのチャンクを再利用)。
  • 長時間レンダリングの前に:df -h(1080×1920、45秒あたり約250 MBのチャンクと約145 MBの出力ファイル)。

参考文献(必要に応じて参照)

  • references/motor-api.md:M.* の全APIと例
  • references/marca.md:marca.json の全フィールド、フォーマット、ゾーン
  • references/audio.md:音声、間、BGM、エフェクト、ミックス、ライセンス
  • references/receitas.md:写真、動画挿入、実機画面、ターミナル、横型、バリエーション、パレット変更
  • references/armadilhas.md:これまでに発生した問題(測定済み)、テーマ別

関連スキル