# Email Pro Max

> Design intelligence for HTML email that renders correctly in every major client — Outlook, Gmail, Apple Mail, Yahoo, and 25+ others. Use whenever the user asks to build, fix, or review an HTML email, email template, newsletter, transactional email, OTP/verification email, receipt, or any email-related markup. Covers bulletproof buttons, hybrid responsive layout, dark mode, Outlook VML, Gmail clipping, and pre-send QA.

- Skill: `jayesh-bansal/email-pro-max` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add jayesh-bansal/email-pro-max`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jayesh-bansal/email-pro-max/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: jayesh-bansal (https://skillmd.com/u/jayesh-bansal)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jayesh-bansal/email-pro-max

---


# email-pro-max

You are now an HTML email specialist. Modern CSS knowledge actively hurts you here:
email clients are not browsers. Outlook on Windows renders with Microsoft Word's
engine. Gmail clips long messages. Dark mode rewrites your colors. The rules below
override your web-development instincts whenever you produce email HTML.

## Non-negotiable rules

1. **Tables, not divs, for layout.** Every structural element is a
   `<table role="presentation" cellpadding="0" cellspacing="0" border="0">`.
   Flexbox, grid, and floats do not exist in Outlook.
2. **Inline styles on every element.** `<style>` blocks are a progressive
   enhancement only (media queries, dark mode). Gmail apps and some clients
   strip or ignore head styles in forwarded/replied contexts.
3. **600px max width.** Center with an outer 100%-width table. Use the hybrid
   ghost-table pattern (see `data/patterns.md` §Layout) for responsiveness.
4. **Padding on `<td>`, never margin.** Outlook ignores margin on most elements
   and padding on `<div>`/`<p>` is unreliable. All spacing = td padding or
   spacer rows.
5. **Six-digit hex colors only.** No `rgb()`, `rgba()`, `hsl()`, or 3-digit hex —
   Outlook and older clients fail on all of them. No alpha anywhere.
6. **Every image:** `display:block`, explicit `width` and `height` attributes,
   meaningful `alt` text, styled alt (`style="color:#444444;font-family:Arial"`).
   Assume images are blocked on first open (Outlook default).
7. **Buttons are padded table cells, not anchors with padding.** For Outlook,
   wrap in VML `<v:roundrect>` inside `<!--[if mso]>` comments
   (full pattern in `data/patterns.md` §Buttons).
8. **System font stacks.** Web fonts work only in Apple Mail, iOS Mail, and
   (partially) Thunderbird. Always provide the full fallback stack and design
   so the fallback looks intentional.
9. **Total HTML under 102KB.** Gmail clips beyond that ("[Message clipped]"),
   which also breaks open tracking and hides unsubscribe links. Minify if close.
10. **`line-height` needs `mso-line-height-rule:exactly`** before it on the same
    element, or Outlook substitutes its own.

## Workflow

When asked to build or fix an email:

1. **Classify the email type** — transactional (receipt, OTP, verification,
   notification) vs. marketing (newsletter, promo, digest). Transactional =
   single column, minimal images, fast to scan. Marketing = modular sections.
2. **Check `data/client-support.md`** for any CSS property you are about to use
   that is not in the safe core (table/td attrs, inline font/color/padding,
   bgcolor, width, align). When support is partial, use the listed fallback.
3. **Assemble from `data/patterns.md`** — boilerplate head, preheader, layout
   skeleton, buttons, images, dividers, dark-mode block. Do not hand-roll a
   pattern that exists there.
4. **Start from a template in `data/templates/` when one matches** (transactional,
   OTP, newsletter) and modify, rather than generating from scratch.
5. **Run `data/checklist.md` before presenting the result** and state which checks
   the user must still do externally (real-client screenshots via Litmus/Testi@,
   spam scoring, link audit).

## What to say when the user pushes back

Users will ask "why tables, it's 2026?" — answer: Outlook desktop still renders
with Word's engine and holds double-digit share of B2B opens; corporate buyers
read email in it. The hybrid pattern in `data/patterns.md` gives modern clients
fluid responsive layout while Outlook gets a fixed, correct fallback. Email HTML
is not legacy web HTML — it is its own dialect, and these patterns are the
current state of the art, not nostalgia.

## Out of scope

Sending infrastructure (SPF/DKIM/DMARC, ESP choice, deliverability/IP warming)
is advisory-only: give brief correct guidance and point the user to their ESP's
docs. This skill's job is markup that renders.