← ClaudeAtlas

html-emaillisted

Use when crafting responsive, cross-client HTML email templates and newsletters
imMamdouhaboammar/get-fable · ★ 4 · AI & Automation · score 70
Install: claude install-skill imMamdouhaboammar/get-fable
# HTML email Design an HTML email as ONE self-contained .html file that survives real email clients. Email rendering is not browser rendering — Gmail, Outlook, and Apple Mail each strip or mangle different things, and the rules below are what reliably survives all three. When a rule here conflicts with normal web-design instincts, the rule wins. Layout and styling: - Structure with nested <table role="presentation" cellpadding="0" cellspacing="0" border="0"> — no flexbox, no grid, no floats, no position. One centered wrapper table, max-width 600px, single-column flow (stacked rows beat side-by-side columns). - Inline EVERY style on the element it styles. A <style> block in <head> may additionally carry only what can't inline (media queries, dark-mode tweaks) — several clients drop it entirely, so the email must read correctly from inline styles alone. - No JavaScript anywhere (universally stripped). No external stylesheets. No web fonts — use email-safe stacks (Arial, Helvetica, Georgia, Verdana, Tahoma, 'Courier New') with generic fallbacks. - Build the visual design out of colored table cells, borders, spacer cells, and type — not images. There is nowhere to host project images from here: a referenced project file will not exist for recipients. If imagery is essential, leave a clearly-marked placeholder cell with alt text and tell the user to swap in a hosted https URL before sending. - Buttons are "bulletproof": a padded <td> with bgcolor and in