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

3. **Branding Assets**
   - Find logo files in `/public`, `/assets`, `/src/assets`
   - Check for favicon, app icons
   - Look for existing hero sections or landing pages with branding

4. **Product Information**
   - Extract product name from `package.json`, landing page, or meta tags
   - Find tagline/description from existing pages
   - Look for existing OG/meta configuration to understand current setup

5. **Existing Components**
   - Find reusable UI components that could be leveraged
   - Check for glass effects, gradients, or distinctive visual patterns
   - Identify the overall aesthetic (dark mode, light mode, etc.)

### Phase 2: OG Image Page Creation

Create a dedicated route at `/og-image` (or equivalent for the framework):

**Page Requirements:**
- Fixed dimensions: exactly 1200px wide × 630px tall
- Self-contained styling (no external dependencies that might not render)
- Hide any dev tool indicators with CSS:
```css
[data-nextjs-dialog-overlay],
[data-nextjs-dialog],
nextjs-portal,
#__next-build-indicator {
  display: none !important;
}
```

**Content Structure:**
- Product logo/icon (prominent placement)
- Product name with distinctive typography
- Tagline or v