Update to Vercel

{
  "name": "satori",
  "description": "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.",
  "included_files": [
    {
      "relative_path": "agents/openai.yaml",
      "size_in_bytes": 171
    }
  ],
  "skill_md_contents": "---\nname: satori\ndescription: 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.\nmetadata:\n  priority: 4\n  docs:\n    - \"https://github.com/vercel/satori\"\n    - \"https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image\"\n  sitemap: \"https://nextjs.org/sitemap.xml\"\n  pathPatterns:\n    - 'app/**/og/**'\n    - 'app/**/og.*'\n    - 'app/**/opengraph-image.*'\n    - 'app/**/twitter-image.*'\n    - 'src/app/**/og/**'\n    - 'src/app/**/og.*'\n    - 'src/app/**/opengraph-image.*'\n    - 'src/app/**/twitter-image.*'\n    - 'pages/api/og.*'\n    - 'pages/api/og/**'\n    - 'src/pages/api/og.*'\n    - 'src/pages/api/og/**'\n    - 'apps/*/app/**/og/**'\n    - 'apps/*/app/**/og.*'\n    - 'apps/*/app/**/opengraph-image.*'\n    - 'apps/*/app/**/twitter-image.*'\n  importPatterns:\n    - 'satori'\n    - 'satori/wasm'\n    - '@vercel/og'\n    - 'next/og'\n  bashPatterns:\n    - '\\bnpm\\s+(install|i|add)\\s+[^\\n]*\\bsatori\\b'\n    - '\\bpnpm\\s+(install|i|add)\\s+[^\\n]*\\bsatori\\b'\n    - '\\bbun\\s+(install|i|add)\\s+[^\\n]*\\bsatori\\b'\n    - '\\byarn\\s+add\\s+[^\\n]*\\bsatori\\b'\n    - '\\bnpm\\s+(install|i|add)\\s+[^\\n]*@vercel/og\\b'\n    - '\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@vercel/og\\b'\n    - '\\bbun\\s+(install|i|add)\\s+[^\\n]*@vercel/og\\b'\n    - '\\byarn\\s+add\\s+[^\\n]*@vercel/og\\b'\n---\n\n# Satori — HTML/CSS to SVG for OG Images\n\nYou are an expert in Satori and `@vercel/og` for generating dynamic Open Graph images.\n\n## Overview\n\n**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.\n\n## Installation\n\n```bash\n# For Next.js projects (recommended — includes Satori + PNG rendering)\nnpm install @vercel/og\n\n# Standalone Satori (SVG output only)\nnpm install satori\n```\n\n## Next.js App Router — OG Image Route (Recommended)\n\nNext.js has built-in OG image support via the `ImageResponse` re-exported from `next/og`:\n\n```tsx\n// app/og/route.tsx  OR  app/opengraph-image.tsx\nimport { ImageResponse } from 'next/og'\n\nexport const runtime = 'edge'\n\nexport async function GET(request: Request) {\n  return new ImageResponse(\n    (\n      <div\n        style={{\n          display: 'flex',\n          fontSize: 60,\n          color: 'white',\n          background: 'linear-gradient(to bottom, #1a1a2e, #16213e)',\n          width: '100%',\n          height: '100%',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        Hello, OG Image!\n      </div>\n    ),\n    { width: 1200, height: 630 }\n  )\n}\n```\n\n## Convention-Based OG Images (Next.js 13.3+)\n\nPlace an `opengraph-image.tsx` or `twitter-image.tsx` file in any route segment:\n\n```tsx\n// app/blog/[slug]/opengraph-image.tsx\nimport { ImageResponse } from 'next/og'\n\nexport const alt = 'Blog post image'\nexport const size = { width: 1200, height: 630 }\nexport const contentType = 'image/png'\nexport const runtime = 'edge'\n\nexport default async function Image({ params }: { params: { slug: string } }) {\n  const post = await getPost(params.slug)\n\n  return new ImageResponse(\n    (\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: '100%',\n          height: '100%',\n          background: '#000',\n          color: '#fff',\n          fontSize: 48,\n        }}\n      >\n        <div>{post.title}</div>\n      </div>\n    ),\n    { ...size }\n  )\n}\n```\n\nNext.js auto-generates the `<meta property=\"og:image\">` tag for these files.\n\n## Standalone Satori (SVG Only)\n\n```ts\nimport satori from 'satori'\nimport { readFileSync } from 'fs'\n\nconst svg = await satori(\n  <div style={{ display: 'flex', color: 'black', fontSize: 40 }}>\n    Hello from Satori\n  </div>,\n  {\n    width: 1200,\n    height: 630,\n    fonts: [\n      {\n        name: 'Inter',\n        data: readFileSync('./fonts/Inter-Regular.ttf'),\n        weight: 400,\n        style: 'normal',\n      },\n    ],\n  }\n)\n```\n\n## CSS Support and Limitations\n\nSatori uses a subset of CSS with Flexbox layout (Yoga engine):\n\n**Supported:**\n- `display: flex` (default — all elements are flex containers)\n- Flexbox properties: `flexDirection`, `alignItems`, `justifyContent`, `flexWrap`, `gap`\n- Box model: `width`, `height`, `padding`, `margin`, `border`, `borderRadius`\n- Typography: `fontSize`, `fontWeight`, `fontFamily`, `lineHeight`, `letterSpacing`, `textAlign`\n- Colors: `color`, `background`, `backgroundColor`, `opacity`\n- Backgrounds: `backgroundImage` (linear/radial gradients), `backgroundClip`\n- Shadows: `boxShadow`, `textShadow`\n- Transforms: `transform` (basic transforms)\n- Overflow: `overflow: hidden`\n- Position: `absolute`, `relative`\n- White space: `whiteSpace`, `wordBreak`, `textOverflow`\n\n**Not supported:**\n- `display: grid` — use nested flex containers instead\n- CSS animations or transitions\n- `position: fixed` or `sticky`\n- Pseudo-elements (`::before`, `::after`)\n- Media queries\n- CSS variables\n\n## Fonts\n\nFonts must be loaded explicitly — there are no default system fonts:\n\n```tsx\n// Load font in edge runtime\nconst font = fetch(new URL('./Inter-Bold.ttf', import.meta.url)).then(\n  (res) => res.arrayBuffer()\n)\n\nexport async function GET() {\n  const fontData = await font\n\n  return new ImageResponse(\n    (<div style={{ fontFamily: 'Inter' }}>Hello</div>),\n    {\n      width: 1200,\n      height: 630,\n      fonts: [{ name: 'Inter', data: fontData, weight: 700, style: 'normal' }],\n    }\n  )\n}\n```\n\nFor Google Fonts, fetch directly from the CDN or bundle the `.ttf` file.\n\n## Dynamic Content from URL Parameters\n\n```tsx\nexport async function GET(request: Request) {\n  const { searchParams } = new URL(request.url)\n  const title = searchParams.get('title') ?? 'Default Title'\n\n  return new ImageResponse(\n    (<div style={{ display: 'flex', fontSize: 60 }}>{title}</div>),\n    { width: 1200, height: 630 }\n  )\n}\n```\n\n## Images in OG\n\nUse `<img>` with absolute URLs:\n\n```tsx\n<img\n  src=\"https://example.com/avatar.png\"\n  width={100}\n  height={100}\n  style={{ borderRadius: '50%' }}\n/>\n```\n\nFor local images, convert to base64 or use absolute deployment URLs.\n\n## Key Patterns\n\n1. **Use `next/og` in Next.js projects** — it re-exports `ImageResponse` with built-in optimizations\n2. **Always set `runtime = 'edge'`** — Satori and `@vercel/og` are designed for edge runtimes\n3. **Use `display: 'flex'` everywhere** — Satori defaults to flex layout, no block or grid support\n4. **Load fonts explicitly** — no system fonts are available; bundle `.ttf`/`.woff` files or fetch from CDN\n5. **Standard OG dimensions are 1200×630** — this is the most widely supported size\n6. **Use convention files for automatic `<meta>` tags** — `opengraph-image.tsx` and `twitter-image.tsx`\n7. **Inline styles only** — Satori does not support external CSS or CSS-in-JS libraries\n\n## Official Resources\n\n- [Satori GitHub](https://github.com/vercel/satori)\n- [Vercel OG Image Generation](https://vercel.com/docs/functions/og-image-generation)\n- [Next.js Metadata — OG Images](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image)\n- [Satori Playground](https://og-playground.vercel.app)\n"
}