[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EATSHABTGCGV2CPK7BF8M8":3,"skill-same:01M6EATSHABTGCGV2CPK7BF8M8":71},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":25,"publishedAt":33,"linkOnly":34,"markdownContent":35,"markdownBody":36,"frontMatter":37,"refName":43,"commitSha":44,"skillDirectory":45,"forksCount":46,"repositoryHtmlUrl":47,"repositoryHomepageUrl":48,"ownerHtmlUrl":49,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":50,"install":51,"resources":64},"01M6EATSHABTGCGV2CPK7BF8M8","email-template-html",null,"Email Template Html — Skill especializada para email template html","kursku\u002Fskills","kursku","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F15705647?v=4","01M6E5VWJKMRJQ1PNFP2P0PYVZ","01M6E5VWSCHN2C3RVE67795NRC",125,"MIT","https:\u002F\u002Fgithub.com\u002Fkursku\u002Fskills\u002Fblob\u002Fmaster\u002Fpacks\u002Fkit-510-ptbr\u002F02-email-automacao\u002Femail-template-html\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000005","邮件与沟通","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",[26,27,28,29,30,31,32],"email","template","html","email template html","safe","code","para","2026-11-10 10:12:30",false,"---\nname: email-template-html\ndescription: \"Email Template Html — Skill especializada para email template html\"\nlicense: MIT\nmetadata:\n  version: 1.0.0\n  author: Cafe Code AI\n  category: 02-email-automacao\n  updated: 2026-03-01\nrisk: safe\n---\n\n# Email Template Html\n\nEsta skill capacita o Claude a criar, otimizar e integrar templates HTML de email responsivos para sequências de automação e campanhas de nurturing.\n\n---\n\n## Keywords\n\nHTML 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.\n\n---\n\n## Quick Start\n\n1.  Escolha uma estrutura HTML base robusta (boilerplate como Cerberus ou framework MJML).\n2.  Estruture o layout primário exclusivamente com tabelas aninhadas para compatibilidade universal.\n3.  Converta todo o CSS essencial para estilos inline antes do envio para assegurar renderização.\n4.  Teste o template em múltiplas plataformas de email (desktop, web, mobile) usando ferramentas de pré-visualização.\n5.  Valide o código HTML para erros de sintaxe e implemente as meta tags de Dark Mode.\n\n---\n\n## Core Workflows\n\n### Workflow 1: Criação de Template HTML Responsivo para Sequência de Boas-Vindas\n\nEste 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.\n\n1.  **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.\n    *   **Exemplo de Snippet Inicial**:\n        ```html\n        \u003C!DOCTYPE html>\n        \u003Chtml lang=\"pt-BR\">\n        \u003Chead>\n            \u003Cmeta charset=\"utf-8\">\n            \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n            \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n            \u003Cmeta name=\"x-apple-disable-message-reformatting\">\n            \u003Cmeta name=\"color-scheme\" content=\"light dark\">\n            \u003Cmeta name=\"supported-color-schemes\" content=\"light dark\">\n            \u003Ctitle>Bem-vindo à Nossa Comunidade!\u003C\u002Ftitle>\n            \u003C!-- [Estilos globais e media queries aqui] -->\n        \u003C\u002Fhead>\n        \u003Cbody>\n            \u003C!-- Conteúdo do email aqui -->\n        \u003C\u002Fbody>\n        \u003C\u002Fhtml>\n        ```\n2.  **Definição de Layout com Tabelas**: Construa o layout do email utilizando exclusivamente tabelas aninhadas (`\u003Ctable>`). 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.\n    *   **Exemplo de Estrutura de Conteúdo Principal**:\n        ```html\n        \u003Ctable role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">\n            \u003Ctr>\n                \u003Ctd style=\"padding: 20px 0;\">\n                    \u003Ctable role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"600\" style=\"margin: 0 auto; background-color: #ffffff;\">\n                        \u003Ctr>\n                            \u003Ctd style=\"padding: 30px 40px; text-align: center; font-family: Arial, sans-serif; font-size: 24px; color: #333333;\">\n                                Olá, {{nome_do_cliente}}!\n                            \u003C\u002Ftd>\n                        \u003C\u002Ftr>\n                        \u003Ctr>\n                            \u003Ctd style=\"padding: 0 40px 30px; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #555555;\">\n                                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.\n                            \u003C\u002Ftd>\n                        \u003C\u002Ftr>\n                    \u003C\u002Ftable>\n                \u003C\u002Ftd>\n            \u003C\u002Ftr>\n        \u003C\u002Ftable>\n        ```\n3.  **Otimização e Incorporação de Imagens**: Adicione tags `\u003Cimg>` 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.\n    *   **Exemplo de Imagem Responsiva**:\n        ```html\n        \u003Cimg src=\"https:\u002F\u002Fassets.exemplo.com\u002Fbanner-boas-vindas.jpg\" alt=\"Banner de Boas-Vindas à comunidade\" width=\"600\" style=\"display: block; max-width: 100%; height: auto; border: 0;\">\n        ```\n4.  **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.\n    *   **Exemplo de Estilo Inline**:\n        ```html\n        \u003Cp style=\"font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 16px; color: #333333; line-height: 1.6; margin: 0 0 15px;\">\n            Este é um parágrafo com estilos aplicados diretamente.\n        \u003C\u002Fp>\n        ```\n5.  **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.\n    *   **Exemplo de CTA em Tabela**:\n        ```html\n        \u003Ctable role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"margin: 20px auto;\">\n            \u003Ctr>\n                \u003Ctd align=\"center\" bgcolor=\"#007bff\" style=\"border-radius: 5px;\">\n                    \u003Ca href=\"https:\u002F\u002Fexemplo.com\u002Frecursos\" target=\"_blank\" style=\"font-size: 16px; font-family: Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 5px; padding: 12px 24px; border: 1px solid #007bff; display: inline-block;\">\n                        Explorar Nossos Recursos\n                    \u003C\u002Fa>\n                \u003C\u002Ftd>\n            \u003C\u002Ftr>\n        \u003C\u002Ftable>\n        ```\n6.  **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.\n\n### Workflow 2: Otimização de Template Existente para Dark Mode e Acessibilidade em Email de Carrinho Abandonado\n\nEste 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.\n\n1.  **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.\n2.  **Implementação de Meta Tags para Dark Mode**: Adicione as meta tags `color-scheme` e `supported-color-schemes` dentro da tag `\u003Chead>` do HTML. Estas tags informam aos clientes de email a preferência de esquema de cores do seu email e qual esquema ele suporta.\n    *   **Exemplo**:\n        ```html\n        \u003Chead>\n            \u003Cmeta charset=\"utf-8\">\n            \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n            \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n            \u003Cmeta name=\"x-apple-disable-message-reformatting\">\n            \u003Cmeta name=\"color-scheme\" content=\"light dark\">\n            \u003Cmeta name=\"supported-color-schemes\" content=\"light dark\">\n            \u003Ctitle>Seu Carrinho te Espera!\u003C\u002Ftitle>\n            \u003C!-- [Estilos Dark Mode e media queries aqui] -->\n        \u003C\u002Fhead>\n        ```\n3.  **Uso de Media Queries para Estilos Específicos de Dark Mode**: Dentro da tag `\u003Cstyle>` no `\u003Chead>`, implemente media queries `@media (prefers-color-scheme: dark)` para aplicar estilos CSS que invertem cores de fundo e texto, ou ajustam elementos específicos quando o Dark Mode está ativo.\n    *   **Exemplo de Media Query**:\n        ```html\n        \u003Cstyle>\n            \u002F* Estilos globais para Light Mode *\u002F\n            body { background-color: #f6f6f6; color: #333333; }\n            .content-area { background-color: #ffffff; }\n\n            \u002F* Estilos para Dark Mode *\u002F\n            @media (prefers-color-scheme: dark) {\n                body { background-color: #1a1a1a !important; color: #e0e0e0 !important; }\n                .content-area { background-color: #2c2c2c !important; }\n                .darkmode-text { color: #e0e0e0 !important; }\n                \u002F* Ajuste de imagem para Dark Mode *\u002F\n                .dark-img { display: block !important; width: auto !important; overflow: visible !important; float: none !important; max-height: inherit !important; max-width: inherit !important; line-height: auto !important; margin-top: 0px !important; visibility: inherit !important; }\n                .light-img { display: none; display: none !important; }\n            }\n        \u003C\u002Fstyle>\n        ```\n4.  **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.\n    *   **Exemplo de Troca de Imagem**:\n        ```html\n        \u003C!-- Imagem para Light Mode -->\n        \u003Cimg class=\"light-img\" src=\"https:\u002F\u002Fassets.exemplo.com\u002Flogo-claro.png\" alt=\"Logo da Empresa\" width=\"150\" style=\"display: block;\">\n        \u003C!-- Imagem para Dark Mode (inicialmente oculta) -->\n        \u003Cimg class=\"dark-img\" src=\"https:\u002F\u002Fassets.exemplo.com\u002Flogo-escuro.png\" alt=\"Logo da Empresa\" width=\"150\" style=\"display: none; mso-hide: all;\">\n        ```\n5.  **Melhorias de Acessibilidade**:\n    *   **Textos Alternativos (Alt Text)**: Verifique se todas as imagens têm `alt` text descritivo e conciso. Para imagens puramente decorativas, use `alt=\"\"`.\n    *   **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.\n    *   **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.\n    *   **Hierarquia e Semântica**: Embora `\u003Ch1>` a `\u003Ch6>` não sejam recomendados em emails, use `\u003Cstrong>` para enfatizar texto e `role=\"presentation\"` em tabelas que servem apenas para layout.\n6.  **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.\n\n---\n\n## Templates\n\n### Template de Email de Boas-Vindas Responsivo\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"pt-BR\">\n\u003Chead>\n    \u003Cmeta charset=\"utf-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    \u003Cmeta name=\"x-apple-disable-message-reformatting\">\n    \u003Cmeta name=\"color-scheme\" content=\"light dark\">\n    \u003Cmeta name=\"supported-color-schemes\" content=\"light dark\">\n    \u003Ctitle>Bem-vindo à Comunidade [Nome da Empresa]!\u003C\u002Ftitle>\n    \u003C!--[if mso]>\n    \u003Cnoscript>\n        \u003Cxml>\n            \u003Co:OfficeDocumentSettings>\n                \u003Co:AllowPNG\u002F>\n                \u003Co:PixelsPerInch>96\u003C\u002Fo:PixelsPerInch>\n            \u003C\u002Fo:OfficeDocumentSettings>\n        \u003C\u002Fxml>\n    \u003C\u002Fnoscript>\n    \u003C![endif]-->\n    \u003Cstyle>\n        :root {\n            color-scheme: light dark;\n            supported-color-schemes: light dark;\n        }\n        @media (prefers-color-scheme: dark) {\n            body { background-color: #1a1a1a !important; color: #e0e0e0 !important; }\n            .darkmode-text { color: #e0e0e0 !important; }\n            .darkmode-bg { background-color: #2c2c2c !important; }\n            .button-darkmode { background-color: #0056b3 !important; border-color: #0056b3 !important; }\n            .button-darkmode a { color: #ffffff !important; }\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody style=\"margin: 0; padding: 0; word-spacing: normal; background-color: #f6f6f6;\">\n    \u003Cdiv role=\"article\" aria-roledescription=\"email\" lang=\"pt-BR\" style=\"text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;\">\n        \u003Ctable role=\"presentation\" style=\"width:100%; border-collapse:collapse; border:0; border-spacing:0; background:#f6f6f6;\">\n            \u003Ctr>\n                \u003Ctd align=\"center\" style=\"padding:0;\">\n                    \u003Ctable role=\"presentation\" style=\"width:600px; border-collapse:collapse; border:1px solid #cccccc; border-spacing:0; text-align:left; background-color: #ffffff;\" class=\"darkmode-bg\">\n                        \u003Ctr>\n                            \u003Ctd align=\"center\" style=\"padding:40px 0 30px 0; background:#007bff;\" class=\"button-darkmode\">\n                                \u003Cimg src=\"https:\u002F\u002Fassets.exemplo.com\u002Flogo-empresa-branca.png\" alt=\"Logo da Empresa\" width=\"160\" style=\"height:auto; display:block;\" \u002F>\n                            \u003C\u002Ftd>\n                        \u003C\u002Ftr>\n                        \u003Ctr>\n                            \u003Ctd style=\"padding:36px 30px 42px 30px;\">\n                                \u003Ctable role=\"presentation\" style=\"width:100%; border-collapse:collapse; border:0; border-spacing:0;\">\n                                    \u003Ctr>\n                                        \u003Ctd style=\"padding:0 0 15px 0; color:#153643; font-family:Arial,sans-serif; font-size:24px; line-height:28px; font-weight:bold;\" class=\"darkmode-text\">\n                                            Olá, {{nome_do_cliente}}! Seja bem-vindo(a)!\n                                        \u003C\u002Ftd>\n                                    \u003C\u002Ftr>\n                                    \u003Ctr>\n                                        \u003Ctd style=\"padding:0 0 15px 0; color:#153643; font-family:Arial,sans-serif; font-size:16px; line-height:24px;\" class=\"darkmode-text\">\n                                            É um prazer tê-lo(a) conosco na comunidade [Nome da Empresa]. Estamos muito felizes por você ter se juntado a nós!\n                                        \u003C\u002Ftd>\n                                    \u003C\u002Ftr>\n                                    \u003Ctr>\n                                        \u003Ctd style=\"padding:0 0 25px 0; color:#153643; font-family:Arial,sans-serif; font-size:16px; line-height:24px;\" class=\"darkmode-text\">\n                                            Aqui, você encontrará os melhores conteúdos sobre desenvolvimento web, design e marketing digital. Para começar, confira nosso guia exclusivo para novos membros:\n                                        \u003C\u002Ftd>\n                                    \u003C\u002Ftr>\n                                    \u003Ctr>\n                                        \u003Ctd align=\"center\" style=\"padding:0;\">\n                                            \u003Ctable role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"margin:0 auto;\">\n                                                \u003Ctr>\n                                                    \u003Ctd align=\"center\" bgcolor=\"#007bff\" style=\"border-radius:5px;\" class=\"button-darkmode\">\n                                                        \u003Ca href=\"https:\u002F\u002Fexemplo.com\u002Fguia-inicio\" target=\"_blank\" style=\"font-size:16px; font-family:Arial,sans-serif; color:#ffffff; text-decoration:none; border-radius:5px; padding:12px 24px; border:1px solid #007bff; display:inline-block;\">\n                                                            Acessar Guia de Início Rápido\n                                                        \u003C\u002Fa>\n                                                    \u003C\u002Ftd>\n                                                \u003C\u002Ftr>\n                                            \u003C\u002Ftable>\n                                        \u003C\u002Ftd>\n                                    \u003C\u002Ftr>\n                                    \u003Ctr>\n                                        \u003Ctd style=\"padding:30px 0 0 0; color:#153643; font-family:Arial,sans-serif; font-size:14px; line-height:20px;\" class=\"darkmode-text\">\n                                            Se tiver alguma dúvida, \u003Ca href=\"mailto:suporte@exemplo.com\" style=\"color:#007bff; text-decoration:underline;\">entre em contato\u003C\u002Fa>.\n                                        \u003C\u002Ftd>\n                                    \u003C\u002Ftr>\n                                \u003C\u002Ftable>\n                            \u003C\u002Ftd>\n                        \u003C\u002Ftr>\n                        \u003Ctr>\n                            \u003Ctd style=\"padding:30px; background:#ee4c50;\" class=\"button-darkmode\">\n                                \u003Ctable role=\"presentation\" style=\"width:100%; border-collapse:collapse; border:0; border-spacing:0; font-size:9px; font-family:Arial,sans-serif;\">\n                                    \u003Ctr>\n                                        \u003Ctd style=\"padding:0; width:50%;\" align=\"left\">\n                                            \u003Cp style=\"margin:0; font-size:14px; line-height:16px; font-family:Arial,sans-serif; color:#ffffff;\">\n                                                © 2024 [Nome da Empresa]. Todos os direitos reservados.\u003Cbr\u002F>\u003Ca href=\"https:\u002F\u002Fexemplo.com\u002Fpolitica-privacidade\" style=\"color:#ffffff; text-decoration:underline;\">Política de Privacidade\u003C\u002Fa>\n                                            \u003C\u002Fp>\n                                        \u003C\u002Ftd>\n                                        \u003Ctd style=\"padding:0; width:50%;\" align=\"right\">\n                                            \u003Ctable role=\"presentation\" style=\"border-collapse:collapse; border:0; border-spacing:0;\">\n                                                \u003Ctr>\n                                                    \u003Ctd style=\"padding:0 0 0 10px; width:38px;\">\n                                                        \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fexemplo\" style=\"color:#ffffff;\">\u003Cimg src=\"https:\u002F\u002Fassets.exemplo.com\u002Ftwitter.png\" alt=\"Twitter\" width=\"38\" style=\"height:auto; display:block; border:0;\" \u002F>\u003C\u002Fa>\n                                                    \u003C\u002Ftd>\n                                                    \u003Ctd style=\"padding:0 0 0 10px; width:38px;\">\n                                                        \u003Ca href=\"https:\u002F\u002Ffacebook.com\u002Fexemplo\" style=\"color:#ffffff;\">\u003Cimg src=\"https:\u002F\u002Fassets.exemplo.com\u002Ffacebook.png\" alt=\"Facebook\" width=\"38\" style=\"height:auto; display:block; border:0;\" \u002F>\u003C\u002Fa>\n                                                    \u003C\u002Ftd>\n                                                \u003C\u002Ftr>\n                                            \u003C\u002Ftable>\n                                        \u003C\u002Ftd>\n                                    \u003C\u002Ftr>\n                                \u003C\u002Ftable>\n                            \u003C\u002Ftd>\n                        \u003C\u002Ftr>\n                    \u003C\u002Ftable>\n                \u003C\u002Ftd>\n            \u003C\u002Ftr>\n        \u003C\u002Ftable>\n    \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### Template de Email de Carrinho Abandonado Otimizado para Dark Mode\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"pt-","# Email Template Html\n\nEsta skill capacita o Claude a criar, otimizar e integrar templates HTML de email responsivos para sequências de automação e campanhas de nurturing.\n\n---\n\n## Keywords\n\nHTML 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.\n\n---\n\n## Quick Start\n\n1.  Escolha uma estrutura HTML base robusta (boilerplate como Cerberus ou framework MJML).\n2.  Estruture o layout primário exclusivamente com tabelas aninhadas para compatibilidade universal.\n3.  Converta todo o CSS essencial para estilos inline antes do envio para assegurar renderização.\n4.  Teste o template em múltiplas plataformas de email (desktop, web, mobile) usando ferramentas de pré-visualização.\n5.  Valide o código HTML para erros de sintaxe e implemente as meta tags de Dark Mode.\n\n---\n\n## Core Workflows\n\n### Workflow 1: Criação de Template HTML Responsivo para Sequência de Boas-Vindas\n\nEste 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.\n\n1.  **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.\n    *   **Exemplo de Snippet Inicial**:\n        ```html\n        \u003C!DOCTYPE html>\n        \u003Chtml lang=\"pt-BR\">\n        \u003Chead>\n            \u003Cmeta charset=\"utf-8\">\n            \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n            \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n            \u003Cmeta name=\"x-apple-disable-message-reformatting\">\n            \u003Cmeta name=\"color-scheme\" content=\"light dark\">\n            \u003Cmeta name=\"supported-color-schemes\" content=\"light dark\">\n            \u003Ctitle>Bem-vindo à Nossa Comunidade!\u003C\u002Ftitle>\n            \u003C!-- [Estilos globais e media queries aqui] -->\n        \u003C\u002Fhead>\n        \u003Cbody>\n            \u003C!-- Conteúdo do email aqui -->\n        \u003C\u002Fbody>\n        \u003C\u002Fhtml>\n        ```\n2.  **Definição de Layout com Tabelas**: Construa o layout do email utilizando exclusivamente tabelas aninhadas (`\u003Ctable>`). 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.\n    *   **Exemplo de Estrutura de Conteúdo Principal**:\n        ```html\n        \u003Ctable role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">\n            \u003Ctr>\n                \u003Ctd style=\"padding: 20px 0;\">\n                    \u003Ctable role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"600\" style=\"margin: 0 auto; background-color: #ffffff;\">\n                        \u003Ctr>\n                            \u003Ctd style=\"padding: 30px 40px; text-align: center; font-family: Arial, sans-serif; font-size: 24px; color: #333333;\">\n                                Olá, {{nome_do_cliente}}!\n                            \u003C\u002Ftd>\n                        \u003C\u002Ftr>\n                        \u003Ctr>\n                            \u003Ctd style=\"padding: 0 40px 30px; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #555555;\">\n                                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.\n                            \u003C\u002Ftd>\n                        \u003C\u002Ftr>\n                    \u003C\u002Ftable>\n                \u003C\u002Ftd>\n            \u003C\u002Ftr>\n        \u003C\u002Ftable>\n        ```\n3.  **Otimização e Incorporação de Imagens**: Adicione tags `\u003Cimg>` 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.\n    *   **Exemplo de Imagem Responsiva**:\n        ```html\n        \u003Cimg src=\"https:\u002F\u002Fassets.exemplo.com\u002Fbanner-boas-vindas.jpg\" alt=\"Banner de Boas-Vindas à comunidade\" width=\"600\" style=\"display: block; max-width: 100%; height: auto; border: 0;\">\n        ```\n4.  **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.\n    *   **Exemplo de Estilo Inline**:\n        ```html\n        \u003Cp style=\"font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 16px; color: #333333; line-height: 1.6; margin: 0 0 15px;\">\n            Este é um parágrafo com estilos aplicados diretamente.\n        \u003C\u002Fp>\n        ```\n5.  **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.\n    *   **Exemplo de CTA em Tabela**:\n        ```html\n        \u003Ctable role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"margin: 20px auto;\">\n            \u003Ctr>\n                \u003Ctd align=\"center\" bgcolor=\"#007bff\" style=\"border-radius: 5px;\">\n                    \u003Ca href=\"https:\u002F\u002Fexemplo.com\u002Frecursos\" target=\"_blank\" style=\"font-size: 16px; font-family: Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 5px; padding: 12px 24px; border: 1px solid #007bff; display: inline-block;\">\n                        Explorar Nossos Recursos\n                    \u003C\u002Fa>\n                \u003C\u002Ftd>\n            \u003C\u002Ftr>\n        \u003C\u002Ftable>\n        ```\n6.  **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.\n\n### Workflow 2: Otimização de Template Existente para Dark Mode e Acessibilidade em Email de Carrinho Abandonado\n\nEste 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.\n\n1.  **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.\n2.  **Implementação de Meta Tags para Dark Mode**: Adicione as meta tags `color-scheme` e `supported-color-schemes` dentro da tag `\u003Chead>` do HTML. Estas tags informam aos clientes de email a preferência de esquema de cores do seu email e qual esquema ele suporta.\n    *   **Exemplo**:\n        ```html\n        \u003Chead>\n            \u003Cmeta charset=\"utf-8\">\n            \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n            \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n            \u003Cmeta name=\"x-apple-disable-message-reformatting\">\n            \u003Cmeta name=\"color-scheme\" content=\"light dark\">\n            \u003Cmeta name=\"supported-color-schemes\" content=\"light dark\">\n            \u003Ctitle>Seu Carrinho te Espera!\u003C\u002Ftitle>\n            \u003C!-- [Estilos Dark Mode e media queries aqui] -->\n        \u003C\u002Fhead>\n        ```\n3.  **Uso de Media Queries para Estilos Específicos de Dark Mode**: Dentro da tag `\u003Cstyle>` no `\u003Chead>`, implemente media queries `@media (prefers-color-scheme: dark)` para aplicar estilos CSS que invertem cores de fundo e texto, ou ajustam elementos específicos quando o Dark Mode está ativo.\n    *   **Exemplo de Media Query**:\n        ```html\n        \u003Cstyle>\n            \u002F* Estilos globais para Light Mode *\u002F\n            body { background-color: #f6f6f6; color: #333333; }\n            .content-area { background-color: #ffffff; }\n\n            \u002F* Estilos para Dark Mode *\u002F\n            @media (prefers-color-scheme: dark) {\n                body { background-color: #1a1a1a !important; color: #e0e0e0 !important; }\n                .content-area { background-color: #2c2c2c !important; }\n                .darkmode-text { color: #e0e0e0 !important; }\n                \u002F* Ajuste de imagem para Dark Mode *\u002F\n                .dark-img { display: block !important; width: auto !important; overflow: visible !important; float: none !important; max-height: inherit !important; max-width: inherit !important; line-height: auto !important; margin-top: 0px !important; visibility: inherit !important; }\n                .light-img { display: none; display: none !important; }\n            }\n        \u003C\u002Fstyle>\n        ```\n4.  **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.\n    *   **Exemplo de Troca de Imagem**:\n        ```html\n        \u003C!-- Imagem para Light Mode -->\n        \u003Cimg class=\"light-img\" src=\"https:\u002F\u002Fassets.exemplo.com\u002Flogo-claro.png\" alt=\"Logo da Empresa\" width=\"150\" style=\"display: block;\">\n        \u003C!-- Imagem para Dark Mode (inicialmente oculta) -->\n        \u003Cimg class=\"dark-img\" src=\"https:\u002F\u002Fassets.exemplo.com\u002Flogo-escuro.png\" alt=\"Logo da Empresa\" width=\"150\" style=\"display: none; mso-hide: all;\">\n        ```\n5.  **Melhorias de Acessibilidade**:\n    *   **Textos Alternativos (Alt Text)**: Verifique se todas as imagens têm `alt` text descritivo e conciso. Para imagens puramente decorativas, use `alt=\"\"`.\n    *   **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.\n    *   **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.\n    *   **Hierarquia e Semântica**: Embora `\u003Ch1>` a `\u003Ch6>` não sejam recomendados em emails, use `\u003Cstrong>` para enfatizar texto e `role=\"presentation\"` em tabelas que servem apenas para layout.\n6.  **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.\n\n---\n\n## Templates\n\n### Template de Email de Boas-Vindas Responsivo\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"pt-BR\">\n\u003Chead>\n    \u003Cmeta charset=\"utf-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    \u003Cmeta name=\"x-apple-disable-message-reformatting\">\n    \u003Cmeta name=\"color-scheme\" content=\"light dark\">\n    \u003Cmeta name=\"supported-color-schemes\" content=\"light dark\">\n    \u003Ctitle>Bem-vindo à Comunidade [Nome da Empresa]!\u003C\u002Ftitle>\n    \u003C!--[if mso]>\n    \u003Cnoscript>\n        \u003Cxml>\n            \u003Co:OfficeDocumentSettings>\n                \u003Co:AllowPNG\u002F>\n                \u003Co:PixelsPerInch>96\u003C\u002Fo:PixelsPerInch>\n            \u003C\u002Fo:OfficeDocumentSettings>\n        \u003C\u002Fxml>\n    \u003C\u002Fnoscript>\n    \u003C![endif]-->\n    \u003Cstyle>\n        :root {\n            color-scheme: light dark;\n            supported-color-schemes: light dark;\n        }\n        @media (prefers-color-scheme: dark) {\n            body { background-color: #1a1a1a !important; color: #e0e0e0 !important; }\n            .darkmode-text { color: #e0e0e0 !important; }\n            .darkmode-bg { background-color: #2c2c2c !important; }\n            .button-darkmode { background-color: #0056b3 !important; border-color: #0056b3 !important; }\n            .button-darkmode a { color: #ffffff !important; }\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody style=\"margin: 0; padding: 0; word-spacing: normal; background-color: #f6f6f6;\">\n    \u003Cdiv role=\"article\" aria-roledescription=\"email\" lang=\"pt-BR\" style=\"text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;\">\n        \u003Ctable role=\"presentation\" style=\"width:100%; border-collapse:collapse; border:0; border-spacing:0; background:#f6f6f6;\">\n            \u003Ctr>\n                \u003Ctd align=\"center\" style=\"padding:0;\">\n                    \u003Ctable role=\"presentation\" style=\"width:600px; border-collapse:collapse; border:1px solid #cccccc; border-spacing:0; text-align:left; background-color: #ffffff;\" class=\"darkmode-bg\">\n                        \u003Ctr>\n                            \u003Ctd align=\"center\" style=\"padding:40px 0 30px 0; background:#007bff;\" class=\"button-darkmode\">\n                                \u003Cimg src=\"https:\u002F\u002Fassets.exemplo.com\u002Flogo-empresa-branca.png\" alt=\"Logo da Empresa\" width=\"160\" style=\"height:auto; display:block;\" \u002F>\n                            \u003C\u002Ftd>\n                        \u003C\u002Ftr>\n                        \u003Ctr>\n                            \u003Ctd style=\"padding:36px 30px 42px 30px;\">\n                                \u003Ctable role=\"presentation\" style=\"width:100%; border-collapse:collapse; border:0; border-spacing:0;\">\n                                    \u003Ctr>\n                                        \u003Ctd style=\"padding:0 0 15px 0; color:#153643; font-family:Arial,sans-serif; font-size:24px; line-height:28px; font-weight:bold;\" class=\"darkmode-text\">\n                                            Olá, {{nome_do_cliente}}! Seja bem-vindo(a)!\n                                        \u003C\u002Ftd>\n                                    \u003C\u002Ftr>\n                                    \u003Ctr>\n                                        \u003Ctd style=\"padding:0 0 15px 0; color:#153643; font-family:Arial,sans-serif; font-size:16px; line-height:24px;\" class=\"darkmode-text\">\n                                            É um prazer tê-lo(a) conosco na comunidade [Nome da Empresa]. Estamos muito felizes por você ter se juntado a nós!\n                                        \u003C\u002Ftd>\n                                    \u003C\u002Ftr>\n                                    \u003Ctr>\n                                        \u003Ctd style=\"padding:0 0 25px 0; color:#153643; font-family:Arial,sans-serif; font-size:16px; line-height:24px;\" class=\"darkmode-text\">\n                                            Aqui, você encontrará os melhores conteúdos sobre desenvolvimento web, design e marketing digital. Para começar, confira nosso guia exclusivo para novos membros:\n                                        \u003C\u002Ftd>\n                                    \u003C\u002Ftr>\n                                    \u003Ctr>\n                                        \u003Ctd align=\"center\" style=\"padding:0;\">\n                                            \u003Ctable role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"margin:0 auto;\">\n                                                \u003Ctr>\n                                                    \u003Ctd align=\"center\" bgcolor=\"#007bff\" style=\"border-radius:5px;\" class=\"button-darkmode\">\n                                                        \u003Ca href=\"https:\u002F\u002Fexemplo.com\u002Fguia-inicio\" target=\"_blank\" style=\"font-size:16px; font-family:Arial,sans-serif; color:#ffffff; text-decoration:none; border-radius:5px; padding:12px 24px; border:1px solid #007bff; display:inline-block;\">\n                                                            Acessar Guia de Início Rápido\n                                                        \u003C\u002Fa>\n                                                    \u003C\u002Ftd>\n                                                \u003C\u002Ftr>\n                                            \u003C\u002Ftable>\n                                        \u003C\u002Ftd>\n                                    \u003C\u002Ftr>\n                                    \u003Ctr>\n                                        \u003Ctd style=\"padding:30px 0 0 0; color:#153643; font-family:Arial,sans-serif; font-size:14px; line-height:20px;\" class=\"darkmode-text\">\n                                            Se tiver alguma dúvida, \u003Ca href=\"mailto:suporte@exemplo.com\" style=\"color:#007bff; text-decoration:underline;\">entre em contato\u003C\u002Fa>.\n                                        \u003C\u002Ftd>\n                                    \u003C\u002Ftr>\n                                \u003C\u002Ftable>\n                            \u003C\u002Ftd>\n                        \u003C\u002Ftr>\n                        \u003Ctr>\n                            \u003Ctd style=\"padding:30px; background:#ee4c50;\" class=\"button-darkmode\">\n                                \u003Ctable role=\"presentation\" style=\"width:100%; border-collapse:collapse; border:0; border-spacing:0; font-size:9px; font-family:Arial,sans-serif;\">\n                                    \u003Ctr>\n                                        \u003Ctd style=\"padding:0; width:50%;\" align=\"left\">\n                                            \u003Cp style=\"margin:0; font-size:14px; line-height:16px; font-family:Arial,sans-serif; color:#ffffff;\">\n                                                © 2024 [Nome da Empresa]. Todos os direitos reservados.\u003Cbr\u002F>\u003Ca href=\"https:\u002F\u002Fexemplo.com\u002Fpolitica-privacidade\" style=\"color:#ffffff; text-decoration:underline;\">Política de Privacidade\u003C\u002Fa>\n                                            \u003C\u002Fp>\n                                        \u003C\u002Ftd>\n                                        \u003Ctd style=\"padding:0; width:50%;\" align=\"right\">\n                                            \u003Ctable role=\"presentation\" style=\"border-collapse:collapse; border:0; border-spacing:0;\">\n                                                \u003Ctr>\n                                                    \u003Ctd style=\"padding:0 0 0 10px; width:38px;\">\n                                                        \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fexemplo\" style=\"color:#ffffff;\">\u003Cimg src=\"https:\u002F\u002Fassets.exemplo.com\u002Ftwitter.png\" alt=\"Twitter\" width=\"38\" style=\"height:auto; display:block; border:0;\" \u002F>\u003C\u002Fa>\n                                                    \u003C\u002Ftd>\n                                                    \u003Ctd style=\"padding:0 0 0 10px; width:38px;\">\n                                                        \u003Ca href=\"https:\u002F\u002Ffacebook.com\u002Fexemplo\" style=\"color:#ffffff;\">\u003Cimg src=\"https:\u002F\u002Fassets.exemplo.com\u002Ffacebook.png\" alt=\"Facebook\" width=\"38\" style=\"height:auto; display:block; border:0;\" \u002F>\u003C\u002Fa>\n                                                    \u003C\u002Ftd>\n                                                \u003C\u002Ftr>\n                                            \u003C\u002Ftable>\n                                        \u003C\u002Ftd>\n                                    \u003C\u002Ftr>\n                                \u003C\u002Ftable>\n                            \u003C\u002Ftd>\n                        \u003C\u002Ftr>\n                    \u003C\u002Ftable>\n                \u003C\u002Ftd>\n            \u003C\u002Ftr>\n        \u003C\u002Ftable>\n    \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### Template de Email de Carrinho Abandonado Otimizado para Dark Mode\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"pt-",{"name":5,"risk":30,"license":14,"metadata":38,"description":7},{"author":39,"updated":40,"version":41,"category":42},"Cafe Code AI",1772323200000,"1.0.0","02-email-automacao","master","346c313fd2ec241a088c68274da26c538422568b","packs\u002Fkit-510-ptbr\u002F02-email-automacao\u002Femail-template-html",35,"https:\u002F\u002Fgithub.com\u002Fkursku\u002Fskills","https:\u002F\u002Fclaude.ai","https:\u002F\u002Fgithub.com\u002Fkursku","2026-03-27 22:43:37",{"source":8,"skillName":5,"commands":52,"prompt":62,"zipAvailable":63},[53,56,59],{"tool":54,"command":55},"npx","npx skills add kursku\u002Fskills --skill email-template-html",{"tool":57,"command":58},"bunx","bunx skills add kursku\u002Fskills --skill email-template-html",{"tool":60,"command":61},"pnpm","pnpm dlx skills add kursku\u002Fskills --skill email-template-html","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fkursku\u002Fskills\u002Fblob\u002Fmaster\u002Fpacks\u002Fkit-510-ptbr\u002F02-email-automacao\u002Femail-template-html\u002FSKILL.md",true,[65],{"path":66,"resourceType":67,"resourceTypeDesc":68,"sizeBytes":69,"sourceHtmlUrl":70},"LICENSE.txt","LICENSE","许可证",10174,"https:\u002F\u002Fgithub.com\u002Fpattanation\u002FNorvik\u002Fblob\u002Fclaude\u002Finstall-gsd-build-foQdV\u002F.agents\u002Fskills\u002Ffrontend-design\u002FLICENSE.txt",[72,91,102,114,125,135],{"skillNo":73,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":76,"categories":77,"keywords":86,"publishedAt":33},"01M6ECKM7725267ZM3XNYWH608","wedding-marketing","Wedding Marketing — Skill especializada para criar e executar estratégias de marketing digital para o mercado de casamentos, focando em noivos e fornecedores.","https:\u002F\u002Fgithub.com\u002Fkursku\u002Fskills\u002Fblob\u002Fmaster\u002Fpacks\u002Fkit-510-ptbr\u002F16-nichos-especificos\u002Fwedding-marketing\u002FSKILL.md",[78,81],{"categoryNo":79,"categoryName":80,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},"01JBSEEDCAT000000000000035","市场营销","PROFESSION","适用职业",[87,88,89,90,32,31],"wedding marketing","marketing","marketing digital","de",{"skillNo":92,"name":93,"nameZh":6,"description":94,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":99,"publishedAt":33},"01M6ECKGP656JQC2C6CK5JH3ZG","travel-marketing","Travel Marketing — Skill especializada para travel marketing","https:\u002F\u002Fgithub.com\u002Fkursku\u002Fskills\u002Fblob\u002Fmaster\u002Fpacks\u002Fkit-510-ptbr\u002F16-nichos-especificos\u002Ftravel-marketing\u002FSKILL.md",[97,98],{"categoryNo":79,"categoryName":80,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},[100,101,88,32,31,30],"travel marketing","travel",{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":110,"publishedAt":33},"01M6ECKBY53SJ7E167D6BXTMRK","tech-startup-marketing","Tech Startup Marketing — Skill especializada para tech startup marketing","https:\u002F\u002Fgithub.com\u002Fkursku\u002Fskills\u002Fblob\u002Fmaster\u002Fpacks\u002Fkit-510-ptbr\u002F16-nichos-especificos\u002Ftech-startup-marketing\u002FSKILL.md",[108,109],{"categoryNo":79,"categoryName":80,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},[111,112,88,113,32,31,30],"tech startup marketing","tech","startup",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":122,"publishedAt":33},"01M6ECK7W2W0J5MZ8BZHFM516P","saas-marketing","Saas Marketing — Skill especializada para desenvolver e executar estratégias de marketing digital focadas no crescimento de produtos SaaS.","https:\u002F\u002Fgithub.com\u002Fkursku\u002Fskills\u002Fblob\u002Fmaster\u002Fpacks\u002Fkit-510-ptbr\u002F16-nichos-especificos\u002Fsaas-marketing\u002FSKILL.md",[120,121],{"categoryNo":79,"categoryName":80,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},[123,88,124,30,89,90,32,31],"saas marketing","saas",{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":133,"publishedAt":33},"01M6ECK42ZSX5ND0SCTRKD7XKB","restaurant-marketing","Restaurant Marketing — Skill especializada para otimizar a presença digital, atrair e reter clientes em restaurantes.","https:\u002F\u002Fgithub.com\u002Fkursku\u002Fskills\u002Fblob\u002Fmaster\u002Fpacks\u002Fkit-510-ptbr\u002F16-nichos-especificos\u002Frestaurant-marketing\u002FSKILL.md",[131,132],{"categoryNo":79,"categoryName":80,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},[134,88,31,32],"restaurant marketing",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":143,"publishedAt":33},"01M6ECK0S48CPYE9P7PRAG9R3T","real-estate-marketing","Real Estate Marketing — Skill especializada para criação e execução de estratégias de marketing digital para o setor imobiliário.","https:\u002F\u002Fgithub.com\u002Fkursku\u002Fskills\u002Fblob\u002Fmaster\u002Fpacks\u002Fkit-510-ptbr\u002F16-nichos-especificos\u002Freal-estate-marketing\u002FSKILL.md",[141,142],{"categoryNo":79,"categoryName":80,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},[88,144,145,31,32,90,89,30],"real estate","real estate marketing"]