felvieira/web-asset-generator
skills/36-web-asset-generator/SKILL.md
Skill para gerar assets web a partir de logo ou texto: favicon (multi-size), PWA icons, Open Graph images (Facebook/Twitter/WhatsApp/LinkedIn), apple-touch-icon, e respectivos meta tags HTML. Use ao preparar deploy de site, landing page ou PWA novo. Trigger em: "favicon", "favicons", "PWA icon", "manifest", "Open Graph image", "OG image", "social meta", "twitter card", "apple-touch-icon", "imagem de compartilhamento", "share image".
$ install --global
skillsauthnpx skillsauth add felvieira/claude-skills-fv web-asset-generatorInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 28, 2026, 3:18 AM114.0s1 file scanned
SKILL.md
- name:
- web-asset-generator
- description:
- |
- Skill para gerar assets web a partir de logo ou texto:
- favicon (multi-size), PWA icons,
- Trigger em:
- favicon", "favicons", "PWA icon", "manifest", "Open Graph image", "OG image",
- argument-hint:
- [--input=path/to/logo.png] [--brand-name=X] [--brand-color=#hex] [--output-dir=public/]
- allowed-tools:
- Read, Write, Bash(npx *), Bash(magick *), Bash(convert *), Bash(node *)
Web Asset Generator — Favicons, PWA Icons, OG Images
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).
Governanca Global
Esta skill segue GLOBAL.md, policies/execution.md, policies/tool-safety.md, policies/writing-clarity.md.
Quando Usar
- antes do primeiro deploy de site
- depois de mudanca de identidade visual (rebrand)
- ao adicionar suporte a PWA
- ao detectar (via Lighthouse) ausencia de manifest, favicon, OG tags
- preparando landing page para anuncio/lancamento
- migrando para HTTPS/dominio novo (URLs nas meta tags mudam)
Quando Nao Usar
- gerar imagem original (use skill 17 — Image Generator com fal.ai)
- editar imagem existente (use ferramenta especializada)
- design system inteiro (use skill 02 — UI/UX Designer)
- video/GIF (use skill 27 — Video Integration)
Entradas Esperadas
- logo source (preferivel): PNG/SVG quadrado, fundo transparente, >= 512x512
- OU brand text (fallback): nome curto + cor hex de fundo
- brand name (sempre): aparece em manifest e meta tags
- brand color (sempre): theme-color, OG bg
- base URL (para meta tags):
https://meusite.com - output dir (default
public/): onde gerar os arquivos
Saidas Esperadas
Diretorio de assets
public/
├── 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)
Snippet HTML pronto
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">
Responsabilidades / Protocolo
- Validar input: logo source quadrado >= 512x512 (PNG/SVG transparente preferivel) OU texto + cor de fundo
- Coletar metadados: brand name, brand color (hex), base URL absoluta, output dir
- Gerar favicons: ICO multi-size + PNG 16/32/96
- Gerar PWA icons: 192/512 + maskable 512 (com 80% safe area)
- Gerar Apple touch icon: 180x180 (fundo solido, sem transparencia)
- Gerar OG image: 1200x630 PNG (assunto centralizado, alto contraste)
- Gerar Twitter card: 1200x675 PNG
- Gerar manifest.webmanifest + browserconfig.xml
- Gerar snippet HTML com todas as meta tags (URLs absolutas)
- Validar output: Lighthouse PWA + Facebook debugger + Twitter validator
- Handoff para skill 04 (Frontend) integrar no template HTML
Detalhes nas sub-secoes a seguir.
Especificacoes Por Plataforma
| 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:
- texto deve caber em safe area de 1080x540 (margem 60px) — alguns clientes croppam
- contraste minimo 4.5:1 para texto
- evitar texto > 60 chars (corta no preview)
Ferramentas
Opcao A: realfavicongenerator (recomendada)
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.
Opcao B: ImageMagick (mais controle, manual)
# 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
Opcao C: Sharp (Node, programatico)
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');
Opcao D: Text-to-image (sem logo)
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.
Manifest PWA
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"
}
]
}
Heuristicas
Logo source ideal
- SVG > PNG transparente > PNG com fundo
- quadrado (recortar antes se nao for)
- detalhe minimo legivel a 16x16 (logos com texto fino quebram)
- contrastar com fundo branco E preto (PWA usa ambos)
OG image que funciona em todo lugar
- 1200x630 (proporcao 1.91:1)
- assunto principal no centro 1080x540
- texto grande (96-120pt para titulo)
- contraste alto
- sem informacao critica nas bordas
Maskable icon (PWA)
- safe area circular de 80% (raio 410px em 512px)
- fundo solido (sem transparencia)
- ferramenta visual: https://maskable.app/editor
Cache busting
- ao trocar assets, mudar query string nas meta tags:
?v=2 - ou renomear:
og-image-v2.png - caches de Facebook/Twitter levam dias para invalidar — usar debugger oficial:
- Facebook: https://developers.facebook.com/tools/debug/
- Twitter: https://cards-dev.twitter.com/validator
Validacao Pos-Geracao
Checklist:
# 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
Anti-Padroes
"OG image gerica de stock"
Stock photo sem branding = link parece spam. Sempre incluir logo + nome.
"Favicon de 16px borrado"
Resize de logo complexo para 16x16 vira borrao. Criar versao simplificada do logo (so simbolo, sem texto).
"Apple icon transparente"
iOS aplica fundo branco automatico atras de transparencia, gerando halo. Sempre fundo solido em apple-touch-icon.
"Manifest sem icons maskable"
PWA sem maskable: adaptive icon do Android fica com borda branca. Sempre incluir purpose: maskable.
"Esquecer de atualizar URL absoluta"
OG image precisa URL absoluta (https://...), nao relativa (/og-image.png). Sem URL absoluta, preview nao funciona em apps externos.
"Mesma OG image para todas as paginas"
Pagina de produto X com OG generico do site = baixa CTR. Por pagina importante, gerar OG dedicada.
Evidencia de Conclusao
- todos os assets do quadro "Especificacoes Por Plataforma" gerados
manifest.webmanifestvalido (passar em https://manifest-validator.appspot.com/)meta-tags.htmlsnippet pronto para colar- Lighthouse PWA score >= 90
- preview validado no Facebook debugger e Twitter validator
Handoff
Apos geracao, entregar:
- caminho dos assets (
public/) - snippet HTML para colar no
<head> - URL absoluta esperada (para validar OG quando deploy)
- checklist de validacao pos-deploy
Integracao com Pipeline
- Image Generator (skill 17): handoff direto — apos skill 17 gerar logo/mascote/asset criativo principal, esta skill (36) deriva todos os formatos web operacionais (favicon multi-tamanho, apple-touch-icon, PWA icons incluindo maskable, Open Graph 1200x630, Twitter card 1200x675, manifest, browserconfig). Skill 17 cria o original criativo; skill 36 deriva o pacote operacional. Se logo nao existe, skill 17 cria primeiro; se ja existe, skill 36 roda sozinha. Quando gerar logo, skill 17 usa default
grok-imagine($0.020). Para OG card com texto, override pragemini-3-pro($0.15 — vale pelo polish tipográfico). - Frontend (skill 04): integra
meta-tags.htmlno template HTML/Next layout - SEO (skill 14): valida que tags estao corretas e completas para indexacao
- Asset Librarian (skill 19): cataloga assets gerados em
docs/repo-audit/assets.md - Deploy (skill 07): valida que assets estao no bundle final + URLs absolutas configuradas
- Accessibility (skill 22): valida contraste de OG image
Related Skills
felvieira/41-blog-publisher
development
VerifiedTrustedCommunity
Skill compositora que pega texto/assunto e gera post de blog HTML completo no repo {blog_repo_path} ({github_user_repo_url}), com imagens (via skill 17 fal.ai ou skill 42 Playwright screenshot), commit+push automático, retorna URL pública via GitHub Pages. Trigger em: "post no blog", "publicar post", "escrever post", "blog post", "publish blog", "gera post", "criar post", "novo post no meu blog".
19SKILL.mdUpdated May 25, 2026
felvieira/context-budget
tools
VerifiedTrustedCommunity
Audita o peso de contexto carregado na sessão — CLAUDE.md, agents, MCP descriptions, rules ativas, skills invocadas e histórico acumulado. Estima tokens por componente, reporta headroom disponível e emite alertas de overflow. Distinto do cost-tracker (skill 30) que rastreia tokens gastos em completions runtime. Trigger em: "contexto inchado", "context overflow", "quanto contexto estou usando", "peso do contexto", "context budget", "tokens carregados", "sessao lenta", "respostas degradadas", "headroom de contexto", "custo fixo de contexto", "overhead de rules", "overhead dos agents", "impacto do MCP no contexto", "espaco no context window", "quanto cabe no context window"
18SKILL.mdUpdated May 29, 2026
felvieira/research-prep
development
VerifiedTrustedCommunity
Coleta e organiza informacao tecnica multi-fonte antes de escrever docs, PRDs, ADRs ou artigos. Busca em: docs oficiais, GitHub (repos + issues), Stack Overflow, papers e blogs de referencia. Ranqueia fontes por autoridade (oficial 40% + recencia 30% + profundidade 20% + comunidade 10%). Output: memory/research/<slug>.md pronto para alimentar skill 10 (documenter), skill 01 (po-feature-spec), skill 26 (prompt-engineer) ou skill 41 (blog-publisher). Trigger em: "pesquisa tecnica", "levanta informacao", "coleta docs", "busca referencias", "preciso de fontes", "research antes de escrever", "levanta o que existe sobre", "benchmark de solucoes", "o que existe sobre X", "quero entender o estado da arte", "compara abordagens", "levanta referencias", "faz um research de", "coleta fontes sobre", "pesquisa sobre", "quero saber o que existe de", "monta um dossie tecnico", "background tecnico", "due diligence tecnica", "levantamento de alternativas".
18SKILL.mdUpdated May 29, 2026
felvieira/pattern-conformity
development
VerifiedTrustedCommunity
Extrai e codifica os padroes de coding do projeto existente (naming, estrutura de arquivos, error handling, testing style, import style, API design, async patterns) e usa esses padroes como restricao sobre novo codigo. Garante que o agente code "igual ao resto do projeto" em vez de inventar convencoes proprias. Produce um "code style map" salvo em memory/patterns.md que todas as skills de geracao de codigo devem consultar. Trigger em: "segue o padrao do projeto", "coda igual ao resto", "nao reinventa padrao", "detecta padroes do codebase", "code style do projeto", "padrao do projeto", "convencao do projeto", "coda consistente", "mesma convencao", "sem reinventar roda", "padrao de codigo", "patterns do codebase", "pattern enforcement", "conformidade de padrao", "convencoes de naming", "padrao de tratamento de erro", "mesma estrutura do projeto", "detecta as convencoes", "extrai padroes de coding", "como o projeto estrutura".
18SKILL.mdUpdated May 29, 2026