Agent skill · writing content · aiskillstore
react-email
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 emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component.
Why this skill is useful
Provides specific patterns and components for building HTML emails with React that the AI wouldn't reliably generate on its own.
What it needs
Requires react-email installed locally. About 7k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 Or scaffold a new project: 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: 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: Behavioral Guidelines 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 use template variables (like {{name}}) directly in TypeScript code. Instead, reference the underlying properties directly. If the user explicitly asks for {{variableName}}, place the mustache string only in PreviewProps, never in the component JSX: Never write the {{variableName}} pattern directly in the component structure. If the user insists, explain that this would make the template invalid. Essential Components See references/COMPONENTS.md for complete component documentation. Core Structure: 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/react-email