OG Image Skill

Generate social media preview images (Open Graph) and configure all meta tags for optimal sharing on Twitter/X, LinkedIn, Facebook, Slack, Discord, and more.

Installation

Via skills.sh (recommended)

npx skills add stevysmith/og-image-skill

Via Claude Code plugin commands

/plugin marketplace add stevysmith/og-image-skill
/plugin install og-image@og-image-skill

After installation, the /og-image skill is available in Claude Code.

What It Does

Creates a dedicated /og-image route in your project that renders a 1200x630 preview image matching your existing design system. Then screenshots it and configures all necessary meta tags.

The skill automatically:

• Explores your codebase to understand your design system (colors, fonts, components)
• Creates an OG image page using your existing aesthetic
• Screenshots at the correct 1200x630 dimensions
• Saves to your public folder
• Audits and adds missing meta tags (og:image, twitter:card, theme-color, etc.)

Usage

/og-image

Run this command from within your web project directory. The skill will analyze your codebase and generate a contextually appropriate OG image.

Prerequisites

Before using this skill, ensure you have:

1. Playwright MCP Server - Required for taking screenshots

   /install playwright@claude-plugins-official
   

2. A web project with a dev server running (Next.js, Vite, Astro, etc.)

3. Dev server running - Start your dev server before invoking the skill:

   npm run dev  # or yarn dev, pnpm dev, etc.
   

Supported Frameworks

• Next.js (App Router & Pages Router)
• Vite + React
• Astro
• Remix
• Plain HTML/CSS

What Gets Generated

1. /og-image route - A standalone page optimized for screenshots
2. /public/og-image.png - The 1200x630 screenshot
3. Meta tag updates - All necessary OG, Twitter, and misc meta tags

Meta Tags Configured

• og:image, og:image:width, og:image:height, og:image:alt, og:image:type
• twitter:card, twitter:image, twitter:title, twitter:description
• theme-color, msapplication-TileColor
• Apple web app meta tags

Cache Busting

After generating, use these tools to refresh social platform caches:

• Facebook/LinkedIn: https://developers.facebook.com/tools/debug/
• Twitter/X: https://cards-dev.twitter.com/validator
• LinkedIn: https://www.linkedin.com/post-inspector/

Example Output

The skill generates OG images that match your project's design system. Here are examples of what it can produce:

Cosmic Luxury

Dark gradients, aurora colors, geometric orbs

Editorial

Light, refined, magazine-inspired with abstract shapes

Neo-Brutalist

Bold typography, harsh colors, raw geometric blocks

Ethereal

Mesh gradients, glassmorphism, floating particles

The skill analyzes your codebase and adapts its output to match your existing design language.

Troubleshooting

"Playwright not found" - Install the Playwright MCP server first:

/install playwright@claude-plugins-official

Screenshot is blank - Make sure your dev server is running before invoking the skill.

Meta tags not updating - The skill modifies your layout file. Check that you have write access and no syntax errors were introduced.

Learn More

• skills.sh - Discover more Claude Code skills
• Open Graph Protocol - OG specification
• Twitter Cards - Twitter card documentation