Communitygithub.com

Biz SMTP Form Autoresponder — Auto-email após lead preencher fo…

Configura um auto-responder de e-mail baseado em SMTP para landing pages de vendas — envia e-mails automaticamente após o lead preencher o formulário (nome/telefone/e-mail), sem ficar preso a um provedor específico. Esta skill (1) pergunta ao usuário qual provedor SMTP usar (Gmail/Google Workspace, Resend SMTP, SendGrid, Mailgun, Brevo, Zoho ou SMTP customizado de hospedagem VN) e detecta a stack Next.js em uso, (2) lê o contexto de `offer.json` + `conversion-copy.md` (de `/biz-offer-alex-hormozi`) OU lê diretamente o projeto Next.js já construído via `ui-ux-pro-max` (arquivo `app/page.tsx`) OU lê a landing page HTML já implantada para entender a oferta, o resultado dos sonhos, o mecanismo e os bônus. Nota: a skill `biz-sales-page-layout` está DEPRECATED desde 2026-05-14 — o novo pipeline ignora layout/copy.json, (3) **elabora 2 e-mails**: e-mail A — auto-responder enviado ao lead (boas-vindas + entrega do lead magnet/confirmação de agendamento/link de pagamento conforme o tipo de oferta), e-mail B — notificação enviada ao proprietário (alerta de lead + informações de contato), (4) **mostra o rascunho para o usuário revisar e editar** antes de integrar ao código, (5) instala o `nodemailer`.

O que é Biz SMTP Form Autoresponder — Auto-email após lead preencher fo…?

Esta skill para agente de IA transforma o formulário de cadastro de uma landing page em um sistema de auto-responder de e-mail profissional. Ela guia o usuário por 7 fases: detecção da stack do projeto (Next.js App Router, Pages Router, Vite ou HTML estático), escolha do provedor SMTP (com recomendações baseadas no volume de tráfego), coleta de contexto da oferta (via artefatos de pipeline ou leitura direta do código), seleção do padrão de e-mail (entrega de lead magnet, confirmação de agendamento, lembrete de pagamento, nutrição ou onboarding pós-compra), elaboração de 2 e-mails (um para o lead e uma notificação para o proprietário), revisão do usuário e, finalmente, integração do código com `nodemailer` e variáveis de ambiente. A skill enfatiza que o e-mail de auto-resposta é um 'momento de ouro' para converter leads, evitando mensagens genéricas. Suporta os provedores Gmail, Resend, SendGrid, Mailgun, Brevo, Zoho e SMTP customizado, permitindo que o usuário troque de provedor apenas alterando variáveis de ambiente, sem modificar o código. A saída final inclui o patch de código, os rascunhos dos e-mails em HTML responsivo, a lista de variáveis de ambiente e um plano de teste.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/lexuanthanhhy/MKT.LANDINGPAGE.SKILLS/tree/main/.claude/skills/biz-email-setup

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Biz SMTP Form Autoresponder — E-mail automático após lead preencher formulário

Esta skill transforma o formulário de cadastro na landing page (nome/telefone/e-mail padrão para tráfego VN) em 2 e-mails automáticos assim que o usuário envia: (A) e-mail de boas-vindas para o lead, (B) e-mail de notificação para o proprietário. Os e-mails são elaborados individualmente para cada oferta com base no contexto existente do pipeline biz-* (nada genérico como "Obrigado por se cadastrar, entraremos em contato em breve" — isso é cópia que queima leads).

Filosofia: O e-mail auto-responder é o momento de ouro. O lead acabou de clicar em enviar = está no pico da intenção. O e-mail que chega em 30 segundos deve (1) confirmar que o envio foi correto, (2) entregar o que foi prometido no CTA (lead magnet / agendamento / link de pagamento), (3) definir expectativas claras para o próximo passo. Um bom e-mail auto-responder = converte 20-40% dos leads frios em leads quentes. Um e-mail genérico = o lead bloqueia o remetente ou esquece o nome da marca em 24h.

Por que SMTP (sem ficar preso a 1 provedor): SMTP é um padrão aberto — o usuário escolhe o provedor que cabe no bolso + região + conformidade. Gmail SMTP gratuito para 500/dia (suficiente para landing page com <50 leads/dia), Resend SMTP 3000/mês, SendGrid 100/dia para sempre grátis, Brevo (popular no VN) 300/dia grátis, hospedagem VN (Mắt Bão/PA/Inet) geralmente inclui SMTP. O código usa nodemailer — trocar de provedor só precisa alterar 4 variáveis de ambiente, sem modificar o código. Evita vendor lock-in.

Saída da skill: patch de código + 2 rascunhos de e-mail HTML responsivo + lista de variáveis de ambiente + plano de teste. A skill NÃO envia e-mail de teste automaticamente — o usuário deve confirmar o rascunho primeiro, pois o link do lead magnet, a voz da marca e o texto de urgência são propriedade do usuário.


Quando usar esta skill

  • O usuário acabou de implantar a landing page (via /biz-deploy-vercel) e o formulário está enviando dados para o vazio.
  • O usuário tem uma landing page pronta (Next.js, Vite ou HTML estático no Vercel) e quer integrar um auto-responder de e-mail.
  • O usuário está construindo algo novo e quer a integração de e-mail desde o início, antes de implantar.
  • O usuário já tem Gmail/Google Workspace e quer usar o SMTP gratuito em vez de criar uma conta em outro provedor.
  • O usuário tem hospedagem VN (Mắt Bão, PA, Inet) com servidor SMTP incluído.

NÃO use esta skill quando:

  • O usuário quer marketing por e-mail em massa (newsletter, campanha de nutrição de 7 a 30 dias) → Mailchimp/ConvertKit/MailerLite são mais adequados.
  • O usuário quer auto-responder por SMS/Zalo OA → caso de uso diferente.
  • O usuário quer integração com CRM (lead indo para Hubspot/Pipedrive/Notion DB) → outra skill.
  • O usuário precisa de cold email outreach em massa → Instantly/Smartlead, não transacional.

Fluxo de trabalho geral (7 fases)

Fase 0: DETECTAR STACK DO PROJETO (Next.js App / Pages / Vite / HTML estático)
       ↓
Fase 1: ESCOLHER PROVEDOR SMTP (Gmail / Resend SMTP / SendGrid / Mailgun / Brevo / Zoho / Customizado)
       ↓
Fase 2: COLETAR CONTEXTO (offer.json + conversion-copy.md, ou ler app/page.tsx do Next.js, ou ler HTML implantado)
       ↓
Fase 3: ESCOLHER PADRÃO DE E-MAIL (lead magnet / agendamento / pagamento / nutrição)
       ↓
Fase 4: ELABORAR 2 E-MAILS (auto-responder + notificação para o proprietário) — mostrar ao usuário
       ↓
Fase 5: REVISÃO E EDIÇÃO DO USUÁRIO — iterar até o usuário aprovar
       ↓
Fase 6: INTEGRAR CÓDIGO (instalar nodemailer + rota de API + binding do formulário + variáveis de ambiente)
       ↓
Fase 7: CONFIGURAÇÃO DO PROVEDOR + PLANO DE TESTE — instruções para obter credenciais SMTP, verificar domínio (se necessário), testar ao vivo

Cada fase para para o usuário confirmar — especialmente Fase 1 (escolha do provedor), Fases 4-5 (conteúdo do e-mail), Fase 7 (DNS do provedor) pois são propriedade da marca do usuário. A geração de código na Fase 6 é mais proativa.


Fase 0 — Detectar Stack do Projeto

Leia a raiz do projeto para determinar a stack. A stack determina: onde colocar a rota de API, a sintaxe de importação do nodemailer e o tipo de binding do formulário (fetch ou form action).

Arquivo detectadoStackCaminho da rota de APIBinding do formulário
next.config.js/mjs/ts + pasta app/Next.js App Routerapp/api/submit/route.tscomponente cliente fetch('/api/submit')
next.config.js/mjs/ts + pasta pages/Next.js Pages Routerpages/api/submit.tscomponente cliente fetch('/api/submit')
vite.config.js/tsVite (React/Vue/Svelte)api/submit.js (função Vercel)componente cliente fetch('/api/submit')
package.json sem framework, com index.htmlHTML estáticoapi/submit.js (função Vercel)<script> inline com fetch('/api/submit')
Sem projeto local, apenas URLPágina já implantadaPrecisa que o usuário clone o repositório primeiro ou indique o caminho do repositório—

Leia mais para determinar os campos do formulário:

  • Procure por <form> no código → liste os <input name="..."> existentes
  • Padrão esperado (conforme memória do projeto): name, phone, email. Algumas páginas adicionam: company, message, budget, utm_source.
  • Se o formulário ainda não existir → a skill criará um novo formulário com 3 campos mínimos (nome/telefone/e-mail) na Fase 6.

Importante: Se o usuário não tiver um projeto local (apenas a URL implantada), pare e pergunte: "Você tem o repositório local para eu integrar o código? Preciso editar os arquivos de origem. Se tiver apenas a URL, clone o repositório e me indique o caminho." Não é possível integrar apenas com a URL.


Fase 1 — Escolher Provedor SMTP

Pergunte ao usuário qual provedor, entre 7 opções. Cada provedor tem configurações SMTP diferentes (host/port/auth), e a skill preenche automaticamente o template das variáveis de ambiente quando o usuário escolhe.

#ProvedorPlano gratuitoAdequado quandoHost SMTPPortaObservações
1Gmail / Google Workspace500/diaUsuário já tem Gmail/Workspace, tráfego baixosmtp.gmail.com587 (STARTTLS)Obrigatório usar App Password (2FA), NÃO usar a senha principal
2Resend SMTP3000/mêsQuer alta deliverability + logs bonitos, OK configurar DNSsmtp.resend.com587Usuário = resend, Senha = chave de API. Precisa verificar domínio para enviar de @marca.vn customizado
3SendGrid SMTP100/dia para sempre grátisStack já conhece SendGrid, precisa de webhooksmtp.sendgrid.net587Usuário = literal apikey, Senha = chave de API
4Mailgun SMTP100/dia × 3 mesesRegião EU/US, amigável para desenvolvedoressmtp.mailgun.org (EUA) ou smtp.eu.mailgun.org (UE)587Usuário/senha das configurações de domínio do Mailgun
5Brevo (Sendinblue) SMTP300/dia para sempre grátisPopular no VN, maior nível gratuito, tem suporte VNsmtp-relay.brevo.com587Usuário = e-mail de login, Senha = chave SMTP (diferente da chave de API)
6Zoho Mail SMTP5/dia grátis, $1/usuário/mêsUsuário já usa Zoho Workspacesmtp.zoho.com587Precisa de App Password se o 2FA estiver ativado
7SMTP CustomizadoDepende da hospedagemHospedagem VN (Mắt Bão/PA/Inet/Nhân Hòa) inclui SMTP, ou usa Postfix auto-hospedadoUsuário forneceUsuário forneceUsuário cola o host/porta/usuário/senha completos

Recomendação padrão por tipo de oferta:

  • Landing page com <50 leads/dia, usuário tem Gmail → Gmail SMTP (custo zero, 5 minutos de configuração).
  • Landing page com >50 leads/dia ou precisa de deliverability profissional → Brevo (grátis 300/dia, boa deliverability para VN) ou Resend SMTP (3000/mês, logs bonitos).
  • Usuário quer algo à prova de migração, pode auto-hospedar depois → SMTP Customizado desde o início.

Formato da pergunta para o usuário:

Qual provedor SMTP você gostaria de usar para enviar os e-mails automáticos?

1. Gmail / Google Workspace (grátis 500/dia, mais fácil se já tiver Gmail)
2. Resend SMTP (grátis 3000/mês, alta deliverability, precisa verificar domínio)
3. SendGrid SMTP (grátis 100/dia para sempre, já conhece a API)
4. Mailgun SMTP (grátis 100/dia × 3 meses)
5. Brevo / Sendinblue SMTP (grátis 300/dia, popular no VN)
6. Zoho Mail SMTP (se já usa Zoho Workspace)
7. SMTP Customizado (hospedagem VN que você já tem / auto-hospedado)

Se ainda não tiver nenhuma conta, sugiro [Gmail se o tráfego for baixo / Brevo se precisar de alta deliverability]. Qual número você escolhe?

Depois que o usuário escolher → salve para injetar no template de variáveis de ambiente na Fase 6 e dar instruções para obter as credenciais corretas do provedor na Fase 7.

⚠️ Importante — segurança: As credenciais SMTP (especialmente o App Password do Gmail) têm permissão para enviar e-mails da conta do usuário. Nunca coloque diretamente no código-fonte. Sempre use variáveis de ambiente. Avise o usuário para rotacionar as credenciais imediatamente se elas forem commitadas acidentalmente.


Fase 2 — Coletar Contexto

Objetivo: entender a oferta profundamente o suficiente para elaborar e-mails que não sejam genéricos. 3 modos de entrada:

Modo A — Com artefatos do pipeline (mais rico)

O usuário acabou de executar /biz-offer-alex-hormozi e/ou ui-ux-pro-max → tem os arquivos:

  • output/<slug-do-caso>/offer.json — segmento, resultado dos sonhos, mecanismo, pilha de bônus, garantia, preço (FONTE PRIMÁRIA de verdade)
  • output/<slug-do-caso>/conversion-copy.md — bloco de herói pronto para colar (título, subtítulo, texto do CTA)
  • output/<slug-do-caso>/landing-page/app/page.tsx — página de vendas Next.js atual já construída (leia para saber as seções e os campos do formulário em uso)

⚠️ Atualização 2026-05-14: O pipeline antigo tinha layout.json + copy.json (do biz-sales-page-layout que está DEPRECATED) — o novo processo IGNORA esses 2 arquivos. Basta offer.json + ler o page.tsx para ter contexto suficiente.

Leia as 3 fontes acima. Extraia para o e-mail:

  • Segmento + resultado dos sonhos → personalize a linha de assunto ("[Nome], a jornada de 8 semanas do AI Agent está pronta" em vez de "Bem-vindo")
  • Nome do mecanismo → reforce no corpo ("O sistema de framework PROMPT que você está prestes a aprender...")
  • Pilha de bônus → liste no e-mail (se a oferta gratuita/barata tiver bônus para entregar imediatamente)
  • Texto da garantia → cite diretamente no e-mail para reduzir a ansiedade
  • Texto do CTA → espelhe no CTA final do e-mail

Modo B — Com landing page, mas sem json

O usuário tem HTML implantado, mas não executou biz-offer/biz-sales-page. A skill lê o HTML:

  • curl -s <URL> ou leia o arquivo index.html local
  • Analise o h1 do herói, subtítulo, texto do botão de CTA, bloco de preço, bloco de garantia
  • A partir disso, infira o tipo de oferta + segmento

O Modo B é bom o suficiente para 80% dos casos, mas o e-mail é menos personalizado que o Modo A. Sugira ao usuário: "Você pode executar /biz-offer-alex-hormozi para ter o offer.json e depois voltar aqui; o e-mail ficará melhor. Ou pode continuar com o Modo B."

Modo C — Nada

O usuário só tem o HTML do formulário, sem contexto. A skill deve fazer 5 perguntas rápidas:

  1. Qual é o produto/serviço que você está vendendo? (1 frase)
  2. Depois que o usuário preencher o formulário, o que você quer enviar para ele? (PDF para download / link de agendamento / link de pagamento / apenas confirmar e ligar depois)
  3. Nome da marca + nome do remetente (que aparecerá no "De:")
  4. Seu e-mail para receber a notificação de novo lead
  5. Domínio que você possui para verificar SPF/DKIM (se escolher Resend/SendGrid/Mailgun/Brevo — Gmail pode pular)

Fase 3 — Escolher Padrão de E-mail

Modelo de 2 gatilhos (para ofertas com fluxo de checkout): Para cursos de baixo preço / produto digital com pagamento online, existem 2 gatilhos em momentos diferentes, enviando 2 e-mails diferentes. Não junte tudo em um único e-mail.

Lead preenche formulário na landing page
         ↓
   [Gatilho A — /api/submit]
         ↓
   E-mail P3 (LEMBRETE PRÉ-PAGAMENTO, enxuto)
         ↓
Lead conclui o pagamento → webhook do provedor de pagamento
         ↓
   [Gatilho B — /api/payment-webhook]
         ↓
   E-mail P5 (ONBOARDING PÓS-COMPRA, completo)

Regra de conteúdo:

  • P3 (pré-pagamento): apenas o link de pagamento + garantia curta + urgência. NÃO liste todos os entregáveis/pilha de bônus — o lead ainda não "ganhou" isso, listar reduz a urgência do pagamento.
  • P5 (pós-pagamento): entregue TUDO — link de acesso, todos os entregáveis, pilha de bônus, link do grupo, horário de office hour, 1 pergunta de acompanhamento para personalizar. Este é o verdadeiro momento de ouro.

(Leia a memória feedback_email-autoresponder-2-stage-flow para a justificativa detalhada.)


A partir do contexto da Fase 2, escolha o padrão adequado. Leia references/email-formulas.md para o template detalhado em vietnamita.

PadrãoGatilhoQuando usarSugestão de assunto
P1 — Entrega de Lead MagnetEnvio do formulárioOferta = download de PDF/ebook/template/swipe file/checklist gratuito"[Nome], o material [X] está pronto — abra o arquivo agora 👇"
P2 — Confirmação de AgendamentoEnvio do formulárioOferta = agendar call/consultoria/demo/sessão estratégica gratuita"[Nome], registro da inscrição para a consulta — próximos passos dentro"
P3 — Lembrete de Pré-PagamentoEnvio do formulário (ainda não pagou)Oferta = produto de baixo preço (199K-3M VND), e-mail leva ao checkout"[Nome], link de pagamento [Curso X] — preço promocional por 24h ⏰"
P4 — Nutrição (Call de venda em breve)Envio do formulárioOferta = coaching/agência de alto valor 5M-50M+ VND, equipe de vendas ligará em 24h"[Nome], eu [Nome do vendedor] entrarei em contato em 24h — checklist de preparação dentro"
P5 — Onboarding Pós-CompraWebhook de pagamentoLead acabou de pagar — entregue valor total + 1 pergunta para personalizar"🎉 Bem-vindo(a), [Nome], ao [Curso X] — desbloqueie agora"

Regra para escolher o padrão:

  • Oferta = download gratuito/treinamento → apenas P1 (1 gatilho, 1 e-mail).
  • Oferta = call gratuita com agendamento → apenas P2 (1 gatilho, 1 e-mail).
  • Oferta = baixo preço com pagamento online (Stripe/Momo/ZaloPay/Sepay) → P3 + P5 (2 gatilhos, 2 e-mails).
  • Oferta = call de venda de alto valor → apenas P4, acompanhamento pela equipe de vendas (o onboarding após fechar o negócio é outro processo).

A skill propõe o padrão adequado + justificativa, pergunta se o usuário confirma. Exemplo: "Com base no offer.json, vejo que é um curso de 1,99M VND com integração de pagamento. Sugiro configurar 2 e-mails: P3 (lembrete de pagamento ao preencher o formulário) + P5 (onboarding após o pagamento + 1 pergunta para personalizar). Você concorda ou prefere apenas o e-mail P3?"


Fase 4 — Elaborar 2 E-mails

Gere 2 e-mails em vietnamita puro (tratamento anh/chị), HTML responsivo para dispositivos móveis.

E-mail A — Auto-responder enviado ao lead

Estrutura de 6 blocos (leia references/email-formulas.md para a redação específica de cada padrão):

  1. Linha de assunto — personalizada com {{name}}, curta (menos de 50 caracteres), com 1 emoji leve no final se adequado à voz da marca (✉️ 👇 ✓), evite gatilhos de spam ("GRÁTIS", "$$$", "garantia" em maiúsculas).
  2. Texto de pré-visualização — 1 frase exibida abaixo do assunto na caixa de entrada, explicando o valor que o e-mail entrega.
  3. Saudação — "Olá, {{name}}," — sem "Prezado", sem "Caro cliente".
  4. Corpo principal — conforme o padrão escolhido. Regras:
    • Curto (menos de 200 palavras).
    • Tenha 1 link/botão de CTA primário claro.
    • Faça referência específica ao nome da oferta/mecanismo do contexto (não "nosso produto").
    • Se for Padrão P3/P4 → inclua 1 lembrete de urgência + 1 garantia.
  5. Assinatura — Nome do remetente + nome da marca + 1 link de contato (Zalo/Telefone/Site).
  6. Rodapé — Endereço (exigido por lei anti-spam) + link de descadastro (necessário para conformidade, mesmo para e-mails transacionais é bom ter).

E-mail B — Notificação enviada ao proprietário

Nunca envie para o mesmo endereço que o lead. Pergunte na Fase 2, pergunta 4.

Estrutura enxuta (pense em alerta do sistema, não em newsletter):

  1. Linha de assunto — prefixo fixo: [LEAD] + nome do lead + timestamp. Exemplo: [LEAD] João Silva — 14/05/2026 14:32 (sem emoji para não cair em spam).
  2. Corpo — tabela simples com:
    • Nome
    • Telefone
    • E-mail
    • Mensagem (se houver campo)
    • Data/hora
    • UTM source (se coletado)
  3. Ações — 2 links:
    • Link para contato rápido (tel: ou Zalo)
    • Link para página de administração (se existir)
  4. Rodapé — texto: "Este e-mail foi enviado automaticamente pelo sistema de formulário da sua landing page. Responder a este e-mail não é monitorado."

Fase 5 — Revisão e Edição do Usuário

Mostre ambos os e-mails em formato de rascunho (HTML renderizado inline) e peça confirmação:

Aqui estão os rascunhos dos e-mails:

== E-MAIL A — enviado para o lead ==
[Renderizado do assunto + corpo]

== E-MAIL B — notificação enviada para você ==
[Renderizado do assunto + corpo]

---

O que você acha?
- [ ] Está bom, pode gerar o código
- [ ] Quero editar alguma coisa (especifique qual e-mail, seção e alteração desejada)
- [ ] Quero mudar de padrão (para qual padrão?)

Regras para iteração:

  • Se o usuário pedir pequenas alterações de redação → edite rapidamente e mostre novamente.
  • Se o usuário quiser mudar de padrão (ex: de P3 para P4) → volte para a Fase 3.
  • Se o usuário disser "já está bom" → prossiga para a Fase 6.

Dica profissional: Se o usuário demorar para decidir ou disser "pode deixar como está, está bom", incentive: "Você pode revisar o texto com calma mais tarde — vou gerar o código com os rascunhos atuais, e você pode editar o HTML depois. Mas o conteúdo do e-mail é sua marca passando, vale a pena dar uma olhada com calma."


Fase 6 — Integrar Código

Ações:

  1. Instalar nodemailer:

    • Next.js / Vite: npm install nodemailer
    • Se precisar de types: npm install -D @types/nodemailer
  2. Criar arquivo de configuração SMTP lib/email.ts (ou utils/email.ts) com template:

import nodemailer from 'nodemailer';

const transporter = nodemailer.createTransport({
  host: process.env.SMTP_HOST,
  port: Number(process.env.SMTP_PORT),
  secure: process.env.SMTP_SECURE === 'true', // true para 465, false para outros
  auth: {
    user: process.env.SMTP_USER,
    pass: process.env.SMTP_PASS,
  },
});

export async function sendEmail({
  to,
  subject,
  html,
}: {
  to: string;
  subject: string;
  html: string;
}) {
  await transporter.sendMail({
    from: `"${process.env.EMAIL_FROM_NAME}" <${process.env.EMAIL_FROM_ADDRESS}>`,
    to,
    subject,
    html,
  });
}
  1. Criar rota de API (conforme detectado na Fase 0):

    • Para Next.js App Router: app/api/submit/route.ts
    • Para Next.js Pages Router: pages/api/submit.ts
    • Para Vite/HTML estático: api/submit.js (função serverless Vercel)

    Lógica da rota:

    • Receber POST com body { name, phone, email, ... }
    • Validar campos obrigatórios (name, phone, email)
    • Chamar sendEmail() para ambos os e-mails (lead + owner)
    • Retornar JSON { success: true }
  2. Criar arquivo .env.local com variáveis de ambiente:

SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_SECURE=false
[email protected]
SMTP_PASS=seu-app-password-16-caracteres
EMAIL_FROM_NAME="Nome da Sua Marca"
[email protected]
[email protected]

Observação: Os valores variam conforme o provedor escolhido na Fase 1.

  1. Atualizar o componente do formulário existente para chamar fetch('/api/submit') no onSubmit, com loading state e feedback de sucesso/erro.

  2. Se o formulário ainda não existir → crie um novo componente com 3 campos (nome, telefone, e-mail) e integre com a rota de API.


Fase 7 — Configuração do Provedor + Plano de Teste

Forneça instruções específicas para o provedor escolhido:

Se escolheu Gmail:

  1. Ative a verificação em duas etapas em https://myaccount.google.com/security
  2. Gere um App Password em https://myaccount.google.com/apppasswords
  3. Copie a senha de 16 caracteres para SMTP_PASS
  4. Teste: após configurar, vá até a rota /api/test-email (criada pela skill) e veja se o e-mail chega. Verifique a caixa de spam.

Se escolheu Brevo:

  1. Faça login em https://app.brevo.com
  2. Vá em "SMTP & API" → "SMTP Keys" → "Create a new SMTP key"
  3. Copie a chave para SMTP_PASS. SMTP_USER = seu e-mail de login.
  4. Verifique o domínio: Em "Sender Identity" → "Domains" → adicione e verifique seudominio.com (registro DNS TXT)
  5. Teste: use a ferramenta de teste SMTP do Brevo ou a rota /api/test-email

Se escolheu Resend:

  1. Faça login em https://resend.com
  2. Vá em "API Keys" → crie uma chave
  3. SMTP_USER = resend, SMTP_PASS = chave de API
  4. Verifique o domínio: Em "Domains" → adicione e verifique (3 registros DNS: SPF, DKIM, DMARC)
  5. Teste: Resend tem log em tempo real, use ou teste com /api/test-email

Se escolheu Custom SMTP (hospedagem VN):

  1. Encontre as credenciais SMTP no painel de controle da hospedagem (cPanel, DirectAdmin, etc.)
  2. Preencha todas as 4 variáveis SMTP_HOST/PORT/USER/PASS
  3. Se a hospedagem bloqueia a porta 25, tente 587 (STARTTLS) ou 465 (SSL)
  4. Teste: a hospedagem pode ter ferramenta de teste. Caso contrário, use /api/test-email

Rota de teste /api/test-email

Crie uma rota adicional (ou instrua o usuário a executar um script) que envia um e-mail de teste para OWNER_EMAIL. O usuário pode acionar via:

  • Navegador: GET https://seudominio.com/api/test-email
  • CLI: curl https://seudominio.com/api/test-email
  • Ou script local: node scripts/test-email.mjs

O e-mail de teste deve incluir:

  • Assunto: "🧪 E-mail de teste — Sistema de Auto-responder"
  • Corpo: lista todas as variáveis SMTP (ocultando a senha) + timestamp
  • Se o e-mail chegar, a configuração está correta.

⚠️ Importante: Lembre o usuário de excluir ou desabilitar a rota de teste em produção (ou proteger com autenticação), para evitar que terceiros acionem o envio de e-mails de teste.


Checklist final (resumo)

  • Fase 0 — Stack detectada: [Next.js App / Pages / Vite / Static HTML]
  • Fase 1 — Provedor escolhido: [Gmail / Resend / SendGrid / Mailgun / Brevo / Zoho / Custom]
  • Fase 2 — Contexto coletado: [Modo A / B / C]
  • Fase 3 — Padrão escolhido: [P1 / P2 / P3+P5 / P4]
  • Fase 4-5 — 2 e-mails revisados e aprovados
  • Fase 6 — Código gerado:
    • nodemailer instalado
    • lib/email.ts criado
    • Rota de API criada em: [path]
    • .env.local com variáveis de ambiente
    • Formulário vinculado
  • Fase 7 — Credenciais SMTP configuradas + domínio verificado + teste de e-mail realizado

Referências

  • references/email-formulas.md — templates de e-mail detalhados em vietnamita para cada padrão
  • references/smtp-providers.md — guia de configuração detalhado para cada provedor
  • Memória: feedback_email-autoresponder-2-stage-flow — justificativa do modelo de 2 gatilhos

Exemplo de saída (abreviado)

📧 E-mail A (para lead):
Assunto: João, o guia AI Agent está pronto — abra agora 👇

Olá, João,

Confirmamos seu cadastro para o guia "AI Agent na prática: 5 frameworks para começar hoje".

📥 Baixe aqui: [link do PDF]

Este material inclui:
- Prompt framework #1: Chain-of-Thought para vendas
- Prompt framework #2: Persona agent para atendimento
- 3 templates prontos para usar no Claude/Cursor

Se tiver dúvidas, responda a este e-mail (sim, eu leio).

Abraços,
[Nome do remetente]
[Marca]

---

📧 E-mail B (para proprietário):
Assunto: [LEAD] João Silva — 14/05/2026 14:32

Nome: João Silva
Telefone: (11) 99999-8888
E-mail: [email protected]
Data: 14/05/2026 14:32
Fonte: utm_source=facebook

Ações:
- Ligar: tel:+5511999998888
- Admin: [link do admin]

Skill gerada para configuração de auto-responder de e-mail SMTP para landing page. Substitua [...] por valores reais.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Best practices for Remotion - Video creation in React

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Scaffold trang `/admin` CRM-style trực quan vào Next.js project (Supabase backend) — KHÔNG còn variant Vercel KV. Layout 1CRM-inspired: sidebar 3 tab (Tổng quan / Khách hàng / Email marketing) + popup nhập mã đăng nhập. **Tab Tổng quan**: 4 KPI cards (Tổng leads / Đã thanh toán / Tỷ lệ chuyển đổi / Doanh thu) có delta arrow vs kỳ trước, line chart leads+paid+revenue theo ngày dùng `recharts`, donut trạng thái paid/pending/expired, period selector pill 7d/30d/90d, list 5 thanh toán gần nhất. **Tab Khách hàng**: bảng leads + search + filter trạng thái + filter ngày + CSV export. **Tab Email marketing**: form soạn chiến dịch (tên + tiêu đề + body chọn định dạng **văn bản thường HOẶC HTML** + placeholder `{{name}}` + audience 4 loại all/paid/pending/last_days + tên người gửi) — có nút **Xem trước** mở modal iframe render đúng email thật (text → auto convert + wrap khung; HTML fragment → wrap khung, HTML đầy đủ giữ nguyên) → gửi bulk qua SMTP (reuse `nodemailer` của `biz-email-setup` — KHÔN

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Deploy landing page / website (React, Next.js, Vite, static HTML) lên Vercel — tự kiểm tra Vercel CLI hoặc Vercel MCP đã cài chưa, nếu chưa thì cài qua npm/pnpm và hướng dẫn user authenticate (vercel login), tự detect framework (Next.js / Vite / CRA / static), auto-generate vercel.json khi cần, chạy `vercel --prod`, trả về live URL + inspect URL + hướng dẫn custom domain. USE WHEN user says 'deploy lên vercel', 'đẩy landing page lên vercel', 'publish website', 'go live', 'deploy nextjs', 'deploy react', 'deploy vite', 'tạo URL live', 'đưa lên production', 'biz-deploy-vercel', 'host landing page', 'vercel deploy', 'ship lên vercel', 'đẩy code lên vercel'. Skill này áp dụng cho cả case dùng Vercel CLI lẫn Vercel MCP server.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Cài chatbot AI dạng floating widget góc dưới phải vào project Next.js có sẵn (App Router hoặc Pages Router), responsive đầy đủ web + tablet + mobile, gọi LLM qua OpenRouter (mặc định google/gemini-3-flash-preview, có thể đổi sang anthropic/claude-sonnet-4.6), streaming response, RENDER MARKDOWN trong assistant bubble (bold / list / link / code) qua react-markdown + remark-gfm — KHÔNG hiện raw **bold** dạng text — có knowledge base từ FAQ + tài liệu sản phẩm/khóa học do user cung cấp để chatbot tự động trả lời khách hàng, và TỰ ĐỘNG EXTRACT + LƯU LEAD (tên + SĐT + email) vào Upstash Redis/Vercel KV dưới namespace `chat-lead:{phone}` khi user cung cấp đầy đủ thông tin trong chat — dedupe theo SĐT, TTL 90 ngày, fire-and-forget không block stream. Skill tự detect số lượng project Next.js — nếu có nhiều hơn 1 sẽ hỏi user chọn project nào để cài; tự detect TypeScript/JS, App Router/Pages Router, Tailwind/CSS module, KV/Upstash availability (skip auto-save nếu chưa có); tự install react-markd

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Đóng gói offer **không thể chối từ** (grand slam offer) theo phương pháp Alex Hormozi ($100M Offers) — nhận input pains/gains/customer jobs theo Value Proposition Design (Osterwalder 2014) + sản phẩm/dịch vụ, rồi sinh ra: (1) markdown report tiếng Việt đầy đủ Value Equation scoring + Core Offer + 3-4 Bonus stack + Guarantee + Urgency + Pricing, (2) offer.json structured cho pipeline downstream (`ui-ux-pro-max` build sales page production-ready), (3) conversion copy block (headline + subheadline + CTA) sẵn sàng paste landing page. 2 input mode: (B) user paste sẵn pains + gains + product, (C) user chỉ có sản phẩm — skill phỏng vấn theo VPD framework để surface pain/gain trước. Bonus stack mode hybrid: skill brainstorm 5-7 candidate có justification value rồi user pick/chỉnh 3-4 cái. Tiếng Việt thuần (xưng anh/chị), giá VND charm pricing (X99K), 3-tier decoy structure. USE WHEN user says 'đóng gói offer', 'tạo offer', 'thiết kế offer Hormozi', 'grand slam offer', 'value stack', 'offer sta

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Nâng cấp copy sales page tiếng Việt — biến copy có sẵn (từ `offer.json` + `conversion-copy.md` của `/biz-offer-alex-hormozi`, HOẶC từ Next.js project đã build qua `ui-ux-pro-max`, HOẶC user paste block copy bất kỳ) thành **copy chất lượng cao chốt đơn**: headline punchy hơn, pain agitation đau hơn, mechanism rõ hơn, benefit cụ thể hơn, FAQ xử lý đúng objection của thị trường VN, CTA mạnh hơn. Skill này có 3 INTENSITY LEVEL: (1) **Polish** — light edit + power word + sửa nhịp; (2) **Conversion-optimized** — rewrite 5 block critical + tạo A/B variants cho hero/CTA; (3) **Sales-letter** — long-form story-driven full rewrite kèm P.S.. Mỗi section áp dụng đúng formula thuyết phục (PAR cho pain, BAB cho solution, FEP cho benefit, PVEN cho final CTA, Star-Chain-Hook cho testimonial). Output gồm 4 file: `copy-upgraded.md`, `copy-variants.md` (A/B test bank — 3 hero + 3 CTA + 3 final-CTA), `copy-changes.md` (diff Trước/Sau + lý do), `copy.json` (structured downstream). Giọng văn tiếng Việt thuầ

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

⚠️ DEPRECATED (2026-05-14) — Skill này KHÔNG còn trong pipeline chuẩn. Quy trình mới đã bỏ bước wireframe markdown trung gian: sau `/biz-offer-alex-hormozi` đi THẲNG sang `ui-ux-pro-max` để build Next.js sales page production-ready (có design language nhất quán: style + palette + font pairing, không phải Tailwind defaults). Lý do deprecate: wireframe markdown làm thêm 1 bước trung gian không tạo giá trị — `ui-ux-pro-max` đọc trực tiếp `offer.json` đã đầy đủ anchor + core + bonus + guarantee + urgency + pricing rồi ra HTML production luôn. Chỉ dùng skill này KHI user EXPLICITLY yêu cầu wireframe markdown để review/in/share trước khi build code (rare case). KHÔNG trigger trên các keyword 'tạo sales page', 'tạo landing page bán hàng' nữa — những keyword đó giờ trigger `ui-ux-pro-max`.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

End-to-end Sepay VietQR payment infrastructure cho landing page Next.js — guide user setup Sepay account + bank linking + scaffold đầy đủ payment flow trong project. Skill này xử lý 7 phase: (0) detect Next.js stack + **HỎI user chọn lead store backend** (Vercel KV hoặc Supabase Free Postgres — default recommend Supabase do free tier rộng hơn ~50× + có SQL + admin UI), (1) GUIDE user đăng ký Sepay account tại my.sepay.vn + link bank account VN (Vietcombank/Techcombank/MB/ACB/VPBank/BIDV/...) + lấy API key + setup webhook URL trên Sepay dashboard, (2A nếu chọn KV) setup Vercel KV (install `@vercel/kv` + KV namespace + 4 env vars KV_*), (2B nếu chọn Supabase) setup Supabase project (tạo project tại Singapore region + chạy migration SQL tạo 4 bảng leads/phone_index/order_counter/webhook_dedup với pg_cron TTL cleanup + RLS deny-all + lấy SUPABASE_URL + SUPABASE_SERVICE_ROLE_KEY + Vercel Cron ping `/api/health` mỗi 6 ngày chống auto-pause), (3) scaffold `lib/leads-store.ts` (thin re-export

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Setup Telegram bot notification cho thanh toán thành công từ Sepay webhook trong Next.js project. Skill này: (1) hướng dẫn user 3 bước tạo Telegram bot riêng qua @BotFather + lấy bot token + chat_id (qua @userinfobot cho chat 1-1, hoặc /getUpdates API cho group), (2) tạo helper function `sendTelegramNotification()` reusable trong `lib/telegram.ts`, (3) detect existing Sepay webhook route trong project (thường là `/api/sepay-webhook`, `/api/payment-success`, hoặc tương đương) và wire Telegram call CÙNG CHỖ với email auto-responder (Resend) — gửi parallel qua `Promise.allSettled` để Telegram fail KHÔNG block 200 response trả Sepay (Sepay sẽ retry webhook nếu nhận non-200, gây duplicate notification), (4) draft message format mặc định tiếng Việt: emoji + tên khách + SĐT + email + amount (charm pricing VND định dạng `499.000đ`) + tên sản phẩm + timestamp giờ VN dd/mm/yyyy HH:mm, (5) update `.env.local` với `TELEGRAM_BOT_TOKEN` + `TELEGRAM_CHAT_ID`, add vào `.gitignore`, nhắc user paste vào

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Convert a single MP3 voiceover file into a single HeyGen avatar lip-sync MP4 video. Single-purpose — no planning, no SRT, no chunking, no Remotion compositing. Hybrid path — REST upload (helper script) + HeyGen MCP for video creation, because the post-2026 MCP no longer exposes an asset-upload tool. Reads avatar look pool (`HEYGEN_AVATAR_LOOKS`) from `.env` and HeyGen API key (`HEYGEN_API_KEY`) for the upload step. USE WHEN user says "tạo video heygen từ mp3", "mp3 to heygen", "heygen mp4 từ audio", "convert mp3 sang heygen video", "tạo avatar video từ file mp3", "lip sync mp3 heygen", "biến mp3 thành video heygen", or any time the user has exactly one MP3 file and wants exactly one HeyGen avatar MP4 out.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Demand-side market research cho digital product / service ở Việt Nam — đo cầu thật + WTP + channel-market fit + defensibility qua keyword volume, marketplace sales (Shopee/Unica/Edumall/Gitiho/KyNa), community signal (FB groups, TikTok hashtag, Zalo OA), competitor pricing, unit economics — không phải macro PESTEL. Output: keyword portfolio + Niche Score 100 điểm 7-dimension có evidence + go/no-go decision + falsification protocol. Force triangulate ≥3 sources cho mỗi claim quan trọng. USE WHEN user says 'nghiên cứu thị trường', 'market research', 'validate niche', 'keyword research', 'demand validation', 'niche có nên làm không', 'có ai làm chưa', 'thị trường đủ lớn không', 'có lời không', 'chọn ngách', 'kiểm tra cầu'. Cũng trigger khi user mô tả 1 ý tưởng kinh doanh cụ thể và muốn check feasibility. Skill này KHÔNG fit: high-ticket transactional sale (BĐS, ô tô), B2B enterprise (sales cycle 6+ tháng), hyper-local geo micro-market (1 toà nhà, 1 phường). KHÔNG làm: macro PESTEL/Porter

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Transcribe an MP3 voiceover into an SRT subtitle file and a word-level segments JSON using local OpenAI Whisper. Input is a single MP3 path; output is `<stem>.srt` + `<stem>_segments.json` written next to the MP3 (or to a custom output dir). USE WHEN the user says 'extract srt from mp3', 'trích srt từ mp3', 'transcribe voiceover', 'tạo file srt và segments', 'whisper transcribe', 'bóc transcript có timestamp', 'extract voiceover segments', 'tách SRT từ audio', or any time a downstream skill (plan-short-video-edit, heygen-remotion-short-video-editor) needs an SRT + word-level segments JSON from a voiceover MP3 and one does not already exist.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Convert Vietnamese/English script text to MP3 voiceover using ElevenLabs TTS API. Calls POST /v1/text-to-speech/{voice_id}, streams audio bytes, writes MP3 directly. Locked to Hoang's brand voice ID by default. USE WHEN user says 'tạo mp3 elevenlabs', 'elevenlabs tts', 'eleven labs voice', 'text to speech elevenlabs', 'tạo voiceover elevenlabs', 'đọc text bằng elevenlabs', 'tts elevenlabs to mp3', 'eleven labs script to mp3', 'voiceover bằng elevenlabs', 'giọng elevenlabs'.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

End-to-end orchestrator: **script → final MP4 16:9 (1920×1080) podcast-keynote**.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

End-to-end short-video pipeline — từ kịch bản (Việt/Anh) ra MP4 TikTok/Reels 9:16 hoàn chỉnh. Orchestrator 3 phase ghép skill có sẵn — (1) TTS provider chọn được giữa `mkt-elevenlabs-tts-to-mp3` (default, voice của Hoàng) hoặc `mkt-video-script-to-mp3` (MiniMax speech-2.8-hd), (2) checkpoint user duyệt MP3, (3) `heygen-mp3-to-mp4` lip-sync avatar HeyGen, (4) delegate Phase 3 packaging cho sub-agent `mkt-full-video-phase3-packager` (transcribe + scene outline + checkpoint + fan-out N scene writers parallel + scaffold + preview Studio). API key + voice ID cho cả 2 provider lưu ở `.env`. USE WHEN user nói "tạo full video từ script", "script to tiktok video", "pipeline full video heygen + hyperframe", "tạo video từ kịch bản đến mp4", "elevenlabs heygen hyperframe full pipeline", "minimax heygen pipeline", "kịch bản ra video tiktok", hoặc có sẵn 1 script + (optional) ảnh b-roll và muốn ra MP4 9:16 đóng gói có captions, SFX, b-roll.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Build a TikTok/Reels/YouTube **landscape 16:9 (1920×1080)** short video from a pre-recorded talking-head MP4 using HyperFrames — transcribe Vietnamese audio, scaffold a complete preview-ready 1920×1080 project with a slide pane (1200px) on the left and a floating avatar frame on the right, GSAP timeline có SPLIT↔PIP transitions (slide full-screen + avatar PIP corner thumbnail), breathing yoyo zoom + beat-driven punch-in trên avatar, 5 scene compositions kiểu "tier-row" pattern (post-stack hook / chats-stack problem / hero-orb solution / counter-row recap / terminal-row CTA), optional cream-paper editorial infographic image slots với `<img onerror>` fallback, 6 SFX wired tại scene boundaries, **NO captions** (giọng avatar là spine). USE WHEN user nói "edit video 16:9 từ HeyGen MP4", "scaffold project landscape", "podcast keynote editor", "talking head + slide editor", "build hyperframes 1920×1080", "tạo project 16:9 từ avatar mp4", "scaffold 16:9 hyperframes", "hyperframe landscape vide

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Pipeline đóng gói: từ MP4 quay sẵn (talking head 9:16) tới HyperFrames preview project hoàn chỉnh có captions, SFX, zoom hooks, b-roll toàn cảnh có hiệu ứng rich, và CTA finale.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Audit bài Facebook / Reels / YouTube để phát hiện 4 downward drivers (over-branding, over-production, stock imagery, standardized aesthetic) + frequency-over-quality. Mỗi anti-pattern bị drop ~75% performance nếu hiện diện. USE WHEN user says 'audit content', 'check anti pattern', 'content có lỗi gì không', 'kiểm tra over branding', 'vì sao video bị chết', 'vì sao post không ai xem', 'content audit', 'kiểm tra chất lượng content'.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Tìm viral pattern ở ngành khác (bác sĩ, luật sư, tài chính, bất động sản, thủ công) có thể apply cho niche AI/automation của Hoang. Ngách AI educator VN còn ít format được khai thác — cross-industry adaptation là blue ocean. USE WHEN user says 'tìm format ngành khác', 'cross industry research', 'học format từ ngành khác', 'blue ocean format', 'tìm format chưa ai làm', 'adapt format từ niche khác', 'cross industry viral'.

lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

Rewrite CTA kiểu autocratic (Mua ngay! Follow ngay! Đăng ký liền!) sang 3 variants Democratic / Benevolent / Laissez-faire — reach 85% dân số thay vì chỉ 5% (action-based). Áp dụng cho landing page, caption FB, CTA video, email. USE WHEN user says 'rewrite cta', 'sửa cta', 'cta không autocratic', 'viết lại kêu gọi hành động', 'cta cho landing page', 'cta nhẹ nhàng hơn', 'inclusive cta', 'cta democratic benevolent'.

Habilidades Relacionadas