og-images
✓Guides creation of OpenGraph and Twitter share images using next/og ImageResponse. Covers layout patterns, custom fonts, avatars, title case, and Satori rules. Use when building OG images, Twitter cards, or social previews.
Installation
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).
Guides creation of OpenGraph and Twitter share images using next/og ImageResponse. Covers layout patterns, custom fonts, avatars, title case, and Satori rules. Use when building OG images, Twitter cards, or social previews. Source: richtabor/agent-skills.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/richtabor/agent-skills --skill og-images- Source
- richtabor/agent-skills
- Category
- </>Dev Tools
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is og-images?
Guides creation of OpenGraph and Twitter share images using next/og ImageResponse. Covers layout patterns, custom fonts, avatars, title case, and Satori rules. Use when building OG images, Twitter cards, or social previews. Source: richtabor/agent-skills.
How do I install og-images?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/richtabor/agent-skills --skill og-images Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/richtabor/agent-skills
Details
- Category
- </>Dev Tools
- Source
- skills.sh
- First Seen
- 2026-02-01