react-email 是做什麼的？
使用 React 元件建構 HTML 電子郵件範本、透過 React Email 可視化編輯器將編輯功能整合到應用程式中、將電子郵件渲染為 HTML，或透過 Resend 發送電子郵件。涵蓋歡迎信、密碼重設、通知、訂單確認、電子報、交易型郵件及嵌入式郵件編輯器元件。
使用 React 元件建構 HTML 電子郵件範本、透過 React Email 可視化編輯器將編輯功能整合到應用程式中、將電子郵件渲染為 HTML，或透過 Resend 發送電子郵件。涵蓋歡迎信、密碼重設、通知、訂單確認、電子報、交易型郵件及嵌入式郵件編輯器元件。
這是一個專為 AI 代理（如 Claude Code、Cursor、Codex）設計的技能，用於建構和發送基於 React 的 HTML 電子郵件。它支援使用 React 郵件元件建立範本，並可整合 React Email 的可視化編輯器（React Email Visual Editor）至應用程式中，讓非技術使用者也能編輯郵件內容。此外，該技能還涵蓋將電子郵件渲染成最終 HTML 格式，以及透過 Resend 服務發送電子郵件的功能。典型應用場景包括歡迎郵件、密碼重設、通知、訂單確認、電子報和各種交易型郵件，非常適合需要程式化處理郵件範本與發送的開發團隊。
npx skills add https://github.com/resend/resend-skills/tree/main/skills/react-emailInstalled? Explore more 影像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
使用 React 元件建構 HTML 電子郵件範本、透過 React Email 可視化編輯器將編輯功能整合到應用程式中、將電子郵件渲染為 HTML，或透過 Resend 發送電子郵件。涵蓋歡迎信、密碼重設、通知、訂單確認、電子報、交易型郵件及嵌入式郵件編輯器元件。
This repo contains 4 individual skills — each has its own dedicated page.
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.
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.
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, automations, events, viewing API request logs, 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 variable syntax) that prevent common production issues.
Operate the Resend platform from the terminal — send emails (including React Email .tsx templates via --react-email), manage domains, contacts, broadcasts, templates, webhooks, API keys, logs, automations, and events via the `resend` CLI. Use when the user wants to run Resend commands in the shell, scripts, or CI/CD pipelines, or send/preview React Email templates. Always load this skill before running `resend` commands — it contains the non-interactive flag contract and gotchas that prevent silent failures.
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.