| name | choose-framework |
| description | Help the user pick an HTML email framework — Foundation for Emails, Maizzle, MJML, or hand-rolled tables. Use at the start of any new email project, or when the user asks "which should I use" / "what's the best framework for emails". |
Choose an HTML Email Framework
There is no single best framework — the right choice depends on the user's existing stack, modernity preferences, and how much email-client abstraction they want.
Decision guide
Ask the user these questions (skip any they've already answered):
- Existing stack? Tailwind-centric → Maizzle. Sass/Gulp → Foundation. No preference → MJML (lowest friction).
- How often will they edit templates? One-off → MJML. Ongoing design system → Foundation or Maizzle.
- Modern Node tooling matter? Yes → Maizzle or MJML. Willing to tolerate legacy → Foundation.
- Who edits the templates? Developers only → any. Designers/marketers too → MJML (simplest syntax).
Framework comparison
Foundation for Emails (ZURB)
- Syntax: Inky (
<container>, <row>, <columns>, <button>, <callout>)
- Styling: Sass (
_settings.scss for theming)
- Build: Gulp, Panini (Handlebars), Juice for inlining
- Pros: Mature, great defaults, strong button/callout components, good docs
- Cons: Legacy Node tooling (node-sass headaches on Node 18+), slower builds, ZURB is no longer actively maintaining it
- Best for: Teams already on Sass/Gulp, Foundation-for-Sites users, design-system-heavy work
- Repo: https://github.com/foundation/foundation-emails
Maizzle
- Syntax: Plain HTML + Tailwind utility classes
- Styling: Tailwind CSS (full config), PostCSS
- Build: Modern Node, fast, config-driven
- Pros: Actively maintained, Tailwind DX, excellent inlining + minification, environment-based configs (dev/prod), works great with components (Nunjucks/Liquid/Handlebars)
- Cons: Requires Tailwind familiarity, no semantic layout helpers (you write
<table> yourself when needed)
- Best for: Modern stacks, Tailwind users, teams who want control + speed
- Repo: https://github.com/maizzle/maizzle
MJML (Mailjet)
- Syntax: XML-like semantic tags (
<mj-section>, <mj-column>, <mj-button>, <mj-image>)
- Styling: Attribute-based +
<mj-style> blocks
- Build:
mjml CLI or Node API, very fast
- Pros: Dead simple syntax, excellent client compatibility, huge component library, actively maintained, online try-it editor, great for non-developers
- Cons: Less flexible than raw HTML for custom layouts, attribute-heavy styling can feel verbose
- Best for: Fast template creation, transactional emails, teams with mixed technical skill
- Repo: https://github.com/mjmlio/mjml
Hand-rolled tables
- When: The user already has a working template they just need to edit, or needs something so specific a framework gets in the way.
- Always combine with the
email-client-gotchas skill — don't invent workarounds from scratch.
Quick recommendation matrix
| Situation | Recommendation |
|---|
| "I just need a transactional email sent via Resend/SendGrid" | MJML |
| "We use Tailwind everywhere" | Maizzle |
| "I want a marketing newsletter design system" | Foundation or Maizzle |
| "I'm not a developer" | MJML |
| "Modern Node, fast builds, version controlled" | Maizzle |
| "Quick one-off, paste into Gmail" | MJML → copy compiled HTML |
After the user picks
Hand off to the matching skill:
- Foundation →
foundation-emails
- Maizzle →
maizzle
- MJML →
mjml
Then point them at email-client-gotchas (always relevant) and inline-and-test (for preview/send).
