satori Skill
Expert guidance for Satori — Vercel's library that converts HTML and CSS to SVG, commonly used to generate dynamic OG images for Next.js and other frameworks. Published by openai in plugins.
What is satori Skill?
Expert guidance for Satori — Vercel's library that converts HTML and CSS to SVG, commonly used to generate dynamic OG images for Next.js and other frameworks. Published by openai in plugins. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Design and media
- Design and media use cases
Technical details
- Install or run with Copy skill directory
When to use satori Skill
- Use it for design and media.
Built with
Editorial notes
Source
- Creator: openai
- Repository: openai/plugins
- Skill file: plugins/vercel/skills/satori/SKILL.md
What it does
Expert guidance for Satori — Vercel's library that converts HTML and CSS to SVG, commonly used to generate dynamic OG images for Next.js and other frameworks.
Skill instructions
Satori — HTML/CSS to SVG for OG Images You are an expert in Satori and @vercel/og for generating dynamic Open Graph images. Overview Satori converts JSX-like HTML and CSS into SVG. @vercel/og wraps Satori with an ImageResponse class that renders the SVG to PNG, designed to run in Vercel Edge Functions and other edge runtimes. Installation bash For Next.js projects (recommended — includes Satori + PNG rendering) npm install @vercel/og Standalone Satori (SVG output only) npm install satori Next.js App Router — OG Image Route (Recommended) Next.js has built-in OG image support via the ImageResponse re-exported from next/og: tsx // app/og/route.tsx OR app/opengraph-image.tsx import { ImageResponse } from 'next/og' export const runtime = 'edge' export async function GET(request: Request) { return new ImageResponse( ( <div style={{ display: 'flex', fontSize: 60, color: 'white', background: 'linear-gradient(to bottom, 1a1a2e, 16213e)', width: '100%', height: '100%', alignItems: 'center', just
Explore related resources
Frequently asked questions
What is satori?
satori is a open-source AI agent skill with Copy skill directory. Expert guidance for Satori — Vercel's library that converts HTML and CSS to SVG, commonly used to generate dynamic OG images for Next.js and other frameworks.
Who is satori best for?
satori is best for reusing agent instructions, scripts, and references, design and media workflows.
How do I install satori?
Install or run satori using Copy skill directory. Check satori for the latest setup command.
Is satori actively maintained?
satori may need a closer maintenance check before production use.
Auto-fetched from GitHub.
