Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

react-email

Name: react-email
Author: resend

React コンポーネントを使って HTML メールテンプレートを構築したり、アプリケーションにビジュアルメールエディタを組み込んだり、Resend でメールを送信する際に活用できます。ウェルカムメール、パスワードリセット、通知、注文確認、ニュースレター、トランザクションメールなど幅広いユースケースと、埋め込み可能なメールエディタコンポーネントをカバーします。

description の原文を見る

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.

SKILL.md 本文

React Email

Reactコンポーネントを使用してHTMLメールを構築・送信できる最新のコンポーネント型メール開発アプローチです。すべての主要なメールクライアントで動作します。

インストール

npm i react-email

または新しいプロジェクトをスキャフォールドします:

npx create-email@latest
cd react-email-starter
npm install
npm run dev

任意のパッケージマネージャー（npm、yarn、pnpm、bun）で動作します — 必要に応じて置き換えてください。

開発サーバーはlocalhost:3000で実行され、emailsフォルダ内のテンプレートのプレビューインターフェースが表示されます。

既存プロジェクトへの追加

パッケージをインストールし、package.jsonにスクリプトを追加します:

{
  "scripts": {
    "email": "email dev --dir emails --port 3000"
  }
}

メールフォルダへのパスがベースプロジェクトディレクトリからの相対パスであることを確認してください。tsconfig.jsonがJSXの適切なサポートを含むことを確認してください。

基本的なメールテンプレート

Tailwindコンポーネントを使用したスタイリングで、適切な構造を持つメールコンポーネントを作成します:

import {
  Html,
  Head,
  Preview,
  Body,
  Container,
  Heading,
  Text,
  Button,
  Tailwind,
  pixelBasedPreset
} from 'react-email';

interface WelcomeEmailProps {
  name: string;
  verificationUrl: string;
}

export default function WelcomeEmail({ name, verificationUrl }: WelcomeEmailProps) {
  return (
    <Html lang="en">
      <Tailwind
        config={{
          presets: [pixelBasedPreset],
          theme: {
            extend: {
              colors: {
                brand: '#007bff',
              },
            },
          },
        }}
      >
        <Head />
        <Body className="bg-gray-100 font-sans">
          <Preview>Welcome - Verify your email</Preview>
          <Container className="max-w-xl mx-auto p-5">
            <Heading className="text-2xl text-gray-800">
              Welcome!
            </Heading>
            <Text className="text-base text-gray-800">
              Hi {name}, thanks for signing up!
            </Text>
            <Button
              href={verificationUrl}
              className="bg-brand text-white px-5 py-3 rounded block text-center no-underline box-border"
            >
              Verify Email
            </Button>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

// Preview props for testing
WelcomeEmail.PreviewProps = {
  name: 'John Doe',
  verificationUrl: 'https://example.com/verify/abc123'
} satisfies WelcomeEmailProps;

export { WelcomeEmail };

動作ガイドライン

コードの反復処理時は、ユーザーが依頼した部分のみ更新します。その他の部分は変わらないままにしてください。
ユーザーがメディアクエリの使用をリクエストした場合、ほとんどのメールクライアントがそれをサポートしていないことを知らせ、別のアプローチを提案してください。
テンプレート変数（{{name}}など）をTypeScriptコード内に直接使用しないでください。代わりに、基になるプロパティを直接参照してください。ユーザーが明示的に{{variableName}}をリクエストした場合は、マスタッシュ文字列をPreviewPropsにのみ置き、コンポーネントJSXには決して置かないでください:

const EmailTemplate = (props) => {
  return (
    <h1>Hello, {props.variableName}!</h1>
  );
}

EmailTemplate.PreviewProps = {
  variableName: "{{variableName}}",
};

export default EmailTemplate;

{{variableName}}パターンをコンポーネント構造内に直接書かないでください。ユーザーが主張する場合は、これがテンプレートを無効にすることを説明してください。

必須コンポーネント

完全なコンポーネント取説は references/COMPONENTS.md を参照してください。

基本構造:

Html - lang属性付きのルートラッパー
Head - メタ要素、スタイル、フォント
Body - メインコンテンツラッパー
Container - 最外層のセンタリングラッパー（組み込みmax-width: 37.5em）。メール1つあたり1回だけ使用します。
Section - 内側のコンテンツブロック（組み込みmax-widthなし）。Container内のコンテンツをグループ化するために使用します。
Row & Column - 複数列レイアウト
Tailwind - Tailwind CSSユーティリティクラスを有効にします

コンテンツ:

Preview - インボックスプレビューテキスト、常に<Body>内の最初
Heading - h1～h6見出し
Text - 段落
Button - スタイル付きリンクボタン（常にbox-borderを含める）
Link - ハイパーリンク
Img - 画像（以下の「静的ファイル」セクションを参照）
Hr - 水平区切り線

特殊:

CodeBlock - シンタックスハイライト付きコード
CodeInline - インラインコード
Markdown - Markdownレンダリング
Font - カスタムWebフォント

コード記述前に

ユーザーがメールテンプレートをリクエストした場合、以下が提供されていない場合は最初に明確な質問をしてください:

ブランドカラー - プライマリブランドカラーを尋ねる（#007bffのような16進コード）
ロゴ - ロゴファイルとその形式（PNG/JPGのみ — SVG/WEBPの場合は警告）を持っているかを尋ねる
スタイル設定 - プロフェッショナル、カジュアル、またはミニマルなトーン
本番環境URL - 本番環境で静的アセットはどこでホストされますか?

静的ファイルと画像

ディレクトリ構造

ローカル画像は、メールディレクトリ内のstaticフォルダに配置する必要があります:

project/
├── emails/
│   ├── welcome.tsx
│   └── static/           <-- 画像はここに置く
│       └── logo.png

開発環境と本番環境のURL

開発プレビューと本番環境の両方で動作する画像のパターンを使用します:

const baseURL = process.env.NODE_ENV === "production"
  ? "https://cdn.example.com"  // ユーザーの本番環境CDN
  : "";

export default function Email() {
  return (
    <Img
      src={`${baseURL}/static/logo.png`}
      alt="Logo"
      width="150"
      height="50"
    />
  );
}

動作方法:

開発環境: baseURLは空で、URLは/static/logo.png — React Emailの開発サーバーで提供される
本番環境: baseURLはCDNドメインで、URLはhttps://cdn.example.com/static/logo.png

重要: ユーザーの本番ホスティングURLを常に確認してください。localhost:3000をハードコーディングしないでください。

スタイリング

包括的なスタイリング取説（タイポグラフィ、レイアウトパターン、ダークモード、ブランド一貫性を含む）は references/STYLING.md を参照してください。

キールール

pixelBasedPreset付きでTailwindを使用してください（メールクライアントはremをサポートしていません）。react-emailからpixelBasedPresetをインポートしてください。
flexboxやgridを使用しないでください — レイアウトにはRow/Columnコンポーネントまたはテーブルを使用します。
CSSやTailwindメディアクエリ（sm:、md:、lg:、xl:）を避けてください — メールクライアントサポートが限定的です。
テーマセレクター（dark:、light:）を使用しないでください — サポートされていません。
SVGまたはWEBP画像を使用しないでください — レンダリング問題について警告してください。
常に境界線タイプを指定してください（border-solid、border-dashedなど） — メールクライアントは継承しません。
単一側の境界線の場合、最初に他をリセットしてください（border-none border-l border-solid）。

必須クラス

コンポーネント	必須クラス	理由
`Button`	`box-border`	パディングがボタン幅からはみ出すのを防ぎます
`Hr` / 任意の境界線	`border-solid`（または`border-dashed`など）	メールクライアントは境界線タイプを継承しません
単一側の境界線	`border-none` +側面	他の側の既定の境界線をリセットします

構造上の注記

Tailwind CSSを使用する場合、常に<Tailwind>内に<Head />を定義します
<Preview>は常に<Body>内の最初の要素である必要があります
PreviewPropsにはコンポーネントが実際に使用するプロップのみを含めます
サイズが既知の要素（ロゴ、アイコン）に固定幅/高さを使用します。コンテンツ画像にはレスポンシブサイジング（w-full、h-auto）を使用します

レンダリング

HTMLに変換

import { render } from 'react-email';
import { WelcomeEmail } from './emails/welcome';

const html = await render(
  <WelcomeEmail name="John" verificationUrl="https://example.com/verify" />
);

プレーンテキストに変換

const text = await render(<WelcomeEmail name="John" verificationUrl="https://example.com/verify" />, { plainText: true });

送信

React Emailは任意のメールサービスプロバイダーでの送信をサポートしています。Resend、Nodemailer、SendGridの例を含む完全な送信取説は references/SENDING.md を参照してください。

Resend SDKを使用した簡単な例:

import { Resend } from 'resend';
import { WelcomeEmail } from './emails/welcome';

const resend = new Resend(process.env.RESEND_API_KEY);

const { data, error } = await resend.emails.send({
  from: 'Acme <onboarding@resend.dev>',
  to: ['user@example.com'],
  subject: 'Welcome to Acme',
  react: <WelcomeEmail name="John" verificationUrl="https://example.com/verify" />
});

Resend Node SDKは、HTMLとプレーンテキストの両方のレンダリングを自動的に処理します。

CLIコマンド

react-emailパッケージは、emailコマンドでアクセス可能なCLIを提供します:

コマンド	説明
`email dev --dir <path> --port <port>`	プレビュー開発サーバーを起動（デフォルト: `./emails`、ポート3000）
`email build --dir <path>`	本番環境展開用のプレビューアプリをビルド
`email start`	ビルドしたプレビューアプリを実行
`email export --outDir <path> --pretty --plainText --dir <path>`	テンプレートを静的HTMLファイルにエクスポート
`email resend setup`	CLIをResendアカウントにAPIキー経由で接続
`email resend reset`	保存されたResend APIキーを削除

国際化

完全なi18n取説は references/I18N.md を参照してください。React Emailは3つのライブラリをサポートしています: next-intl、react-i18next、react-intl。

メールエディタ

React Emailには、アプリに埋め込むことができるビジュアルエディタ（@react-email/editor）が含まれています。これはTipTap/ProseMirrorに基づいており、メール対応HTMLを生成します。

バブルメニュー、スラッシュコマンド、テーマを含む完全な取説は references/EDITOR.md を参照してください:

EmailEditor — バブルメニュー、スラッシュコマンド、テーマを備えたフル機能コンポーネント
StarterKit — 35以上のメール対応拡張機能（見出し、リスト、テーブル、列、ボタンなど）
Inspector — スタイル編集用のコンテキストサイドバー
EmailTheming — 組み込みテーマ（basic、minimal）とカスタマイズ可能なCSSプロパティ
composeReactEmail — エディターコンテンツをメール対応HTMLとプレーンテキストにエクスポート
EmailNodeとEmailMarkによる Custom拡張機能

簡単な例:

import { EmailEditor, type EmailEditorRef } from '@react-email/editor';
import '@react-email/editor/themes/default.css';
import { useRef } from 'react';

export function MyEditor() {
  const ref = useRef<EmailEditorRef>(null);

  return (
    <EmailEditor
      ref={ref}
      content="<p>Start typing...</p>"
      theme="basic"
    />
  );
}

一般的なパターン

完全な例（パスワードリセットメール、製品リスト付き注文確認、コードブロック付き通知メール、複数列レイアウト、チーム招待メールを含む）は references/PATTERNS.md を参照してください。

メールベストプラクティス

メールクライアント全体でテストする - Gmail、Outlook、Apple Mail、Yahoo Mail
レスポンシブを保つ - 最大幅約600px、モバイルでテスト
絶対画像URLを使用する - 信頼性の高いCDN上でホスト、常にaltテキストを含める
プレーンテキスト版を提供する - アクセシビリティに必須
ファイルサイズを102KB以下に保つ - Gmailはより大きいメールをクリップします
適切なTypeScriptタイプを追加する - すべてのメールプロップのインターフェースを定義
プレビュープロップを含める - 開発テスト用に.PreviewPropsを追加
検証済みドメインを使用する - 本番環境のfromアドレス用

追加リソース

React Email Documentation
React Email GitHub
Resend Documentation
Email Client CSS Support
コンポーネント参照: references/COMPONENTS.md
スタイリングガイド: references/STYLING.md
メールエディタ: references/EDITOR.md
送信ガイド: references/SENDING.md
国際化ガイド: references/I18N.md
一般的なパターン: references/PATTERNS.md

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: resend
リポジトリ: resend/resend-skills
ライセンス: MIT
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/resend/resend-skills / ライセンス: MIT