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: [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:
// 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:
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