# React email Human Guide ## What This Is For Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending. It gives the agent a clearer input/output frame for email marketing: what context to ask for, what decisions to make, and what usable artifact to return. Use this as a human-readable version of the React email agent skill. It is meant for marketers, operators, founders, and other non-coders who want the workflow without reading agent-specific implementation instructions. ## When To Use This - Use this when you need a repeatable process for react email. - Use this when the task needs judgment, examples, constraints, or a clear output format rather than a one-off prompt. - Use this when you want to hand an AI assistant enough context to produce a usable marketing artifact. ## When Not To Use This - Do not use this when you only need a quick factual answer. - Do not use this when the work depends on private data you cannot share with the assistant. - Do not use this as a replacement for legal, compliance, financial, or medical review. ## What You Need Before Starting - The goal or business outcome you want. - The audience, customer segment, or market context. - Any source material the assistant should respect, such as notes, briefs, examples, URLs, or brand guidance. - Constraints such as tone, length, channel, deadline, region, or approval requirements. - A clear definition of what a good final answer should look like. ## Step-By-Step Workflow 1. State the job clearly: "Use the React email guide to help me with..." 2. Add context: audience, goal, offer, channel, source material, and constraints. 3. Ask the assistant to identify missing inputs before producing the final output. 4. Have the assistant follow the skill-specific guidance below. 5. Review the result against the final checklist and ask for revisions where needed. ## Skill-Specific Guidance - When iterating over the code, only update what the user asked for. Keep the rest intact. - If the user asks to use media queries, inform them that most email clients don't support them and suggest a different approach. - Never write the `{{variableName}}` pattern directly in the component structure. If the user insists, explain that this would make the template invalid. - `Html` - Root wrapper with `lang` attribute - `Head` - Meta elements, styles, fonts - `Body` - Main content wrapper - `Container` - Outermost centering wrapper (has built-in `max-width: 37.5em`). Use only once per email. - `Section` - Interior content blocks (no built-in max-width). Use for grouping content inside `Container`. - `Row` & `Column` - Multi-column layouts - `Tailwind` - Enables Tailwind CSS utility classes - `Preview` - Inbox preview text, always first inside `` - `Button` - Styled link buttons (always include `box-border`) ## Decision Points And Nuance The original skill emphasizes: Installation, Adding to an Existing Project, Basic Email Template, Behavioral Guidelines, Essential Components, Before Writing Code, Static Files and Images, Directory Structure, Dev vs Production URLs, Styling. Use these questions to steer the work: - What is the intended audience or buyer? - What source material must be preserved? - What should the assistant optimize for: clarity, persuasion, accuracy, speed, creativity, or conversion? - What examples represent the desired quality bar? - What should the assistant avoid? ## Common Mistakes - If the user asks to use media queries, inform them that most email clients don't support them and suggest a different approach. - Never write the `{{variableName}}` pattern directly in the component structure. If the user insists, explain that this would make the template invalid. - Local images must be placed in the `static` folder inside your emails directory: - **Important:** Always ask the user for their production hosting URL. Do not hardcode `localhost:3000`. - Use `Tailwind` with `pixelBasedPreset` (email clients don't support `rem`). Import `pixelBasedPreset` from `react-email`. - Never use flexbox or grid — use `Row`/`Column` components or tables for layouts. - Avoid CSS/Tailwind media queries (`sm:`, `md:`, `lg:`, `xl:`) — limited email client support. - Never use theme selectors (`dark:`, `light:`) — not supported. ## Copy-And-Paste Prompt ```text Use the React email human guide. My goal: [Describe the business outcome] Audience: [Describe who this is for] Context and source material: [Paste notes, examples, links, or existing copy] Constraints: [Tone, length, channel, timeline, must-include items, must-avoid items] Before producing the final output, ask me for any missing information that would materially improve the result. ``` ## Final Checklist - [ ] The output matches the original goal. - [ ] The audience and context are reflected in the answer. - [ ] Important constraints and source material were preserved. - [ ] The assistant made the relevant decisions explicit. - [ ] The final artifact is ready to use, review, or hand to the next person. ## Source This guide was generated from the resend/react-email skill entry for `react-email`. ## Source Skill Notes These notes preserve the nuance from the original skill. Use them as supporting reference when the workflow above feels too generic. # React Email Build and send HTML emails using React components. A modern, component-based approach to email development that works across all major email clients. ## Installation ```sh npm i react-email ``` Or scaffold a new project: ```sh npx create-email@latest cd react-email-starter npm install npm run dev ``` This works with any package manager (npm, yarn, pnpm, bun) — substitute accordingly. The dev server runs at localhost:3000 with a preview interface for templates in the `emails` folder. ### Adding to an Existing Project Install the packages and add a script to your `package.json`: ```json { "scripts": { "email": "email dev --dir emails --port 3000" } } ``` Make sure the path to the emails folder is relative to the base project directory. Ensure `tsconfig.json` includes proper support for JSX. ## Basic Email Template Create an email component with proper structure using the Tailwind component for styling: ```tsx import { Html, Head, Preview, Body, Container, Heading, Text, Button, Tailwind, pixelBasedPreset } from 'react-email'; interface WelcomeEmailProps { name: string; verificationUrl: string; } export default function WelcomeEmail({ name, verificationUrl }: WelcomeEmailProps) { return ( config={{ presets: [pixelBasedPreset], theme: { extend: { colors: { brand: '#007bff', }, }, }, }} > Welcome! Hi {name}, thanks for signing up! href={verificationUrl} className="bg-brand text-white px-5 py-3 rounded block text-center no-underline box-border" > Verify Email );