social-preview

ソーシャルプレビュー

GitHub リポジトリ用の Open Graph ソーシャルプレビュー画像（1280x640px）を生成します。ソーシャルプレビューは、リポジトリが Twitter、LinkedIn、Slack、Discord で共有されるときに、最も大きな効果を発揮するビジュアルアセットです。

インストール

claude skill install social-preview

使用するタイミング

• 新しい公開リポジトリを共有する前に、ソーシャルプレビューが必要な場合
• プロジェクトのリブランディング時（新しいカラー、名前の変更、ロゴの更新）
• メジャーリリースやローンチ時 — マイルストーンを反映するためにプレビューを更新します
• マーケティング施策の前（LinkedIn の投稿、Twitter のスレッド、ブログでの紹介）
• 既存のリポジトリを監査して、ソーシャルプレビューの欠落や古さを確認します

使用方法

/social-preview generate [repo-path]   # Create OG image from repo context
/social-preview audit [repo-path]      # Check if social preview is set, dimensions correct

repo-path を省略した場合、デフォルトで現在の作業ディレクトリが指定されます。

---

手順：生成

各ステップを順番に実行します。ステップを省略しないでください。

ステップ 0：コマンドを解析する

次の形式を想定します：/social-preview {mode} [repo-path]

モード（generate または audit）を抽出します。指定がない場合や無効な場合：

Error: Invalid or missing mode.
Usage:
  /social-preview generate [repo-path]
  /social-preview audit [repo-path]

停止します。

repo-path が .git を含むディレクトリであることを検証します。省略された場合は cwd をデフォルトとして使用します。

ステップ 1：リポジトリをスキャンして情報を収集する

次の情報を収集します：

• プロジェクト名 — package.json の name、Cargo.toml の [package] name、pyproject.toml の name、またはディレクトリ名から取得します
• 説明／タグライン — package.json の description、リポジトリの説明、またはユーザーへの確認から取得します
• 主要な言語 — ファイル拡張子、パッケージマネージャーのファイル、または gh repo view --json primaryLanguage から取得します
• ロゴ／アイコン — logo.png、logo.svg、icon.png、icon.svg、.github/logo.png、assets/logo.*、branding/logo.* を確認します
• Git リモート — git remote get-url origin から owner/repo を抽出します
• 既存のソーシャルプレビュー — gh api repos/{owner}/{repo} で現在の状態を確認します

ステップ 2：テンプレートを選択する

テンプレートの選択肢をユーザーに提示します：

1. ダーク（推奨） — 暗い背景（#0d1117 または #141414）に明るいテキストを配置します。コントラストが最も高く、ほとんどのフィードで最適に表示されます。
2. ライト — 明るい背景（#fafbfc）に暗いテキストを配置します。特定のブランドの美的スタイルに合います。
3. ミニマル — 装飾を加えず、プロジェクト名とタグラインのみを表示します。すっきりとしたタイポグラフィを使用します。

質問：「どのテンプレートを使用しますか？ [dark/light/minimal]（デフォルト：dark）」

リポジトリで確立されたブランドカラーがある場合（CSS 変数、tailwind 設定、またはユーザー指定から検出）、アクセントカラーとして使用するか確認します。

ステップ 3：HTML テンプレートを生成する

次の内容を含む単独の HTML ファイル（1280x640px のビューポート）を作成します：

• プロジェクト名 — 大きく目立つように表示し、表示文字数は最大 40 文字にします。システム標準のフォントのみを使用します（外部フォントへの依存なし）。
• 1 行の説明／タグライン — プロジェクト名の下に、より細いウェイトで表示し、最大 80 文字にします。
• 主要な言語／技術アイコン（任意） — テキストベースの簡単な表示または Unicode 記号を使用します。外部画像への依存はありません。
• 作成者／組織のクレジット（任意） — 端の下部に小さく表示します。GitHub のユーザー名または組織名を使用します。
• 背景 — 単色、CSS グラデーション、または控えめな CSS パターン（ドット、グリッド）を使用します。外部画像は使用しません。

HTML ファイルを {repo-path}/social-preview.html に書き込みます（ユーザーが希望する場合は /tmp/social-preview-{repo-name}.html）。

ステップ 4：PNG にレンダリングする

次の 3 つのレンダリング方法から 1 つをユーザーに案内します：

オプション A — ブラウザーのスクリーンショット（最も簡単、依存関係なし）：

1. HTML ファイルを任意のブラウザーで開きます
2. ビューポートを正確に 1280x640 に設定します
3. ページ全体のスクリーンショットを撮ります
4. PNG として保存します

オプション B — Puppeteer/Playwright（自動化、Node が必要）：

node -e "
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 640, deviceScaleFactor: 2 });
  await page.goto('file:///PATH/TO/social-preview.html', { waitUntil: 'networkidle0' });
  await page.screenshot({ path: 'social-preview.png', clip: { x: 0, y: 0, width: 1280, height: 640 } });
  await browser.close();
})();
"

オプション C — クラウドレンダラー：

• URL ベースの生成をユーザーが希望する場合は、npx @vercel/og またはホスト型 OG 画像サービスを使用します。

ステップ 5：ソーシャルプレビューとして設定する

次の 2 つの方法から 1 つをユーザーに案内します：

方法 A — GitHub UI：

1. https://github.com/{owner}/{repo}/settings に移動します
2. 「Social preview」までスクロールします
3. 「Edit」->「Upload an image...」をクリックします
4. 生成した PNG をアップロードします
5. 「Save」をクリックします

方法 B — GitHub API：

gh api repos/{owner}/{repo} \
  --method PATCH \
  --field "social_preview=$(base64 -i social-preview.png)"

注：GitHub REST API は、base64 によるソーシャルプレビュー画像のアップロードを直接サポートしていません。最も確実な方法は UI からの設定です。自動化する場合は、リポジトリの設定ページを使用してください。

ステップ 6：検証

検証用 URL を提示します：

• Twitter Card Validator：https://cards-dev.twitter.com/validator
• Facebook Sharing Debugger：https://developers.facebook.com/tools/debug/
• LinkedIn Post Inspector：https://www.linkedin.com/post-inspector/inspect/
• Open Graph Debugger：https://opengraph.dev/

リポジトリの URL を貼り付け、プレビューが正しく表示されることを確認するようユーザーに伝えてください。

---

手順：監査

ステップ 1：リポジトリを確認する

repo-path がリモートを持つ Git リポジトリであることを検証します。

ステップ 2：現在のソーシャルプレビューの状態を取得する

gh api repos/{owner}/{repo} --jq '.description, .homepage'

カスタムのソーシャルプレビュー画像が設定されているか確認します（設定されていない場合、GitHub が自動生成します）。

ステップ 3：報告する

=== Social Preview Audit: {repo-name} ===

Custom preview set: {YES / NO (using auto-generated)}
Description:       {repo description or "MISSING -- add one"}
Homepage URL:       {homepage or "not set"}

Recommendations:
  - {actionable items: missing preview, missing description, etc.}

Run /social-preview generate to create one.

---

デザインの原則

• サムネイルサイズでも読みやすいこと。 ソーシャルフィードでは、幅約 400px でプレビューが表示されます。そのサイズでもテキストが読める必要があります。
• コントラストを高くすること。 ほとんどのプラットフォームでは、明るいテキストを使った暗い背景のほうが効果的です。コントラスト比は最低 4.5:1 にします。
• 小さなテキストは使わないこと。 幅 400px で読めないテキストは削除します。1280px のキャンバスでは、プロジェクト名を 48～72px にします。
• アスペクト比は 2:1 にすること。 標準は 1280x640 です。この比率を外れる部分はプラットフォームによって切り抜かれます。
• 外部依存関係をなくすこと。 HTML はネットワークリクエストなしでレンダリングできる必要があります。システムフォントのみを使い、CSS はすべてインラインにします。
• テキストは最小限にすること。 プロジェクト名と 1 行のタグラインだけにします。それ以外は読み取れる保証がありません。
• 実際の共有サイズでテストすること。 最終決定の前に、必ず 400x200 でプレビューします。

主な原則

1. Twitter、LinkedIn、Slack のフィードでは、暗い背景のほうが効果的です。
2. テキストは最大 2 行（名前とタグライン）にします。
3. フル解像度ではなく、実際の共有サイズ（幅 400px）でテストします。
4. PNG 形式で 1MB 未満にします。テキストの多い画像では、圧縮によるアーティファクトが発生する JPEG は避けます。
5. プロジェクトの説明やブランディングが変わったら、プレビューを更新します。
6. ソーシャルプレビューがない状態は、シンプルなプレビューよりもよくありません。GitHub の自動生成プレビューは画一的で、印象に残りません。

ファイル

• HTML テンプレート： {repo-path}/social-preview.html または /tmp/social-preview-{repo-name}.html
• PNG 出力： {repo-path}/social-preview.png

避けるべきパターン

• 外部フォント CDN へのリンクは使わないでください。確実にレンダリングできるよう、システムフォントのみを使います。
• ネットワークリクエストが必要な画像やロゴは使わないでください。SVG をインラインで記述するか、省略します。
• 1280px のキャンバスで 24px 未満のテキストは使わないでください（サムネイルサイズでは判読できません）。
• 雑然とした背景や写真の背景は使わないでください。単色またはグラデーションのみにします。
• 使用する色は合計 3 色以内にします（背景、メインのテキスト、アクセント）。
• 小さなサイズでは見えなくなる、角丸や複雑な図形は使わないでください。
• 画像に完全な URL を含めないでください。スペースの無駄であり、サムネイルでは読めません。