Notre avis
Aide à créer des modèles d'emails réactifs et multi-clients en utilisant les composants React Email, avec prise en charge de la personnalisation et du rendu HTML.
Points forts
- Composants prêts à l'emploi pour des emails compatibles Gmail, Outlook et Apple Mail.
- Rendu local avec rechargement à chaud via `email dev`.
- Support du style via Tailwind ou props React, compilé en styles inline.
Limites
- Nécessite React 18+ et une connaissance des spécificités des clients email.
- Les emails ne doivent pas dépasser 102 Ko pour éviter le clipping dans Gmail.
- Outlook peut nécessiter des tests supplémentaires car son rendu diffère.
Idéal pour créer des emails transactionnels (bienvenue, reçus, réinitialisation de mot de passe) qui doivent s'afficher correctement sur tous les clients email.
À éviter pour des newsletters riches ou des campagnes marketing complexes nécessitant des designs très élaborés non supportés par les clients email.
Analyse de sécurité
SûrThe 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.
Aucun point d'attention détecté
Exemples
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.
Expert Next.js App Router
Developpement
Un skill qui transforme Claude en expert Next.js App Router.
Générateur de README
Developpement
Crée des README.md professionnels et complets pour vos projets.
Rédacteur de Documentation API
Developpement
Génère de la documentation API complète au format OpenAPI/Swagger.