# Responsive Email Templates > HTML email design patterns using React Email and MJML. Covers responsive layouts, dark mode support, cross-client compatibility, and transactional email design. - Skill: `goharabbas321/responsive-email-templates` (Agent Skill) - Install (CLI): `npx skillmds@latest add goharabbas321/responsive-email-templates` - Raw SKILL.md: https://api.skillmd.com/api/skills/goharabbas321/responsive-email-templates/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: goharabbas321 (https://skillmd.com/u/goharabbas321) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/goharabbas321/responsive-email-templates --- # Responsive Email Templates ## Overview Email HTML is notoriously different from web HTML due to inconsistent client rendering engines. This skill covers modern approaches to email design using React Email and MJML, ensuring cross-client compatibility with Gmail, Outlook, Apple Mail, and mobile clients. ## When to Use - Building transactional emails (welcome, password reset, receipts) - Creating marketing email templates - Setting up automated email pipelines with consistent branding - Need responsive emails that work across all major email clients ## React Email (Recommended) ```tsx import { Html, Head, Body, Container, Section, Text, Button, Img, Hr } from "@react-email/components" export function WelcomeEmail({ name, ctaUrl }) { return ( Logo
Welcome, {name}! Thanks for signing up. Get started by completing your profile.
© 2026 Your Company. All rights reserved. ) } const body = { backgroundColor: "#f6f9fc", fontFamily: "'Inter', Arial, sans-serif" } const container = { maxWidth: "600px", margin: "0 auto", padding: "20px" } const section = { backgroundColor: "#ffffff", borderRadius: "8px", padding: "32px" } const heading = { fontSize: "24px", fontWeight: "700", color: "#1a1a2e" } const paragraph = { fontSize: "16px", lineHeight: "1.6", color: "#4a5568" } const button = { backgroundColor: "#6366f1", color: "#ffffff", padding: "12px 24px", borderRadius: "6px", textDecoration: "none", fontWeight: "600" } const divider = { borderColor: "#e2e8f0", margin: "24px 0" } const footer = { fontSize: "12px", color: "#9ca3af", textAlign: "center" } ``` ### Preview & Send ```bash # Install npm install @react-email/components react-email # Dev server with live preview npx react-email dev # Render to HTML string import { render } from "@react-email/render" const html = await render() ``` ## MJML Alternative ```xml Welcome! Thanks for signing up. Get Started ``` ## Guidelines 1. **Use React Email** for TypeScript projects — components are testable and type-safe 2. **Inline all styles** — most email clients strip `