A comprehensive toolkit for building, testing, and deploying responsive React Email templates and transactional email systems.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install email-template-builder
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install email-template-builder using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Email Template Builder?
The Email Template Builder is a powerful resource within the Openclaw Skills ecosystem designed to streamline the creation of high-quality transactional email systems. It leverages React Email and MJML to ensure maximum compatibility across complex email clients while providing developers with a modern workflow, including hot-reloading preview servers and typed translation keys.
By utilizing Openclaw Skills for your communication infrastructure, engineering teams can implement robust systems that support dark mode, complex i18n requirements, and multi-provider integrations with services like Resend, Postmark, or AWS SES. This skill handles the technical heavy lifting of styling, tracking, and deliverability optimization, allowing developers to focus on brand consistency and user engagement.
Email Template Builder Use Cases
- Setting up transactional email systems for new product launches.
- Migrating legacy HTML email systems to a modern React-based component stack.
- Adding automated notifications, invoices, and weekly digests with professional layouts.
- Debugging email deliverability and optimizing spam scores for better inbox placement.
- Implementing internationalization for global email campaigns.
How Email Template Builder Works
- Define a base layout with brand headers, footers, and dark mode media queries using the provided components.
- Create modular React components for buttons, sections, and tables to maintain a consistent design system.
- Develop specific email templates such as welcome messages or invoices using the component library.
- Configure the local preview server to test templates with hot reloading and various data states.
- Integrate a unified sending function to route emails through preferred providers like Resend or SES using Openclaw Skills logic.
Email Template Builder Setup
To get started with this project, ensure you have the necessary dependencies installed for your environment:
# Install core email components and rendering library
npm install @react-email/components @react-email/render resend
# Configure your package scripts
# Add "email:dev": "email dev --dir emails/templates --port 3001" to package.json
# Launch the preview environment
npm run email:dev
Email Template Builder Data Schema & Taxonomy
The skill organizes data and metadata using a structured directory system to manage components, templates, and logic:
| Directory | Purpose |
|---|---|
| emails/components/ | Reusable UI components like layouts and CTA buttons. |
| emails/templates/ | Main transactional email designs (e.g., welcome, verify-email). |
| emails/lib/ | Core logic for unified sending and provider configuration. |
| emails/i18n/ | Typed translation files for multi-language support. |
| emails/preview/ | Development server logic for live template testing. |
| emails/lib/tracking.ts | UTM parameter injection for analytics tracking. |
Email Template Builder Advanced Features
- Automated UTM parameter injection to track engagement across all email links.
- Full dark mode support using media queries to ensure readability in all client settings.
- Integrated spam score optimization checklist to verify SPF, DKIM, and DMARC compliance.
- Support for MJML templates to achieve maximum compatibility with older email clients.
- Unified sending interface allowing for seamless switching between Resend, Postmark, and AWS SES.
SKILL.md
Loading
Related Openclaw Skills
Ctrip Travel Planner
A comprehensive travel planning and management skill for AI agents specialized in China itineraries and multi-destination family logistics.
Mindshare
A tracking primitive for analyzing mindshare trends and market attention for crypto entities and narratives using Kaito MCP tools.
GEO AI Plugin Builder
A master orchestrator designed to transform high-value content and assets into standardized AI plugins and tools across major LLM ecosystems.
diffmanifests
A powerful CLI tool for comparing manifest XML files and generating detailed commit reports via Gerrit and Gitiles APIs.
Site Architecture & Internal Linking
A specialized technical SEO skill for designing high-authority website hierarchies, URL structures, and internal linking strategies.
README Writer
An expert documentation assistant that generates high-converting README files based on patterns from top-tier open source repositories.
Featured*
