Blog Screenshot — Skill 42

Especialista em captura via Playwright. Pega URL/elemento → entrega PNG/JPG limpo.

Governança Global

Esta skill segue GLOBAL.md, policies/tool-safety.md. Usa Playwright MCP que já está no harness padrão do kit.

Quando Usar

• Skill 41 (blog-publisher) precisa de imagem real de algo navegável (não geração)
• Documentação técnica que precisa mostrar a UI de um site/dashboard
• Comparação visual antes/depois de mudança em landing page
• Captura de relatório HTML rendered (ex: analyze-doc/index.html)

Quando NÃO Usar

• Imagem conceitual/abstrata → usar skill 17 (image-generator fal.ai)
• Logo/icone/favicon → usar skill 36 (web-asset-generator)
• Mockup de UI que ainda não existe → skill 17
• Screenshot de PDF/documento estático — usar outra ferramenta (Playwright é browser only)

Decision tree: full-page vs viewport vs element

A captura é da página inteira?
├── SIM → fullPage: true
│   └── Resultado: arquivo longo, ideal pra hero/cover landing
└── NÃO → fullPage: false (viewport visible)
    ├── Específico de uma seção?
    │   └── Scroll até âncora (URL com #fragment) antes do shot
    └── Específico de um elemento?
        └── Passar `element` selector pro screenshot

Viewports padrão (escolher por destino)

Destino	Width × Height	Quando usar
Cover de post de blog	1500 × 750	Proporção Medium/Twitter OG
Hero de landing page	1400 × 900	Desktop padrão
Inline section	1200 × 800	Section dentro de post
Mobile preview	390 × 844	Responsive showcase (iPhone 14)
Tablet preview	1024 × 768	iPad portrait

Protocolo

1. Resolver target

• URL completa? OK, navegar direto
• Path relativo (ex: analyze-doc/index.en.html)? converter pra https://felvieira.github.io/... se já tiver Pages, ou file:// se for local (file:// pode estar bloqueado no Playwright MCP — usar Pages quando possível)
• Pedido inclui #anchor? incluir na URL pra scroll automático

2. Configurar viewport

mcp__plugin_playwright_playwright__browser_resize({ width: 1400, height: 900 })

Ou viewport específico do destino (ver tabela acima).

3. Navegar

mcp__plugin_playwright_playwright__browser_navigate({ url: "https://..." })

4. Lidar com cookie banner / overlay (se aparecer)

Se site é público com cookie banner, dispensar via browser_evaluate antes do shot:

// Remove common cookie banner selectors
document.querySelectorAll('[id*="cookie"],[class*="cookie-banner"],[class*="consent"]')
  .forEach(el => el.remove());

5. Aguardar render (se necessário)

Pra páginas com lazy-load ou animação inicial, esperar 1-2s antes do shot:

mcp__plugin_playwright_playwright__browser_evaluate({
  function: "() => new Promise(r => setTimeout(r, 1500))"
})

6. Tirar screenshot

mcp__plugin_playwright_playwright__browser_take_screenshot({
  filename: "D:/Repos/blog/assets/images/{slug}-{N}.png",
  type: "png",
  fullPage: false  // ou true conforme decisão
})

7. Verificar tamanho do arquivo

ls -la D:/Repos/blog/assets/images/{slug}-{N}.png

Esperado: 50KB-300KB pra PNG dark mode comum. Se >1MB, considerar converter pra JPEG ou crop específico de elemento.

Checkpoint: abrir o arquivo gerado e confirmar visualmente — tela em branco (esperou pouco no passo 5), cookie banner ainda visível (seletor do passo 4 não bateu no site), ou viewport cortando conteúdo esperado. Se algo estiver errado, ajustar o passo correspondente (não só repetir o shot) e capturar de novo.

Naming convention

Para integração com skill 41:

assets/images/{slug}-cover.png         ← cover do post
assets/images/{slug}-1.png             ← primeiro inline
assets/images/{slug}-2.png             ← segundo inline
assets/images/{slug}-mobile.png        ← (opcional) mobile preview

Slug deve bater com o slug do post (YYYY-MM-DD-{slug}.html em posts/).

Entradas Esperadas

• URL ou descrição do que capturar
• (opcional) viewport custom
• (opcional) full-page vs viewport vs element
• (opcional) destino do arquivo

Saídas Esperadas

• Arquivo PNG/JPG salvo
• Path retornado pra skill 41 usar no <img> do post
• Largura/altura informados

Anti-padrões

Anti-padrão	Realidade
Tirar fullPage de página muito longa	Vira 8MB. Quebra OG. Sempre fazer crops específicos.
Esquecer de fechar cookie banner	Cobertura do screenshot, vergonha pública. Sempre limpar antes.
Hardcode viewport mobile pra cover	Cover precisa 16:9 ou 2:1. Mobile só pra mostrar responsividade.
Capturar sem aguardar fonts	Fonts não carregadas geram FOUT no print. Aguardar 1s mínimo.
Screenshot direto sem resize	Default do Playwright é 1280×720. Pra cover de blog, ajustar pra 1500×750.

Composição com outras skills

• Skill 41 (blog-publisher) — invoca esta skill quando o post é sobre algo navegável
• Skill 17 (image-generator) — alternativa pra imagens conceituais (não navegáveis)

Evidência de Conclusão

• Arquivo PNG/JPG existe no path esperado
• Tamanho razoável (50KB-500KB típico)
• Dimensões batem com viewport solicitado
• Sem cookie banners ou overlays no screenshot
• Path retornado pra caller

Cross-references

• skills/41-blog-publisher/SKILL.md — invoca esta skill
• skills/17-image-generator/SKILL.md — alternativa de geração (não captura)
• Playwright MCP — built-in no Claude Code via plugin
• D:/Repos/blog/assets/images/ — destino padrão das capturas pra blog