Repolode
投稿する
win4r

win4r/video-director

HTML、Canvas、SVG、Three.js、GSAP、Remotionで記述した短編動画の企画から制作、レンダリング、品質確認までをClaude Opus 5.5に指示するClaude Codeスキル。

GitHub で見る
スター
369
フォーク
33
未解決の Issue
0
最終コミット
9 日前

これは何？

video-directorは、コードで短編動画を制作するためのClaudeスキルです。映像を数値で設計し、HTML、Canvas、SVG、Three.js、GSAP、Remotionでアニメーションを記述して、フレームごとにMP4へレンダリングし、仕上がりを確認するようモデルを導きます。ローンチ動画、プロモーション、解説動画、データストーリー、キネティックタイポグラフィ、イラストを使った短編、ループ動画、SNS向けリールを想定しており、主にClaude Code上のClaude Opus 5.5向けに設計されています。

このスキルには、理由を添えた原則、各フェーズにチェックポイントを設けたワークフロー、2つのPythonスクリプトが含まれています。check_timeline.pyは、コードを書く前にプランを検証します。qa_video.pyは、レンダリングしたファイルを解析し、冒頭フレームの文字サイズとコントラスト、フラッシュ、カット、フリーズ、ループの継ぎ目、ラウドネス、無音部分、コンタクトシートを確認します。コピーして使えるショットライブラリは、意図的に同梱していません。

インストールするには、スキルのフォルダを~/.claude/skills/にコピーするか、zip形式のフォルダをカスタムスキルとしてアップロードします。スクリプトの実行にはffmpeg、numpyとPillowをインストールしたPython 3が必要です。HTMLのレンダリングには、PlaywrightとChromiumを含むNodeも必要です。

主な機能

  • 01タイムラインファイルを使って映像を企画し、コードを書く前にcheck_timeline.pyで検証します。
  • 02HTML、Canvas、SVG、Three.js、GSAP、Remotionでアニメーションを制作します。
  • 03レンダリングしたMP4の冒頭に表示される文字のサイズやコントラスト、フラッシュ、カット、フリーズを解析します。
  • 04qa_video.pyでループの継ぎ目と音声のラウドネス、無音部分を確認します。
  • 05スキルを評価する採点機能付きのテスト用ブリーフが含まれています。

ユースケース

  • CLIツールのREADMEをもとに、短いループ形式のローンチ動画を作る。
  • コードで描画したアニメーションを使い、アルゴリズムをナレーション付きで解説する。
  • CSVデータセットを、正確で誠実な数値を使ったSNS向けリールに仕立てる。
  • 既存のコード制作動画を見直し、テンポの遅さや読みにくい文字を改善する。

クイックスタート

  1. 1

    リポジトリをクローンする

    git clone https://github.com/win4r/video-director.git
  2. 2

    スキルフォルダーを自分の Claude Code スキルにコピーする

    cp -R video-director/video-director ~/.claude/skills/
  3. 3

    タイムラインチェッカーで計画を検証する

    python3 video-director/scripts/check_timeline.py timeline.json

使う前に知っておきたいこと

  • 主に Claude Code の Claude Opus 5.5 向けに構築されており、他のモデルでは評価されていません。
  • HTML 映像のレンダリングには、Playwright と Chromium を備えた Node、ffmpeg、Python パッケージが必要です。
  • 評価結果は構成ごとに1回の実行に基づいているため、根拠は限定的です。

収録されている特集

Claude Code のツール・スキル・プラグインAI エージェントのスキル集AI 動画・音声ツール

トピック

#claude-code#video-generation#animation#remotion#threejs#html-canvas#ffmpeg#agent-skill

よくある質問

video-director とは？
HTML、Canvas、SVG、Three.js、GSAP、Remotionで記述した短編動画の企画から制作、レンダリング、品質確認までをClaude Opus 5.5に指示するClaude Codeスキル。 video-directorは、コードで短編動画を制作するためのClaudeスキルです。映像を数値で設計し、HTML、Canvas、SVG、Three.js、GSAP、Remotionでアニメーションを記述して、フレームごとにMP4へレンダリングし、仕上がりを確認するようモデルを導きます。ローンチ動画、プロモーション、解説動画、データストーリー、キネティックタイポグラフィ、イラストを使った短編、ループ動画、SNS向けリールを想定しており、主にClaude Code上のClaude Opus 5.5向けに設計されています。
video-director は無料で使えますか？ライセンスは？
video-director は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
video-director は今もメンテナンスされていますか？
活発にメンテナンス中。video-director の最終コミットは 2026年10月30日 です。
video-director は何に使えますか？
CLIツールのREADMEをもとに、短いループ形式のローンチ動画を作る。 コードで描画したアニメーションを使い、アルゴリズムをナレーション付きで解説する。 CSVデータセットを、正確で誠実な数値を使ったSNS向けリールに仕立てる。 既存のコード制作動画を見直し、テンポの遅さや読みにくい文字を改善する。
video-director のインストール方法は？
リポジトリをクローンする: git clone https://github.com/win4r/video-director.git スキルフォルダーを自分の Claude Code スキルにコピーする: cp -R video-director/video-director ~/.claude/skills/ タイムラインチェッカーで計画を検証する: python3 video-director/scripts/check_timeline.py timeline.json
video-director はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/win4r/video-director

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト