---
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 `` after generating favicons and app-icons:
```html
```