Help us improve
Share bugs, ideas, or general feedback.
From dev-team-kit-fv
Captures clean screenshots of web pages via Playwright MCP for blog posts and documentation. Handles viewport resizing, full-page vs element shots, cookie banners, anchor scrolling, and PNG/JPG output.
npx claudepluginhub felvieira/claude-skills-fv --plugin dev-team-kit-fvHow this skill is triggered — by the user, by Claude, or both
Slash command
/dev-team-kit-fv:42-blog-screenshot [URL ou descrição da captura][URL ou descrição da captura]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
> **Especialista em captura via Playwright.** Pega URL/elemento → entrega PNG/JPG limpo.
Captures web page screenshots with a tool cascade (browser MCP → shot-scraper → Playwright → user install). Handles full-page, element, viewport, retina, dark mode, and batched captures.
Generates marketing-quality screenshots of your app using Playwright at HiDPI resolution. Use for Product Hunt, social media, landing pages, or documentation.
Captures screenshots of web pages, local files, and Reveal.js presentations using Playwright, enabling visual inspection and iteration for agents that cannot see rendered UI.
Share bugs, ideas, or general feedback.
Especialista em captura via Playwright. Pega URL/elemento → entrega PNG/JPG limpo.
Esta skill segue GLOBAL.md, policies/tool-safety.md. Usa Playwright MCP que já está
no harness padrão do kit.
analyze-doc/index.html)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
| 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 |
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)#anchor? incluir na URL pra scroll automáticomcp__plugin_playwright_playwright__browser_resize({ width: 1400, height: 900 })
Ou viewport específico do destino (ver tabela acima).
mcp__plugin_playwright_playwright__browser_navigate({ url: "https://..." })
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());
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))"
})
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
})
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.
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/).
<img> do post| 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. |
skills/41-blog-publisher/SKILL.md — invoca esta skillskills/17-image-generator/SKILL.md — alternativa de geração (não captura)D:/Repos/blog/assets/images/ — destino padrão das capturas pra blog