Communitygithub.com

reel-vectorial

プロフェッショナルなモーショングラフィックスリールを、コード(SVG/HTML in Remotion)のみで生成。1080×1920、30fps、35~55秒のフルプロダクション。

reel-vectorial とは?

このスキルは、Claude Codeを使用して、コードベースのモーショングラフィックスリール(縦型動画)を完全に自動生成するためのプロフェッショナルツールキットです。SVG/HTMLをRemotionでレンダリングし、ElevenLabsの高品質AI音声、単語単位の字幕、被写体が画面の40%以上を占めるアニメーションシーン、フックからループまでのストーリー構成など、プロフェッショナルな映像制作の全工程をサポートします。対応プラットフォームはClaude Codeで、macOS(Apple Silicon)とLinuxで動作します。このスキルは、新規アカウントの作成、音声・シーン・レンダリングの変更、既存リールへの修正など、あらゆるリール制作ワークフローをカバーします。キットは「参照」ディレクトリに詳細なドキュメントを持ち、品質基準(全シーンが動的であること、AI音声の品質、各タスクを1つずつ実行することなど)を厳格に適用します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/rafacu-dev/warasoft-reels/tree/HEAD/plugins/reel-vectorial/skills/reel-vectorial

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

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

ドキュメント

ベクターリール(コードでグラフィック)

このキットのリールは、止まることなく動き続けるミニカートゥーンです。

  • コードで描かれたシーン(RemotionのSVG/HTML):光と奥行きのある場所、演技する主人公、視聴者が何かをするときの主観ショット、説明するためのネオン図;
  • AI音声(ElevenLabs)と各単語のタイミング;
  • 単語ごとの大きな字幕。キーワードは、そのグラフィックと同じ色のピルに表示;
  • フレーム0にすでに奇妙なものが映っているフック質問。その答えが最後に来る;
  • 最初のシーンに戻る最後のショット(ループ);
  • グレイン、ビネット、衝撃時の揺れ。テンプレートに見えないように。

公開フォーマットの例: Dato Rarito(YouTube)。コードの例: 各新規アカウントに付属する Demo01 ビデオ(src/videos/Demo01.tsx):フック、スローモーション、スタンプ、図、キャラクター、CTAのモバイル、ループ。何かやり方がわからなくなったら、そこで確認してください。

パス(プロジェクトにスペースが含まれる可能性があります:パスは常に引用符で囲んでください):

  • <S> = このスキルのフォルダ。Claude Codeはロード時に表示します(「このスキルのベースディレクトリ」)。プラグインとしてインストールされた場合は ${CLAUDE_PLUGIN_ROOT}/skills/reel-vectorial。手動でコピーした場合は ~/.claude/skills/reel-vectorial。見つからない場合は検索:find ~/.claude -path "*reel-vectorial/scripts/nuevo-video.py"。
  • <P> = プロジェクト:ユーザーがClaude Codeで作業するフォルダで、cuentas/ を含むもの。スクリプトはカレントディレクトリ(または cuentas/ を含む最初の親ディレクトリ)から自動的に見つけます。--proyecto <パス> または REELS_PROYECTO 変数で強制できます。
  • <cuenta> = アカウントフォルダ名(curiosidades)または cuentas/curiosidades;<R> = <P>/cuentas/<cuenta>/produccion/remotion。
  • スキルのスクリプトは <P> から起動:python3 "<S>/scripts/nuevo-video.py" … <cuenta> …。アカウントのスクリプト(scripts/…)は <R> から:cd "<R>" && …。
  • Read、Write、Editでは絶対パスを使用。

0. 最初に

  1. 要件: Node 20+、Python 3.10+、ffmpeg。このマシンで初めての場合、またはインストール時に何かが失敗した場合は、references/instalacion.md に従ってください。macOS(Apple Siliconでテスト済み)向け。Linuxでも動作しますが、そのファイルに説明されている注意事項があります。

  2. どのアカウント? <P>/cuentas/*/produccion/remotion/src/kit/index.ts を確認。名前が指定されておらず、複数の可能性がある場合は、質問してください。アカウントがない場合、またはアカウントにキットがない場合は、references/cuenta-nueva.md に従ってください(アカウント、Remotionプロジェクト、サンプルビデオを作成)。

  3. アカウントの内容を読む:

    • contexto.md、estilo.md、tono-de-voz.md、ideas.md、referencias/;
    • produccion/ficha-reel.md:アイデンティティ、主人公、世界、シリーズ、音声、音楽、CTA、法的注意事項;
    • src/brand.tsx:パレットと意味のある色。

    カードの項目が「未定義」で、必要な場合は、作成前に質問してください。プロジェクトに独自のルールを持つ CLAUDE.md がある場合は、それが優先されます。

  4. 既存のものを確認: guiones/、videos/finales/(および存在する場合は Publicados/)、src/Root.tsx。テーマ、フック、またはツイストを繰り返さないでください。

  5. 前提を検証 一次情報源(研究、公式機関、公開された法律)を使用。バイラルなトリビアはたいてい半分偽物で、このフォーマットでは信頼性がすべてです。「そんなこと起こらなかった」というコメントはアカウントを台無しにします。検証できない場合は、検証可能な最も近い事実で言い換え、スクリプトの上部に説明を追加してください。

妥協しないこと(そしてその理由)

  • 動きのある充実したシーン。決して「静的で醜いもの」ではない。 このフォーマットの初期の試みは、まさにこれが原因で失敗しました:同じ背景上の小さなアイコン、そして後には正しいがフラットなシーン。高い仕上がりと音声のレベルに達していませんでした。各ショットは、光と奥行きのある場所であり、フレームの40%以上を占める被写体があり、キーワードで何かが変化します。何かを完了とみなす前に、フルサイズのフレームを確認:references/escenas.md。
  • 納品するものには高品質のAI音声。シミュレート音声は組み立て専用。 シミュレート音声(測定されたリズムで無音)は、クレジットを使わずにシーンを構築およびレビューするために使用します。キューは、ミュートプレビューとして以外は、シミュレート音声でのレンダリングを拒否します。本物の音声をローカルの貧弱なTTSに置き換えないでください。貧弱な音声は、シーンが良くてもビデオを台無しにします。
  • 一度に1つの重いタスク。 レンダリング、ローカル音声モデル、またはWhisperはメモリを大量に消費します。同時に2つ実行すると、コンピューターがフリーズまたは再起動する可能性があります(このキットが生まれたチームで発生)。スチル:nuevo-video.py stills、scripts/turno.sh 経由。レンダリングとカバー:キュー経由(scripts/noche.py)。ロック(<P>/recursos/turno-mac.lock)はプロジェクト内のすべてのアカウントで共有されます。手動でバックグラウンドレンダリングを開始しないでください。
  • 音は息継ぎや輝きがない。 impacto、impacto-grave、pop-grave、moneda-suave、monedas-suave のみ。単語にリンク。ウィッシュ、ライザー、ブライトは禁止:音声の下で、マイクに当たる風や金属的なきしみのように聞こえます。エンジンは禁止されたものを拒否します。
  • ショットは最大2.5秒(75フレーム。超えるとレンダリングが失敗します)、および1~2秒ごとの視覚的な変化。
  • フレーム0は充実: フックの奇妙なものと最初の字幕ブロック。フェードなし。ループ: 最後のショットは最初のショットの状態とカメラに戻る。
  • 各アカウントには独自のアイデンティティ。 パレット、主人公、ロゴ、署名は brand.tsx から取得。アカウント間でスタイルや主人公を混在させない。
  • キー: <P>/.env(または別のキーを使用するアカウントの場合は <R>/.env)に存在。読み取らず、印刷せず、チャットで要求しない:ユーザーが自分でファイルに貼り付けます。ElevenLabsアカウントが「異常なアクティビティ」をマークした場合は、停止して警告。
  • ライセンス、各納品時: ElevenLabsの無料プランの音声と効果は商用利用を許可しません。CC BY音楽はキャプションに帰属表示が必要。リールは「AIコンテンツ」としてタグ付け。references/audio.md。

ビデオの命名

ficha-reel.mdのシリーズと、src/Root.tsxのそのシリーズの最新番号の次の番号を使用:

対象パターン例(シリーズ「DATO CURIOSO」、#3)
フォルダ(public/vo/内の音声)<prefijo><NN>cafe03
音声テキスト<R>/vo-<carpeta>.txtvo-cafe03.txt
コンポーネント(src/videos/内)<Prefijo><NN>Cafe03
コンポジション<Componente>-<tema>Cafe03-cerebro
カバーPortada-<Componente>(ビデオがPortada<Componente>をエクスポート)Portada-Cafe03
スクリプトとビデオAAAA-MM-DD_<slug>_<tema>2026-11-10_dato-curioso_cafe-cerebro

日付は公開予定日:カレンダーがあればその日付。なければ次の空き日。

ビデオのフロー

タスク計画とともにフェーズを進めてください。ユーザーによる停止は2回のみ: スクリプト(音声クレジットを使用する前)とドラフト(最終版に移行する前)。それ以外(シーン、スチル、監査)はあなたがレビューします。

1. スクリプト → references/guion.md

  1. 以下を作成:
    • guiones/<nombre>.md:音声→シーンの表。各キーワードで描かれるもの、起こること、ビデオの世界、意味のある色、ソース、キャプション;
    • <R>/vo-<carpeta>.txt:各行に1フレーズ。
  2. レビューアを実行:
    python3 "<S>/scripts/revisar-voz.py" "<R>/vo-<carpeta>.txt"
    
    フレーム0で読まれる内容も表示されます。
  3. スクリプトを見せて承認を待つ(音声はElevenLabsのクレジットを約1文字あたり約1、ビデオあたり約700消費します)。

2. 骨組みと音声 → references/produccion.md

python3 "<S>/scripts/nuevo-video.py" crear <cuenta> <carpeta> <Componente> --serie "SERIE · #N"
python3 "<S>/scripts/nuevo-video.py" voz <cuenta> <carpeta>
  • crear:まだ音声がない場合はシミュレート音声を設定し、src/videos/<Componente>.tsxを書き込みます:約2秒のPendiente(n)ショットを単語で区切り、設定とカバーを含む。これにより、最初の1分から組み立てて確認できます。
  • voz:実際の音声を生成(API呼び出し。コンピューターに負荷をかけない)、完全に出力されたことを確認し、ポーズを圧縮。その後でのみシミュレート音声を置き換えます。
  • その後、Whisperをcomprobar-voz.pyで実行。ターン経由(正確なコマンドはvozが出力します)。
  • キーなし、または残高不足: レンダリングまでシミュレート音声を維持し、ユーザーに警告し、納品しないでください。

3. シーン → references/escenas.md + references/kit.md

  1. ビデオの世界(1つの一貫した場所)と各色の意味を決定。.tsxのヘッダーに記録。
  2. 各Pendiente(n)を、キット(import { … } from "../kit")を使用した実際のシーンに置き換えます:舞台、被写体、光、奥行き、およびA(frase, "palabra")で単語にリンクされたアクション。
  3. ショット間の継続は絶対フレーム(useF(t0))で計算。最後のショットは最初のショットを繰り返します。

4. 編集 → references/motor.md

  1. ショットを単語で区切り、cam()でカメラ、トランジション、被写体の位置に応じて上部・中央・下部の字幕、キー、効果、音楽。
  2. クリーンになるまで監査し、音声が変更されるたびに繰り返します:
    cd "<R>" && python3 scripts/auditar-escenas.py src/videos/<Componente>.tsx --frames
    
  3. コンポジションとカバーを登録(シミュレート音声でOK):
    python3 "<S>/scripts/nuevo-video.py" registrar <cuenta> <Componente> <Componente>-<tema>
    

5. スチルでのレビュー

python3 "<S>/scripts/nuevo-video.py" stills <cuenta> <Composición> --salida <carpeta temporal>/<Composición>
  • フレーム0、各ショットの中間、最後のフレーム、およびコンタクトシートhoja-<Composición>.jpgを出力。初回はRemotionがブラウザをダウンロードする場合があります。
  • Readでシートを確認し、フレーム0、ツイスト、グラフィック、最後のフレームをフルサイズで開きます。references/escenas.mdのリスト(「レビュー」)を使用。
  • 各ショットがスクリーンショットに耐えられるまで修正と繰り返し。カバーも出力(stills <cuenta> Portada-<Componente> --frames 0)。
  • トランジション、出現、表情の変化では、フレームごとのストリップを出力:stills <cuenta> <Composición> --tira <frame>:10。ジャンプや空フレームがないか確認。

6. レンダリング

python3 "<S>/scripts/nuevo-video.py" cola <cuenta> render <Composición> <nombre>
  • シミュレート音声の場合、または監査がクリーンでない場合は拒否。
  • オーケストレーターが停止している場合、スクリプトは起動方法を表示(macOSではcaffeinateを使用してスリープを防止)。<R>からバックグラウンドで起動:キューが空になると自動的に終了。
  • 終了後、noche.logでマスター(約 -14 LUFS、ピーク ≤ -1,5 dBTP)を確認し、ビデオを1fpsで確認。

7. 納品

  1. ユーザーに軽量コピー(videos/borradores/movil/)とカバーの場所を伝える。環境がファイル添付を許可する場合は添付。ライセンスを忘れずに伝える。
  2. 承認されたら、サフィックスなしでvideos/finales/に移動。古いものはシステムのゴミ箱へ。決してrmを使用しない。
  3. スクリプトの状態、ideas.md、カレンダーを更新(該当する場合)。
  4. finales/Publicados/はユーザー用:触らない。

既存のビデオへの変更

リクエスト何をするか
音声のフレーズを変更vo-<carpeta>.txtを編集 → voz … --solo N → Whisper → 監査(カットが移動) → スチル → レンダリング(キューがサフィックスr2で行を繰り返し。以前のレンダリングは先にゴミ箱へ)
音声全体をやり直しvoz <cuenta> <carpeta>:別途生成し、以前のものをvo/<carpeta>-anterior-…として保存
シーンを変更そのコンポーネントを編集 → stills --framesでそのショット → レンダリング
カバーを変更ビデオ内のPortada<Componente>を編集(タイトル、t0モーメント、align) → stills Portada-<Componente> --frames 0 → cola <cuenta> portada <Componente> <nombre>
フォーマットを別のアカウントに移行、またはキットを更新references/cuenta-nueva.md

典型的なエラー

  • Root.tsxがtiempos.jsonなしでビデオをインポート: キュー内のすべてのレンダリングとカバーが失敗する。そのビデオだけでない。そのためregistrarがこれを防ぐ。
  • A(…)またはカットの単語が実際の音声に存在しない(シミュレート音声はテキストを使用)。レンダリングがキューで失敗:監査が検出。
  • t0を無視するシーン: オブジェクト、ストローク、またはライトがカット時にジャンプし、ループが合わない。
  • ズーム < 1 または cam()なしのカメラ: 黒い端。
  • 暗いシーンへの白いフラッシュ: 空フレームのように見える。zoomまたはwhipを使用。
  • 小さなテキスト、またはシーン内で字幕を繰り返すテキスト。 1つの事実、1つの場所:数字は字幕またはグラフィックのどちらか一方のみ。
  • カバータイトルに18文字を超える行: 100pxで正しく分割されない(監査が警告)。
  • アカウント内でのsrc/kit/、src/engine/Reel.tsx、scripts/の編集: これらはスキルのもので、montar-cuenta.py --actualizarが同期。ビデオ固有のものはsrc/videos/へ。すべてに共通する部品はスキルに追加(assets/plantilla-proyecto/src/kit/)。
  • エフェクトまたは音楽の欠落: エンジンはそれらをスキップ(ブラウザコンソールで警告)。ビデオは同じように見えるが、その音はない。references/audio.md。

関連スキル