Agent Skills
› asgeirtj/system_prompts_leaks
› html-email
html-email
GitHub生成兼容 Gmail、Outlook 和 Apple Mail 的单文件 HTML 邮件模板。遵循表格布局、内联样式等规范，确保跨客户端渲染一致，包含暗色模式支持和可访问性优化，输出可直接发送的 HTML 代码。
Trigger Scenarios
需要创建 HTML 电子邮件
生成邮件模板
设计响应式邮件
Install
npx skills add asgeirtj/system_prompts_leaks --skill html-email -g -y
SKILL.md
Frontmatter
{
"name": "html-email",
"description": "Send-ready single-file email",
"user-invocable": true
}
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 inline border-radius, the<a>filling it with display:block and inline color — never an image, never a styled<button>.
Client quirks that matter:
- Outlook (Word engine): give every table/cell explicit widths; set
line-height with mso-line-height-rule:exactly; wrap Outlook-only
fixes in
<!--[if mso]> … <![endif]-->conditionals. - Gmail clips messages beyond ~100KB of HTML — stay well under.
- Add
<meta name="color-scheme" content="light dark">and pick colors that survive dark-mode inversion (avoid pure#000/#fffbackgrounds; test text on mid-tone fills).
Deliverability and accessibility:
- First element in
<body>: a hidden preheader span (~85 chars) that previews next to the subject line. - alt text on any image, lang on
<html>, real<a href>links (no dead # anchors), and a footer with a plausible unsubscribe line and postal address for anything marketing-shaped.
Show the design at 600px; mention in your reply that the file is send-ready HTML the user can drop into their email tool.
Version History
- a7d0a26 Current 2026-08-29 04:39
- 481967c 2026-08-20 17:03
