react-email
Create beautiful, responsive HTML emails using React components with React Email. Build transactional emails with modern components, support internationalization, and integrate with email service providers like Resend. Use when creating welcome emails, password resets, notifications, order confirmations, or any HTML email templates.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/christina-de-martinez/react-email-skillsWhat This Skill Does
The react-email skill for OpenClaw empowers developers to build, preview, and maintain professional-grade, responsive HTML emails using React components. By abstracting away the complexities of email client rendering—which notoriously varies across platforms like Outlook, Apple Mail, and Gmail—this skill allows you to leverage modern development workflows, including JSX and Tailwind CSS, to create transactional emails that look perfect everywhere.
Installation
To integrate this skill, ensure you have the OpenClaw environment set up, then execute the following command in your terminal:
clawhub install openclaw/skills/skills/christina-de-martinez/react-email-skills
Once installed, initialize your email project directory by running npx create-email@latest. Navigate into the folder using cd react-email-starter, install your dependencies via your preferred package manager (npm, yarn, pnpm, or bun), and initiate the development preview server with npm run dev. Your template environment will be live and accessible at http://localhost:3000.
Use Cases
This skill is best utilized for high-stakes transactional communications where visual consistency is mandatory. Common use cases include:
- Onboarding Sequences: Crafting beautifully branded welcome emails.
- Account Security: Designing clear, secure password reset and verification emails.
- Business Automation: Generating automated order confirmations, shipping notifications, and invoice receipts.
- Marketing Retention: Building periodic newsletters or personalized digests that require responsive design.
Example Prompts
- "OpenClaw, create a new React Email template for a welcome message that includes a centered logo, a personalized header, and a primary action button linked to the user's dashboard."
- "Help me refactor my existing order confirmation email to use the Tailwind preset from @react-email/components to ensure the layout is responsive on mobile devices."
- "Set up a new email template project and configure the script in my package.json so I can preview my templates by running 'npm run email'."
Tips & Limitations
- Styling: Always use the
<Tailwind>component provided by the library. Avoid external CSS files, as email clients have strict limitations on CSS support. - Testing: While the development server provides an excellent preview, always test your emails using real-world tools like Email on Acid or Litmus before sending them to your actual production audience.
- Platform Support: Keep in mind that email rendering is essentially 'the Wild West' of web development; complex animations and modern JavaScript are not supported in email bodies. Focus on structural integrity using tables and inline-style alternatives provided by the React Email component library.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-christina-de-martinez-react-email-skills": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write, file-read, code-execution
Related Skills
email-best-practices
Use when building email features, emails going to spam, high bounce rates, setting up SPF/DKIM/DMARC authentication, implementing email capture, ensuring compliance (CAN-SPAM, GDPR, CASL), handling webhooks, retry logic, or deciding transactional vs marketing.
resend
Use when working with Resend email platform - routes to specific sub-skills for sending, receiving, audiences, or broadcasts.