og-image
CommunityAuto-generate social previews from your design system.
Authordirnbauer
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill simplifies creating brand-consistent Open Graph images and social previews by generating a route and metadata tailored to your project's design system.
Core Features & Use Cases
- Auto OG image: Generates a 1200x630 Open Graph image aligned with your design system.
- Meta tag setup: Configures og:image, twitter:card, theme-color, and related tags for reliable sharing.
- Framework-agnostic workflow: Works with Next.js, Vite, Astro, Remix, or plain HTML pages to render shareable previews.
- Use Case: Marketing pages requiring ready-to-share visuals and metadata on deployment.
Quick Start
Use the og-image workflow to create the /og-image route, render a 1200x630 screenshot, and verify meta tags in the HTML.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: og-image Download link: https://github.com/dirnbauer/webconsulting-skills/archive/main.zip#og-image Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.