Communitygithub.com

onovich/RepoCover

リポジトリ専用のソーシャルプレビュー画像を生成するオープンソースAIコーディングスキル。サムネイルサイズでも判読可能な1280×640の編集可能な画像を作成します。

RepoCover とは?

RepoCoverは、AIエージェント(Claude Code、Cursor、Codexなど)がリポジトリの情報を読み取り、GitHub Social Preview画像(1280×640)を自動生成するためのオープンソーススキルです。このスキルは、単なる汎用的なバナー生成ではなく、リポジトリの証拠に基づいた編集可能なベクターグラフィック(SVG)とそのラスター版(PNG)を作成します。主にコードネイティブなSVGを使用し、フォントはシステムフォントに依存するため、外部アセットが不要です。ワークフローは、リポジトリの調査、デザインレジャーの作成、SVGの構築、機械的検証、視覚的検証、そしてGitHubへのアップロード(明示的なリクエスト時のみ)で構成されます。開発者ツール、図表、ライブラリなど、ベクター形式で表現可能なリポジトリに最適で、リポジトリのアイデンティティを保持しながら、サムネイルサイズでも判読可能な高品質なソーシャルプレビューを提供します。

対応~Claude Code✓Codex CLI~Cursor
npx skills add onovich/RepoCover

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

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

ドキュメント

RepoCover は何をしますか?

リポジトリ固有のソーシャルプレビューを作成します。サムネイルサイズでも判読可能な状態を維持します。汎用的な生成バナーよりも、決定論的で編集可能な構成を優先します。

プロダクトの不変条件

  • 1280×640の正確なラスター画像(通常はPNG)を1,000,000バイト未満で提供します。
  • ラスター画像の隣に編集可能なソース(通常はSVG)を保持します。
  • 表示される主張、指標、スクリーンショット、証拠はリポジトリの証拠に基づいています。
  • 独自のハウススタイルを押し付けるのではなく、リポジトリのアイデンティティを保持します。
  • フルサイズおよび320×160での、明るい背景と暗い背景の両方での視認性を検証します。
  • 画像作成とGitHubアップロードは、別々の認可境界として扱います。
  • GitHubの提携や推奨を示唆しません。

適切なリファレンスを読み込む

すべてのカバーで以下の2つのファイルを読んでください。

次に、該当するルートのみを読んでください。

  • スクリーンショット、ランタイムキャプチャ、ロゴ、イラスト、SVG、スプライト、テクスチャ、またはその他の意味のあるビジュアルが存在する場合は、references/source-material.mdを読んでください。
  • 使用可能なスクリーンショット、ランタイムキャプチャ、ブランドマーク、またはリポジトリ所有の主要なビジュアルが存在しない場合は、references/cold-start.mdを読んでください。
  • 既存のカバーを更新する場合、候補を比較する場合、またはバージョン管理されたバッチを生成する場合は、references/version-regression.mdを読んでください。

存在するという理由だけで無関係なルートを読み込まないでください。references/design-recipes.mdは、古いプロンプトとの互換性のためのインデックスにすぎません。

ワークフロー

1. 証拠を調査し、範囲を定める

該当するAGENTS.mdファイル、README、パッケージメタデータ、意味のあるソースパス、ビジュアルアセット、および既存のソーシャルプレビューを読み取ります。以下を特定します。

  • リポジトリ名と主要なユーザータスク;
  • 1つの具体的なバリューステートメント;
  • 最大3つのプルーフポイント;
  • 最も強力なプロダクトエビデンス;
  • 確立されたビジュアルアイデンティティと除外すべき二次的な事実;
  • エビデンスモード:remote-static、local-static、build-tested、runtime-testedのいずれか。

静的な証拠のみが調査された場合に、ビルド、ランタイム、シーン、またはテストが実行されたと決して示唆しないでください。GitHubの画像要件が変更された可能性がある場合は、公式のGitHubドキュメントに対して確認してください。

リモートリポジトリの場合は、利用可能な公開または認証済みのGitHub証拠を使用して、そのREADME、ツリー、マニフェスト、意味のあるソースファイル、現在のプレビュー、および最も強力なビジュアルアセットを調査します。出力は永続的なユーザー向けディレクトリに保持し、ソースURLと主張の境界を記録します。ランタイムまたは代表的なインターフェースに到達できない場合は、その制限を述べ、リモート証拠が動作するローカルプレビューと同等であると偽らないでください。プレビュー可能なローカルプロジェクト、特に既存のインターフェースを持つWebプロジェクトは、通常、最も豊富な視覚的証拠を提供します。

2. 台帳を書き、ルートを選択する

描画を開始する前に、バンドルされたテンプレートからデザイン台帳を作成します。最低限、以下を記録します。

  • 約束、証拠、除外;
  • エビデンスモードと主張の境界;
  • ソースマテリアルの診断、またはコールドスタートのセマンティックスケルトン;
  • 選択されたプロダクションおよび解釈ルート;
  • マテリアル、アセットロール、トポロジー、およびラインに関する決定;
  • 該当する場合、出力バージョン、検証、およびプロモーションの評決。

アイデンティティを保持する最小のプロダクションルートを選択します。

  • コードネイティブSVG — 推奨: 開発者ツール、図、チャート、ロゴ、ライブラリ、および推論されたビジュアルシステム。
  • スクリーンショットまたはソースハイブリッド: 診断後も自己完結型のソースアーティファクトが最も明確な証拠である場合にのみ使用。
  • イラストハイブリッド: イラストがリポジトリのアイデンティティの中心である場合にのみ使用; 重要なテキストを含まないアートワークを生成し、正確な文言をSVGでオーバーレイします。

確立されたベクターシステムを模倣するためだけに画像生成を呼び出さないでください。

3. 編集可能なソースを構築しバージョン管理する

リポジトリに明確なアセット規約がない場合、またはユーザーが別の保存先を指定しない限り、デフォルトでdocs/social-preview.svgとdocs/social-preview.pngを使用します。

  • 1280 640のviewBoxと全キャンバスの背景を使用します。
  • 重要なコンテンツは、おおよそ72ピクセルの外側セーフエリア内に収めます。
  • コピー、プロダクトプルーフ、キャプション、署名を重ならない領域に分割します。
  • リポジトリが適切なライセンスフォントを同梱していない限り、システムフォントを使用します。
  • ローカルの証拠を埋め込むか、決定論的なSVGプリミティブで再現します; 外部ランタイム依存関係は避けます。
  • チャート、スクリーンショット、繰り返しマーク、波形は、それぞれの所有領域にクリップします。
  • 明示的に置き換えが要求されない限り、既存のカバーを保持し、バージョン管理された兄弟を作成します。

4. 機械的にレンダリングし検証する

Sharpが利用可能な場合、バンドルされたスクリプトでレンダリングします。

node <skill-directory>/scripts/render_svg.mjs <source.svg> <output.png>

名前付き出力の置き換えがスコープ内にある場合にのみ--forceを使用します。Codex Desktopでは、ワークスペースの依存関係をロードし、返されたNode実行可能ファイルとパッケージパスをNODE_PATHを通じて使用します; 許可なく依存関係をインストールしないでください。

PNGとSVGを検証します。

python <skill-directory>/scripts/validate_preview.py <output.png> --svg <source.svg>

標準のサムネイルシートを作成します。

node <skill-directory>/scripts/create_review_sheet.mjs <preview.png> <review.png>

Windowsのレガシーコードページでは、UTF-8ソースを読み取るツールのためにPYTHONUTF8=1を設定します。

5. 視覚的に検証する

ラスター画像をフルサイズで検査し、生成されたレビューシートを検査します。以下を確認します。

  • リポジトリ名とバリューステートメントが320×160でも読み取り可能であること;
  • プロダクトプルーフが認識可能で技術的に忠実であること;
  • テキスト、マーク、クロップ、パネル、装飾要素が衝突したりクリップされたりしていないこと;
  • 明るい背景と暗い背景の両方で構成が機能すること;
  • 表示されているすべての要素が約束または証拠にマッピングされていること;
  • デザインが該当するルート固有の拒否権をすべて通過すること。

左から右、上から下にスキャンし、一度に1つの名前付き欠陥を修正し、再レンダリングして検証を再実行します。既知の欠陥を引き渡さないでください。

バッチの場合は、コンタクトシートを作成し、候補を昇格させる前に偶発的な共有テンプレートのずれを検査します。

6. リクエストがあった場合のみアップロードする

アセットを作成しても、GitHubの設定を変更する権限は与えられません。アップロードが明示的にリクエストされた場合、以下を開きます。

https://github.com/<owner>/<repo>/settings

ソーシャルプレビュー → 編集 → 画像をアップロード… を使用し、アクティブなUI確認ポリシーに従います。アップロード後、公開リポジトリページをフェッチし、og:imageが新しい1280×640画像に解決されることを確認します。設定のサムネイルだけから成功を報告しないでください。

ハンドオフ

最終画像を表示し、以下を報告します。

  • 編集可能なソースパス;
  • ラスターパス、フォーマット、寸法、バイトサイズ;
  • 一文のデザイン根拠;
  • 検証とバージョンプロモーションのステータス;
  • アップロードステータス: 未リクエスト、保留中、または公開確認済み。

プロジェクト固有の出力を一時ディレクトリやモデル所有のディレクトリのみに残さないでください。

関連スキル