// Smart OG image generation that studies your codebase, understands routes and brand identity, then creates contextually appropriate Open Graph images using Playwright and React components. Triggers: "create og images", "generate social cards", "add open graph images".
Generate professional-quality favicons that rival the best app icons. Uses a multi-layer effects engine with drop shadows, inner glows, highlights, gradients, and noise textures. Includes 8 curated design templates and 18 Lucide icons. Produces complete favicon suites with proper ICO, SVG, PNG formats and framework integration. Trigger when users need favicons, app icons, or browser tab icons.
Comprehensive SEO optimization for web applications. Use when asked to improve search rankings, add meta tags, create structured data, generate sitemaps, optimize for Core Web Vitals, or analyze SEO issues. Works with Next.js, Astro, React, and static HTML sites.
Create high-performing YouTube titles and thumbnail text that maximize CTR and virality while maintaining authenticity. Use when analyzing video transcripts to generate title and thumbnail suggestions, optimizing existing titles/thumbnails, or when users request help with YouTube content strategy for click-through rate optimization.
| name | og-image-creator |
| description | Smart OG image generation that studies your codebase, understands routes and brand identity, then creates contextually appropriate Open Graph images using Playwright and React components. Triggers: "create og images", "generate social cards", "add open graph images". |
Generate authentic, brand-aligned Open Graph images by understanding your codebase first, then creating contextually appropriate images for each route using Playwright and your existing components.
Before generating OG images, ask:
Core principles:
Route discovery:
app/*/page.tsx or pages/*.tsxsrc/pages/*.astroBrand extraction:
Use scripts/analyze_codebase.py to automate discovery.
Determine appropriate layouts per page type:
Layout principles:
Component-based generation:
Technical approach:
public/og/ or appropriate static directoryUse scripts/generate_og_images.py for automation.
App Router:
// app/page.tsx
export const metadata = {
openGraph: {
images: ['/og/home.png'],
},
}
Pages Router:
// pages/index.tsx
<Head>
<meta property="og:image" content="/og/home.png" />
</Head>
Dynamic OG images: Consider Next.js OG Image Generation (@vercel/og) for dynamic content, but use static generation for brand consistency.
---
// src/pages/index.astro
const ogImage = '/og/home.png';
---
<head>
<meta property="og:image" content={ogImage} />
</head>
Add OG tags to public/index.html or use react-helmet:
<Helmet>
<meta property="og:image" content="/og/home.png" />
</Helmet>
❌ Generic templates: Don't use stock social card templates that ignore the site's brand
❌ One size fits all: Don't use the same OG image design for every page type
❌ Placeholder content: Don't use "Lorem ipsum" or generic text
❌ Overcrowding: Don't cram too much text, too many images, or complex layouts
❌ Ignoring components: Don't create OG images from scratch if components exist
❌ Manual generation: Don't create OG images one by one manually
IMPORTANT: OG images should vary based on page context, not converge on a single design.
Dimensions to vary:
Avoid converging on:
Context drives variation:
Dependencies (install as needed):
npm install playwright sharp
# or
pip install playwright Pillow
Playwright setup:
playwright install chromium
File structure:
project/
├── public/og/ # Generated OG images
│ ├── home.png
│ ├── about.png
│ └── ...
└── scripts/ # Generation scripts
├── analyze_codebase.py
└── generate_og_images.py
OG images are an extension of your brand, not generic social cards.
Study the codebase to understand the design language. Extract the brand identity. Use actual components and content. Create contextually appropriate images that feel native to the site.
When someone shares your page, the OG image should feel like a natural preview—not a template slapped on top.
You're capable of creating sophisticated, brand-aligned OG images that enhance rather than undermine the site's identity.