Does it support Tailwind CSS?

Yes, it includes built-in support for Tailwind CSS, but it uses a specific pixel-based preset because email clients do not reliably support rem units.

How are images handled in the templates?

Images should be placed in a local static folder. The skill helps you set up a dynamic baseURL that switches between the local dev server and your production CDN.

Can I use modern CSS like Flexbox or Grid with this skill?

No, most email clients do not support Flexbox or Grid. This skill uses specialized Row and Column components and table-based layouts to ensure compatibility across all mail clients.

Can I use SVG or WEBP images in my emails?

It is strongly discouraged as many email clients fail to render them. The skill recommends using PNG or JPG for maximum reliability.

Is it possible to generate a plain-text version of the email?

Yes, the skill provides methods to render your React components into both HTML and plain-text formats using the render utility.

React Email Designer

Name: React Email Designer
Author: Vishvsalvi

byVishvsalvi

0•

营销自动化

Builds and previews responsive HTML email templates using React components and Tailwind CSS.

The React Email skill streamlines the process of creating professional, cross-client compatible emails by leveraging a modern component-based architecture. It provides Claude with the specialized knowledge to scaffold projects, utilize email-safe components, and apply Tailwind CSS via pixel-based presets to avoid common rendering issues. This skill is essential for developers looking to automate the creation of transactional notifications, newsletters, and marketing campaigns while ensuring high-quality output that works across all major email clients, including Outlook and Gmail.

主要功能

010 GitHub stars

02Enforces email-safe styling using table-based layouts and pixel-based Tailwind configurations.

03Handles complex asset management for both development and production CDN environments.

04Scaffolds new projects using the create-email CLI for rapid development.

05Utilizes a live preview server for real-time visual feedback on template changes.

06Supports multi-format rendering for both HTML and plain-text email versions.

使用场景

01Creating automated transactional emails like welcome messages, password resets, and order confirmations.

02Developing internal notification systems that require clear, structured data presentation across devices.

03Designing responsive marketing newsletters with reusable React components and consistent branding.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vishvsalvi/magicmail react-email

For use in Claude.ai and ChatGPT