Generate semua brand asset dari satu logo

---
name: asset-starter
description: >
  Generate a complete brand asset kit from a single logo mark PNG. Use this skill whenever
  the user uploads a logo image and wants to export assets for a website, app, or PWA —
  including SVG variants (fill, outline, dark/light), PNG icons (192, 512, maskable,
  apple-touch), favicon.ico, WEBP, wordmark (mark + brand name), and horizontal/square
  banners. Trigger this skill when the user mentions any of: "generate assets", "logo kit",
  "SVG variants", "favicon", "PWA icons", "apple touch icon", "maskable icon", "banner",
  "wordmark", "brand assets", or uploads a logo and asks for multiple export formats.
  Also trigger when the user says "asset-starter" or "/asset-starter".
---

# Asset Starter

Generate a full brand asset kit from one logo mark PNG. No external services needed —
runs entirely on PIL + OpenCV in the container.

## What this skill produces

### SVG (7 files)
- `logo-mark-fill-black.svg` — mark filled `#0D0D0D`, transparent bg
- `logo-mark-fill-white.svg` — mark filled `#FFFFFF`, transparent bg
- `logo-mark-outline-black.svg` — stroke only, `#0D0D0D`
- `logo-mark-outline-white.svg` — stroke only, `#FFFFFF`
- `logo-wordmark-light.svg` — mark + brand name, dark-on-transparent
- `logo-wordmark-dark.svg` — mark + brand name, white-on-transparent
- `favicon.svg` — same as fill-black, named for `<link rel="icon">`
### PNG / ICO (5 files)
- `icon-192.png` — 192×192, transparent bg (PWA manifest)
- `icon-512.png` — 512×512, transparent bg (PWA manifest)
- `maskable-icon-512.png` — 512×512, white bg, 18% safe-zone padding
- `apple-touch-icon.png` — 180×180, white bg
- `favicon.ico` — multi-resolution: 16, 32, 48, 64, 128, 256 px
### WEBP (3 files)
- `icon-192.webp`, `icon-512.webp`, `maskable-icon-512.webp`
### Wordmark PNG + WEBP (4 files)
- `logo-wordmark-light.png/.webp` — 1200px wide, transparent bg
- `logo-wordmark-dark.png/.webp` — 1200px wide, dark `#1A1A1A` bg
### Banner PNG + WEBP + SVG (9 files)
- `banner-dark.png/.webp/.svg` — 1920×640, black bg, white content
- `banner-light.png/.webp/.svg` — 1920×640, white bg, dark content
- `banner-sq-dark.png/.webp` — 1080×1080, square, black bg
**Total: ~28 files**

---

## Step 0 — Gather requirements

Before generating anything, confirm these details with the user. Ask in a single message — do NOT generate assets until all answers are received.

**Required questions:**

1. **Logo mark PNG** — already uploaded? If not, ask for it.
2. **Logo background** — is the logo on a **dark/black** bg (use `THRESH_BINARY`) or **light/white** bg (use `THRESH_BINARY_INV`)? Claude can usually detect this from the image.
3. **Brand name** — what text goes in wordmarks and banners? (e.g. "Rahman Resource")
4. **Tagline / description** — short line shown below brand name in banners. (e.g. "free resource for nextjs and convex projects only"). If none, banners will be brand-name only.
5. **Mark size in icons** — default is large (pad 5%). Ask only if user seems to want something specific.
6. **Wordmark font style** — default: Poppins Light. Ask only if user mentions it.
**Shortcut:** If the user already provided the PNG and answered most questions in their message, extract what you can and ask only for what's missing (max 1–2 follow-up questions).

**Banner behavior:** Banners always show `BRAND + TAGLINE` in a safe two-line layout that auto-wraps and never clips. Pure mark files (SVG marks, icons, favicon) never include text.

---

## Step 1 — Build RGBA masks from source PNG

```python
import cv2, numpy as np
from PIL import Image

src_pil = Image.open(SRC).convert("RGB")
src_np  = np.array(src_pil)
gray    = cv2.cvtColor(src_np, cv2.COLOR_RGB2GRAY)
_, mask = cv2.threshold(gray, 200, 255, cv2.THRESH_BINARY_INV)
H, W    = mask.shape

def make_rgba(r, g, b, alpha_mask):
    arr = np.zeros((H, W, 4), dtype=np.uint8)
    arr[:,:,0]=r; arr[:,:,1]=g; arr[:,:,2]=b; arr[:,:,3]=alpha_mask
    return Image.fromarray(arr, "RGBA")

logo_black = make_rgba(13,  13,  13,  mask)
logo_white = make_rgba(255, 255, 255, mask)
```

**Threshold rule:** `< 200` = logo pixel, `>= 200` = background. Works for logos on
white or near-white backgrounds. If the logo is on a dark background, invert: use
`cv2.THRESH_BINARY` instead of `cv2.THRESH_BINARY_INV`.

---

## Step 2 — Trace SVG path via OpenCV contours

```python
contours, * = cv2.findContours(mask, cv2.RETR*EXTERNAL, cv2.CHAIN_APPROX_NONE)
contours    = sorted(contours, key=cv2.contourArea, reverse=True)
main_cnt    = contours[0]
approx      = cv2.approxPolyDP(main_cnt, 1.5, True).reshape(-1, 2).tolist()

d_path  = "M " + " L ".join(f"{x},{y}" for x, y in approx) + " Z"
viewBox = f"0 0 {W} {H}"
SW      = max(W, H) * 0.012  # stroke width for outline variants
```

**epsilon=1.5** gives ~80–120 anchor points — enough fidelity without bloating file size.
For logos with very thin strokes or sharp serifs, lower to 0.8. For simple geometric
marks, raise to 3.0.

If the logo has **multiple disconnected shapes** (e.g. an icon + separate dot), use
`cv2.RETR_CCOMP` and loop over all contours above a minimum area threshold:
```python
contours, hier = cv2.findContours(mask, cv2.RETR_CCOMP, cv2.CHAIN_APPROX_NONE)
path_ds = [contour_to_d(c) for c in contours if cv2.contourArea(c) > 500]
```

---

## Step 3 — SVG builders

```python
def build_p(fill="#000000", stroke=None, sw=SW):
    fa = f'fill="{fill}" fill-rule="evenodd"'
    sa = (f'stroke="{stroke}" stroke-width="{sw:.1f}" '
          f'stroke-linejoin="round" stroke-linecap="round"') if stroke else ""
    return f'    <path {fa} {sa} d="{d_path}"/>'

def mark_svg(fill, stroke=None, sw=SW, bg=None):
    bg_el = f'  <rect width="100%" height="100%" fill="{bg}"/>' if bg else ""
    return (f'<?xml version="1.0" encoding="UTF-8"?>\n'
            f'<svg xmlns="http://www.w3.org/2000/svg" viewBox="{viewBox}">\n'
            f'{bg_el}\n{build_p(fill, stroke, sw)}\n</svg>')
```

**Wordmark SVG** — mark stacked above brand name text:
```python
TEXT_LABEL = "Brand Name"       # ← replace with actual brand name
TEXT_SIZE  = H * 0.11
LETTER_SPC = W * 0.01
TOTAL_H    = H + H*0.07 + TEXT_SIZE * 1.3

def wordmark_svg(mark_fill, text_fill, bg=None):
    bg_el  = f'  <rect width="100%" height="100%" fill="{bg}"/>' if bg else ""
    text_y = H + H*0.07 + TEXT_SIZE
    return (
        f'<?xml version="1.0" encoding="UTF-8"?>\n'
        f'<svg xmlns="http://www.w3.org/2000/svg" '
        f'viewBox="0 0 {W:.0f} {TOTAL_H:.0f}">\n'
        f'{bg_el}\n{build_p(mark_fill)}\n'
        f'  <text x="{W/2:.0f}" y="{text_y:.0f}"\n'
        f'    font-family="\'Poppins\', \'Helvetica Neue\', Arial, sans-serif"\n'
        f'    font-size="{TEXT_SIZE:.0f}" font-weight="300"\n'
        f'    letter-spacing="{LETTER_SPC:.1f}" text-anchor="middle"\n'
        f'    fill="{text_fill}">{TEXT_LABEL}</text>\n'
        f'</svg>')
```

**Banner SVG** — horizontal layout, mark-left + text-right:
```python
def banner_svg(mark_fill, text_fill, bg, bw=1920, bh=640):
    scale    = int(bh * 0.55) / max(W, H)
    sw, sh   = W * scale, H * scale
    left_pad = int(bw * 0.075)
    mark_y   = (bh - sh) / 2
    text_x   = left_pad + sw + int(bw * 0.04)
    fnt_sz   = bh * 0.225
    text_y   = bh / 2 + fnt_sz * 0.35
    transform = f'translate({left_pad},{mark_y:.1f}) scale({scale:.4f})'
    bg_el    = f'<rect width="{bw}" height="{bh}" fill="{bg}"/>'
    return (
        f'<?xml version="1.0" encoding="UTF-8"?>\n'
        f'<svg xmlns="http://www.w3.org/2000/svg" '
        f'viewBox="0 0 {bw} {bh}">\n'
        f'  {bg_el}\n'
        f'  <g transform="{transform}">{build_p(mark_fill)}</g>\n'
        f'  <text x="{text_x:.1f}" y="{text_y:.1f}"\n'
        f'    font-family="\'Poppins\', \'Helvetica Neue\', Arial, sans-serif"\n'
        f'    font-size="{fnt_sz:.1f}" font-weight="300"\n'
        f'    fill="{text_fill}">{TEXT_LABEL}</text>\n'
        f'</svg>')
```

---

## Step 4 — Raster PNG helpers (PIL only, no cairosvg)

```python
def resize_logo(logo_img, size, pad_ratio=0.12, bg=None):
    inner   = int(size * (1 - 2 * pad_ratio))
    lcp     = logo_img.copy()
    lcp.thumbnail((inner, inner), Image.LANCZOS)
    rw, rh  = lcp.size
    canvas  = Image.new("RGBA", (size, size), bg if bg else (0,0,0,0))
    canvas.paste(lcp, ((size-rw)//2, (size-rh)//2), lcp)
    return canvas
```

**Padding rules:**
| Asset                | `pad_ratio` | Background       |
|----------------------|-------------|------------------|
| icon-192, icon-512   | 0.05        | transparent      |
| maskable-icon-512    | 0.18        | `#FFFFFF`        |
| apple-touch-icon     | 0.05        | `#FFFFFF`        |
| favicon.ico base     | 0.05        | `#FFFFFF`        |

---

## Step 5 — Wordmark raster (PIL with Poppins)

```python
from PIL import ImageFont, ImageDraw

FONT_LIGHT = "/usr/share/fonts/truetype/google-fonts/Poppins-Light.ttf"

def make_wordmark_pil(logo_img, text_color, bg_color=None, width=1200):
    mark_w = int(width * 0.38)
    lcp    = logo_img.copy()
    lcp.thumbnail((mark_w, mark_w), Image.LANCZOS)
    mw, mh = lcp.size
    fnt_sz = int(width * 0.057)
    fnt    = ImageFont.truetype(FONT_LIGHT, fnt_sz)
    gap    = int(mh * 0.10)
    canvas = Image.new("RGBA", (width, mh + gap + int(fnt_sz*1.35)),
                        bg_color if bg_color else (0,0,0,0))
    canvas.paste(lcp, ((width-mw)//2, 0), lcp)
    draw = ImageDraw.Draw(canvas)
    bb   = draw.textbbox((0,0), TEXT_LABEL, font=fnt)
    tx   = (width - (bb[2]-bb[0])) // 2
    draw.text((tx, mh+gap), TEXT_LABEL, font=fnt, fill=text_color)
    return canvas
```

---

## Step 6 — Banner raster (PIL) — safe two-line layout

Banners use a **two-line text layout** (brand name + tagline) that auto-sizes fonts and wraps the tagline to prevent clipping. Never hardcode font sizes — always compute them dynamically.

```python
def get_font(size):
    for path in [
        "/usr/share/fonts/truetype/google-fonts/Poppins-Light.ttf",
        "/usr/share/fonts/truetype/google-fonts/Poppins-Regular.ttf",
        "/usr/share/fonts/truetype/liberation/LiberationSans-Regular.ttf",
    ]:
        try: return ImageFont.truetype(path, size)
        except: pass
    return ImageFont.load_default()

def get_font_bold(size):
    for path in [
        "/usr/share/fonts/truetype/google-fonts/Poppins-SemiBold.ttf",
        "/usr/share/fonts/truetype/liberation/LiberationSans-Bold.ttf",
    ]:
        try: return ImageFont.truetype(path, size)
        except: pass
    return get_font(size)

def make_banner(logo_img, text_color, tagline_color, bg_color, width=1920, height=640):
    canvas   = Image.new("RGBA", (width, height), bg_color)
    mark_max = int(height * 0.52)
    lcp = logo_img.copy()
    lcp.thumbnail((mark_max, mark_max), Image.LANCZOS)
    mw, mh   = lcp.size
    left_pad = int(width * 0.07)
    canvas.paste(lcp, (left_pad, (height-mh)//2), lcp)

    text_x  = left_pad + mw + int(width * 0.04)
    avail_w = int(width * 0.94) - text_x
    draw    = ImageDraw.Draw(canvas)

    # Brand name: shrink until it fits avail_w
    brand_sz = int(height * 0.20)
    while brand_sz > 20:
        fnt = get_font_bold(brand_sz)
        bb  = draw.textbbox((0,0), BRAND, font=fnt)
        if (bb[2]-bb[0]) <= avail_w: break
        brand_sz -= 4
    fnt_brand = get_font_bold(brand_sz)

    # Tagline: 42% of brand size, word-wrapped
    tag_sz  = max(int(brand_sz * 0.42), 18)
    fnt_tag = get_font(tag_sz)
    words   = TAGLINE.split()
    lines, line = [], ""
    for w in words:
        test = (line + " " + w).strip()
        bb   = draw.textbbox((0,0), test, font=fnt_tag)
        if (bb[2]-bb[0]) <= avail_w: line = test
        else:
            if line: lines.append(line)
            line = w
    if line: lines.append(line)

    # Measure and vertically center text block
    bb_b   = draw.textbbox((0,0), BRAND, font=fnt_brand)
    bh     = bb_b[3] - bb_b[1]
    bb_t   = draw.textbbox((0,0), lines[0] if lines else "", font=fnt_tag)
    th     = bb_t[3] - bb_t[1]
    gap_bt = int(brand_sz * 0.25)
    gap_tl = int(tag_sz * 0.30)
    n      = len(lines)
    total_h = bh + (gap_bt + n*th + (n-1)*gap_tl if TAGLINE else 0)
    ty      = (height - total_h) // 2

    draw.text((text_x, ty), BRAND, font=fnt_brand, fill=text_color)
    if TAGLINE:
        y = ty + bh + gap_bt
        for ln in lines:
            draw.text((text_x, y), ln, font=fnt_tag, fill=tagline_color)
            y += th + gap_tl
    return canvas
```

Produce three variants:
```python
banner_dark    = make_banner(logo_white, (255,255,255,255), (180,180,180,255), (10,10,10,255),   1920, 640)
banner_light   = make_banner(logo_black, (13,13,13,255),   (80,80,80,255),    (255,255,255,255), 1920, 640)
banner_sq_dark = make_banner(logo_white, (255,255,255,255), (180,180,180,255), (10,10,10,255),   1080, 1080)
```

---

## Step 7 — Save all files

```python
import os
OUT = "/mnt/user-data/outputs"

# SVG
for name, content in svg_defs.items():
    with open(os.path.join(OUT, name), "w") as f: f.write(content)

# PNG
icon192.save(os.path.join(OUT, "icon-192.png"), "PNG")
icon512.save(os.path.join(OUT, "icon-512.png"), "PNG")
mask512.save(os.path.join(OUT, "maskable-icon-512.png"), "PNG")
apple.save(os.path.join(OUT, "apple-touch-icon.png"), "PNG")

# ICO (multi-resolution)
ico_base.save(os.path.join(OUT, "favicon.ico"), format="ICO",
              sizes=[(16,16),(32,32),(48,48),(64,64),(128,128),(256,256)])

# WEBP
icon192.save(os.path.join(OUT, "icon-192.webp"), "WEBP", quality=90)
icon512.save(os.path.join(OUT, "icon-512.webp"), "WEBP", quality=90)
mask512.save(os.path.join(OUT, "maskable-icon-512.webp"), "WEBP", quality=90)

# Wordmark
wm_light.save(os.path.join(OUT, "logo-wordmark-light.png"), "PNG")
wm_dark.save(os.path.join(OUT, "logo-wordmark-dark.png"), "PNG")
wm_light.save(os.path.join(OUT, "logo-wordmark-light.webp"), "WEBP", quality=92)
wm_dark.save(os.path.join(OUT, "logo-wordmark-dark.webp"), "WEBP", quality=92)

# Banners
for img, name, fmt, kw in [
    (banner_dark,    "banner-dark.png",     "PNG",  {}),
    (banner_dark,    "banner-dark.webp",    "WEBP", {"quality":92}),
    (banner_light,   "banner-light.png",    "PNG",  {}),
    (banner_light,   "banner-light.webp",   "WEBP", {"quality":92}),
    (banner_sq_dark, "banner-sq-dark.png",  "PNG",  {}),
    (banner_sq_dark, "banner-sq-dark.webp", "WEBP", {"quality":92}),
]:
    img.save(os.path.join(OUT, name), fmt, **kw)
```

---

## Step 8 — Present files

After all files are saved, call `present_files` **once** with ALL output files in a single call — never split into multiple batches. Order them for visual impact:

```
banners (PNG first, then WEBP, then SVG)
→ wordmarks (PNG, WEBP, SVG)
→ SVG marks (fill-white, fill-black, outline-black, outline-white, favicon.svg)
→ PNG icons (icon-512, icon-192, maskable-icon-512, apple-touch-icon)
→ WEBP icons (icon-512, icon-192, maskable-icon-512)
→ favicon.ico
```

Example (all paths listed in one `present_files` call):
```python
present_files([
    OUT/banner-dark.png, OUT/banner-light.png, OUT/banner-sq-dark.png,
    OUT/banner-dark.webp, OUT/banner-light.webp, OUT/banner-sq-dark.webp,
    OUT/banner-dark.svg, OUT/banner-light.svg,
    OUT/logo-wordmark-dark.png, OUT/logo-wordmark-light.png,
    OUT/logo-wordmark-dark.webp, OUT/logo-wordmark-light.webp,
    OUT/logo-wordmark-dark.svg, OUT/logo-wordmark-light.svg,
    OUT/logo-mark-fill-white.svg, OUT/logo-mark-fill-black.svg,
    OUT/logo-mark-outline-black.svg, OUT/logo-mark-outline-white.svg,
    OUT/favicon.svg,
    OUT/icon-512.png, OUT/icon-192.png,
    OUT/maskable-icon-512.png, OUT/apple-touch-icon.png,
    OUT/icon-512.webp, OUT/icon-192.webp, OUT/maskable-icon-512.webp,
    OUT/favicon.ico,
])
```

Then print a summary table of all generated files with sizes.

---

## Edge cases & troubleshooting

| Symptom | Fix |
|---|---|
| Mask captures noise/artifacts | Raise threshold: `cv2.threshold(gray, 230, ...)` |
| Logo on dark/black background | Switch to `cv2.THRESH_BINARY` (not `_INV`) |
| SVG path looks jagged | Lower epsilon: `cv2.approxPolyDP(cnt, 0.8, ...)` |
| SVG path too blocky/simplified | Lower epsilon: try `0.51.0` |
| Multiple disconnected shapes | Use `cv2.RETR_CCOMP` and loop all contours |
| Wordmark text clipped/too large | Adjust `fnt_sz = int(width * 0.04)` (lower = smaller) |
| Font not found | Fallback: `ImageFont.truetype("/usr/share/fonts/truetype/liberation/LiberationSans-Regular.ttf", fnt_sz)` |
| Banner text overflows right edge | Use dynamic sizing loop: shrink `brand_sz` until `textbbox width <= avail_w` |
| Tagline wraps badly / overflows  | Use word-wrap loop with `avail_w` guard — never hardcode tagline font size |
| No tagline provided              | Set `TAGLINE = ""` and skip tagline drawing block entirely |

---

## manifest.json snippet (Next.js / PWA)

After generating, offer this snippet to the user:

```json
{
  "icons": [
    { "src": "/icon-192.png",         "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png",         "sizes": "512x512", "type": "image/png" },
    { "src": "/maskable-icon-512.png","sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}
```

And the `<head>` tags:
```html
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
```