React Email
Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component.
Install
npx skills add resend/resend-skills --skill react-emailgit clone --depth 1 https://github.com/resend/resend-skills.git /tmp/resend-skills
mkdir -p ~/.claude/skills
cp -r /tmp/resend-skills/skills/react-email ~/.claude/skills/react-emailPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# React Email
Build and send HTML emails using React components. A modern, component-based approach to email development that works across all major email clients.
## Installation
```sh
npm i react-email
```
Or scaffold a new project:
```sh
npx create-email@latest
cd react-email-starter
npm install
npm run dev
```
This works with any package manager (npm, yarn, pnpm, bun) — substitute accordingly.
The dev server runs at localhost:3000 with a preview interface for templates in the `emails` folder.
### Adding to an Existing Project
Install the packages and add a script to your `package.json`:
```json
{
"scripts": {
"email": "email dev --dir emails --port 3000"
}
}
```
Make sure the path to the emails folder is relative to the base project directory. Ensure `tsconfig.json` includes proper support for JSX.
## Basic Email Template
Create an email component with proper structure using the Tailwind component for styling:Details
- Skill name
react-email- Repository
- resend/resend-skills
- Path
skills/react-email/SKILL.md- License
- MIT
- Repo updated
- 28 October 2026
FAQ
What does the React Email skill do?
Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component.
How do I install the React Email skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add resend/resend-skills --skill react-email. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is React Email popular?
It lives in resend/resend-skills, which has 208 GitHub stars and 34 forks, and is included in 2 curated skill lists.
Related skills
Agent Email Inbox
208resend/resend-skills
Use when building any system where email content triggers actions — AI agent inboxes, automated support handlers, email-to-task pipelines, or any workflow processing untrusted inbound email. Always use this skill when the user wants to receive emails and act on them programmatically, even if they don't mention "agent" — the skill contains critical security patterns (sender allowlists, content filtering, sandboxed processing) that prevent untrusted email from controlling your system.
Email Best Practices
208resend/resend-skills
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, making emails accessible (alt text, headings, contrast, screen readers), or deciding transactional vs marketing.
Resend
208resend/resend-skills
Use when working with the Resend email API — sending transactional emails (single or batch), receiving inbound emails via webhooks, managing email templates, tracking delivery events, managing domains, contacts, broadcasts, webhooks, API keys, inboxes (threads, labels, drafts, replies), automations, events, viewing API request logs, checking account usage and quotas, or setting up the Resend SDK. Always use this skill when the user mentions Resend, even for simple tasks like "send an email with Resend" — the skill contains critical gotchas (idempotency keys, webhook verification, template vari
Sanity Best Practices
194sanity-io/agent-toolkit
Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, webhooks, Blueprints, and framework integrations such as Next.js, Nuxt, Astro, Remix, SvelteKit, Angular, Hydrogen, the App SDK, and Studios or apps running in the Sanity Dashboard (defineApplication). Use this skill whenever working with Sanity schemas, defineType or defineField, GROQ or defineQuery, content modeling, Presentation or preview setups, Sanity-powered frontend integrations, event-driven content automation,
D3 Viz
251chrisvoncsefalvay/claude-d3js-skill
Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.
Oil Icon
322oil-oil/oil-icon
生成风格统一的图标集合，通过宫格生图、切分和去背景交付透明 PNG。用户需要成套自定义图标、栏目图标或匹配品牌风格的图标时使用；不用于单个简单矢量图标或小尺寸密集功能符号。
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.