How to Build HTML Email Templates with Claude Code
Install `react-email` (7,085 installs, skills.sh registry) to write emails as React components, then `email-best-practices` (6,312 installs) for cross-client rendering. Together they replace hand-written table layouts and cover dark mode, screen readers, and Outlook quirks.
By Skillselion, an Ellelion LLC publication · Updated July 13, 2026 · 2 min read · Stats verified against the live catalog
Email HTML is stuck in 2005: nested tables, inline styles, and a different bug in every client. Claude Code generates markup that looks right in a browser but breaks in Outlook. Install an email skill first and the agent writes to the constraints real inboxes enforce. The top pick is `react-email` (7,085 installs, skills.sh registry).
Key takeaways
react-email(7,085 installs, 19,439 GitHub stars, resend, skills.sh registry) lets Claude Code build emails as React components instead of hand-written tables.email-best-practices(6,312 installs, 147 GitHub stars) encodes cross-client rules for Outlook, dark mode, screen readers, and translation tools.- For teams standardised on MJML,
mjml-email-templates(359 installs) andemail-html-mjml(581 installs) target that markup language directly. - All four are open SKILL.md files; see the wider set under best skills for frontend design.
Why is HTML email so hard to get right?
Email clients each ship their own rendering engine, and many strip modern CSS, so a layout that works in a browser can collapse in Outlook or Gmail. Claude Code without a skill defaults to browser-grade HTML that ignores these limits. The react-email skill (7,085 installs, skills.sh registry) loads component patterns that already compile down to the table-based, inline-styled markup inboxes accept.
What is the best skill for building HTML emails?
The best pick is `react-email` (7,085 installs, 19,439 GitHub stars, resend, skills.sh registry). It replaces raw table wrangling with familiar React components that render to pixel-perfect, responsive HTML. Pair it with `email-best-practices` (6,312 installs, resend) for the cross-client hardening layer. Compare the full set on the frontend-design pillar.
Should you use React or MJML?
Both work; the choice is stack preference. React shops should take react-email (7,085 installs). Teams already using the MJML markup language have two options: `mjml-email-templates` (359 installs, 1,061 GitHub stars) and `email-html-mjml` (581 installs, 53 GitHub stars). MJML compiles a compact component syntax into responsive table HTML, which suits non-React backends.
How do these skills handle accessibility and dark mode?
email-best-practices (6,312 installs, skills.sh registry) is the accessibility layer. It generates emails that survive screen readers, translation tools, dark-mode inversion, and AI agents parsing the message, addressing the details raw table markup usually drops. This mirrors the UI work in the design a UI guide.
A complete starter stack
react-email(7,085 installs) - component-based authoring for React stacks.email-best-practices(6,312 installs) - cross-client and accessibility hardening.mjml-email-templates(359 installs) - MJML route for non-React backends.email-html-mjml(581 installs) - a second MJML implementation to compare.
Common pitfalls
- Trusting a browser preview: an email that looks perfect in Chrome can break in Outlook's Word engine.
- Using modern flexbox or grid layouts, which many clients ignore in favour of tables.
- Skipping dark-mode and screen-reader checks that
email-best-practicesbuilds in by default.
Install react-email first, add email-best-practices, and test in real clients before you send.
The react.email documentation and the MJML docs are the authoritative references these skills build on.
Common questions
What is the best skill for building HTML emails in Claude Code?
`react-email` (7,085 installs, 19,439 GitHub stars, resend, skills.sh registry) is the top pick. It lets Claude Code write emails as React components instead of nested tables. See [react-email on Skillselion](/skills/resend/react-email).
Do these skills handle Outlook and dark mode?
Yes. `email-best-practices` (6,312 installs, 147 GitHub stars, resend) encodes cross-client rules for Outlook, dark mode, and screen readers, so generated emails render consistently. Browse it in the [frontend-design category](/category/frontend-design).
Can I use MJML instead of React for emails?
Yes. `mjml-email-templates` (359 installs, 1,061 GitHub stars) and `email-html-mjml` (581 installs, 53 GitHub stars) both target the MJML markup language, which compiles to responsive table HTML. See [best skills for frontend design](/best/skills-for-frontend-design).
How do HTML email skills improve accessibility?
`email-best-practices` (6,312 installs, skills.sh registry) generates emails that work across screen readers, translation tools, and dark mode, addressing accessibility that raw table markup usually misses. Explore the [frontend category](/category/frontend).
Ranked by Skillselion - an independent directory of AI-coding tools, not affiliated with Anthropic, OpenAI or Cursor. Tool rankings reflect real adoption (installs, then GitHub stars) from the skills.sh registry and GitHub, last updated July 13, 2026.