brand-assets-setup

What this skill does

# Brand Assets Setup — Implementation Guide

## PHASE 1 — Discovery

Scan the project to understand its current state before printing anything.

1. Find the Next.js frontend root — look for `app/layout.tsx` or `src/app/layout.tsx`.
2. Check existing assets:
   - List files in `app/` (or `src/app/`) matching: `favicon.ico`, `icon.png`, `apple-icon.png`, `opengraph-image.png`, `twitter-image.png`
   - List files in `public/` matching: `favicon-*.png`, `icon-*.png`, `maskable-*.png`, `manifest.json`
   - Check for brand SVGs in `shared/assets/`, `src/assets/`, or similar
3. Read `app/layout.tsx` (or `src/app/layout.tsx`) — note the existing metadata structure and brand colors mentioned.
4. Detect brand colors — check `app/globals.css`, `src/app/globals.css`, or `tailwind.config.*` for background and accent colors.

---

## PHASE 2 — Checklist

Print a comprehensive checklist showing the status of all 12 brand asset files.

**Mark with:**
- ✅ — file exists and appears correct
- ❌ — file is missing or needs regeneration

**Use the detected brand colors in notes** (e.g. "use background color #f7f9fb").

### Asset Checklist Template

| File | Size | Background | Location | Purpose | Status |
|------|------|------------|----------|---------|--------|
| `favicon.ico` | 16×16 + 32×32 + 48×48 | SOLID | `app/favicon.ico` | Browser tab icon (multi-size) | ❌ |
| `favicon-16x16.png` | 16×16 | SOLID | `public/favicon-16x16.png` | Fallback for legacy browsers | ❌ |
| `favicon-32x32.png` | 32×32 | SOLID | `public/favicon-32x32.png` | Fallback for legacy browsers | ❌ |
| `icon.png` | 32×32 | TRANSPARENT | `app/icon.png` | OS adds background and rounding | ❌ |
| `apple-icon.png` | 180×180 | SOLID | `app/apple-icon.png` | iOS home screen (needs opaque background) | ❌ |
| `icon-192.png` | 192×192 | TRANSPARENT | `public/icon-192.png` | Android PWA (OS adds background) | ❌ |
| `icon-512.png` | 512×512 | TRANSPARENT | `public/icon-512.png` | Android PWA (OS adds background) | ❌ |
| `maskable-icon-512.png` | 512×512 | SOLID | `public/maskable-icon-512.png` | Adaptive icons (logo in center 80%) | ❌ |
| `opengraph-image.png` | 1200×630 | SOLID | `app/opengraph-image.png` | Facebook, Telegram, LinkedIn cards | ❌ |
| `twitter-image.png` | 1200×630 | SOLID | `app/twitter-image.png` | Twitter/X cards | ❌ |
| `logo.svg` | vector | TRANSPARENT | `shared/assets/logo.svg` (or `src/assets/logo.svg`) | Light background usage | ❌ |
| `logo-dark.svg` | vector | TRANSPARENT | `shared/assets/logo-dark.svg` (or `src/assets/logo-dark.svg`) | Dark background usage | ❌ |

---

## PHASE 2.5 — AI Generation Prompt

Print the following prompt for the user. They will attach their logo and send this to an AI image generation tool.

---

### 🎨 **Asset Generation Prompt** (Attach Your Logo)

You are an expert brand asset generator. I will provide you with a logo image. Your task is to generate a complete brand asset pack for a Next.js project.

#### **Asset Specifications**

Generate exactly **12 files** matching these specifications:

**1. FAVICON SET (3 files)**
- `favicon.ico` — Multi-size ICO format (16×16, 32×32, 48×48) with **solid background** `[BRAND_BG_COLOR]`
- `favicon-16x16.png` — 16×16 PNG, **solid background**, legacy browser fallback
- `favicon-32x32.png` — 32×32 PNG, **solid background**, legacy browser fallback

**2. APP ICONS (2 files)**
- `icon.png` — 32×32 PNG, **TRANSPARENT background**. Operating system will add rounded corners and background color.
- `apple-icon.png` — 180×180 PNG, **solid background** `[BRAND_BG_COLOR]`. iOS will add rounded corners on top of the background.

**3. PWA / ANDROID ICONS (3 files)**
- `icon-192.png` — 192×192 PNG, **TRANSPARENT background**. OS adds adaptive coloring.
- `icon-512.png` — 512×512 PNG, **TRANSPARENT background**. OS adds adaptive coloring.
- `maskable-icon-512.png` — 512×512 PNG, **solid background** `[BRAND_BG_COLOR]`. Logo must fit in center 80% (10% safe margin on all sides). OS will mask as circle or square.

**4. SOCIAL / OG IMAGES (2 files)**
- `opengraph-image.png` — 1200×630 PNG, **solid background**. Create a polished banner with logo + project name + tagline using brand colors.
- `twitter-image.png` — 1200×630 PNG, **solid background**. Same as opengraph (can be identical).

**5. LOGO VECTORS (2 files)**
- `logo.svg` — Scalable SVG, **TRANSPARENT background**. For use on light backgrounds.
- `logo-dark.svg` — Scalable SVG, **TRANSPARENT background**. For use on dark backgrounds.

#### **Brand Color Palette**

Use these colors throughout:
- **Background (Light):** `[BRAND_BG_COLOR]`
- **Foreground (Dark):** `[BRAND_FG_COLOR]`
- **Primary Accent:** `[BRAND_PRIMARY_COLOR]`
- **Secondary Accent:** `[BRAND_SECONDARY_COLOR]`

#### **Generation Rules**

1. **Transparent files**: Keep the logo on a transparent layer. The operating system will add rounded corners and apply theme colors automatically.

2. **Solid background files**: Use `[BRAND_BG_COLOR]` as the background. Center the logo with appropriate padding.

3. **Maskable icons**: The logo must fit within the central 80% (leaving a 10% safe zone on all sides). The OS will mask the entire icon as a circle or square.

4. **favicon.ico**: Create a multi-size ICO file containing 16×16, 32×32, and 48×48 variants, all with `[BRAND_BG_COLOR]` background.

5. **OG/Twitter banners**: Create a polished 1200×630 social card with:
   - Logo positioned in upper-left or center
   - Project name (large, bold)
   - Tagline or description
   - Brand colors and gradients
   - Professional design, social-media ready

6. **SVG logos**: Create clean, scalable vector versions that work at any size. Include separate versions for light and dark backgrounds if the logo appearance changes.

#### **Output Format**

Generate all 12 files into a **single folder** named:
```
[ProjectName]_brand_assets_YYYYMMDD
```

Include a `README.txt` or `index.txt` with a simple list of all files and their purposes.

#### **Attach your logo now**

Attach the logo image below, and I will generate the complete asset pack.

---

## PHASE 3 — Import

When the user provides the path to the generated assets folder:

1. **Verify the folder exists** and list all files inside.
2. **Copy files to correct locations** (use system copy commands):
   - `favicon.ico` → `app/favicon.ico` (or detect `src/app/favicon.ico`)
   - `icon.png` → `app/icon.png`
   - `apple-icon.png` → `app/apple-icon.png`
   - `opengraph-image.png` → `app/opengraph-image.png`
   - `twitter-image.png` → `app/twitter-image.png`
   - `favicon-16x16.png` → `public/favicon-16x16.png`
   - `favicon-32x32.png` → `public/favicon-32x32.png`
   - `icon-192.png` → `public/icon-192.png`
   - `icon-512.png` → `public/icon-512.png`
   - `maskable-icon-512.png` → `public/maskable-icon-512.png`
   - `logo.svg` → `shared/assets/logo.svg` (or `src/assets/logo.svg`)
   - `logo-dark.svg` → `shared/assets/logo-dark.svg` (or `src/assets/logo-dark.svg`)
3. **Delete the source folder** after successful import.

---

## PHASE 4 — Wire Metadata

Update `app/layout.tsx` (or `src/app/layout.tsx`) with proper Next.js metadata.

**Rules — Do NOT manually add:**
- `metadata.icons` — Next.js auto-detects `favicon.ico`, `icon.png`, `apple-icon.png` from `app/`
- `openGraph.images` — Next.js auto-detects `opengraph-image.png` from `app/`
- `twitter.images` — Next.js auto-detects `twitter-image.png` from `app/`

**Rules — Ensure these ARE present:**
- `viewport` export (separate from metadata, required for streaming)
- `metadataBase` (canonical domain)
- `manifest` (path to PWA manifest, usually `/manifest.json`)
- `openGraph` object (title, description, URL, siteName, type)
- `twitter` object (card type, title, description)
- `robots` (index and follow rules)

**Example structure:**
```ts
import type { Metadata, Viewport } from "next";

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
};

export const metadata: Metadata = {
  title: "Project Name",
  descrip