Cursor Rules for HTML email development — Best practices for cross-client compatibility, accessibility, and responsive design with graceful degradation.
This repository contains a Cursor rules file (.cursor/rules/emails.mdc) that provides comprehensive guidelines for HTML email development. These rules ensure emails render correctly across all modern email clients while gracefully degrading on older ones.
| Category | Description |
|---|---|
| 📄 Document Structure | HTML5 DOCTYPE, lang attributes, Microsoft namespaces |
| 🖥️ Outlook Support | DPI scaling, conditional tables, VML |
| 📱 Responsive Design | Mobile-first, media queries, stackable columns |
| 🌙 Dark Mode | Color-scheme meta tags, CSS overrides |
| ♿ Accessibility | ARIA roles, semantic HTML, alt text |
| 🎨 Styles | Inline styles, fallbacks, web fonts |
| 🔘 Buttons | Bulletproof structure compatible with all clients |
| 🖼️ Images | Complete attributes, responsive, background color fallback |
- Download the
emails.mdcfile from the.cursor/rules/folder - Place it in your project:
.cursor/rules/emails.mdc
git clone https://github.com/StephaneBour/emails-cursor-rules.git
cp emails-cursor-rules/.cursor/rules/emails.mdc your-project/.cursor/rules/git submodule add https://github.com/StephaneBour/emails-cursor-rules.git .cursor/email-rulesOnce the .cursor/rules/emails.mdc file is in your project, Cursor will automatically use it as context when generating HTML code for emails.
Simply ask Cursor:
"Create a responsive email template with a header, a CTA button, and a footer"
Cursor will automatically follow the best practices defined in the rules:
- HTML5 structure with all necessary meta tags
- Outlook support via conditional comments
- Inline styles with fallbacks
- Bulletproof buttons
- Dark mode support
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="color-scheme" content="light dark">
<!-- ... other meta tags -->
</head>
<body>
<div lang="en" role="article" aria-roledescription="email">
<!-- Email content -->
</div>
</body>
</html><!--[if mso]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td>
<![endif]-->
<div style="max-width: 600px; margin: 0 auto;">
Content
</div>
<!--[if mso]>
</td></tr></table>
<![endif]--><table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="border-radius: 4px; background: #222222;">
<a href="#" style="background: #222222; padding: 13px 17px; color: #ffffff; display: block;">
Click here
</a>
</td>
</tr>
</table>- Can I Email — CSS/HTML support by email client
- Email on Acid — Email rendering tests
- Litmus — Email testing platform
- MJML — Framework for responsive emails
Contributions are welcome! Feel free to:
- Fork the repository
- Create a branch (
git checkout -b feature/improvement) - Commit your changes (
git commit -am 'Add a new rule') - Push to the branch (
git push origin feature/improvement) - Open a Pull Request
This project is licensed under the MIT License. See the LICENSE file for details.
Made with ❤️ for the email developer community