Stats
Actions
Tags
From dev-team-kit-fv
Generates favicons (multi-size), PWA icons, Open Graph images, apple-touch-icon, and HTML meta tags from a logo or brand text. Use before deploying a site, landing page, or PWA.
How this skill is triggered — by the user, by Claude, or both
Slash command
/dev-team-kit-fv:36-web-asset-generator [--input=path/to/logo.png] [--brand-name=X] [--brand-color=#hex] [--output-dir=public/][--input=path/to/logo.png] [--brand-name=X] [--brand-color=#hex] [--output-dir=public/]This skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Gap operacional comum: time termina deploy e percebe que faltam favicons, PWA icons, e a OG image quando alguem compartilha o link no WhatsApp aparece em branco. Esta skill resolve em 1 comando.
Gap operacional comum: time termina deploy e percebe que faltam favicons, PWA icons, e a OG image quando alguem compartilha o link no WhatsApp aparece em branco. Esta skill resolve em 1 comando.
Complementa skill 17 (Image Generator — fal.ai) que gera imagens originais; esta skill deriva assets de uma imagem ja existente (logo) ou de texto (slogan).
Esta skill segue GLOBAL.md, policies/execution.md, policies/tool-safety.md, policies/writing-clarity.md.
https://meusite.compublic/): onde gerar os arquivospublic/
├── favicon.ico (16, 32, 48 multi-size .ico)
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-96x96.png
├── apple-touch-icon.png (180x180)
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── icon-maskable-512.png (PWA maskable, com safe area)
├── og-image.png (1200x630 — Facebook/LinkedIn)
├── twitter-card.png (1200x675 — Twitter large card)
├── manifest.webmanifest
└── browserconfig.xml (Windows tile)
public/meta-tags.html — copiar e colar no <head>:
<!-- Favicons -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- PWA -->
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#<brand-color>">
<!-- Open Graph -->
<meta property="og:title" content="<title>">
<meta property="og:description" content="<description>">
<meta property="og:image" content="https://<base-url>/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://<base-url>/">
<meta property="og:type" content="website">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<title>">
<meta name="twitter:description" content="<description>">
<meta name="twitter:image" content="https://<base-url>/twitter-card.png">
Detalhes nas sub-secoes a seguir.
| Asset | Tamanho | Formato | Para |
|---|---|---|---|
| favicon.ico | 16+32+48 multi | ICO | browser tab |
| favicon-16/32/96 | exatos | PNG | browser tab fallback |
| apple-touch-icon | 180x180 | PNG | iOS home screen |
| android-chrome-192 | 192x192 | PNG | Android |
| android-chrome-512 | 512x512 | PNG | Android splash |
| icon-maskable-512 | 512x512 | PNG (com 80% safe area centralizada) | PWA adaptive icon |
| og-image | 1200x630 | PNG ou JPG | Facebook, LinkedIn, WhatsApp |
| twitter-card | 1200x675 | PNG | Twitter Large Card |
| ms-tile | 144x144 | PNG | Windows pinned site |
Regra critica de OG image:
npx @realfavicongenerator/cli generate \
--master-picture path/to/logo.png \
--output public/ \
--background "#0f766e" \
--theme-color "#0f766e" \
--app-name "MeuApp"
Cobre favicon completo + PWA + Apple + Windows. Output inclui HTML snippet.
# favicon.ico multi-size
magick logo.png -define icon:auto-resize=16,32,48 favicon.ico
# PNG sizes
for size in 16 32 96 192 512; do
magick logo.png -resize ${size}x${size} favicon-${size}x${size}.png
done
# Apple
magick logo.png -resize 180x180 apple-touch-icon.png
# OG (1200x630, com padding centralizado)
magick logo.png -resize 600x600 -background "#0f766e" \
-gravity center -extent 1200x630 og-image.png
import sharp from 'sharp';
const sizes = [16, 32, 96, 192, 512];
for (const size of sizes) {
await sharp('logo.png')
.resize(size, size)
.toFile(`public/favicon-${size}x${size}.png`);
}
// OG image
await sharp('logo.png')
.resize(600, 600)
.extend({
top: 15, bottom: 15, left: 300, right: 300,
background: { r: 15, g: 118, b: 110, alpha: 1 }
})
.toFile('public/og-image.png');
Se nao houver logo, gerar OG/favicon a partir de texto + cor:
magick -size 1200x630 xc:"#0f766e" \
-font Arial-Bold -pointsize 96 -fill white -gravity center \
-annotate 0 "MeuApp" og-image.png
Para favicon com inicial: gerar 512x512 com letra centralizada, depois resize.
Template minimo:
{
"name": "MeuApp",
"short_name": "MeuApp",
"description": "Descricao curta",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0f766e",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
?v=2og-image-v2.pngChecklist:
# 1. Lighthouse (Best Practices + PWA)
npx lighthouse https://meusite.com --view
# 2. Favicon checker
curl -I https://meusite.com/favicon.ico # deve retornar 200
# 3. OG preview
# Facebook debugger (URL acima)
# OpenGraph.xyz (rapido visual): https://www.opengraph.xyz/
# 4. PWA installability
# Chrome DevTools > Application > Manifest
Stock photo sem branding = link parece spam. Sempre incluir logo + nome.
Resize de logo complexo para 16x16 vira borrao. Criar versao simplificada do logo (so simbolo, sem texto).
iOS aplica fundo branco automatico atras de transparencia, gerando halo. Sempre fundo solido em apple-touch-icon.
PWA sem maskable: adaptive icon do Android fica com borda branca. Sempre incluir purpose: maskable.
OG image precisa URL absoluta (https://...), nao relativa (/og-image.png). Sem URL absoluta, preview nao funciona em apps externos.
Pagina de produto X com OG generico do site = baixa CTR. Por pagina importante, gerar OG dedicada.
manifest.webmanifest valido (passar em https://manifest-validator.appspot.com/)meta-tags.html snippet pronto para colarApos geracao, entregar:
public/)<head>grok-imagine ($0.020). Para OG card com texto, override pra gemini-3-pro ($0.15 — vale pelo polish tipográfico).meta-tags.html no template HTML/Next layoutdocs/repo-audit/assets.mdnpx claudepluginhub felvieira/claude-skills-fv --plugin dev-team-kit-fvGenerates favicons, PWA app icons, and Open Graph social images for Facebook/Twitter/WhatsApp/LinkedIn from logos or text. Includes image resizing, text-to-image, and HTML meta tags.
Generates code-based visual assets: SVG icons, OG image HTML templates, social banners, and icon sets. Outputs files with light/dark variants and usage instructions.
Generates Open Graph social media preview images by creating a screenshot-optimized page that matches the project's design system, captures it at 1200x630 with Playwright, and configures meta tags.