brand-asset-pipeline git:20260414.0261101A

Immutable. This exact content never changes and is served at /api/v1/blob/1575b06432919431.

---
name: brand-asset-pipeline
description: Turn a single mark.svg into a full brand asset pack — favicons (16/32/48/64/180), Apple/Android app icons, social covers (OG/Twitter/LinkedIn), and Steam store capsules. Reads deploy target from brand-memory to pick the right preset. Use when bootstrapping a new site, rebranding, or generating store assets.
---

## When to use

- Bootstrapping a new site and needing every favicon, app icon, and social cover in one pass.
- Rebranding — swap `mark.svg` and regenerate everything in seconds.
- Shipping to Steam — the `steam` target produces all required capsule sizes.
- Adding or updating social preview images (OG, Twitter, LinkedIn).

## Targets

| Target      | Files generated | Dimensions |
|-------------|-----------------|------------|
| `favicons`  | `favicon-16.png`, `favicon-32.png`, `favicon-48.png`, `favicon-64.png`, `favicon-180.png` | Square icons at each size |
| `app-icons` | `apple-touch-icon.png` (180), `android-chrome-192.png` (192), `android-chrome-512.png` (512) | Square icons |
| `social`    | `og-cover.png` (1200×630), `twitter-cover.png` (1500×500), `linkedin-cover.png` (1584×396) | Banner, mark centred at 50% of short edge |
| `steam`     | `steam-header.png` (460×215), `steam-capsule-main.png` (616×353), `steam-capsule-small.png` (231×87) | Banner |

All square icons use `fit: contain` with a transparent background.  
All banners composite the mark centred on `backgroundColor` (default `#110f1b`).

## How to run

### API

```js
import { generateAssets } from './plugins/atelier/skills/brand-asset-pipeline/index.mjs';

const { files } = await generateAssets({
  markSvg:         'brand/mark.svg',
  outDir:          'public/brand',
  targets:         ['favicons', 'app-icons', 'social'], // default
  backgroundColor: '#110f1b',                           // optional
});
console.log(`Generated ${files.length} assets`);
```

### CLI (one-liner)

```bash
node -e "
import('./plugins/atelier/skills/brand-asset-pipeline/index.mjs')
  .then(m => m.generateAssets({ markSvg: 'brand/mark.svg', outDir: 'public/brand' }))
  .then(r => console.log(r.files));
"
```

## HTML wiring snippet

Paste inside `<head>` after generating favicons and app-icons:

```html
<!-- Favicons -->
<link rel="icon"             type="image/png" sizes="32x32"  href="/brand/favicon-32.png">
<link rel="icon"             type="image/png" sizes="16x16"  href="/brand/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180"                 href="/brand/apple-touch-icon.png">

<!-- Android / PWA -->
<link rel="icon" type="image/png" sizes="192x192" href="/brand/android-chrome-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/brand/android-chrome-512.png">

<!-- OG / Social -->
<meta property="og:image"        content="https://yourdomain.com/brand/og-cover.png">
<meta property="og:image:width"  content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:image"       content="https://yourdomain.com/brand/twitter-cover.png">
```