mcpField
G
github-social

github-social

github.com/scottwaterデザイン・UI156 回インストール1 週間前に更新
リポジトリ

github-social について

GitHubリポジトリのソーシャルプレビュー画像を作成するスキルです。リポジトリのビジュアルを整えるメンテナー向けに、画像生成、確認、サイズ、README.mdへの配置を案内します。

主な機能

  1. 01リポジトリとブランド情報の収集
  2. 021280×640 PNGプレビューの生成
  3. 03サムネイルでの可読性と安全領域の確認
  4. 04プレビュー画像をassetsに保存
  5. 05README.mdに相対画像リンクを追加

活用シーン

  1. 01リポジトリのソーシャルプレビュー作成
  2. 02縮小表示でのプレビューの読みやすさ確認
  3. 03生成画像をREADME.mdの先頭に配置

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/scottwater/skills --skill github-social

インストール後、Claude Code で/github-socialを入力して読み込まれたか確認します。

同梱ファイルagents/openai.yaml

詳細

GitHub ソーシャルプレビュー

このスキルのフォルダーにある repository-open-graph-template.png をセーフエリアの参照画像として使用し、GitHub リポジトリ用の 1280x640 PNG ソーシャルプレビューを作成します。

ワークフロー

  1. リクエストとローカルファイルからリポジトリの情報を集めます。リポジトリ名、オーナー／組織、README のタグライン、ロゴまたはマーク、ブランドカラー、主要言語、対象ユーザーを確認します。プロンプトテンプレート内の角括弧をすべて埋められたら完了です。
  2. 以下のテンプレートからプロンプトを作成し、組み込みの画像ツールを使って生成します。モデルを選択できる場合は gpt-image-2 を指定します。認証情報は不要なので、API キーを求めずに進めてください。ツールが参照画像を受け付ける場合は repository-open-graph-template.png を渡し、受け付けない場合は、記述されたセーフエリアの制約に従ってください。
  3. 生成結果を原寸と、およそ 320x160 のサイズで確認します。すべてのチェックに合格するまで、再生成または編集してください。リポジトリ名が正確に記載され、サムネイルサイズでも読みやすいこと、重要な要素がすべてセーフエリア内にあること、ガイド線、テンプレートの文言、透かし、意図しないロゴがないこと、ビジュアルがリポジトリの実際の目的や雰囲気に合っていることを確認します。
  4. ユーザーが別のパスを指定した場合、またはそのファイル名で既存ファイルを保持する必要がある場合を除き、assets/github-social-preview.png に保存します。必要に応じて assets/ を作成してください。
  5. ユーザーが不要と指定した場合や別の配置を求めた場合を除き、README.md の最上部に相対パスの Markdown 画像リンクを追加します。バッジやロゴより前に配置してください。既存のプレビューブロックがある場合は、二重に追加せず、リンク先を変更するか置き換えてください。README.md がない場合は、作成する前に確認してください。
![Repository social preview](assets/github-social-preview.png)

仕様

  • キャンバス：1280x640 ちょうど、不透明な PNG。GitHub の「Settings > Social preview」アップローダーが想定するサイズです。
  • セーフエリア：重要なテキスト、ロゴ、顔、視覚的な焦点はすべて、テンプレート内側の長方形（各端から約 80px）に収めます。重要でない背景のテクスチャは、範囲外にはみ出してもかまいません。
  • テキスト：大きく、簡潔で、コントラストを高くします。リポジトリ名に加え、短い説明は 1 つまでにします。
  • 構成：強いコンセプトを 1 つに絞り、コラージュにはしません。プロジェクトのマークをリポジトリ名とタグラインの横に配置するか、リポジトリに関連する抽象的なプロダクト／コードのモチーフを使います。配色はリポジトリのブランドに合わせ、一般的な紫から青へのグラデーションはブランドカラーである場合に限って使用します。
  • アセット：提供されている場合はプロジェクトの実際のアセットを使用します。提供されていない場合は、シンプルでオリジナルなマークを作成します。ユーザーが GitHub のブランディングを明示的に求めない限り、サードパーティのロゴや GitHub 自身のマークは使用しません。

プロンプトテンプレート

Create a GitHub repository social preview image for [REPO_NAME].

Canvas and purpose:
1280x640 PNG, opaque background, designed for GitHub repository Settings > Social preview / Open Graph sharing.

Repository signal:
[OWNER_OR_ORG], [SHORT_DESCRIPTION], [LANGUAGE_OR_DOMAIN], [BRAND_COLORS_OR_VISUAL_MOOD].

Composition:
Keep all important details inside an 80px safe margin on every edge, matching the safe-area of the GitHub repository-open-graph-template reference. Use a bold, readable layout with one primary focal element and generous spacing. The image must still read clearly when reduced to 320x160.

Text:
Render exactly: "[REPO_NAME]"
Optional subtitle, if useful: "[TAGLINE]"
Use large, crisp, high-contrast typography. No extra words.

Style:
[DISTINCTIVE_STYLE_DIRECTION]. Polished production design, not a screenshot of GitHub settings, not a generic stock banner.

Constraints:
Do not include red guide lines, template labels, watermarks, tiny text, unrelated logos, or GitHub branding unless explicitly requested. Keep edges crop-safe.

推奨設定：

model: gpt-image-2
size: 1280x640
quality: high
background: opaque
output_format: png

コメント

Markdown 対応