og-image

This skill creates professional Open Graph images for social media sharing. It analyzes the existing codebase to match the project's design system, generates a dedicated OG image page, screenshots it, and configures all necessary meta tags.

Workflow

Phase 1: Codebase Analysis

Explore the project to understand:

Framework Detection
- Check
```
package.json
```
  for Next.js, Vite, Astro, Remix, etc.
- Identify the routing pattern (file-based, config-based)
- Find where to create the
```
/og-image
```
  route
Design System Discovery
- Look for Tailwind config (
```
tailwind.config.js/ts
```
  ) for color palette
- Check for CSS variables in global styles (
```
:root
```
  definitions)
- Find existing color tokens, font families, spacing scales
- Look for a theme or design tokens file
Branding Assets
- Find logo files in
```
/public
```
  ,
```
/assets
```
  ,
```
/src/assets
```
- Check for favicon, app icons
- Look for existing hero sections or landing pages with branding
Product Information
- Extract product name from
```
package.json
```
  , landing page, or meta tags
- Find tagline/description from existing pages
- Look for existing OG/meta configuration to understand current setup
Existing Components
- Find reusable UI components that could be leveraged
- Check for glass effects, gradients, or distinctive visual patterns
- Identify the overall aesthetic (dark mode, light mode, etc.)

Phase 2: OG Image Page Creation

Create a dedicated route at

/og-image

(or equivalent for the framework):

Page Requirements:

Fixed dimensions: exactly 1200px wide × 630px tall
Self-contained styling (no external dependencies that might not render)
Hide any dev tool indicators with CSS:

css

[data-nextjs-dialog-overlay],
[data-nextjs-dialog],
nextjs-portal,
#__next-build-indicator {
  display: none !important;
}

Content Structure:

Product logo/icon (prominent placement)
Product name with distinctive typography
Tagline or value proposition
Visual representation of the product (mockup, illustration, or abstract design)
URL/domain at the bottom
Background that matches the project aesthetic (gradients, patterns, etc.)

Design Principles:

Use the project's existing color palette
Match the typography from the main site
Include visual elements that represent the product
Ensure high contrast for readability at small sizes (social previews are often small)
Test that text is readable when the image is scaled down to ~400px wide

Phase 3: Screenshot Capture

Use Playwright to capture the OG image:

Navigate to the OG image page (typically
```
http://localhost:3000/og-image
```
or similar)
Resize viewport to exactly 1200×630
Wait for any animations to complete or fonts to load
Take a PNG screenshot
Save to the project's public folder as
```
og-image.png
```

Playwright Commands:

browser_navigate: http://localhost:{port}/og-image
browser_resize: width=1200, height=630
browser_take_screenshot: og-image.png (then copy to /public)

Phase 4: Meta Tag Configuration

Audit and update the project's meta tag configuration. For Next.js App Router, update

layout.tsx

. For other frameworks, update the appropriate location.

Required Meta Tags:

typescript

// Open Graph
openGraph: {
  title: "Product Name - Short Description",
  description: "Compelling description for social sharing",
  url: "https://yourdomain.com",
  siteName: "Product Name",
  locale: "en_US",
  type: "website",
  images: [{
    url: "/og-image.png",  // or absolute URL
    width: 1200,
    height: 630,
    alt: "Descriptive alt text for accessibility",
    type: "image/png",
  }],
},

// Twitter/X
twitter: {
  card: "summary_large_image",
  title: "Product Name - Short Description",
  description: "Compelling description for Twitter",
  creator: "@handle",  // if provided
  images: [{
    url: "/og-image.png",
    width: 1200,
    height: 630,
    alt: "Descriptive alt text",
  }],
},

// Additional
other: {
  "theme-color": "#000000",  // match brand color
  "msapplication-TileColor": "#000000",
},

appleWebApp: {
  title: "Product Name",
  statusBarStyle: "black-translucent",
  capable: true,
},

Ensure
metadataBase
is set for relative URLs to resolve correctly:

typescript

metadataBase: new URL("https://yourdomain.com"),

Phase 5: Verification & Output

Verify the image exists at the public path
Check meta tags are correctly rendered in the HTML
Provide cache-busting instructions:
- Facebook/LinkedIn: https://developers.facebook.com/tools/debug/
- Twitter/X: https://cards-dev.twitter.com/validator
- LinkedIn: https://www.linkedin.com/post-inspector/
Summary output:
- Path to generated OG image
- URL to preview the OG image page locally
- List of meta tags added/updated
- Links to social preview debuggers

Prompting for Missing Information

Only ask the user if these cannot be determined from the codebase:

Domain/URL - If not found in existing config, ask: "What's your production domain? (e.g., https://example.com)"
Twitter/X handle - If adding twitter:creator, ask: "What's your Twitter/X handle for attribution? (optional)"
Tagline - If no clear tagline found, ask: "What's a short tagline for social previews? (1 sentence)"

Framework-Specific Notes

Next.js App Router:

Create
```
/app/og-image/page.tsx
```
Update metadata in
```
/app/layout.tsx
```
Use
```
'use client'
```
directive for the OG page

Next.js Pages Router:

Create
```
/pages/og-image.tsx
```
Update
```
_app.tsx
```
or use
```
next-seo
```

Vite/React:

Create route via router config
Update
```
index.html
```
meta tags or use
```
react-helmet
```

Astro:

Create
```
/src/pages/og-image.astro
```
Update layout with meta tags

Quality Checklist

Before completing, verify:

OG image renders correctly at 1200×630
No dev tool indicators visible in screenshot
Image saved to public folder
Meta tags include og:image with absolute URL capability
Meta tags include twitter:card as summary_large_image
Meta tags include dimensions (width/height)
Meta tags include alt text for accessibility
theme-color is set to match brand
User informed of cache-busting URLs