Community画像github.com

resend/react-email

React コンポーネントを使用した HTML メールテンプレートの構築、React Email ビジュアルエディタを使用したアプリケーションへのメールエディタの追加、メールの HTML レンダリング、Resend を使用したメール送信を行う際に使用します。

react-email とは?

このスキルは、React コンポーネントベースで HTML メールテンプレートを構築し、Resend を使って送信するための統合ツールです。開発者は使い慣れた React の記法でメールをデザインでき、`react-email` のビジュアルエディタをアプリケーションに埋め込むことも可能です。対応するユースケースは、ウェルカムメール、パスワードリセット、通知、注文確認、ニュースレター、トランザクショナルメールなど多岐にわたります。このスキールは、メールテンプレートの開発からレンダリング、送信までのワークフローを効率化し、React エコシステムとの親和性を活かしたメール運用を実現します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/resend/resend-skills/tree/main/skills/react-email

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

react-email は何をしますか?

React コンポーネントを使用して HTML メールテンプレートを構築したり、React Email ビジュアルエディタを使ってアプリケーションにメールエディタを追加したり、メールを HTML にレンダリングしたり、Resend でメールを送信する場合に使用します。ウェルカムメール、パスワードリセット、通知、注文確認、ニュースレター、トランザクショナルメール、および埋め込み可能なメールエディタコンポーネントをカバーします。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

resend/agent-email-inbox

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.

resend/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, making emails accessible (alt text, headings, contrast, screen readers), or deciding transactional vs marketing.

resend/resend

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.

resend/resend-cli

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.

関連スキル