Generate dynamic Open Graph images by converting HTML and CSS to SVG with Satori.
npx skills add https://github.com/AarnavBaddam/skills --skill satori-aarnavbaddam
Please help me install this Agent Skill. Skill: satori Source: https://github.com/AarnavBaddam/skills/tree/main/satori Command: npx skills add https://github.com/AarnavBaddam/skills --skill satori-aarnavbaddam
opengraph-image.tsx and twitter-image.tsx convention files that auto-generate <meta property="og:image"> tags with no manual wiring. - HTML/CSS to SVG Rendering: Use Satori's Flexbox-based layout engine to compose images with inline styles, gradients, shadows, and custom fonts. - Dynamic Content: Inject URL parameters, post titles, and remote images into edge-rendered ImageResponse output at the standard 1200x630 size. - Use Case: A blog with hundreds of posts needs unique social cards. Create one app/blog/[slug]/opengraph-image.tsx file that fetches each post's title and renders a branded PNG at the edge. ## Quick Start Ask the AI to create a Next.js opengraph-image route using next/og that renders a dynamic title at 1200x630 on the edge runtime.High-intent search queries and answers about installing and using this skill.
Create an opengraph-image.tsx or twitter-image.tsx file in any route segment and return an ImageResponse from next/og. Next.js automatically generates the og:image meta tags, and you can inject dynamic content like post titles from route params.
Satori converts HTML and CSS into SVG output only. @vercel/og wraps Satori with an ImageResponse class that renders the SVG to PNG, designed for edge runtimes. In Next.js, use the next/og re-export for built-in optimizations.
No. Satori only supports Flexbox layout via inline styles, with display: flex as the default for all elements. CSS grid, external stylesheets, CSS-in-JS libraries, media queries, pseudo-elements, and animations are not supported.
Satori has no default system fonts, so text will not render unless fonts are loaded explicitly. Pass font data as ArrayBuffer in the fonts option, either by bundling .ttf files or fetching them from a CDN like Google Fonts.
The standard OG image size is 1200x630 pixels, which is the most widely supported dimension across social platforms. Set this in the ImageResponse options or export a size object from your opengraph-image convention file.
mcclowesImplement Next.js App Router dynamic routes and access params via await params.
Aadi-110iGenerates Open Graph social sharing images with platform specifications and HTML-to-image templates.
oakossGenerate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.
kitaekattConvert local HTML files to PDFs using headless Chromium via Playwright.