Skills
.Work. You
Rest

satori

Official

Generate dynamic OG images from HTML/CSS.

Design & Creative#social media#nextjs#svg#og image#satori#html to svg
Authorvercel-labs
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill simplifies the creation of dynamic Open Graph (OG) images, commonly used for social media previews, by converting HTML and CSS into SVG format.

Core Features & Use Cases

  • HTML/CSS to SVG Conversion: Leverages Satori to render UI designs into scalable vector graphics.
  • Dynamic Image Generation: Ideal for creating personalized OG images for blog posts, product pages, or user profiles.
  • Next.js Integration: Seamlessly integrates with Next.js App Router and convention-based image routes for automatic metadata generation.

Quick Start

Use the satori skill to generate an OG image with the title 'Welcome to My Blog'.

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: satori
Download link: https://github.com/vercel-labs/vercel-plugin/archive/main.zip#satori

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.