Habilidades screenshots
📸

screenshots

Baixo Risco ⚙️ Comandos externos🌐 Acesso à rede📁 Acesso ao sistema de arquivos

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.

Suporta: Claude Codex Code(CC)
⚠️ 68 Ruim
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

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 Risco
v1 • 2/25/2026

Static 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.

1
Arquivos analisados
402
Linhas analisadas
6
achados
1
Total de auditorias
Problemas de Baixo Risco (3)
External Command Execution
Skill executes shell commands for Playwright operations and file management. Commands are standard development tooling with hardcoded arguments.
User Credential Collection
Skill prompts users for login credentials (email, password) to access authenticated pages for screenshots. Credentials are used in generated scripts.
Localhost Network Access
Skill accesses localhost URLs provided by users for screenshot capture. This is expected behavior for a web app screenshot tool.

Fatores de risco

⚙️ Comandos externos (5)
🌐 Acesso à rede (1)
📁 Acesso ao sistema de arquivos (1)
Auditado por: claude

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
87
Conteúdo
31
Comunidade
84
Segurança
91
Conformidade com especificações

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

Solicitação Básica de Captura
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.
Capturas de App Autenticado
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.
Capturas de Recursos de Página Completa
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.
Variantes Modo Escuro e Claro
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?
Sim. Execute npm install -D playwright ou npm install -D @playwright/test antes de usar esta habilidade.
Qual resolução têm as capturas de tela?
As capturas são capturadas em 2880x1800 pixels usando fator de escala de dispositivo 2x para qualidade retina.
Esta habilidade pode capturar apps que requerem login?
Sim. Forneça suas credenciais de login quando solicitado, e a habilidade autenticará antes de capturar as screenshots.
Onde as capturas são salvas?
As capturas são salvas em um diretório screenshots na raiz do seu projeto com nomes de arquivo descritivos em kebab-case.
Posso capturar screenshots em modo escuro?
Sim. Se seu app suportar modo escuro, a habilidade pode definir o esquema de cores do navegador para escuro antes de capturar.
E se meu servidor de desenvolvimento não estiver rodando?
A habilidade detectará se o Playwright não conseguir conectar e ajudará você a iniciar seu servidor de desenvolvimento antes de prosseguir.

Detalhes do Desenvolvedor

Estrutura de arquivos

📄 SKILL.md