{
  "schemaVersion": "1.0",
  "item": {
    "slug": "react-email-skills",
    "name": "React Email Skills",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/christina-de-martinez/react-email-skills",
    "canonicalUrl": "https://clawhub.ai/christina-de-martinez/react-email-skills",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/react-email-skills",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=react-email-skills",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "references/I18N.md",
      "references/SENDING.md",
      "references/COMPONENTS.md",
      "references/PATTERNS.md",
      "README.md",
      "SKILL.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-07T17:22:31.273Z",
      "expiresAt": "2026-05-14T17:22:31.273Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
        "contentDisposition": "attachment; filename=\"afrexai-annual-report-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/react-email-skills"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/react-email-skills",
    "agentPageUrl": "https://openagent3.xyz/skills/react-email-skills/agent",
    "manifestUrl": "https://openagent3.xyz/skills/react-email-skills/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/react-email-skills/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "React Email",
        "body": "Build and send HTML emails using React components - a modern, component-based approach to email development that works across all major email clients."
      },
      {
        "title": "Installation",
        "body": "You need to scaffold a new React Email project using the create-email CLI. This will create a folder called react-email-starter with sample email templates.\n\nUsing npm:\n\nnpx create-email@latest\n\nUsing yarn:\n\nyarn create email\n\nUsing pnpm:\n\npnpm create email\n\nUsing bun:\n\nbun create email"
      },
      {
        "title": "Navigate to Project Directory",
        "body": "You must change into the newly created project folder:\n\ncd react-email-starter"
      },
      {
        "title": "Install Dependencies",
        "body": "You need to install all project dependencies before running the development server.\n\nUsing npm:\n\nnpm install\n\nUsing yarn:\n\nyarn\n\nUsing pnpm:\n\npnpm install\n\nUsing bun:\n\nbun install"
      },
      {
        "title": "Start the Development Server",
        "body": "Your task is to start the local preview server to view and edit email templates.\n\nUsing npm:\n\nnpm run dev\n\nUsing yarn:\n\nyarn dev\n\nUsing pnpm:\n\npnpm dev\n\nUsing bun:\n\nbun dev"
      },
      {
        "title": "Verify Installation",
        "body": "You must confirm the development server is running by checking that localhost:3000 is accessible. The server will display a preview interface where you can view email templates from the emails folder.\n\nEXECUTE NOW: Complete the above TODO list to achieve: The React Email development server is running and accessible at localhost:3000, displaying email template previews."
      },
      {
        "title": "Notes on installation",
        "body": "Assuming React Email is installed in an existing project, update the top-level package.json file with a script to run the React Email preview server.\n\n{\n  \"scripts\": {\n    \"email\": \"email dev --dir emails --port 3000\"\n  }\n}\n\nMake sure the path to the emails folder is relative to the base project directory."
      },
      {
        "title": "tsconfig.json updating or creation",
        "body": "Ensure the tsconfig.json includes proper support for jsx."
      },
      {
        "title": "Basic Email Template",
        "body": "Replace the sample email templates. Here is how to create a new email template:\n\nCreate an email component with proper structure using the Tailwind component for styling:\n\nimport {\n  Html,\n  Head,\n  Preview,\n  Body,\n  Container,\n  Heading,\n  Text,\n  Button,\n  Tailwind,\n  pixelBasedPreset\n} from '@react-email/components';\n\ninterface WelcomeEmailProps {\n  name: string;\n  verificationUrl: string;\n}\n\nexport default function WelcomeEmail({ name, verificationUrl }: WelcomeEmailProps) {\n  return (\n    <Html lang=\"en\">\n      <Tailwind\n        config={{\n          presets: [pixelBasedPreset],\n          theme: {\n            extend: {\n              colors: {\n                brand: '#007bff',\n              },\n            },\n          },\n        }}\n      >\n        <Head />\n        <Preview>Welcome - Verify your email</Preview>\n        <Body className=\"bg-gray-100 font-sans\">\n          <Container className=\"max-w-xl mx-auto p-5\">\n            <Heading className=\"text-2xl text-gray-800\">\n              Welcome!\n            </Heading>\n            <Text className=\"text-base text-gray-800\">\n              Hi {name}, thanks for signing up!\n            </Text>\n            <Button\n              href={verificationUrl}\n              className=\"bg-brand text-white px-5 py-3 rounded block text-center no-underline\"\n            >\n              Verify Email\n            </Button>\n          </Container>\n        </Body>\n      </Tailwind>\n    </Html>\n  );\n}\n\n// Preview props for testing\nWelcomeEmail.PreviewProps = {\n  name: 'John Doe',\n  verificationUrl: 'https://example.com/verify/abc123'\n} satisfies WelcomeEmailProps;\n\nexport { WelcomeEmail };"
      },
      {
        "title": "Essential Components",
        "body": "See references/COMPONENTS.md for complete component documentation.\n\nCore Structure:\n\nHtml - Root wrapper with lang attribute\nHead - Meta elements, styles, fonts\nBody - Main content wrapper\nContainer - Centers content (max-width layout)\nSection - Layout sections\nRow & Column - Multi-column layouts\nTailwind - Enables Tailwind CSS utility classes\n\nContent:\n\nPreview - Inbox preview text, always first in Body\nHeading - h1-h6 headings\nText - Paragraphs\nButton - Styled link buttons\nLink - Hyperlinks\nImg - Images (use absolute URLs) (use the dev server for the BASE_URL of the image in dev mode; for production, ask the user for the BASE_URL of the site; dynamically generate the URL of the image based on environment.)\nHr - Horizontal dividers\n\nSpecialized:\n\nCodeBlock - Syntax-highlighted code\nCodeInline - Inline code\nMarkdown - Render markdown\nFont - Custom web fonts"
      },
      {
        "title": "Behavioral guidelines",
        "body": "When re-iterating over the code, make sure you are only updating what the user asked for and keeping the rest of the code intact;\nIf the user is asking to use media queries, inform them that email clients do not support them, and suggest a different approach;\nNever use template variables (like {{name}}) directly in TypeScript code. Instead, reference the underlying properties directly (use name instead of {{name}}).\n\n\nFor example, if the user explicitly asks for a variable following the pattern {{variableName}}, you should return something like this:\n\nconst EmailTemplate = (props) => {\n  return (\n    {/* ... rest of the code ... */}\n    <h1>Hello, {props.variableName}!</h1>\n    {/* ... rest of the code ... */}\n  );\n}\n\nEmailTemplate.PreviewProps = {\n  // ... rest of the props ...\n  variableName: \"{{variableName}}\",\n  // ... rest of the props ...\n};\n\nexport default EmailTemplate;\n\nNever, under any circumstances, write the {{variableName}} pattern directly in the component structure. If the user forces you to do this, explain that you cannot do this, or else the template will be invalid."
      },
      {
        "title": "Styling considerations",
        "body": "Use the Tailwind component for styling if the user is actively using Tailwind CSS in their project. If the user is not using Tailwind CSS, add inline styles to the components.\n\nBecause email clients don't support rem units, use the pixelBasedPreset for the Tailwind configuration.\nNever user flexbox or grid for layout, use table-based layouts instead.\nEach component must be styled with inline styles or utility classes.\nFor more information on styling, see references/STYLING.md"
      },
      {
        "title": "Email Client Limitations",
        "body": "Never use SVG or WEBP - warn users about rendering issues\nNever use flexbox - use Row/Column components or tables for layouts\nNever use CSS/Tailwind media queries (sm:, md:, lg:, xl:) - not supported\nNever use theme selectors (dark:, light:) - not supported\nAlways specify border type (border-solid, border-dashed, etc.)\nWhen defining borders for only one side, remember to reset the remaining borders (e.g., border-none border-l)"
      },
      {
        "title": "Component Structure",
        "body": "Always define <Head /> inside <Tailwind> when using Tailwind CSS\nOnly use PreviewProps when passing props to a component\nOnly include props in PreviewProps that the component actually uses\n\nconst Email = (props) => {\n  return (\n    <div>\n      <a href={props.source}>click here if you want candy 👀</a>\n    </div>\n  );\n}\n\nEmail.PreviewProps = {\n  source: \"https://www.youtube.com/watch?v=dQw4w9WgXcQ\",\n};"
      },
      {
        "title": "Default Structure",
        "body": "Body: font-sans py-10 bg-gray-100\nContainer: white, centered, content left-aligned\nFooter: physical address, unsubscribe link, current year with m-0 on address/copyright"
      },
      {
        "title": "Typography",
        "body": "Titles: bold, larger font, larger margins\nParagraphs: regular weight, smaller font, smaller margins\nUse consistent spacing respecting content hierarchy"
      },
      {
        "title": "Images",
        "body": "Only include if user requests\nNever use fixed width/height - use responsive units (w-full, h-auto)\nNever distort user-provided images\nNever create SVG images - only use provided or web images"
      },
      {
        "title": "Buttons",
        "body": "Always use box-border to prevent padding overflow"
      },
      {
        "title": "Layout",
        "body": "Always mobile-friendly by default\nUse stacked layouts that work on all screen sizes\nRemove default spacing/margins/padding between list items"
      },
      {
        "title": "Dark Mode",
        "body": "When requested: container black (#000), background dark gray (#151516)"
      },
      {
        "title": "Best Practices",
        "body": "Choose colors, layout, and copy based on user's request\nMake templates unique, not generic\nUse keywords in email body to increase conversion"
      },
      {
        "title": "Convert to HTML",
        "body": "import { render } from '@react-email/components';\nimport { WelcomeEmail } from './emails/welcome';\n\nconst html = await render(\n  <WelcomeEmail name=\"John\" verificationUrl=\"https://example.com/verify\" />\n);"
      },
      {
        "title": "Convert to Plain Text",
        "body": "import { render } from '@react-email/components';\nimport { WelcomeEmail } from './emails/welcome';\n\nconst text = await render(<WelcomeEmail name=\"John\" verificationUrl=\"https://example.com/verify\" />, { plainText: true });"
      },
      {
        "title": "Sending",
        "body": "React Email supports sending with any email service provider. If the user wants to know how to send, view the Sending guidelines.\n\nQuick example using the Resend SDK for Node.js:\n\nimport { Resend } from 'resend';\nimport { WelcomeEmail } from './emails/welcome';\n\nconst resend = new Resend(process.env.RESEND_API_KEY);\n\nconst { data, error } = await resend.emails.send({\n  from: 'Acme <onboarding@resend.dev>',\n  to: ['user@example.com'],\n  subject: 'Welcome to Acme',\n  react: <WelcomeEmail name=\"John\" verificationUrl=\"https://example.com/verify\" />\n});\n\nif (error) {\n  console.error('Failed to send:', error);\n}\n\nThe Node SDK automatically handles the plain-text rendering and HTML rendering for you."
      },
      {
        "title": "Internationalization",
        "body": "See references/I18N.md for complete i18n documentation.\n\nReact Email supports three i18n libraries: next-intl, react-i18next, and react-intl."
      },
      {
        "title": "Quick Example (next-intl)",
        "body": "import { createTranslator } from 'next-intl';\nimport {\n  Html,\n  Body,\n  Container,\n  Text,\n  Button,\n  Tailwind,\n  pixelBasedPreset\n} from '@react-email/components';\n\ninterface EmailProps {\n  name: string;\n  locale: string;\n}\n\nexport default async function WelcomeEmail({ name, locale }: EmailProps) {\n  const t = createTranslator({\n    messages: await import(\\`../messages/\\${locale}.json\\`),\n    namespace: 'welcome-email',\n    locale\n  });\n\n  return (\n    <Html lang={locale}>\n      <Tailwind config={{ presets: [pixelBasedPreset] }}>\n        <Body className=\"bg-gray-100 font-sans\">\n          <Container className=\"max-w-xl mx-auto p-5\">\n            <Text className=\"text-base text-gray-800\">{t('greeting')} {name},</Text>\n            <Text className=\"text-base text-gray-800\">{t('body')}</Text>\n            <Button href=\"https://example.com\" className=\"bg-blue-600 text-white px-5 py-3 rounded\">\n              {t('cta')}\n            </Button>\n          </Container>\n        </Body>\n      </Tailwind>\n    </Html>\n  );\n}\n\nMessage files (`messages/en.json`, `messages/es.json`, etc.):\n\n{\n  \"welcome-email\": {\n    \"greeting\": \"Hi\",\n    \"body\": \"Thanks for signing up!\",\n    \"cta\": \"Get Started\"\n  }\n}"
      },
      {
        "title": "Email Best Practices",
        "body": "Test across email clients - Test in Gmail, Outlook, Apple Mail, Yahoo Mail. Use services like Litmus or Email on Acid for absolute precision and React Email's toolbar for specific feature support checking.\n\n\nKeep it responsive - Max-width around 600px, test on mobile devices.\n\n\nUse absolute image URLs - Host on reliable CDN, always include `alt` text.\n\n\nProvide plain text version - Required for accessibility and some email clients.\n\n\nKeep file size under 102KB - Gmail clips larger emails.\n\n\nAdd proper TypeScript types - Define interfaces for all email props.\n\n\nInclude preview props - Add `.PreviewProps` to components for development testing.\n\n\nHandle errors - Always check for errors when sending emails.\n\n\nUse verified domains - For production, use verified domains in `from` addresses."
      },
      {
        "title": "Common Patterns",
        "body": "See references/PATTERNS.md for complete examples including:\n\nPassword reset emails\nOrder confirmations with product lists\nNotification emails with code blocks\nMulti-column layouts\nEmail templates with custom fonts"
      },
      {
        "title": "Additional Resources",
        "body": "React Email Documentation\nReact Email GitHub\nResend Documentation\nEmail Client CSS Support\nComponent Reference: references/COMPONENTS.md\nInternationalization Guide: references/I18N.md\nCommon Patterns: references/PATTERNS.md"
      }
    ],
    "body": "React Email\n\nBuild and send HTML emails using React components - a modern, component-based approach to email development that works across all major email clients.\n\nInstallation\n\nYou need to scaffold a new React Email project using the create-email CLI. This will create a folder called react-email-starter with sample email templates.\n\nUsing npm:\n\nnpx create-email@latest\n\n\nUsing yarn:\n\nyarn create email\n\n\nUsing pnpm:\n\npnpm create email\n\n\nUsing bun:\n\nbun create email\n\nNavigate to Project Directory\n\nYou must change into the newly created project folder:\n\ncd react-email-starter\n\nInstall Dependencies\n\nYou need to install all project dependencies before running the development server.\n\nUsing npm:\n\nnpm install\n\n\nUsing yarn:\n\nyarn\n\n\nUsing pnpm:\n\npnpm install\n\n\nUsing bun:\n\nbun install\n\nStart the Development Server\n\nYour task is to start the local preview server to view and edit email templates.\n\nUsing npm:\n\nnpm run dev\n\n\nUsing yarn:\n\nyarn dev\n\n\nUsing pnpm:\n\npnpm dev\n\n\nUsing bun:\n\nbun dev\n\nVerify Installation\n\nYou must confirm the development server is running by checking that localhost:3000 is accessible. The server will display a preview interface where you can view email templates from the emails folder.\n\nEXECUTE NOW: Complete the above TODO list to achieve: The React Email development server is running and accessible at localhost:3000, displaying email template previews.\n\nNotes on installation\n\nAssuming React Email is installed in an existing project, update the top-level package.json file with a script to run the React Email preview server.\n\n{\n  \"scripts\": {\n    \"email\": \"email dev --dir emails --port 3000\"\n  }\n}\n\n\nMake sure the path to the emails folder is relative to the base project directory.\n\ntsconfig.json updating or creation\n\nEnsure the tsconfig.json includes proper support for jsx.\n\nBasic Email Template\n\nReplace the sample email templates. Here is how to create a new email template:\n\nCreate an email component with proper structure using the Tailwind component for styling:\n\nimport {\n  Html,\n  Head,\n  Preview,\n  Body,\n  Container,\n  Heading,\n  Text,\n  Button,\n  Tailwind,\n  pixelBasedPreset\n} from '@react-email/components';\n\ninterface WelcomeEmailProps {\n  name: string;\n  verificationUrl: string;\n}\n\nexport default function WelcomeEmail({ name, verificationUrl }: WelcomeEmailProps) {\n  return (\n    <Html lang=\"en\">\n      <Tailwind\n        config={{\n          presets: [pixelBasedPreset],\n          theme: {\n            extend: {\n              colors: {\n                brand: '#007bff',\n              },\n            },\n          },\n        }}\n      >\n        <Head />\n        <Preview>Welcome - Verify your email</Preview>\n        <Body className=\"bg-gray-100 font-sans\">\n          <Container className=\"max-w-xl mx-auto p-5\">\n            <Heading className=\"text-2xl text-gray-800\">\n              Welcome!\n            </Heading>\n            <Text className=\"text-base text-gray-800\">\n              Hi {name}, thanks for signing up!\n            </Text>\n            <Button\n              href={verificationUrl}\n              className=\"bg-brand text-white px-5 py-3 rounded block text-center no-underline\"\n            >\n              Verify Email\n            </Button>\n          </Container>\n        </Body>\n      </Tailwind>\n    </Html>\n  );\n}\n\n// Preview props for testing\nWelcomeEmail.PreviewProps = {\n  name: 'John Doe',\n  verificationUrl: 'https://example.com/verify/abc123'\n} satisfies WelcomeEmailProps;\n\nexport { WelcomeEmail };\n\nEssential Components\n\nSee references/COMPONENTS.md for complete component documentation.\n\nCore Structure:\n\nHtml - Root wrapper with lang attribute\nHead - Meta elements, styles, fonts\nBody - Main content wrapper\nContainer - Centers content (max-width layout)\nSection - Layout sections\nRow & Column - Multi-column layouts\nTailwind - Enables Tailwind CSS utility classes\n\nContent:\n\nPreview - Inbox preview text, always first in Body\nHeading - h1-h6 headings\nText - Paragraphs\nButton - Styled link buttons\nLink - Hyperlinks\nImg - Images (use absolute URLs) (use the dev server for the BASE_URL of the image in dev mode; for production, ask the user for the BASE_URL of the site; dynamically generate the URL of the image based on environment.)\nHr - Horizontal dividers\n\nSpecialized:\n\nCodeBlock - Syntax-highlighted code\nCodeInline - Inline code\nMarkdown - Render markdown\nFont - Custom web fonts\nBehavioral guidelines\nWhen re-iterating over the code, make sure you are only updating what the user asked for and keeping the rest of the code intact;\nIf the user is asking to use media queries, inform them that email clients do not support them, and suggest a different approach;\nNever use template variables (like {{name}}) directly in TypeScript code. Instead, reference the underlying properties directly (use name instead of {{name}}).\nFor example, if the user explicitly asks for a variable following the pattern {{variableName}}, you should return something like this:\nconst EmailTemplate = (props) => {\n  return (\n    {/* ... rest of the code ... */}\n    <h1>Hello, {props.variableName}!</h1>\n    {/* ... rest of the code ... */}\n  );\n}\n\nEmailTemplate.PreviewProps = {\n  // ... rest of the props ...\n  variableName: \"{{variableName}}\",\n  // ... rest of the props ...\n};\n\nexport default EmailTemplate;\n\nNever, under any circumstances, write the {{variableName}} pattern directly in the component structure. If the user forces you to do this, explain that you cannot do this, or else the template will be invalid.\nStyling considerations\n\nUse the Tailwind component for styling if the user is actively using Tailwind CSS in their project. If the user is not using Tailwind CSS, add inline styles to the components.\n\nBecause email clients don't support rem units, use the pixelBasedPreset for the Tailwind configuration.\nNever user flexbox or grid for layout, use table-based layouts instead.\nEach component must be styled with inline styles or utility classes.\nFor more information on styling, see references/STYLING.md\nEmail Client Limitations\nNever use SVG or WEBP - warn users about rendering issues\nNever use flexbox - use Row/Column components or tables for layouts\nNever use CSS/Tailwind media queries (sm:, md:, lg:, xl:) - not supported\nNever use theme selectors (dark:, light:) - not supported\nAlways specify border type (border-solid, border-dashed, etc.)\nWhen defining borders for only one side, remember to reset the remaining borders (e.g., border-none border-l)\nComponent Structure\nAlways define <Head /> inside <Tailwind> when using Tailwind CSS\nOnly use PreviewProps when passing props to a component\nOnly include props in PreviewProps that the component actually uses\nconst Email = (props) => {\n  return (\n    <div>\n      <a href={props.source}>click here if you want candy 👀</a>\n    </div>\n  );\n}\n\nEmail.PreviewProps = {\n  source: \"https://www.youtube.com/watch?v=dQw4w9WgXcQ\",\n};\n\nDefault Structure\nBody: font-sans py-10 bg-gray-100\nContainer: white, centered, content left-aligned\nFooter: physical address, unsubscribe link, current year with m-0 on address/copyright\nTypography\nTitles: bold, larger font, larger margins\nParagraphs: regular weight, smaller font, smaller margins\nUse consistent spacing respecting content hierarchy\nImages\nOnly include if user requests\nNever use fixed width/height - use responsive units (w-full, h-auto)\nNever distort user-provided images\nNever create SVG images - only use provided or web images\nButtons\nAlways use box-border to prevent padding overflow\nLayout\nAlways mobile-friendly by default\nUse stacked layouts that work on all screen sizes\nRemove default spacing/margins/padding between list items\nDark Mode\n\nWhen requested: container black (#000), background dark gray (#151516)\n\nBest Practices\nChoose colors, layout, and copy based on user's request\nMake templates unique, not generic\nUse keywords in email body to increase conversion\nRendering\nConvert to HTML\nimport { render } from '@react-email/components';\nimport { WelcomeEmail } from './emails/welcome';\n\nconst html = await render(\n  <WelcomeEmail name=\"John\" verificationUrl=\"https://example.com/verify\" />\n);\n\nConvert to Plain Text\nimport { render } from '@react-email/components';\nimport { WelcomeEmail } from './emails/welcome';\n\nconst text = await render(<WelcomeEmail name=\"John\" verificationUrl=\"https://example.com/verify\" />, { plainText: true });\n\nSending\n\nReact Email supports sending with any email service provider. If the user wants to know how to send, view the Sending guidelines.\n\nQuick example using the Resend SDK for Node.js:\n\nimport { Resend } from 'resend';\nimport { WelcomeEmail } from './emails/welcome';\n\nconst resend = new Resend(process.env.RESEND_API_KEY);\n\nconst { data, error } = await resend.emails.send({\n  from: 'Acme <onboarding@resend.dev>',\n  to: ['user@example.com'],\n  subject: 'Welcome to Acme',\n  react: <WelcomeEmail name=\"John\" verificationUrl=\"https://example.com/verify\" />\n});\n\nif (error) {\n  console.error('Failed to send:', error);\n}\n\n\nThe Node SDK automatically handles the plain-text rendering and HTML rendering for you.\n\nInternationalization\n\nSee references/I18N.md for complete i18n documentation.\n\nReact Email supports three i18n libraries: next-intl, react-i18next, and react-intl.\n\nQuick Example (next-intl)\nimport { createTranslator } from 'next-intl';\nimport {\n  Html,\n  Body,\n  Container,\n  Text,\n  Button,\n  Tailwind,\n  pixelBasedPreset\n} from '@react-email/components';\n\ninterface EmailProps {\n  name: string;\n  locale: string;\n}\n\nexport default async function WelcomeEmail({ name, locale }: EmailProps) {\n  const t = createTranslator({\n    messages: await import(\\`../messages/\\${locale}.json\\`),\n    namespace: 'welcome-email',\n    locale\n  });\n\n  return (\n    <Html lang={locale}>\n      <Tailwind config={{ presets: [pixelBasedPreset] }}>\n        <Body className=\"bg-gray-100 font-sans\">\n          <Container className=\"max-w-xl mx-auto p-5\">\n            <Text className=\"text-base text-gray-800\">{t('greeting')} {name},</Text>\n            <Text className=\"text-base text-gray-800\">{t('body')}</Text>\n            <Button href=\"https://example.com\" className=\"bg-blue-600 text-white px-5 py-3 rounded\">\n              {t('cta')}\n            </Button>\n          </Container>\n        </Body>\n      </Tailwind>\n    </Html>\n  );\n}\n\n\nMessage files (`messages/en.json`, `messages/es.json`, etc.):\n\n{\n  \"welcome-email\": {\n    \"greeting\": \"Hi\",\n    \"body\": \"Thanks for signing up!\",\n    \"cta\": \"Get Started\"\n  }\n}\n\nEmail Best Practices\n\nTest across email clients - Test in Gmail, Outlook, Apple Mail, Yahoo Mail. Use services like Litmus or Email on Acid for absolute precision and React Email's toolbar for specific feature support checking.\n\nKeep it responsive - Max-width around 600px, test on mobile devices.\n\nUse absolute image URLs - Host on reliable CDN, always include `alt` text.\n\nProvide plain text version - Required for accessibility and some email clients.\n\nKeep file size under 102KB - Gmail clips larger emails.\n\nAdd proper TypeScript types - Define interfaces for all email props.\n\nInclude preview props - Add `.PreviewProps` to components for development testing.\n\nHandle errors - Always check for errors when sending emails.\n\nUse verified domains - For production, use verified domains in `from` addresses.\n\nCommon Patterns\n\nSee references/PATTERNS.md for complete examples including:\n\nPassword reset emails\nOrder confirmations with product lists\nNotification emails with code blocks\nMulti-column layouts\nEmail templates with custom fonts\nAdditional Resources\nReact Email Documentation\nReact Email GitHub\nResend Documentation\nEmail Client CSS Support\nComponent Reference: references/COMPONENTS.md\nInternationalization Guide: references/I18N.md\nCommon Patterns: references/PATTERNS.md"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/christina-de-martinez/react-email-skills",
    "publisherUrl": "https://clawhub.ai/christina-de-martinez/react-email-skills",
    "owner": "christina-de-martinez",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/react-email-skills",
    "downloadUrl": "https://openagent3.xyz/downloads/react-email-skills",
    "agentUrl": "https://openagent3.xyz/skills/react-email-skills/agent",
    "manifestUrl": "https://openagent3.xyz/skills/react-email-skills/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/react-email-skills/agent.md"
  }
}