og-image_skill

Overview

This skill generates production-ready Open Graph images and configures all social sharing meta tags for optimal previews across Twitter/X, LinkedIn, Facebook, Slack, Discord, and more. It inspects the existing codebase to match the project’s design system, creates a screenshot-optimized page, captures a 1200×630 PNG, and wires up meta tags with correct dimensions and alt text. The output includes the generated image, updated metadata, and verification steps for cache-busting social debuggers.

How this skill works

The skill scans the repository to detect framework, routing, colors, typography, logos, and existing metadata. It creates a self-contained OG image route (e.g., /og-image) styled to match the site, renders the page at exactly 1200×630, and uses Playwright to capture a PNG saved to the public folder. Finally, it updates the project’s meta configuration (Open Graph, Twitter/X, theme-color, etc.) and provides verification and cache-busting instructions.

When to use it

• You want consistent, brand-matching social previews for shared links.
• You need an automated, repeatable workflow to generate OG images during development or CI.
• Your current social cards are missing, broken, or show default assets.
• You want metadata that includes correct dimensions, alt text, and metadataBase support.
• Preparing a launch where accurate social previews and cache control are required.

Best practices

• Match the project color palette and typography to preserve brand consistency.
• Keep text large and high-contrast to remain readable when scaled down.
• Use a self-contained OG page (no external runtime dependencies) to ensure reliable screenshots.
• Include descriptive alt text and explicit width/height in meta tags for accessibility.
• Set metadataBase or use absolute URLs so social platforms resolve images reliably.

Example use cases

• Add a CI step that builds the site, runs Playwright, and commits /public/og-image.png.
• On Next.js App Router, create /app/og-image/page.tsx and update /app/layout.tsx metadata.
• For Vite/React apps, add a route and update index.html or react-helmet meta entries.
• Regenerate OG images after a rebrand to reflect new logos, colors, and taglines.
• Use the generated page to preview variations (dark/light, alternate taglines) before finalizing.