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

react-email

Name: react-email
Author: devkit-stack

Reactコンポーネントを使用してHTMLメールテンプレートを作成する際に使用します。ウェルカムメール、パスワードリセット、通知、注文確認、ニュースレター、トランザクショナルメールなど、様々なメール配信に対応できます。

description の原文を見る

Use when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.

SKILL.md 本文

React Email

Reactコンポーネントを使用してHTMLメールを構築・送信します。メール開発に対するモダンでコンポーネントベースのアプローチであり、すべての主要なメールクライアント間で動作します。

インストール

create-email CLIを使用して新しいReact Emailプロジェクトをスカフォールドする必要があります。これにより、サンプルメールテンプレートを含むreact-email-starterというフォルダが作成されます。

npmを使用する場合:

npx create-email@latest

yarnを使用する場合:

yarn create email

pnpmを使用する場合:

pnpm create email

bunを使用する場合:

bun create email

プロジェクトディレクトリへの移動

新しく作成されたプロジェクトフォルダに変更する必要があります:

cd react-email-starter

依存関係のインストール

開発サーバーを実行する前に、すべてのプロジェクト依存関係をインストールする必要があります。

npmを使用する場合:

npm install

yarnを使用する場合:

yarn

pnpmを使用する場合:

pnpm install

bunを使用する場合:

bun install

開発サーバーの起動

ローカルプレビューサーバーを起動してメールテンプレートを表示・編集する必要があります。

npmを使用する場合:

npm run dev

yarnを使用する場合:

yarn dev

pnpmを使用する場合:

pnpm dev

bunを使用する場合:

bun dev

インストール確認

localhost:3000がアクセス可能であることを確認して、開発サーバーが実行されていることを確認します。サーバーはプレビューインターフェースを表示し、emailsフォルダからメールテンプレートを表示できます。

インストールに関する注釈

React Emailが既存プロジェクトにインストールされていると仮定した場合、トップレベルのpackage.jsonファイルをReact Emailプレビューサーバーを実行するスクリプトで更新します。

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

メールフォルダへのパスがベースプロジェクトディレクトリからの相対パスであることを確認してください。

tsconfig.jsonの更新または作成

tsconfig.jsonがjsxの適切なサポートを含んでいることを確認してください。

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

サンプルメールテンプレートを置き換えます。新しいメールテンプレートを作成する方法は次の通りです:

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

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

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 />
        <Preview>Welcome - Verify your email</Preview>
        <Body className="bg-gray-100 font-sans">
          <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"
            >
              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 };

必須コンポーネント

完全なコンポーネントドキュメントについてはreferences/COMPONENTS.mdを参照してください。

コア構造:

Html - lang属性を持つルートラッパー
Head - メタ要素、スタイル、フォント
Body - メインコンテンツラッパー
Container - コンテンツを中央に配置(max-widthレイアウト)
Section - レイアウトセクション
Row & Column - マルチカラムレイアウト
Tailwind - Tailwind CSSユーティリティクラスを有効化

コンテンツ:

Preview - 受信トレイプレビューテキスト、常にBody内の最初
Heading - h1-h6見出し
Text - 段落
Button - スタイル付きリンクボタン
Link - ハイパーリンク
Img - 画像(下記の静的ファイルセクションを参照)
Hr - 横区切り線

専門的な用途:

CodeBlock - 構文ハイライトされたコード
CodeInline - インラインコード
Markdown - Markdownをレンダリング
Font - カスタムウェブフォント

コード作成前に

ユーザーがメールテンプレートをリクエストしたときに、以下の情報がまだ提供されていない場合は、まず明確化の質問をしてください:

ブランドカラー - プライマリーブランドカラー(#007bffのような16進数コード)を質問
ロゴ - ロゴファイルがあるかどうか、そのフォーマット(PNG/JPGのみ - SVG/WEBPの場合は警告)
スタイル設定 - プロフェッショナル、カジュアル、またはミニマルなトーン
本番URL - 本番環境で静的アセットはどこでホストされるか

曖昧なリクエストへの応答例:

メールテンプレートを作成する前に、いくつか質問があります:

プライマリーブランドカラーは何ですか?(16進数コード)

ロゴファイルはありますか?(PNG または JPG - SVGとWEBPはメールクライアントでの動作が不安定であることに注意してください)

どのようなトーンを好みますか - プロフェッショナル、カジュアル、またはミニマル?

本番環境で静的アセットをどこでホストしますか?(例: https://cdn.example.com)

静的ファイルと画像

ディレクトリ構造

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

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

ユーザーが画像を別の場所に持っている場合、コピーするよう指示します:

cp ./assets/logo.png ./emails/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をハードコードしないでください。

行動ガイドライン

コードを繰り返すときは、ユーザーがリクエストしたものだけを更新し、残りのコードは完全に保つようにしてください;
ユーザーがメディアクエリを使用するよう要求している場合、メールクライアントがそれをサポートしていないことを知らせ、別のアプローチを提案してください;
テンプレート変数({{name}}など)をTypeScriptコード内で直接使用しないでください。代わりに基になるプロパティを直接参照します({{name}}ではなく name を使用します)。
- 例えば、ユーザーが{{variableName}}パターンに従う変数を明示的にリクエストしている場合、次のようなものを返す必要があります:

const EmailTemplate = (props) => {
  return (
    {/* ... rest of the code ... */}
    <h1>Hello, {props.variableName}!</h1>
    {/* ... rest of the code ... */}
  );
}

EmailTemplate.PreviewProps = {
  // ... rest of the props ...
  variableName: "{{variableName}}",
  // ... rest of the props ...
};

export default EmailTemplate;

どのような状況でも、{{variableName}}パターンをコンポーネント構造内に直接書き込まないでください。ユーザーがこれを強制する場合は、そうするとテンプレートが無効になるため、これができないことを説明してください。

スタイリングに関する考慮事項

ユーザーが彼らのプロジェクトで積極的にTailwind CSSを使用している場合、Tailwindコンポーネントを使用してスタイリングします。ユーザーがTailwind CSSを使用していない場合は、コンポーネントにインラインスタイルを追加します。

メールクライアントがremユニットをサポートしていないため、Tailwind設定にpixelBasedPresetを使用してください。
レイアウトにはflexboxやgridを使用しないでください。代わりにテーブルベースのレイアウトを使用します。
各コンポーネントはインラインスタイルまたはユーティリティクラスでスタイリングする必要があります。

メールクライアントの制限

SVGまたはWEBPを使用しないでください - ユーザーにレンダリングの問題について警告してください
flexboxを使用しないでください - レイアウトにはRow/Columnコンポーネントまたはテーブルを使用してください
CSS/Tailwindメディアクエリはできないでください(sm:、md:、lg:、xl:) - サポートされていません
テーマセレクタを使用しないでください(dark:、light:) - サポートされていません
常にボーダータイプを指定してください(border-solid、border-dashed など)
1つの側面だけのボーダーを定義する場合、残りのボーダーをリセットすることを忘れないでください(例: border-none border-l)

コンポーネント構造

Tailwind CSSを使用する場合、常に<Tailwind>内に<Head />を定義します
コンポーネントにプロップを渡すときだけPreviewPropsを使用してください
PreviewPropsにはコンポーネントが実際に使用するプロップのみを含めてください

const Email = (props) => {
  return (
    <div>
      <a href={props.source}>click here if you want candy 👀</a>
    </div>
  );
}

Email.PreviewProps = {
  source: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
};

デフォルト構造

Body: font-sans py-10 bg-gray-100
Container: 白、中央配置、コンテンツ左揃え
フッター: 住所、購読解除リンク、m-0を持つ現在の年付きアドレス/著作権

タイポグラフィ

タイトル: 太字、大きいフォント、大きいマージン
段落: 標準の重さ、小さいフォント、小さいマージン
一貫した間隔をコンテンツ階層に応じて使用してください

画像

ユーザーがリクエストした場合のみ含めます
固定幅/高さを使用しないでください - レスポンシブユニットを使用します(w-full、h-auto)
ユーザーが提供した画像を歪めないでください
SVG画像を作成しないでください - 提供されたまたはウェブ画像のみを使用してください

ボタン

常にbox-borderを使用してパディングオーバーフローを防いでください

レイアウト

デフォルトでは常にモバイルフレンドリーにしてください
すべての画面サイズで機能するスタックレイアウトを使用してください
リストアイテム間のデフォルト間隔/マージン/パディングを削除してください

ダークモード

リクエスト時: コンテナ黒(#000)、背景濃い灰色(#151516)

ベストプラクティス

ユーザーのリクエストに基づいて色、レイアウト、コピーを選択してください
テンプレートをユニークに、汎用的ではなくしてください
メール本文でキーワードを使用してコンバージョンを増加させてください

レンダリング

HTMLに変換

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

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

プレーンテキストに変換

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

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

送信

React Emailは任意のメールサービスプロバイダーでの送信をサポートしています。ユーザーが送信方法を知りたい場合は、送信ガイドラインを参照してください。

Node.js向け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" />
});

if (error) {
  console.error('Failed to send:', error);
}

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

国際化

完全なi18nドキュメントについてはreferences/I18N.mdを参照してください。

React Emailは3つのi18nライブラリをサポートしています: next-intl、react-i18next、およびreact-intl。

クイック例(next-intl)

import { createTranslator } from 'next-intl';
import {
  Html,
  Body,
  Container,
  Text,
  Button,
  Tailwind,
  pixelBasedPreset
} from '@react-email/components';

interface EmailProps {
  name: string;
  locale: string;
}

export default async function WelcomeEmail({ name, locale }: EmailProps) {
  const t = createTranslator({
    messages: await import(\`../messages/\${locale}.json\`),
    namespace: 'welcome-email',
    locale
  });

  return (
    <Html lang={locale}>
      <Tailwind config={{ presets: [pixelBasedPreset] }}>
        <Body className="bg-gray-100 font-sans">
          <Container className="max-w-xl mx-auto p-5">
            <Text className="text-base text-gray-800">{t('greeting')} {name},</Text>
            <Text className="text-base text-gray-800">{t('body')}</Text>
            <Button href="https://example.com" className="bg-blue-600 text-white px-5 py-3 rounded">
              {t('cta')}
            </Button>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

メッセージファイル(`messages/en.json`、`messages/es.json` など):

{
  "welcome-email": {
    "greeting": "Hi",
    "body": "Thanks for signing up!",
    "cta": "Get Started"
  }
}

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

メールクライアント間でテストする - Gmail、Outlook、Apple Mail、Yahoo Mailでテストします。絶対的な精度を求める場合はLitmusやEmail on Acidなどのサービスを使用し、特定の機能サポートチェックにはReact Emailのツールバーを使用してください。
レスポンシブに保つ - 最大幅約600px、モバイルデバイスでテストしてください。
絶対画像URLを使用する - 信頼できるCDNでホストし、常にaltテキストを含めてください。
プレーンテキスト版を提供する - アクセシビリティと一部のメールクライアントで必須です。
ファイルサイズを102KB未満に保つ - Gmailはより大きなメールをクリップします。
適切なTypeScriptタイプを追加する - すべてのメールプロップのインターフェースを定義してください。
プレビュープロップを含める - 開発テストのためにコンポーネントに.PreviewPropsを追加してください。
エラーを処理する - メール送信時は常にエラーをチェックしてください。
検証済みドメインを使用する - 本番環境では、fromアドレスに検証済みドメインを使用してください。

一般的なパターン

次のような完全な例についてはreferences/PATTERNS.mdを参照してください:

パスワードリセットメール
商品リスト付きの注文確認
コードブロック付き通知メール
マルチカラムレイアウト
カスタムフォント付きメールテンプレート

追加リソース

React Emailドキュメント
React EmailのGitHub
Resendドキュメント
メールクライアントCSSサポート
コンポーネントリファレンス: references/COMPONENTS.md
国際化ガイド: references/I18N.md
一般的なパターン: references/PATTERNS.md

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

詳細情報

作者: devkit-stack
リポジトリ: devkit-stack/Claude
ライセンス: MIT
最終更新: 2026/2/6

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

Source: https://github.com/devkit-stack/Claude / ライセンス: MIT

SKILL.md 本文

React Email

インストール

プロジェクトディレクトリへの移動

依存関係のインストール

開発サーバーの起動

インストール確認

インストールに関する注釈

tsconfig.jsonの更新または作成

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

必須コンポーネント

コード作成前に

静的ファイルと画像

ディレクトリ構造

開発環境対本番環境のURL

行動ガイドライン

スタイリングに関する考慮事項

メールクライアントの制限

コンポーネント構造

デフォルト構造

タイポグラフィ

画像

ボタン

レイアウト

ダークモード

ベストプラクティス

レンダリング

HTMLに変換

プレーンテキストに変換

送信

国際化

クイック例(next-intl)

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

一般的なパターン

追加リソース

詳細情報

関連スキル

doubt-driven-development

apprun-skills

desloppify

debugging-and-error-recovery

test-driven-development

incremental-implementation