What problem does it solve? Social share previews often show a generic card or no image at all because creating a unique 1200x630 Open Graph image for every page requires manual design work in tools like Figma. This Skill automates the generation of branded, per-page OG images that match each page's actual hero image and typography. ## Core Features & Use Cases - Programmatic image generation: Composites each page's hero image, a dark legibility scrim, and SVG text overlays (title, subtitle, domain watermark) using Sharp, outputting JPEG (q90) for og:image plus lossless PNG. - Brand consistency detection: Detects the site's font from index.html, Tailwind config, CSS, or bundled font files, and renders titles in that font via a local .ttf. - Hero fallback logic: Pages without their own hero image automatically reuse the home page hero, with a gradient fallback when no hero exists. - Use Case: After adding an About and Pricing page to a Vite or Next.js marketing site, run the generator to produce public/share/about.jpg and pricing.jpg, then reference them in each page's MetaTags or metadata so every social share previews the actual page. ## Quick Start Ask the AI to generate per-page Open Graph share images for the site using the senternet-site-share-images skill, then run the created script with node scripts/generate-share-images.mjs.
