cover-imagelisted

# Cover Image Generator Generate blog cover images and Open Graph/social preview images as PNG files. Each cover is a self-contained HTML document with inline CSS, captured as a screenshot via Chrome headless at exactly 1200x630 pixels. The output is a static PNG suitable for Hugo front matter (`image:`), HTML `<meta property="og:image">`, and Twitter card metadata. No external images, no JavaScript, no server-side rendering required at capture time. ## Overview Cover images serve as the primary visual identity for a blog post across social platforms, search results, and link previews. Each image is designed from scratch per post, reflecting the topic, tone, and key concepts of the content. **What this skill produces:** - A 1200x630px PNG file rendered from HTML+CSS - Self-contained HTML with no external image dependencies - Typography-driven design with CSS decorative elements - Consistent branding placement **When to use this skill:** - Blog posts need an OG/social preview image - Hugo front matter needs an `image:` field - A series of posts need visually cohesive covers - Existing covers need updating or redesigning ## Detailed Workflow ### Step 1: Read the source content Read the blog post or article to extract the title, key concepts, and overall tone. The cover image must accurately represent the content. Identify: - The exact title (or a shortened version if it exceeds 40 characters) - The primary topic category (technical, tutorial, explanatory, announcement