Og Image

This handles the entire Open Graph image workflow in one go. It analyzes your codebase to match your design system colors and fonts, creates a dedicated 1200x630 route that displays your branding, uses Playwright to screenshot it, and wires up all the meta tags in the right places. Works across Next.js, Vite, Astro, and others by detecting your framework first. The smart part is how it hunts through your existing styles and components to make the OG image look native to your site rather than generic. Saves you from manually tweaking viewport sizes, forgetting Twitter card types, or dealing with those annoying Next.js dev indicators showing up in screenshots.

Install to Claude Code

npx -y skills add stevysmith/og-image-skill --skill og-image --agent claude-code