Guide · Agent skill
How to use the Email Template Builder agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Email Template Builder is an agent skill: a SKILL.md instruction file that teaches a coding agent how to build a complete transactional email system for a software product. This guide explains what the skill makes the agent produce, how to install it, how to ask for things in plain language, and what you need before you start. It is written for developers adding product emails such as welcome, verification, password reset and invoice messages.
Email Template Builderalirezarezvani/claude-skills · MIT Download the skill Quick start
- 1Download and unzip the skill. Download the ZIP from the directory page and unzip it so the folder contains SKILL.md.
- 2Place the skill folder. Move the folder into ~/.claude/skills/ for personal use or into your project's .claude/skills/ folder, or upload it under Settings → Capabilities → Skills in the Claude apps.
- 3Prepare your project. Make sure Node.js and @react-email/components are available, and that you have an API key for Resend, Postmark, SendGrid or AWS SES.
- 4Prepare your domain and logo. Have a hosted logo URL and domain ready for email images and links.
- 5Ask for a template. Describe the email you need, such as a welcome or password reset email, in plain language inside your project.
- 6Review and preview. Run the generated templates through the preview server and check the content, links and dark mode appearance.
- 7Connect a provider and test. Add your provider credentials as environment variables, send a test message to yourself, and check the result before going live.
What is an agent skill and what does this one do?
An agent skill is a folder containing a SKILL.md file with instructions and context that an AI coding agent loads when a task matches the skill's description. This one is named email-template-builder and is published under the MIT licence in the alirezarezvani/claude-skills repository, under engineering-team/skills/email-template-builder.
Once loaded, the agent builds a transactional email system: React Email templates, a unified sending layer that can connect to Resend, Postmark, SendGrid or AWS SES, a local preview server, typed translation keys, dark mode styles and basic UTM-based tracking. The skill describes a suggested project layout with folders for components, templates, lib/providers, i18n and preview.
- Templates: welcome, verify-email, password-reset, invoice, notification and weekly-digest
- Sending: a send function with separate provider files for Resend, Postmark and SES
- Localisation: i18n files such as en.ts and de.ts
- Preview: a dev preview server with hot reload
- Tracking: UTM parameters through a tracking module
- Spam checklist: an advisory list of optimisation points
How do you install the email-template-builder skill?
Download the skill ZIP from the directory page and unzip it. The skill folder contains SKILL.md. You can install it in one of two ways.
For a personal install across all your projects, place the unzipped skill folder inside ~/.claude/skills/. For a single project, place it inside that project's .claude/skills/ folder so it is available only there.
Alternatively, in the Claude apps you can upload the skill under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/email-template-builder/
- Project install: .claude/skills/email-template-builder/ inside your repository
- Claude apps: Settings → Capabilities → Skills, then upload
What do you need before you start?
The skill generates code that must be installed and configured in your own project. It is not a hosted service and does not send email for you.
You need Node.js and a React Email setup that includes @react-email/components. You also need an account and API key for at least one provider: Resend, Postmark, SendGrid or AWS SES. Finally, you need a hosted domain and a logo URL, because email images and links must point to publicly reachable addresses.
- Node.js and a React Email setup with @react-email/components
- An account and API key for Resend, Postmark, SendGrid or AWS SES
- A hosted domain and logo URL for images and links
How do you trigger the skill with a natural request?
You do not need a special command. Describe the email work in plain language inside your project, and the agent should load the skill when the request matches its description. The skill's own triggers are adding transactional email to a new product, migrating between email providers, refactoring legacy templates for accessibility, and adding internationalisation to existing templates.
Be specific about the template type, provider and language. The more context you give, the closer the output will fit your product.
- "Add a welcome and email verification template to this Next.js app using Resend."
- "Migrate our password reset email from SendGrid to Postmark and keep the same layout."
- "Add German translations to our invoice email with typed translation keys."
- "Set up a local preview server so I can view all templates while I work."
What does the agent produce?
The skill includes example React Email code for a base layout with a brand header and footer, a welcome template and an invoice template. The base layout includes an unsubscribe placeholder and a privacy link, and dark mode styles are applied with a prefers-color-scheme media query. The invoice example formats amounts with Intl.NumberFormat.
Treat the examples as starting points. Replace placeholder domains, addresses and link targets with your own, and check any copy against your product's real offer before sending.
- Base layout with brand header, footer and CTA button component
- Welcome and invoice templates as worked examples
- Dark mode via media queries in the head section
- Currency formatting with Intl.NumberFormat
<style>{`@media (prefers-color-scheme: dark) { .email-body { background-color: #0f0f0f !important; } }`}</style>What should you check for safety, scripts and network access?
The skill's metadata states that it does not run scripts, but it does use the network. That means the code it helps you write will call external services such as email providers, and your project will need credentials for them. Keep API keys in environment variables or a secrets manager rather than in source files.
The spam optimisation section is an advisory checklist. It does not guarantee inbox placement, which depends on your DNS records and provider setup. Review every generated template before it sends to real users.
- Scripts: none are run by the skill itself according to its metadata
- Network: yes, the generated integrations call email provider APIs
- Store API keys outside the repository
- Check the unsubscribe placeholder and legal footer before launch
What tips help you get better results?
Ask for one template at a time and ask the agent to run your React Email preview after each change. Give it your real brand name, logo URL and domain so placeholders are reduced. If you are migrating, point the agent at your existing templates so it can keep the content and change only the structure and provider code.
For multilingual emails, ask for typed translation keys so missing strings are caught by the compiler rather than appearing blank to users.
- Work through templates one by one
- Provide brand name, logo URL and domain up front
- Share existing templates when migrating
- Request typed translation keys for multiple languages
What people use it for
- Adding welcome, verification and password reset emails to a new web product
- Moving existing transactional emails from one provider to another while keeping templates consistent
- Adding invoice emails with formatted currency amounts
- Creating German or other translated versions of account emails with typed keys
- Refactoring legacy HTML email templates into React Email components
Frequently asked questions
How do I install the email-template-builder skill?
Download the skill ZIP from the directory page and unzip it. Place the email-template-builder folder in ~/.claude/skills/ for personal use or in your project's .claude/skills/ folder, or upload it under Settings → Capabilities → Skills in the Claude apps.
Is the email-template-builder skill free?
The skill is published under the MIT licence. Check the repository for the licence text itself. Email providers such as Resend, Postmark, SendGrid and AWS SES have their own accounts and pricing, which are separate from the skill.
What do I need to use it?
You need Node.js, a React Email setup with @react-email/components, an API key for at least one provider (Resend, Postmark, SendGrid or AWS SES), and a hosted domain and logo URL for email images and links.
Which email providers does it support?
The skill's description and project layout name Resend, Postmark, SendGrid and AWS SES. Its layout includes provider files for Resend, Postmark and SES, and the description covers SendGrid as well.
Does the skill send emails for me?
No. It instructs the agent to write templates and sending code that you install and configure in your own project. You still need provider credentials and must test the output before sending to real users.
Can it be used for marketing newsletters?
No. The skill targets transactional email such as signup, verification, password reset and invoice messages. It does not cover list management or campaign tools, so use a dedicated marketing platform for newsletters.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This skill suits developers adding or migrating transactional emails in a React project who are comfortable installing and configuring generated code. It is a poor fit for marketing campaigns, for non-developers who cannot run a React project, or for anyone expecting guaranteed deliverability.
Download the skill