playbooks

home / skills / phrazzld / claude-config / og-card

og-card skill

/skills/og-card

This skill generates deterministic, branded Open Graph cards using Satori templates for blog, product, changelog, and comparison pages.

npx playbooks add skill phrazzld/claude-config --skill og-card

Review the files below or copy the command above to add this skill to your agents.

Files (5)
SKILL.md
1.3 KB
---
name: og-card
description: |
  SUPERSEDED by /brand-assets (brand-kit). Use /brand-assets for new projects.
  This skill remains for backward compatibility with projects not yet migrated
  to brand.yaml.

  Generate deterministic, template-based Open Graph cards with Satori.
  Use when: creating OG images for blog posts, product pages, changelogs,
  or comparison pages. Complements /og-hero-image (AI creative) with
  consistent, branded templates. Keywords: og image, open graph, satori,
  social card, meta image, twitter card.
argument-hint: "[template: blog, product, changelog] [title]"
effort: medium
---

# /og-card

## vs /og-hero-image
- /og-hero-image: AI creative via Gemini. Use for one-off hero art.
- /og-card: consistent templates via Satori. Use for branded systems.

## Templates
- blog: title + author + date + brand colors
- product: logo + tagline + screenshot
- changelog: version + highlights
- comparison: product vs competitor

## Process
1. Read `brand-profile.yaml` for colors/fonts when present.
2. Select a template and pass required fields.
3. Render via `skills/og-card/scripts/generate-card.ts`.
4. Emit a 1200x630 PNG.

## Prerequisites
`pnpm add @vercel/og satori sharp`

## Usage
`/og-card blog "Title" by Author`
`/og-card product for heartbeat`

## Output
`og-[template]-[slug].png` at 1200x630

Overview

This skill generates deterministic, template-based Open Graph cards using Satori for consistent, branded social images. It is kept for backward compatibility; use the newer brand-assets skill for new projects. The output is a 1200x630 PNG designed for reliable meta images across blogs, product pages, changelogs, and comparisons.

How this skill works

The skill reads brand profile details (colors and fonts) when available, selects a template, fills required fields, and renders a PNG via a Satori-based render step. Templates cover blog, product, changelog, and comparison layouts and produce predictable, repeatable results for branding systems. The render emits files named like og-[template]-[slug].png at 1200x630 pixels.

When to use it

  • When you need consistent, branded OG images across many pages or posts
  • For blog posts where title, author, and date must follow a template
  • For product pages that require logo, tagline, and screenshot placeholders
  • For changelog entries that highlight versions and release notes
  • When you prefer deterministic templates over one-off AI creatives

Best practices

  • Maintain a brand-profile.yaml with colors and fonts to drive visual consistency
  • Choose the template that matches content: blog, product, changelog, or comparison
  • Provide succinct titles and slugs to keep text readable at social preview sizes
  • Include high-contrast text/foreground colors for accessibility on small previews
  • Automate generation in your publishing pipeline so images are always up-to-date

Example use cases

  • Generate og-blog-your-post.png automatically when publishing a new article
  • Create product OG images with a logo and short tagline for marketing pages
  • Emit changelog OG cards for release announcements showing version and highlights
  • Produce comparison cards that format product vs competitor details in a consistent layout
  • Batch-regenerate OG assets after a brand color or font update

FAQ

What dependencies are required?

Install @vercel/og, satori, and sharp (pnpm add @vercel/og satori sharp).

What output size is produced?

Exports a 1200x630 PNG suitable for Open Graph and social previews.

How do I pass content to a template?

Select the template and supply the required fields (e.g., title/author for blog).