skills.rest
shepherdjerred
shepherdjerredCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

satori-constraints

Standardize JSX-to-SVG rendering constraints for predictable OG image generation.

Updated Aug 23, 2026
Search Tags:#css#fonts#svg#jsx#image-generation#og-image#satori
One-click install
npx skills add https://github.com/shepherdjerred/scout-for-lol --skill satori-constraints
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: satori-constraints
Source: https://github.com/shepherdjerred/scout-for-lol/tree/main/.claude/skills/satori-constraints
Command: npx skills add https://github.com/shepherdjerred/scout-for-lol --skill satori-constraints

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Satori constraints provide explicit rules and best practices to prevent invalid JSX-to-SVG rendering, ensuring reliable image generation outputs for OG cards and reports.

Core Features & Use Cases

  • Layout engine constraints (Yoga-based, only flexbox, and notable limitations)
  • Font and image handling guidance (supported font formats, embedding fonts, image data)
  • Troubleshooting and known issues with practical workarounds
  • SVG-to-PNG conversion guidance using resvg-js

Quick Start

Load Satori constraints in your image generation pipeline to enforce the rules before rendering.

Frequently Asked Questions about satori-constraints

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent invalid JSX-to-SVG rendering when generating OG images?▼

To prevent invalid JSX-to-SVG rendering for OG images, apply standardized Satori constraints that enforce supported CSS properties, font formats, and flexbox layouts, ensuring predictable server-side rendering outputs for social cards.

What CSS layout limitations exist for Satori SVG generation?▼

Satori SVG generation relies on a Yoga-based layout engine, meaning it only supports flexbox for CSS layouts. Applying defined constraints helps navigate these notable layout limitations during image generation.

Which font formats are supported for server-side OG image rendering?▼

Server-side OG image rendering supports specific font formats for embedding. Following documented Satori constraints ensures correct font loading and embedding across your image generation pipeline.

How do I convert Satori SVG output to PNG?▼

To convert Satori SVG output to PNG, use resvg-js for SVG-to-PNG conversion. This approach provides a reliable workflow for transforming server-side rendered SVGs into final image assets.

Why are my social cards failing to render emojis correctly in Satori?▼

Social cards fail to render emojis correctly in Satori due to known issues with emoji handling and image data. Applying explicit constraints and practical workarounds resolves these rendering failures.

Related Skills

Explore More Software Engineering Skills→
NagyViktNagyVikt
2

satori

Convert JSX-based HTML and CSS into SVG or PNG images for Open Graph metadata.

Community
Intermediate
NimaChuNimaChu
114

free-imagegen

Convert prompts into deterministic SVG assets and export PNG locally.

Community
Intermediate
josemartinrodriguezmortalonijosemartinrodriguezmortaloni

opentui

Develop terminal user interfaces with declarative React and SolidJS patterns.

Community
Advanced
vercelvercel
246

satori

Convert HTML/CSS into SVG Open Graph images for Next.js edge runtimes.

Official
Advanced