email-qa

O que email-qa faz?

Filtro: $ARGUMENTS Renderizador: ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/render-html.mjs

1. Obter o HTML final para cada template

• Existe um script de galeria? Procure em package.json por email-gallery, email:preview ou emails. Se um escrever todos os templates com dados de fixture, execute-o e use seu diretório de saída.
• Caso contrário, escreva um harness em /tmp/email-qa/render.ts (fora do repositório, a menos que o usuário queira mantê-lo):
  • importe cada renderizador (React Email render(), funções de template literal, MJML);
  • chame-o com fixtures realistas, incluindo casos extremos: um nome longo, um campo opcional ausente, 0, 1 e muitos itens, e ambas as localidades;
  • escreva <template>-<case>.html;
  • use stubs para qualquer coisa que leia env, DB ou rede. Execute-o com o tsx do repositório.
• Sempre faça QA do HTML final gerado, nunca do JSX.

2. Renderização + verificações estáticas

node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/render-html.mjs /tmp/email-qa/out/*.html --out /tmp/email-qa/shots

Para cada arquivo, isso produz @600/@375 nos modos claro e escuro, além de @600-noimg, e render.json com problemas estáticos. Leia as folhas para cada template.

3. Checklist (além do que o script sinaliza)

• Placeholders: nenhum de undefined, NaN, null, [object Object], {{…}}, Invalid Date, kr vazio, 0 st onde deveria estar oculto.
• Preheader: presente, significativo e não uma repetição do assunto. Preenchido para que o texto do corpo não vaze na prévia da caixa de entrada.
• Unsubscribe: obrigatório para resumos e marketing (além dos cabeçalhos List-Unsubscribe + List-Unsubscribe-Post no código de envio). E-mails transacionais são isentos; diga qual tipo cada template é.
• Imagens desligadas: a mensagem ainda faz sentido, há texto alternativo em cada imagem significativa, alt="" em espaçadores, e o CTA é texto vivo, não uma imagem.
• Modo escuro: os logotipos têm uma variante transparente ou segura para escuro, não há texto escuro sobre um fundo agora escuro, e a cor da marca ainda passa 3:1. A inversão forçada do Gmail/Outlook não pode ser emulada, então sinalize texto #000 fixo em fundos transparentes como um risco.
• Outlook desktop: layout de tabela, sem flex/grid, VML ou fallback de mso padding para botões, larguras em atributos width=, sem margin em elementos de bloco para espaçamento.
• Links: absolutos https://, UTM onde o projeto os utiliza, sem localhost ou hosts de pré-visualização, e sem rastreamento no unsubscribe.
• Cópia: localidade correta em todo o conteúdo (execute as regras de copy-check nas strings), nome do remetente e reply-to (de acordo com o que o projeto espera).
• CTA visível sem rolar a 375 e não cortado. O total fica abaixo de ~102 KB.

Critérios de saída

• Cada template é renderizado em todas as variantes e as folhas foram lidas.
• Nenhum vazamento de placeholder ou links relativos, e a meta viewport está presente.
• Cada problema restante é rotulado como bug (corrigido) ou risk (reportado).
• Um resumo curto para o usuário, além do diretório de screenshots.