Can it handle large sites with many routes?

Yes, it intelligently groups routes into page types and uses automated scripts to handle mass asset creation, making it ideal for large documentation sites or e-commerce platforms.

Does it use generic templates or my actual code?

It reuses your actual design primitives and assets, rendering them with Playwright to create high-fidelity social cards that feel like a natural extension of your website.

How does the OG Image Builder ensure brand consistency?

The skill inspects your project's codebase to extract existing UI tokens, such as color palettes, logos, and typography, ensuring generated images match your site's aesthetic perfectly.

Which web frameworks are supported?

It is designed to work with major modern frameworks including Next.js, Astro, and React Router, and can be adapted to most component-based web architectures.

OG Image Builder

Name: OG Image Builder
Author: jscraik

byjscraik

•

Design Tools

Generates brand-aligned, route-specific Open Graph images by analyzing your codebase and rendering assets with Playwright.

The OG Image Builder skill automates the creation of high-quality social preview images that feel native to your product rather than using generic templates. By inspecting your project's visual language—including logos, palettes, and typography—it generates professional 1200x630 assets tailored to specific routes. It supports frameworks like Next.js and Astro, grouping pages into logical types such as documentation, articles, or products, and provides a repeatable, scripted workflow to keep assets synchronized with content updates.

Key Features

01Codebase inspection to extract and reuse brand colors, fonts, and layout motifs.

02Metadata wiring guidance to link generated assets to their respective routes.

03Automated route discovery and categorization across modern web frameworks.

04Batch processing for creating unique social cards for hundreds of pages simultaneously.

052 GitHub stars

06Scripted image generation using Playwright for high-fidelity component rendering.

Use Cases

01Automating OG image updates for documentation or blog platforms during content changes.

02Replacing generic social card templates with branded, route-specific previews.

03Standardizing social media visuals across a multi-framework web ecosystem.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jscraik/agent-skills og-image-creator

For use in Claude.ai and ChatGPT

Key Features

01Codebase inspection to extract and reuse brand colors, fonts, and layout motifs.

02Metadata wiring guidance to link generated assets to their respective routes.

03Automated route discovery and categorization across modern web frameworks.

04Batch processing for creating unique social cards for hundreds of pages simultaneously.

052 GitHub stars

06Scripted image generation using Playwright for high-fidelity component rendering.

Use Cases

01Automating OG image updates for documentation or blog platforms during content changes.

02Replacing generic social card templates with branded, route-specific previews.

03Standardizing social media visuals across a multi-framework web ecosystem.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jscraik/agent-skills og-image-creator

For use in Claude.ai and ChatGPT