Automates the creation of dynamic OpenGraph and Twitter share images using Next.js ImageResponse and Satori.
This skill streamlines the process of building high-quality, dynamic social preview images for Next.js applications by providing expert guidance on implementing both file-based and API route approaches. It ensures strict compliance with Satori's rendering rules, covering everything from optimized flexbox layouts and custom font loading to smart title casing and circular avatar integration. Whether you are building static landing pages or a dynamic CMS-driven blog, this skill helps you generate pixel-perfect 1200x630 and 1200x600 images that enhance your site's social media presence and SEO.
Key Features
01Enforces Satori rendering requirements like mandatory flexbox and inline styles
02Supports both static file-based routes and dynamic API routes for next/og
03Provides optimized layout patterns for OpenGraph and Twitter card dimensions
04Includes guidance for custom font loading and base64 image processing
0541 GitHub stars
06Implements smart title casing for automated CMS content formatting
Use Cases
01Automating social media preview generation for content-heavy CMS platforms
02Creating brand-consistent OG images for static landing and marketing pages
03Generating unique social share cards for dynamic blog posts or e-commerce products
