Skills
.Work. You
Rest

og-images

Community

Guide to OpenGraph/Twitter images with Next.js.

Design & Creative#nextjs#fonts#open-graph#image-response#og-images#twitter-cards#social-previews
Authorrichtabor
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Generate dynamic OpenGraph (1200x630) and Twitter (1200x600) share images using next/og ImageResponse, enabling consistent social previews across pages and posts without manual design work.

Core Features & Use Cases

  • Dynamic OG/Twitter images: Generate OpenGraph and Twitter share images (1200x630 / 1200x600) for pages, posts, and marketing pages.
  • Flexible routing options: Implement a file-based route or a dynamic API route and reference in metadata via generateMetadata().
  • Typography & assets support: Include custom fonts, avatars, and asset management to maintain a cohesive brand look, following Satori rules.

Quick Start

Add a Next.js route using next/og ImageResponse to render dynamic social preview images.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: og-images
Download link: https://github.com/richtabor/agent-skills/archive/main.zip#og-images

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.