Capturas de Tela

Gere capturas de tela de qualidade de marketing do seu aplicativo usando o Playwright diretamente. As capturas de tela são tiradas em resolução HiDPI real (retina 2x) usando deviceScaleFactor: 2.

Quando Usar Esta Habilidade

Use esta habilidade quando:

• O usuário quiser criar capturas de tela para o Product Hunt
• Criar capturas de tela para mídias sociais
• Gerar imagens para landing pages
• Criar capturas de tela para documentação
• O usuário solicitar capturas de tela de aplicativos de qualidade de marketing

Pré-requisitos

O Playwright deve estar disponível. Verifique:

npx playwright --version 2>/dev/null || npm ls playwright 2>/dev/null | grep playwright

Se não for encontrado, informe o usuário:

O Playwright é necessário. Instale-o com: npm install -D playwright ou npm install -D @playwright/test

Passo 1: Determinar o URL do Aplicativo

Se $1 for fornecido, use-o como o URL do aplicativo.

Se nenhum URL for fornecido:

1. Verifique se um servidor de desenvolvimento provavelmente está em execução procurando por scripts package.json
2. Use AskUserQuestion para perguntar ao usuário o URL ou oferecer ajuda para iniciar o servidor de desenvolvimento

URLs padrão comuns para sugerir:

• http://localhost:3000 (Next.js, Create React App, Rails)
• http://localhost:5173 (Vite)
• http://localhost:4000 (Phoenix)
• http://localhost:8080 (Vue CLI, genérico)

Passo 2: Reunir Requisitos

Use AskUserQuestion com as seguintes perguntas:

Pergunta 1: Contagem de capturas de tela

• Título: "Contagem"
• Pergunta: "Quantas capturas de tela você precisa?"
• Opções:
  • "3-5" - Conjunto rápido de recursos principais
  • "5-10" - Cobertura abrangente de recursos
  • "10+" - Suíte completa de marketing

Pergunta 2: Propósito

• Título: "Propósito"
• Pergunta: "Para que serão usadas essas capturas de tela?"
• Opções:
  • "Product Hunt" - Imagens principais e destaques de recursos
  • "Mídias sociais" - Demonstrações de recursos atraentes
  • "Landing page" - Seções de marketing e benefícios
  • "Documentação" - Referência de UI e tutoriais

Pergunta 3: Autenticação

• Título: "Auth"
• Pergunta: "O aplicativo requer login para acessar os recursos que você deseja capturar?"
• Opções:
  • "Não é necessário login" - Apenas páginas públicas
  • "Sim, fornecerei as credenciais" - Precisa fazer login primeiro

Se o usuário selecionar "Sim, fornecerei as credenciais", faça perguntas de acompanhamento:

• "Qual é o URL da página de login?" (por exemplo, /login, /sign-in)
• "Qual é o e-mail/nome de usuário?"
• "Qual é a senha?"

O script detectará automaticamente os campos do formulário de login usando os localizadores inteligentes do Playwright.

Passo 3: Analisar a Base de Código para Recursos

Explore minuciosamente a base de código para entender o aplicativo e identificar oportunidades de captura de tela.

3.1: Leia a Documentação Primeiro

Sempre comece lendo estes arquivos para entender o que o aplicativo faz:

1. README.md (e quaisquer arquivos README em subdiretórios) - Leia o README completo para entender:

   • O que é o aplicativo e qual problema ele resolve
   • Recursos e capacidades principais
   • Capturas de tela ou descrições de recursos já documentadas

2. CHANGELOG.md ou HISTORY.md - Recursos recentes que valem a pena destacar

3. Diretório docs/ - Qualquer documentação adicional sobre recursos

3.2: Analisar Rotas para Encontrar Páginas

Leia a configuração de roteamento para descobrir todas as páginas disponíveis:

Importante: Leia realmente esses arquivos, não apenas verifique se eles existem. As definições de rota informam quais páginas estão disponíveis para capturas de tela.

3.3: Identificar Componentes Chave

Procure por componentes que representam recursos que podem ser capturados em tela:

• Componentes de painel (Dashboard)
• Seções de recursos com UI distinta
• Formulários e entradas interativas
• Visualizações de dados (gráficos, tabelas)
• Modais e caixas de diálogo
• Navegação e barras laterais
• Painéis de configurações
• Seções de perfil do usuário

3.4: Verificar Ativos de Marketing

…