og-image

OG画像（アイキャッチ画像）

このスキルが使用するファイルはすべて、このSKILL.mdと同じフォルダ内に配置されています。パスはそのフォルダからの相対パスです。他のスキルや他のフォルダからのファイルは必要ありませんので、探しに行かないでください。ユーザーが別の場所を指定しない限り、生成するものはすべて現在のプロジェクトの out/og-image/ に保存してください。

シェアカードは、誰かがリンクをスクロールして通り過ぎる0.5秒の間に製品を売り込みます。その公式は次のとおりです:ブランドマーク、1行の短いタイトル、そしてその下に実際の製品を、下端で切り取って表示します。それ以外は何も必要ありません。

参考スタイル（references/ フォルダを参照）:

• control-panel.png — 上部中央にブランドマーク、非常に大きな1行タイトル、そして高さの約3分の1から始まり下部で途切れるアプリウィンドウ（サイドバー、ヘッダー、リスト）、右側に1つのフローティング詳細パネル。
• pulse.png — Pulseの実際のレイアウト（プロジェクトアイコン付きサイドバー、検索ヘッダー、プロジェクトページ（タブ付き）、フィード行、アクティビティレール）で構成された同じ構成。

ルール

1. 実際の製品を使用し、架空のものは使わない。 現在出荷されているアプリを表示すること。コードに存在する画面、タブ、ラベル、ステータス、機能のみを使用すること。たとえランディングページのコピーに記載されていても、架空の指標、チャート、機能は使用しないこと。サイト上のマーケティングデモにアプリにないものがあっても、そのデモをコピーしないこと。
2. メッセージは現在のサイトから取得する。 ユーザーがタイトルを指定しない限り、ピッチとサンプルコンテンツはライブのホームページ（ヒーローセクション、デモデータ）から取得すること。ユーザーがタイトルを指定した場合は、それをそのまま使用する（文末のピリオドはステートメント見出しとして許容されます。不明な場合は確認すること）。
3. 生成されたものではなく、生きているように見せる。 デモデータは実際のチームの1週間のように読める必要がある:
   • プロジェクトが独自のアバター画像を出荷している場合（例: public/landing/people）、実際の人物に見えるアバターを使用すること。ユーザーが指定した名前を使用すること。
   • エンティティにはアイコンまたは画像を使用し、素の文字は使用しないこと（例: プロジェクトアバターは、製品のテーマアクセントで着色されたカラーアイコンタイルとして表示）。
   • アクティビティグリッド、チャート、カウントは実際のリズムに従うこと: 月曜から金曜は変化に富んで忙しく、週末はほとんど空でたまに軽い日がある程度。今週は今日で途切れ、月ラベルは実際に月が始まるところに配置。均一または明らかに繰り返しパターンは絶対に避けること。
   • 相対時間、ID、ブランチ、ステータスはアプリで使用されている形式で表示すること。
4. コピーが主役。 タイトルはカード上で最も大きく最も濃いものであり、サムネイルサイズでも読めること（1200pxカード上で約60～72px、1行、タイトなトラッキング、製品の表示フォントを使用）。製品はその下に配置され、決して重ならないこと。
5. 製品独自のスタイルのみ。 背景、フォント、色、角丸、シャドウはプロジェクトのトークンから取得すること。タイトルの背後にある非常にソフトなアクセントカラーのグローは許容されるが、新しいパレット、グラデーション、ストックアートは使用しないこと。

手順

1. 調査

• ホームページ/ランディングコンポーネントとREADMEを読み、ピッチ、製品名、サンプルコンテンツを確認する。
• 実際のアプリシェル（レイアウト、サイドバー、ヘッダー）とプライマリ画面（ルート+コンポーネント）を見つける。正確なクラス名、テキストサイズ、タブラベル、ステータスチップトーン、避けるべき空/ローディング状態をメモする。
• トークン（グローバルCSS/テーマ）、フォント、アイコンライブラリ、ブランドマークコンポーネント、アバターアセットを見つける。
• 既存のものを確認する: 既存のOGルート/画像、ルートまたはページのheadにある og:image メタ、WEB_URL/サイトURL設定。

2. レンダリングルートを構築する

カードをプロジェクトのスタックで実際のページとして構築し、実際のフォント、トークン、コンポーネントを使用する（手描きのSVGや、プライベートデータを含むプロダクションのスクリーンショットではない）:

• 1つのルート、例: /og/<page>（TanStackの場合は routes/og.<page>.tsx、Nextの場合は app/og/<page>/page.tsx など）、noindex を設定し、アプリのクローム（ヘッダーやフッターなど）は含めない。
• 1つのコンポーネント（例: それが属するランディングの隣に og-image.tsx として配置）で、固定サイズ 1200×630 のフレームをレンダリングする。ルート要素に data-og-frame、overflow-hidden を設定する。
• レイアウト:
  • ブランドマークを上部中央、上端から約48pxの位置に配置。
  • タイトルをその下に中央揃えで配置。
  • アプリウィンドウを上部から約200～240px、左から約60pxの位置に配置し、残りのスペースよりも幅を広く取って、右端または下端からはみ出るようにする。上部の角を丸くし、ヘアラインの境界線と、製品のシャドウを適用する。
• ウィンドウ内部では、実際の画面を静的なレプリカとして再構築する: シェル（サイドバー+ヘッダー）とプライマリ画面。実際のコンポーネントからマークアップとクラスをコピーし、ソースファイルをヘッダーコメントで引用する。静的プロパティのみを使用し、クエリやタイマーは使用しない。
• フルサイズのレイアウトをカードに収めるには、ウィンドウを自然な幅（例: 1200px）で配置し、zoom（0.85～0.95）で縮小する。zoom は同じ要素の top/left も拡大縮小するため、意図したオフセット値をズーム係数で割ること。
• 実際のアプリと一致する場合、ランディングにある既存のデモプリミティブ（アバター、ソースバッジ、ヒートカラー）を再利用する。

3. キャプチャする

開発サーバーを起動（または既存のものを再利用）し、次を実行する:

node <このスキルのフォルダ>/scripts/capture.mjs \
  --url http://localhost:<ポート>/og/<ページ> \
  --out out/og-image/og-<ページ>.png

このコマンドは、1200×630のビューポートを2倍（→ 2400×1260）で開き、モーションの軽減を優先し、開発者用オーバーレイ（TanStack/Next/Vite/Astroのdevtools、トースター通知）を非表示にし、フォントの読み込みを待ち、[data-og-frame] のスクリーンショットを撮ります。他のオーバーレイを非表示にするには --hide を使用し、画像の読み込みが遅い場合は --wait を使用してください。

注意点:

• ポートの競合: そのポートが実際にこのアプリを提供していることを確認すること（lsof -iTCP:<ポート> -sTCP:LISTEN、およびページタイトルを確認）。別のローカルアプリが [::1]:<ポート> で localhost に応答してしまう場合があります。必要に応じて空いているポートを選択してください。
• エージェントセッションから開始されたバックグラウンド開発サーバーは、セッションとともに終了します。ユーザーがプレビューを継続する必要がある場合は、デタッチしてください（nohup … & disown）。
• 広範な :has() / body > div ルールでオーバーレイを非表示にしないでください。アプリのルートが非表示になり、キャプチャがタイムアウトする可能性があります。

4. 確認する

PNGを開き、デザイナーのように、フルサイズで、そして500px幅での見え方を想像しながら確認する:

• タイトルが1行で、何も重なっておらず、ウィンドウの上に十分なスペースがあること。
• devtoolsバッジ、カーソル、トースト、ローディングスケルトン、再生途中のアニメーションがないこと。
• 不自然にクリップされていないこと（ラベルがサイドエッジで単語の途中で切れている、チップが半分隠れているなど）。下端/右端のはみ出しは意図的です。ウィンドウの左端と上端は完全に表示されていること。
• データが実際のように見えること（ルール3）。満足できるまで繰り返し、最終的なPNGを public/ にコピーする。

5. メタタグを埋め込む

画像が属するページ（またはサイト全体のカードの場合はルート）に:

• og:type、og:title、og:description
• og:image — 絶対URLで、サイトURL設定から構築（例: ${WEB_URL}/og-<ページ>.png）
• og:image:width 2400、og:image:height 1260、og:image:alt（タイトルと製品ショットの内容を説明）
• twitter:card = summary_large_image、twitter:title、twitter:description、twitter:image

タグが提供されたHTMLに存在することを確認する（curl -s <ページ> | grep og:image）。PNGのURLが 200 image/png を返すことを確認する。

出力

ユーザーに次のことを伝える:

• PNGとレンダリングルート/コンポーネントの場所
• 再生成方法: 上記のキャプチャコマンド
• 画像に表示されている内容と、それが複製している実際の画面/コンポーネント
• 実際のデータから取得していないもの（サンプル名、プロジェクトなど）がある場合はその旨、そしてクローラが画像を解決できるようにサイトURL環境変数がプロダクションドメインを指している必要があること