# Email Template HTML > Email Template Html — Skill especializada para email template html - Skill: `kursku/email-template-html` (Agent Skill) - Install (CLI): `npx skillmds@latest add kursku/email-template-html` - Raw SKILL.md: https://api.skillmd.com/api/skills/kursku/email-template-html/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: MIT - Author: kursku (https://skillmd.com/u/kursku) - Updated: 2026-09-08 - Page: https://skillmd.com/skills/kursku/email-template-html --- # Email Template Html Esta skill capacita o Claude a criar, otimizar e integrar templates HTML de email responsivos para sequências de automação e campanhas de nurturing. --- ## Keywords HTML email, MJML, responsividade email, email marketing, CSS inline, automação email, litmus testing, dark mode email, design responsivo, boilerplate email, acessibilidade email, AMP for Email. --- ## Quick Start 1. Escolha uma estrutura HTML base robusta (boilerplate como Cerberus ou framework MJML). 2. Estruture o layout primário exclusivamente com tabelas aninhadas para compatibilidade universal. 3. Converta todo o CSS essencial para estilos inline antes do envio para assegurar renderização. 4. Teste o template em múltiplas plataformas de email (desktop, web, mobile) usando ferramentas de pré-visualização. 5. Valide o código HTML para erros de sintaxe e implemente as meta tags de Dark Mode. --- ## Core Workflows ### Workflow 1: Criação de Template HTML Responsivo para Sequência de Boas-Vindas Este workflow detalha a construção de um email HTML responsivo do zero, ideal para a primeira mensagem de uma sequência de boas-vindas, garantindo que seja visualmente atraente e funcional em diversos clientes de email. 1. **Seleção da Estrutura Base**: Inicie o desenvolvimento utilizando um boilerplate HTML para email, como o "HTML Email Boilerplate" ou o "Cerberus", que já oferece resiliência contra as peculiaridades de diferentes clientes de email. Este passo minimiza a necessidade de "hacks" posteriores. * **Exemplo de Snippet Inicial**: ```html Bem-vindo à Nossa Comunidade! ``` 2. **Definição de Layout com Tabelas**: Construa o layout do email utilizando exclusivamente tabelas aninhadas (``). Divida o email em seções lógicas: cabeçalho, banner principal, bloco de conteúdo, Call-to-Action (CTA) e rodapé. Cada seção deve ser uma nova tabela ou uma célula de tabela. * **Exemplo de Estrutura de Conteúdo Principal**: ```html
Olá, {{nome_do_cliente}}!
Seja muito bem-vindo(a) à nossa comunidade! Estamos empolgados por ter você conosco. Prepare-se para receber conteúdos exclusivos e as últimas novidades diretamente na sua caixa de entrada.
``` 3. **Otimização e Incorporação de Imagens**: Adicione tags `` para banners e logotipos, sempre especificando `width` e `height` explícitos. Garanta que todas as imagens estejam hospedadas externamente (CDN) e que possuam um `alt` text descritivo para acessibilidade e quando as imagens não carregam. * **Exemplo de Imagem Responsiva**: ```html Banner de Boas-Vindas à comunidade ``` 4. **Estilização Inline Essencial**: Converta todo o CSS que afeta o layout e a aparência crítica (cores, fontes, espaçamento) para estilos inline (`style="..."`). Ferramentas como Premailer ou o inlinador de CSS do Mailchimp podem automatizar este processo, garantindo que os estilos sejam aplicados mesmo em clientes restritivos. * **Exemplo de Estilo Inline**: ```html

Este é um parágrafo com estilos aplicados diretamente.

``` 5. **Criação de CTA Responsivo e Acessível**: Desenvolva botões de Call-to-Action (CTA) utilizando tabelas aninhadas para garantir que sejam renderizados como botões clicáveis em todos os clientes, incluindo Outlook. Aplique estilos inline para cores, padding e fonte, e inclua um `target="_blank"` nos links. * **Exemplo de CTA em Tabela**: ```html
Explorar Nossos Recursos
``` 6. **Teste de Responsividade e Cliente**: Antes do envio, utilize plataformas como Litmus ou Email on Acid para testar a renderização do email em uma vasta gama de clientes (Gmail, Outlook Desktop, Outlook Web, Apple Mail, iOS Mail, Android Mail). Preste atenção à quebra de layout, sobreposição de texto e funcionalidade dos CTAs. ### Workflow 2: Otimização de Template Existente para Dark Mode e Acessibilidade em Email de Carrinho Abandonado Este workflow foca em aprimorar um template de email de carrinho abandonado já existente, tornando-o compatível com o modo escuro (Dark Mode) e melhorando sua acessibilidade para todos os usuários. 1. **Análise de Contraste e Identificação de Problemas**: Analise o template atual para combinações de cores que possam se tornar ilegíveis ou visualmente problemáticas em Dark Mode. Ferramentas como "WebAIM Contrast Checker" podem ajudar a identificar textos com baixo contraste. Observe logos e ícones que podem ter fundos que não se adaptam. 2. **Implementação de Meta Tags para Dark Mode**: Adicione as meta tags `color-scheme` e `supported-color-schemes` dentro da tag `` do HTML. Estas tags informam aos clientes de email a preferência de esquema de cores do seu email e qual esquema ele suporta. * **Exemplo**: ```html Seu Carrinho te Espera! ``` 3. **Uso de Media Queries para Estilos Específicos de Dark Mode**: Dentro da tag ` ``` 4. **Otimização de Imagens para Dark Mode**: Para logos ou ícones que não ficam bem em Dark Mode, use uma técnica de "troca de imagem" com classes CSS e media queries, mostrando uma versão clara em Light Mode e uma versão escura em Dark Mode. * **Exemplo de Troca de Imagem**: ```html Logo da Empresa ``` 5. **Melhorias de Acessibilidade**: * **Textos Alternativos (Alt Text)**: Verifique se todas as imagens têm `alt` text descritivo e conciso. Para imagens puramente decorativas, use `alt=""`. * **Contraste de Cores**: Garanta que o contraste entre texto e fundo seja de no mínimo 4.5:1 (padrão WCAG AA) tanto no Light Mode quanto no Dark Mode. * **Links e Botões Acessíveis**: Assegure que os textos dos links sejam descritivos (evite "clique aqui") e que os botões tenham uma área de clique de pelo menos 44x44 pixels em dispositivos móveis. * **Hierarquia e Semântica**: Embora `

` a `

` não sejam recomendados em emails, use `` para enfatizar texto e `role="presentation"` em tabelas que servem apenas para layout. 6. **Validação Cruzada e Testes de Acessibilidade**: Teste o email em clientes que suportam Dark Mode (Gmail mobile, Outlook mobile, Apple Mail) e verifique a renderização. Além disso, utilize ferramentas de teste de acessibilidade e, se possível, leitores de tela (VoiceOver no iOS, NVDA no Windows) para simular a experiência de usuários com deficiência visual. --- ## Templates ### Template de Email de Boas-Vindas Responsivo ```html Bem-vindo à Comunidade [Nome da Empresa]!
``` ### Template de Email de Carrinho Abandonado Otimizado para Dark Mode ```html