skills.rest
andhikapraa
andhikapraaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

og-image-creator

Generate 1200x630 Open Graph images from codebase routes and brand assets.

Updated Dec 13, 2025
Search Tags:#branding#social media#web development#image generation#seo#open graph#og image
One-click install
npx skills add https://github.com/andhikapraa/curhatin-ai --skill og-image-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: og-image-creator
Source: https://github.com/andhikapraa/curhatin-ai/tree/main/.claude/skills/og-image-creator
Command: npx skills add https://github.com/andhikapraa/curhatin-ai --skill og-image-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

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'.

Frequently Asked Questions about og-image-creator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automatically generate Open Graph images for my Next.js site?▼

Generate Open Graph images by analyzing your Next.js codebase to discover routes and extract brand colors, fonts, and logos, then render 1200x630px images using Playwright and output them to your public folder with embedded metadata.

Can I generate OG images for Astro or React SPAs without manual design work?▼

Yes. This approach automatically detects your framework (Next.js, Astro, React SPA, or static site), discovers routes, categorizes pages by type, and generates context-aware branded OG images using your actual brand assets and Playwright rendering.

What's the best way to ensure every social media share displays a branded OG image?▼

Automatically generate context-aware Open Graph images for each page type (landing, article, product, docs) by extracting brand identity from your codebase, rendering with Playwright, and embedding the correct meta tags for consistent social sharing.

Do I need to manually create OG images for every page on my website?▼

No. Codebase analysis automatically discovers your routes and brand elements, then generates unique, on-brand OG images for different page types, eliminating manual creation and ensuring every share looks professional.

How does Playwright help create pixel-perfect OG images at scale?▼

Playwright renders HTML templates to generate high-quality 1200x630px Open Graph images, ensuring consistent pixel-perfect results across all pages without relying on external design tools or manual image creation.

What happens after OG images are generated for my website?▼

After generation, you receive framework-specific integration guidance and exact meta tags to embed in your site, enabling proper social media previews for every page when shared across platforms.

Related Skills

Explore More Marketing & Sales Skills→
ari-ayvazyanari-ayvazyan
1

og-image-creator

Generate 1200x630 Open Graph images from project brand assets and routes.

Community
Advanced
686f6c61686f6c61
105

meta-tags

Audit page URLs and generate corrected HTML meta tag snippets.

Community
Intermediate
monam2monam2

SEO Specialist

Optimize SEO metadata and tagging strategies for web pages and social previews.

Community
Intermediate
ProfPowellProfPowell
1

dependency-wrapper

Create wrappers to isolate third-party library dependencies.

Community
Advanced