og-images
✓OpenGraph の作成と、next/og ImageResponse を使用した Twitter 共有画像をガイドします。レイアウト パターン、カスタム フォント、アバター、タイトル文字、Satori ルールについて説明します。 OG イメージ、Twitter カード、またはソーシャル プレビューを作成するときに使用します。
SKILL.md
Generate dynamic OpenGraph (1200x630) and Twitter (1200x600) images using next/og ImageResponse.
| opengraph-image.tsx | Facebook, LinkedIn, iMessage | 1200x630 | | twitter-image.tsx | Twitter/X cards | 1200x600 | | app/api/og/route.tsx | Dynamic API route | 1200x630 |
Place file-based routes in the relevant route directory (e.g., app/about/opengraph-image.tsx for /about).
OpenGraph の作成と、next/og ImageResponse を使用した Twitter 共有画像をガイドします。レイアウト パターン、カスタム フォント、アバター、タイトル文字、Satori ルールについて説明します。 OG イメージ、Twitter カード、またはソーシャル プレビューを作成するときに使用します。 ソース: richtabor/agent-skills。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/richtabor/agent-skills --skill og-images- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
og-images とは？
OpenGraph の作成と、next/og ImageResponse を使用した Twitter 共有画像をガイドします。レイアウト パターン、カスタム フォント、アバター、タイトル文字、Satori ルールについて説明します。 OG イメージ、Twitter カード、またはソーシャル プレビューを作成するときに使用します。 ソース: richtabor/agent-skills。
og-images のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/richtabor/agent-skills --skill og-images インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/richtabor/agent-skills
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-01