og-image-creator
CommunityGenerate on-brand OG images, effortlessly.
Authorandhikapraa
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill eliminates the manual, time-consuming process of creating Open Graph (OG) images for every page of your website. It ensures your social shares are always on-brand and contextually relevant, without needing a designer or complex tools.
Core Features & Use Cases
- Codebase Analysis: Automatically detects your framework (Next.js, Astro, React), discovers routes, and extracts brand identity (colors, fonts, logo) from your existing code.
- Context-Aware Generation: Creates unique, appropriate OG images for different page types (landing, article, product) using your actual brand elements.
- Playwright-Powered: Generates high-quality 1200x630px images by rendering HTML templates, ensuring pixel-perfect results.
- Use Case: You've just launched a new blog on your Next.js site. Use this Skill to automatically generate a unique, branded OG image for each blog post, ensuring every share on social media looks professional and inviting, and get the exact meta tags to integrate them.
Quick Start
Use the og-image-creator skill to generate Open Graph images for my Next.js project. The project is located at './my-nextjs-app'.
Dependency Matrix
Required Modules
playwright
Components
scriptsreferences
💻 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-creator Download link: https://github.com/andhikapraa/curhatin-ai/archive/main.zip#og-image-creator Please download this .zip file, extract it, and install it in the .claude/skills/ directory.