Communitygithub.com

LIUFelix2004/github-promo-video-skill

任意のGitHubアカウントから28秒以内のプロモーション動画を生成:実際のホームページキャプチャ、Star/Forkアニメーション、README要約をスライドイン。全文字をローカルレンダリング、ゼロAI生成、ゼロスペルミス。

github-promo-video-skill とは?

このスキルは、任意のGitHubアカウントに対して、28秒以内のプロモーション動画(いわゆる「GitHub動画レジュメ」)を自動生成するものです。動画は、実際のGitHubホームページのスクリーンショットを動的に立体的に表示するカバーセクション、Star数やFork数がアニメーションするホワイトカードカード(READMEから抽出した4つの要約がスライドイン)、そして紙テープ風のエンディングで構成されます。すべてのテキストは設定ファイルと実際のリポジトリデータに基づいてローカルでレンダリングされるため、AIによる誤字や架空のデータが混入するリスクがありません。主にClaude CodeやClineなどのエージェントシステムと連携し、ユーザーの「このGitHubのプロモーション動画を作って」といったリクエストに応えます。処理の流れは、アカウントの調査、スクリーンショットの取得、設定ファイルの作成、Pythonスクリプトによるレンダリング、フレーム抽出による品質チェック、納品までをカバーします。音楽ファイルはユーザー自身が提供する必要があります。

対応~Claude Code~Codex CLI~Cursor
npx skills add LIUFelix2004/github-promo-video-skill

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

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

ドキュメント

GitHub プロフィール動画レジュメ(同型パイプライン)

完成動画の構成(合計時間 ≤28秒、デフォルト約24.5秒):

  1. 動的カバー(5.5秒):対象アカウントのGitHubホームページの実際のスクリーンショットを、"断面が水平に寝ている遠景"から"直立した傾きのある近景"へ連続的に透視変換。薄いグラデーションの地面+ソフトな投影、白フラッシュによるトランジション。
  2. プロジェクトカード ×3(各6~6.5秒):GitHubスタイルの白いリポジトリカード。同一レイアウト – リポジトリ名、サブタイトル、赤/青の大きな数字が0から実際のStar/Fork数までカウントアップ、READMEから抽出した4つの要約が1つずつスライドイン、下部の技術タグがフェードイン。カード1と2はStar数が最も多い2つのプロジェクト。カード3は「その他のプロジェクト」概要(大きな数字=総リポジトリ数/直近1年のコントリビューション数)。
  3. 紙テープエンディング(4.5秒):紙テープが1つずつ貼られる(ユーザー名 / @github / ニックネーム / 代表作・Star数、最後は赤背景)。右側に大きな円形アバター(ピンクの枠線)がズームイン。
  4. 音楽:ユーザー提供のオーディオファイル(注意事項参照)、ナレーションなし。

厳格なルール

  • カバーは必ず実際にキャプチャしたホームページフレームを使用:scripts/capture_frame.py で自分でキャプチャするか、ヘッドレスブラウザでスクリーンショットを取得すること。AIでホームページを生成/再描画すること(リポジトリ名やデータを捏造するため)、または他人が提供したスクリーンショットをそのままカバーとして使用し、その旨を明示しないことは禁止。
  • すべての画面テキストはconfigからのみ取得:数字、リポジトリ名、要約行はすべてローカルでレイアウト(PIL使用)。AI動画生成にテキストを載せない – これがこのパイプラインで文字エラーがゼロであり、無関係なブランドロゴが表示されない根本的な理由。
  • プロジェクト紹介はREADMEを実際に読むことに基づく:Star数でソートして上位2~3のプロジェクトを選び、READMEを開いて各プロジェクト4つの1行要約にまとめてconfigに記述すること。リポジトリ一覧の説明でごまかすのは不十分。Star数3位のプロジェクトの内容が薄い場合(READMEが1行しかないなど)、カード3の概要に統合し、納品時にその旨を説明すること。
  • 納品前のフレーム抽出による自己チェック:少なくともカバーの開始フレーム、各カードの完成フレーム、エンディングフレームを確認。テキストや数字に問題があれば修正してから納品し、残った不具合をユーザーに正直に説明すること。

手順

1. アカウント調査

  • https://github.com/<user>?tab=repositories&sort=stargazers を開き、Starランキングと数を取得。
  • ホームページを開いて、表示名、フォロワー数、総リポジトリ数、直近1年のコントリビューション数、ピン留めリポジトリを確認。
  • Star数上位2~3のリポジトリのREADMEを1つずつ開き、各プロジェクトについて4つの要約(機能/形態/技術/特徴)を書き出す。技術タグは4~6個。

2. 素材の準備(assets/)

python3 scripts/capture_frame.py <user> assets/page_frame.png   # ホームページのスクリーンショット(実際のフレーム)
curl -L https://github.com/<user>.png -o assets/avatar.png       # アバター(またはホームページから切り抜き)
# BGM:ユーザー提供のオーディオファイルを assets/bgm.m4a に配置(任意)

3. configの作成

examples/config.example.json を config.json にコピーし、手順1で取得した実際のデータと要約を記入(パスはconfigファイルのディレクトリからの相対パス、または絶対パスを使用)。

4. レンダリング

python3 scripts/render_promo.py --config config.json --out out.mp4

必要なもの:Python 3 + Pillow + numpy、ffmpeg、Noto Sans CJKフォント(スクリプトが一般的なパスを自動検索します)。

5. フレーム抽出による自己チェック後に納品

ffmpegを使用して、0.4秒 / 各セグメントの中間点 / エンディングでフレームを1枚ずつ抽出して確認:数字とStar数が一致しているか、テキストにずれがないか、カバーが実際のページか、エンディングの紙テープが完全か。完成動画と「構成説明+既知の不具合」を一緒にユーザーに送付。

configフィールド一覧

フィールド説明
username / display_nameアカウント名 / 表示名(エンディングの紙テープで使用)
page_frame / avatar / bgm素材パス;bgm はnull可(音楽なし)
cardsちょうど3枚:{name, sub, n1, l1, n2, l2, rows[4], chips[]};n1/l1は赤色の大きな数字+ラベル(例:303 / Stars)、n2/l2は青色(例:33 / Forks);カード3ではRepositories / Contributionsが使用可能
finale_strips4行の紙テープテキスト、最後の行は自動で赤背景
durations任意:{cover, cards[3], finale} 秒数、合計からトランジションを除いた時間が28以下になるように調整

注意事項

  • 音楽の著作権:リポジトリにはBGMは付属しません。ユーザー自身が提供するか、使用権のあるオーディオファイルのみを使用してください。他人の動画から抽出した音声トラックを再配布しないでください。
  • フレームキャプチャサービス(thum.io)は初回リクエストでプレースホルダー画像を返すことがありますが、これは通常のキューイング現象であり、スクリプトは「2回取得」するように処理しています。
  • 動画全体にAppleなどの無関係なブランドロゴが表示されないのは設計上の結果です(ローカルレンダリングのため外部素材がなく、追加処理は不要)。

関連スキル