Does it handle Twitter/X cards and LinkedIn previews?

Yes, it configures both Open Graph (og:image) and Twitter (twitter:card) tags, ensuring your site looks great on X, LinkedIn, Facebook, Slack, and Discord.

How does the skill capture the social media image?

It uses Playwright browser automation to navigate to a generated local route, sets the viewport to the standard 1200x630 resolution, and takes a high-quality PNG screenshot.

Do I need to design the image manually?

No, the skill analyzes your existing Tailwind configuration, CSS variables, and branding assets to generate a professional design that matches your project aesthetic automatically.

What happens if I don't have a logo or tagline defined?

The skill will attempt to extract this info from your package.json or landing page; if it can't find them, it will prompt you for the information to ensure the image is complete.

Which frameworks does the og-image skill support?

It supports a wide range of modern frameworks including Next.js (App and Pages router), Vite, Astro, and Remix by automatically detecting project structure and routing patterns.

Open Graph & Social Preview Generator

Name: Open Graph & Social Preview Generator
Author: stevysmith

bystevysmith

•

ソーシャルメディア管理

Generates professional social media preview images and configures meta tags by analyzing your project's design system.

概要

This skill automates the creation of high-quality social media sharing assets by detecting your project's framework, design tokens, and branding. It creates a dedicated, screenshot-optimized page at 1200x630, captures it using Playwright, and automatically injects the necessary Open Graph and Twitter/X meta tags into your application. By matching your existing Tailwind config or CSS variables, it ensures consistent branding across platforms like LinkedIn, Facebook, and Discord without requiring manual design work or external tools.

主な機能

Automated 1200x630 screenshot capture using Playwright
50 GitHub stars
Accessibility-ready with automated alt-text and theme-color setup
Design system discovery via Tailwind config and CSS variables
Automatic framework detection for Next.js, Vite, Astro, and Remix
Comprehensive meta tag configuration for all major social platforms

ユースケース

Setting up professional social sharing for a new product launch
Updating branding across an entire site's metadata automatically
Generating marketing assets that perfectly match the project's UI

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add stevysmith/og-image-skill og-image

For use in Claude.ai and ChatGPT

Download Skill

GitHub

概要