og-image-builder
CommunityGenerate brand-aligned OG images.
Authorjscraik
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill automates the creation of Open Graph (OG) images for web pages, ensuring they are visually consistent with a brand's identity and contextually relevant to the page's content.
Core Features & Use Cases
- Codebase Analysis: Inspects a web project to identify routes, brand colors, fonts, and logos.
- Contextual Image Generation: Creates OG images (1200x630px) tailored to different page types (landing, article, product, etc.).
- Framework Integration: Provides guidance for integrating generated images into popular frameworks like Next.js, Astro, and React.
- Use Case: Automatically generate social media preview images for all product pages on an e-commerce site, ensuring each image reflects the product's branding and details.
Quick Start
Analyze your codebase to generate OG images for all detected routes.
Dependency Matrix
Required Modules
playwright
Components
scriptsreferencesassets
💻 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-builder Download link: https://github.com/jscraik/Agent-Skills/archive/main.zip#og-image-builder 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.