{"id":"94c4f57d-4694-4328-91e3-67cf26a4c55f","shortId":"JsxvpD","kind":"skill","title":"Satori HTML and CSS to SVG Image Generator by Vercel","tagline":"Satori is a high-performance library by Vercel that converts HTML and CSS markup into SVG images. It powers Open Graph image generation for dynamic social cards, blog previews, and branded assets using a JSX-like API with full Flexbox layout support and custom font rendering.","description":"# Satori HTML and CSS to SVG Image Generator by Vercel\n\nSatori is a high-performance library by Vercel that converts HTML and CSS markup into SVG images. It powers Open Graph image generation for dynamic social cards, blog previews, and branded assets using a JSX-like API with full Flexbox layout support and custom font rendering.\n\n## Installation\n\nRequirements and caveats from upstream:\n- // Use fs (Node.js only) or fetch to read the font as Buffer/ArrayBuffer and provide data here.\n- Satori currently supports three font formats: TTF, OTF and WOFF. Note that WOFF2 is not supported at the moment. You must specify the font if any text is rendered with Satori, and pass the font data as ArrayBuffer (we...\n- Satori can be directly used in browser, Node.js (>= 16), and Web Workers. It bundles its underlying WASM dependencies as base64-encoded strings and loads them at runtime.\n\nBasic usage or getting-started notes:\n- Satori supports the JSX syntax, which makes it very straightforward to use. Here’s an overview of the basic usage:\n- For example, the <input> HTML element, the cursor CSS property are not in consideration. And you can't use <style> tags or external resources via <link> or <script>.\n- <th>Example</th>\n\n- Source: https://github.com/vercel/satori\n- Extracted from upstream docs: https://raw.githubusercontent.com/vercel/satori/HEAD/README.md\n\n## Source\n\n- [Agent Skill Exchange](https://agentskillexchange.com/skills/satori-html-css-svg-image-generator/)","tags":["satori","html","css","svg","image","generator","skills","agentskillexchange","agent-skills","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-agentskillexchange","skill-satori-html-css-svg-image-generator","topic-agent-skills","topic-ai-agents","topic-ai-tools","topic-awesome-list","topic-claude-code","topic-codex","topic-cursor","topic-llm","topic-mcp","topic-npx-skills","topic-openclaw","topic-skills-catalog"],"categories":["skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/agentskillexchange/skills/satori-html-css-svg-image-generator","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add agentskillexchange/skills","source_repo":"https://github.com/agentskillexchange/skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 8 github stars · SKILL.md body (1,479 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:12:17.057Z","embedding":null,"createdAt":"2026-05-18T13:19:06.937Z","updatedAt":"2026-05-18T19:12:17.057Z","lastSeenAt":"2026-05-18T19:12:17.057Z","tsv":"'16':186 'api':49,107 'arraybuff':176 'asset':43,101 'base64':198 'base64-encoded':197 'basic':206,231 'blog':39,97 'brand':42,100 'browser':184 'buffer/arraybuffer':134 'bundl':191 'card':38,96 'caveat':120 'consider':245 'convert':21,79 'css':4,24,62,82,240 'current':140 'cursor':239 'custom':56,114 'data':137,174 'depend':195 'direct':181 'dynam':36,94 'element':237 'encod':199 'exampl':234 'fetch':128 'flexbox':52,110 'font':57,115,132,143,162,173 'format':144 'fs':124 'full':51,109 'generat':8,34,66,92 'get':210 'getting-start':209 'graph':32,90 'high':15,73 'high-perform':14,72 'html':2,22,60,80,236 'imag':7,28,33,65,86,91 'instal':117 'jsx':47,105,216 'jsx-like':46,104 'layout':53,111 'librari':17,75 'like':48,106 'load':202 'make':219 'markup':25,83 'moment':157 'must':159 'node.js':125,185 'note':149,212 'open':31,89 'otf':146 'overview':228 'pass':171 'perform':16,74 'power':30,88 'preview':40,98 'properti':241 'provid':136 'read':130 'render':58,116,167 'requir':118 'runtim':205 'satori':1,11,59,69,139,169,178,213 'skill' 'skill-satori-html-css-svg-image-generator' 'social':37,95 'source-agentskillexchange' 'specifi':160 'start':211 'straightforward':222 'string':200 'support':54,112,141,154,214 'svg':6,27,64,85 'syntax':217 'text':165 'three':142 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-tools' 'topic-awesome-list' 'topic-claude-code' 'topic-codex' 'topic-cursor' 'topic-llm' 'topic-mcp' 'topic-npx-skills' 'topic-openclaw' 'topic-skills-catalog' 'ttf':145 'under':193 'upstream':122 'usag':207,232 'use':44,102,123,182,224,250 'vercel':10,19,68,77 'wasm':194 'web':188 'woff':148 'woff2':151 'worker':189","prices":[{"id":"3ca3c252-75ba-4798-9b59-1e996e737666","listingId":"94c4f57d-4694-4328-91e3-67cf26a4c55f","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"agentskillexchange","category":"skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:19:06.937Z"}],"sources":[{"listingId":"94c4f57d-4694-4328-91e3-67cf26a4c55f","source":"github","sourceId":"agentskillexchange/skills/satori-html-css-svg-image-generator","sourceUrl":"https://github.com/agentskillexchange/skills/tree/main/skills/satori-html-css-svg-image-generator","isPrimary":false,"firstSeenAt":"2026-05-18T13:19:06.937Z","lastSeenAt":"2026-05-18T19:12:17.057Z"}],"details":{"listingId":"94c4f57d-4694-4328-91e3-67cf26a4c55f","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"agentskillexchange","slug":"satori-html-css-svg-image-generator","github":{"repo":"agentskillexchange/skills","stars":8,"topics":["agent-skills","ai-agents","ai-tools","awesome-list","claude-code","codex","cursor","llm","mcp","npx-skills","openclaw","skills-catalog"],"license":"mit","html_url":"https://github.com/agentskillexchange/skills","pushed_at":"2026-05-18T19:02:17Z","description":"The open catalog of AI agent skills — 2,000+ security-scanned skills for Claude Code, Cursor, Codex, and more.","skill_md_sha":"ad1934af99aa1410f48447c68ef0b29b823d7147","skill_md_path":"skills/satori-html-css-svg-image-generator/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/agentskillexchange/skills/tree/main/skills/satori-html-css-svg-image-generator"},"layout":"multi","source":"github","category":"skills","frontmatter":{"name":"Satori HTML and CSS to SVG Image Generator by Vercel","description":"Satori is a high-performance library by Vercel that converts HTML and CSS markup into SVG images. It powers Open Graph image generation for dynamic social cards, blog previews, and branded assets using a JSX-like API with full Flexbox layout support and custom font rendering."},"skills_sh_url":"https://skills.sh/agentskillexchange/skills/satori-html-css-svg-image-generator"},"updatedAt":"2026-05-18T19:12:17.057Z"}}