Agent skill · design visual · aiskillstore
brand-assets-setup
Generate and deploy a complete brand asset pack for a Next.js App Router project. Scans the project, prints what to generate with exact specs, then imports and wires everything correctly.
Why this skill is useful
Adds a detailed checklist and generation prompt for brand assets specific to Next.js projects, which the AI wouldn't reliably generate on its own.
What it needs
Requires bash installed locally. About 7k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
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-im …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/brand-assets-setup