0juano/x-image-cards

Overview

This skill creates X/Twitter cards that look like full images rather than marketing banners. It focuses on image-first Open Graph assets, using correct dimensions, safe margins, and metadata so X displays the visual while the platform overlays title/description independently.

How this skill works

The skill generates or serves PNG OG images at 2400×1200 physical pixels (1200×600 logical) with a 2:1 aspect ratio and built-in safe margins. It supplies the correct meta tags (og:image, og:image:width, og:image:height, twitter:card) and uses a zero-width space in og:title to prevent X from rendering duplicate white text over the image. It supports on-demand generation and a recommended pre-generation workflow to avoid crawler timeouts.

When to use it

• When you need open graph / X preview images that look like natural imagery, not banner-style cards
• When asked to “create OG images”, “set up X cards”, or “make social cards”
• When you want the platform to display your site title/description separately and keep the image clean
• When you must ensure crawlers receive an immediate response (use pre-generation)
• When serving images to X/Twitter and thumbnails must remain legible at small sizes

Best practices

• Render at 2400×1200 physical pixels (1200×600 logical) for retina-ready output
• Include 50–56px safe margins at 1x to avoid mobile clipping
• Use high-contrast colors and avoid subtle gray tones for tiny thumbnails
• Use explicit .png extension in the OG URL (e.g., /og/page.png)
• Hide overlayed og:title with a zero-width space while keeping a descriptive <title> for SEO
• Pre-generate and store images on content creation to prevent crawler timeouts

Example use cases

• Generate per-article image previews stored at /og/{id}.png and served instantly to crawlers
• Dynamically render images with @vercel/og using 2x scale and safe padding for SSR endpoints
• Provide expressive product or featured images for social sharing without overlay text
• Create author or event cards that rely on the visual as primary content
• Replace banner-style social cards with clean, image-first previews for better visual impact