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.
- skills.sh installs
- 210
- GitHub stars
- 105
- last updated
- Aug 21, 2026
Install
$ npx -y skills add stevysmith/og-image-skill --skill og-image --agent claude-codeInstalls into .claude/skills of the current project.
Files
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.jsonfor Next.js, Vite, Astro, Remix, etc. - Identify the routing pattern (file-based, config-based)
- Find where to create the
/og-imageroute
- Check
-
Design System Discovery
- Look for Tailwind config (
tailwind.config.js/ts) for color palette - Check for CSS variables in global styles (
:rootdefinitions) - Find existing color tokens, font families, spacing scales
- Look for a theme or design tokens file
- Look for Tailwind config (
-
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
- Find logo files in
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/stevysmith/og-image-skill
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
Recommended
More Design & UI/UX
opc-value-propositioneasychen/opc-methodologyDesign value propositions for candidate customer segments and help the user choose the strongest one. Use when Codex needs to explain jobs, pains, and gains whe208skills.sh installs
wazatw93/wazaEngineering skills for Claude: think (architecture), design (UI), check (code review), hunt (debugging), write (prose), learn (research), read (URL/PDF fetch), 208skills.sh installs
referral-programdavila7/claude-code-templatesWhen the user wants to create, optimize, or analyze a referral program, affiliate program, or word-of-mouth strategy. Also use when the user mentions 'referral,207skills.sh installsopc-conversion-loopeasychen/opc-methodologyDesign a conversion loop for a one-person company from reach to lead capture to purchase. Use when Codex needs to explain conversion concepts when needed, verif206skills.sh installs
daisyui-5nenorrell/skillsDaisyUI 5 component library best practices, patterns, and usage for Tailwind CSS 4. Use when building UI with daisyUI class names, creating daisyUI-based layout205skills.sh installs
axiom-swiftui-gesturescharleswiltgen/axiomUse when implementing SwiftUI gestures (tap, drag, long press, magnification, rotation), composing gestures, managing gesture state, or debugging gesture confli204skills.sh installs