og-image-builder

To automatically generate Open Graph images, this Skill analyzes your web project codebase to extract routes, brand colors, and logos, then uses Playwright to render and save brand-aligned OG images. It inspects your project structure to identify pages and creates visually consistent social cards for each route.

Yes, you can create contextual social cards for different page types. The Skill generates OG images tailored to specific page contexts, such as landing pages, articles, or products, ensuring each social card reflects the unique content and brand identity of that specific route.

Yes, this OG image generator works with Next.js and Astro frameworks. It analyzes your codebase to detect routes and provides specific integration guidance for popular frameworks including Next.js, Astro, and React to seamlessly embed the generated social card images.

Yes, you need Playwright installed to render OG images from your codebase. The Skill relies on Playwright as a core dependency to programmatically render web pages and capture the 1200x630px Open Graph images based on your extracted brand identity and page context.

The best way to ensure OG images match your brand identity is using a codebase analysis tool that automatically extracts your brand colors, fonts, and logos. This Skill inspects your web project to apply those exact brand elements to every generated social card.