home / skills / phrazzld / claude-config / brand-assets

brand-assets skill

safe

This skill renders branded visual assets from templates using brand.yaml tokens to ensure consistent OG cards and social images.

npx playbooks add skill phrazzld/claude-config --skill brand-assets

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

Files (1)

SKILL.md

2.3 KB

---
name: brand-assets
description: |
  Generate branded visual assets (OG cards, social images, blog headers)
  from brand.yaml. Replaces manual image creation with template-driven rendering.
argument-hint: "<template> --title \"...\" [options]"
effort: medium
---

# /brand-assets

Generate branded visual assets from templates.

## What This Does

Renders 1200x630 PNG images using brand tokens from `brand.yaml`. Templates consume the brand palette, typography, and identity for consistent visuals.

## Available Templates

| Template | Use Case |
|----------|----------|
| `og-blog` | Blog post OG cards |
| `og-product` | Product announcement cards |
| `og-changelog` | Version release cards |
| `og-default` | Generic fallback OG card |
| `social-announce` | Social media announcements |
| `social-quote` | Quote cards for social |
| `blog-header` | Blog post hero images |
| `launch-hero` | Product launch hero images |

## Process

1. Ensure `brand.yaml` exists in project root (run `/brand-compile` first if needed)
2. Determine which assets are needed from context:
   - Blog post → `og-blog` + `blog-header`
   - Product launch → `launch-hero` + `social-announce` + `og-product`
   - Changelog → `og-changelog`
   - General → `og-default`
3. Render each asset:
   ```bash
   node ~/Development/brand-kit/dist/src/cli.js render og-blog \
     --title "Post Title" \
     --author "Author Name" \
     --date "2026-02-12" \
     --out ./public/og-blog.png
   ```
4. For bulk generation:
   ```bash
   node ~/Development/brand-kit/dist/src/cli.js render-all --out ./public/brand-assets
   ```

## Template Options

All templates accept:
- `--title "..."` (required)
- `--subtitle "..."`
- `--author "..."`
- `--date "..."`
- `--version "..."`
- `--out file.png` (required)

## Context-Aware Generation

When invoked without arguments, infer what's needed:
- If recent `git log` shows a version tag → render `og-changelog`
- If a blog post draft exists → render `og-blog` + `blog-header`
- If `product-hunt-kit.md` exists → render `launch-hero` + `social-announce`
- Otherwise → render `og-default`

## Related Skills

- `/brand-compile` — Compile brand.yaml to tokens (prerequisite)
- `/og-card` — Legacy card generation (superseded)
- `/og-hero-image` — AI-generated hero images (complementary)
- `/launch-assets` — Full launch asset orchestration

Overview

This skill generates branded visual assets (OG cards, social images, blog headers) from a project's brand.yaml. It replaces manual image creation with template-driven rendering to produce consistent 1200x630 PNGs across marketing and content channels. Use it to automate asset output for posts, releases, and launches.

How this skill works

Templates consume brand tokens for palette, typography, and identity to render images that match your brand. You call the CLI to render a single template or run a bulk render to generate a folder of assets. When run without arguments, the tool inspects repo context (git tags, drafts, or presence of specific files) and infers the assets to produce.

When to use it

Generating OG images and hero headers for a new blog post.
Creating announcement and launch hero assets for a product release.
Producing changelog or release cards when a version tag appears in git.
Bulk-regenerating all brand assets after updating brand.yaml or tokens.
Fallback generation when no specific context is detected (og-default).

Best practices

Keep brand.yaml in the project root and run the brand compile step before rendering.
Provide required fields (title and --out) for predictable output and filenames.
Use context-aware mode during CI to auto-detect needed assets from git and drafts.
Store outputs in a public folder (e.g., ./public/) so static hosts can serve them directly.
Maintain template-specific metadata (author, date, version) to enrich cards and support automation.

Example use cases

Blog post deployment: render og-blog and blog-header with title, author, and date.
Product launch: render launch-hero, social-announce, and og-product with launch details.
Release publish: detect git version tag and render og-changelog automatically.
Mass regeneration: run render-all after a brand palette or font update to refresh all images.
Social campaigns: produce social-announce and social-quote variants for scheduled posts.

FAQ

What templates are available?

Templates include og-blog, og-product, og-changelog, og-default, social-announce, social-quote, blog-header, and launch-hero.

What inputs do templates accept?

All templates accept --title (required), --subtitle, --author, --date, --version, and --out (required).