From prompt-to-asset
Generates a full favicon bundle (ICO, SVG with dark mode, Apple Touch Icon, PWA icons) from a brand mark or prompt.
How this skill is triggered — by the user, by Claude, or both
Slash command
/prompt-to-asset:faviconThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
```html
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" type="image/svg+xml" href="/icon-dark.svg" media="(prefers-color-scheme: dark)">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
| File | Size | Alpha | Notes |
|---|---|---|---|
favicon.ico | 16, 32, 48 packed | yes | legacy compatibility; <15KB |
icon.svg | vector | yes | primary modern icon |
icon-dark.svg | vector | yes | prefers-color-scheme: dark |
apple-touch-icon.png | 180×180 | no — opaque | iOS home-screen; transparent = black background on iOS |
pwa/192.png, pwa/512.png | 192, 512 | yes | manifest any purpose |
pwa/512-maskable.png | 512, 80% safe zone padding | opaque | manifest maskable purpose |
SVG-first. Three paths, in order of preference:
logo-mark.svg exists in the brand bundle, use it directly. Optimize with SVGO. Generate color variants by re-coloring SVG paths.@resvg/resvg-js rasterization.skills/logo/SKILL.md), BiRefNet matte, K-means 4-color (favicons benefit from low color count), potrace --color or vtracer --mode polygon, SVGO.A simple, memorable [letter | glyph | shape] representing [SUBJECT].
Bold silhouette. Two or three colors maximum: [#primary, #bg].
Subject fills 70% of frame, centered.
Solid pure white background.
No text, no details that vanish at 16x16.
1:1 square, 1024x1024.
Option A (recommended): generate two separate SVGs — light on white, dark on black. Never algorithmically invert (loses WCAG contrast).
Option B (compromise): re-color SVG paths via data-driven palette swap from brand.light and brand.dark.
@resvg/resvg-js..ico file size <15KB.apple-touch-icon.png is opaque — reject if alpha channel present.pwa/512-maskable.png subject fits inside 80% center circle.favicon/
├── favicon.ico # 16/32/48 packed
├── icon.svg # primary modern icon
├── icon-dark.svg # prefers-color-scheme dark
├── apple-touch-icon.png # 180² opaque
├── pwa/192.png
├── pwa/512.png
├── pwa/512-maskable.png
├── head-snippet.html # <link> tags ready to paste
└── meta.json
npx claudepluginhub mohamedabdallah-14/prompt-to-assetCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.