skills.rest
raduceuca
raduceucaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

OG Image Generator

Generate Open Graph images with HTML/CSS templates or React components.

Updated Jan 29, 2026
Search Tags:#social media#image generation#content creation#web design#seo#og image
One-click install
npx skills add https://github.com/raduceuca/wcgw-fun --skill og-image-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: OG Image Generator
Source: https://github.com/raduceuca/wcgw-fun/tree/main/.claude/skills/og-image
Command: npx skills add https://github.com/raduceuca/wcgw-fun --skill og-image-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you generate professional Open Graph (OG) images for social media sharing, ensuring your content looks great across platforms.

Core Features & Use Cases

  • Customizable Templates: Provides HTML and React examples for creating OG images.
  • Design Guidelines: Offers specifications for size, aspect ratio, safe zones, typography, and color.
  • Generation Methods: Outlines static, dynamic, and screenshot-based generation approaches.
  • Use Case: Automatically generate unique OG images for each blog post on your website, featuring the post title and a relevant thumbnail.

Quick Start

Use the OG Image Generator skill to create an image with the title "My Awesome Blog Post" and the domain "example.com".

Frequently Asked Questions about OG Image Generator

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

FAQPage Schema
How do I generate Open Graph images for social media sharing?▼

Generate Open Graph images for social media by using HTML/CSS templates or React components to dynamically render titles, domains, and thumbnails into specified dimensions and aspect ratios for platform previews.

What are the recommended dimensions and safe zones for OG image generation?▼

OG image generation requires specific dimensions and aspect ratios with defined safe zones to ensure typography, colors, and content display correctly across Facebook, Twitter, and LinkedIn social media preview cards.

Can I dynamically generate unique OG images for each blog post using React?▼

Dynamically generate unique OG images for each blog post using React components or HTML/CSS templates, automatically injecting the post title and relevant thumbnail into the social media preview image.

What is the best way to create dynamic social share images for web design?▼

The best way to create dynamic social share images is through template-based generation using HTML/CSS or React, or screenshot-based generation approaches, ensuring optimized social media previews for web design.

Does OG image generation work for optimizing SEO previews across Facebook, Twitter, and LinkedIn?▼

OG image generation works for optimizing SEO and social media previews across Facebook, Twitter, and LinkedIn by providing design guidelines for typography, color, and content within required aspect ratios.

Related Skills

Explore More Design & Creative Skills→
Cam10001110101Cam10001110101
7

generative-art

Generate seed-driven generative art as self-contained HTML with p5.js.

Community
Intermediate
naporin0624naporin0624
3

seo-lookup

Return official SEO guidance for meta tags, Open Graph, Twitter Cards, and structured data.

Community
Basic
hylarucoderhylarucoder
278

create-visual-card

Generate single-frame visual cards as HTML layouts and PNG images.

Community
Advanced
vercel-labsvercel-labs
246

satori

Convert HTML and CSS into SVG images with the Satori library.

Official
Intermediate