og-image-creator

Open Graph image generation is automated by analyzing your codebase to detect routes, extract brand identity like colors and fonts, and render per-route images at 1200x630 using Playwright. It automatically outputs the images to your public/og directory.

Yes, you can generate OG images for Next.js, Astro, and React SPAs. The Skill detects your specific framework, analyzes your routes, and provides framework-specific integration guidance to ensure the Open Graph images match your site's design system.

To ensure your OG images match your brand, the Skill extracts your brand colors, fonts, and logo directly from your project's codebase. It then applies these design system elements to every per-route Open Graph image it renders.

Yes, Playwright is required as a dependency to render Open Graph images. The Skill relies on Playwright to render the brand-aligned OG images at the standard 1200x630 pixel dimensions and output them to your project.

The Open Graph images rendered from your codebase are 1200x630 pixels. This standard OG image size is generated by Playwright for all your site's routes and saved directly to the public/og directory.