Our review
Helps build responsive, cross-client email templates using React Email components, with support for personalization and HTML rendering.
Strengths
- Pre-built components for Gmail, Outlook, and Apple Mail compatibility.
- Local preview with hot reload via `email dev`.
- Tailwind or React style props compile to inline styles.
Limitations
- Requires React 18+ and knowledge of email client quirks.
- Emails must stay under 102KB to avoid Gmail clipping.
- Outlook may need extra testing due to rendering differences.
Use for transactional emails (welcome, receipts, password resets) that must render correctly across all major email clients.
Avoid for rich newsletters or complex marketing campaigns that require elaborate designs not supported by email clients.
Security analysis
SafeThe skill provides design guidance for email templates using React Email, with no destructive commands, file manipulation, or network calls. It is purely declarative and advisory, posing no execution risk.
No concerns found
Examples
Create a welcome email template for new user signupsCreate an order receipt email with line items and totalsname: react-email description: >- Assists with building responsive, cross-client email templates using React Email components. Use when creating transactional emails (welcome, receipts, password reset) that render correctly in Gmail, Outlook, Apple Mail, and mobile clients. Trigger words: react email, email template, transactional email, email components, email rendering. license: Apache-2.0 compatibility: "Requires React 18+" metadata: author: terminal-skills version: "1.0.0" category: automation tags: ["react-email", "email", "transactional", "templates", "rendering"]
React Email
Overview
React Email is a library for building responsive, cross-client email templates using React components. It provides pre-built components (Container, Section, Button, Text, Img) that compile to inline-styled, table-based HTML compatible with Gmail, Outlook, and mobile clients, with a local dev server for previewing templates and integration with any email sending service.
Instructions
- When building templates, use React Email components (
<Html>,<Container>,<Section>,<Text>,<Button>,<Img>) with props for personalization, keeping the container max-width at 600px for email client compatibility. - When styling, use the
<Tailwind>wrapper for utility classes that compile to inline styles, or use Reactstyleprops directly since email clients strip<style>tags. - When rendering, use
render(element)to produce HTML strings andrender(element, { plainText: true })for plain text versions, compatible with Resend, SendGrid, Nodemailer, or any email service. - When previewing, use
email devfor a local preview server with hot reload and test email sending. - When adding inbox preview text, include
<Preview>on every email to control the 40-90 character preview shown in inbox listings. - When handling dynamic content, pass data as typed props to email components for type-safe personalization (name, order details, links).
Examples
Example 1: Build a welcome email with CTA button
User request: "Create a welcome email template for new user signups"
Actions:
- Create
emails/welcome.tsxwith<Html>,<Head>,<Preview>,<Body>, and<Container> - Add a logo with
<Img>, personalized greeting with<Text>, and onboarding CTA with<Button> - Wrap with
<Tailwind>for responsive styling and dark mode support - Render with
render(<WelcomeEmail name={user.name} />)and send via Resend
Output: A responsive welcome email with personalized content that renders correctly across all major email clients.
Example 2: Build a receipt email with order details
User request: "Create an order receipt email with line items and totals"
Actions:
- Define a typed props interface for order data (items, prices, shipping, total)
- Use
<Section>for header, order summary, and footer sections - Build line items table with
<Row>and<Column>for responsive grid layout - Add formatted prices and order number, with a "View Order"
<Button>linking to the dashboard
Output: A receipt email with dynamic line items, formatted prices, and responsive layout for mobile.
Guidelines
- Use
<Preview>on every email to control inbox preview text (40-90 characters). - Use the
<Tailwind>wrapper for styling since utilities compile to inline styles that email clients understand. - Always include a plain text version with
render(template, { plainText: true })since spam filters penalize HTML-only emails. - Test in Litmus or Email on Acid before deploying since Outlook renders differently from other clients.
- Keep emails under 102KB of HTML since Gmail clips emails above this threshold.
- Use
<Container maxWidth={600}>since 600px is the safe width for all email clients.
Next.js App Router Expert
Development
A skill that turns Claude into a Next.js App Router expert.
README Generator
Development
Creates professional and comprehensive README.md files for your projects.
API Documentation Writer
Development
Generates comprehensive API documentation in OpenAPI/Swagger format.