stevysmith

Og Image Skill — Communication skill for Claude Code

Communication community

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

How to install Og Image Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open stevysmith/og-image-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Og Image Skill does

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

Alternatives in Communication

Sounds — List available notification sounds and preview them 806 ★
Claude Skill Social Post — A Claude Code skill by Hao (駱君昊) that learns your Facebook voice and auto-posts to FB / IG / Threads / X with 625 ★
NullMotion — Motion graphics preview and YouTube clip maker: finished ad over HyperFrames drafts, MP4 export, pause cuts, c 582 ★

README

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:

**Playwright MCP Server** - Required for taking screenshots
```
/install playwright@claude-plugins-official
```
**A web project** with a dev server running (Next.js, Vite, Astro, etc.)
**Dev server running** - Start your dev server before invoking the skill:
```
npm run dev  # or yarn dev, pnpm dev, etc.
```