og-image

This skill creates professional Open Graph images for social media sharing. It analyzes the existing codebase to match the project's design system, generates a dedicated OG image page, screenshots it, and configures all necessary meta tags.

Workflow

Phase 1: Codebase Analysis

Explore the project to understand:

1. Framework Detection

   • Check package.json for Next.js, Vite, Astro, Remix, etc.
   • Identify the routing pattern (file-based, config-based)
   • Find where to create the /og-image route

2. Design System Discovery

   • Look for Tailwind config (tailwind.config.js/ts) for color palette
   • Check for CSS variables in global styles (:root definitions)
   • Find existing color tokens, font families, spacing scales
   • Look for a theme or design tokens file