Teaches LLMs to generate properly structured email HTML that renders correctly across 50+ email clients. Email is not the web — this skill prevents the rendering failures that occur when LLMs use web development patterns in email.
When installed in a Claude project, this skill ensures every email HTML output:
- Uses table-based layouts (Outlook uses the Word rendering engine)
- Includes Outlook conditional comments for width control
- Handles dark mode across Apple Mail, Gmail, Outlook.com, and Yahoo
- Generates bulletproof CTA buttons that work in every client
- Follows responsive patterns that stack correctly on mobile
- Optimizes preheader text for inbox preview
- Avoids spam filter triggers in HTML structure
- Meets CAN-SPAM, GDPR, and EU AI Act footer requirements
LLMs trained on web development data produce email HTML that:
- Uses div/flexbox/grid layouts → breaks in Outlook
- Omits width/height on images → Outlook renders at natural size
- Uses CSS shorthand → Outlook ignores most shorthand
- Skips
display:blockon images → 3px gap in multiple clients - Uses
position: absolute→ not supported in any email client - Generates background-image on divs → invisible in Outlook
- Forgets
role="presentation"on tables → accessibility violation
This skill prevents all of these. Every rule exists because of a real bug in a real email client.
Copy SKILL.md into your Claude project's custom instructions or skills folder.
The skill references the charlie component API for pre-built, tested email building blocks:
GET https://charlieai.co/api/components/header
GET https://charlieai.co/api/components/hero
GET https://charlieai.co/api/components/body
GET https://charlieai.co/api/components/cta
GET https://charlieai.co/api/components/footer
Free, no auth required. Mix and match components with {{brand_*}} variables.
MIT — use freely in any project.