screenshots
Gerar Capturas de Tela de Marketing com Playwright
Criar capturas de tela de qualidade para marketing no Product Hunt, redes sociais ou documentação consome muito tempo. Esta habilidade automatiza a captura de capturas de tela com resolução retina usando Playwright.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "screenshots". Gere 5 capturas de tela de marketing do meu app Next.js em localhost:3000
Resultado esperado:
Diretório screenshots criado e 5 imagens de qualidade retina capturadas: 01-landing-hero.png, 02-features-grid.png, 03-dashboard-view.png, 04-analytics-panel.png, 05-settings-modal.png. Todos arquivos estão em resolução 2880x1800 prontos para uso em marketing.
A utilizar "screenshots". Capture a página de preços após clicar no toggle anual
Resultado esperado:
Navegou para /pricing, clicou no toggle de faturamento anual, aguardou animação de atualização de preço, capturou pricing-annual.png mostrando display de preços atualizado.
Auditoria de Segurança
Baixo RiscoStatic analysis detected 83 pattern matches, but all are false positives. The SKILL.md file contains documentation and code examples for a legitimate Playwright screenshot tool. External commands are standard development tooling (npx, npm, node, mkdir). Network references are localhost examples in documentation. Filesystem operations create a screenshots directory for user output.
Problemas de Baixo Risco (3)
Fatores de risco
⚙️ Comandos externos (5)
🌐 Acesso à rede (1)
📁 Acesso ao sistema de arquivos (1)
Pontuação de qualidade
O Que Você Pode Construir
Lançamento no Product Hunt
Gere um conjunto de 5-10 capturas de tela principais mostrando recursos essenciais para sua página de lançamento no Product Hunt.
Capturas de Tela para Documentação
Crie capturas de tela de referência de UI consistentes para guias de usuário e documentação de tutoriais.
Conteúdo para Redes Sociais
Produza capturas de tela atraentes de demonstração de recursos otimizadas para Twitter, LinkedIn e outras plataformas sociais.
Tente Estes Prompts
Tire capturas de tela do meu app em http://localhost:3000 para um lançamento no Product Hunt. Preciso de 5 capturas mostrando o dashboard, principais recursos e página de configurações.
Meu app requer login. A página de login está em /sign-in. Use email demo@example.com e senha Demo123!. Após o login, capture o dashboard e páginas de perfil de usuário.
Capture capturas de tela de página completa (não apenas viewport) da página de preços e página de recursos. Aguarde 500ms para animações completarem antes de capturar.
Gere capturas de tela da landing page nos modos claro e escuro. Use viewport 1440x900 com escala retina 2x para uso em marketing.
Melhores Práticas
- Use dados seed ou demo para garantir que as capturas mostrem conteúdo realista
- Sempre aguarde o estado networkidle para garantir carregamento completo da página
- Use prefixos numéricos nos nomes de arquivo para ordenação consistente
Evitar
- Não faça commit de capturas com dados sensíveis no controle de versão
- Evite capturar screenshots com dados pessoais de usuário ou credenciais visíveis
- Não use URLs de produção sem confirmação explícita do usuário
Perguntas Frequentes
Preciso instalar o Playwright separadamente?
Qual resolução têm as capturas de tela?
Esta habilidade pode capturar apps que requerem login?
Onde as capturas são salvas?
Posso capturar screenshots em modo escuro?
E se meu servidor de desenvolvimento não estiver rodando?
Detalhes do Desenvolvedor
Autor
sickn33Licença
MIT
Repositório
https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/screenshotsReferência
main
Estrutura de arquivos
📄 SKILL.md