AIKraft/AI/Войти
AIKraft/Skills/react-email

react-email

Создание HTML-шаблонов писем через React-компоненты, рендеринг в HTML и отправка через Resend. Включает визуальный редактор, welcome-письма, уведомления и транзакционные сообщения.

REResend official Разработка ★ 19.8k

Что делает навык

Skill позволяет создавать HTML-шаблоны писем с использованием React-компонентов и Tailwind CSS, обеспечивая кросс-браузерную совместимость. Он включает инструменты для рендеринга в HTML/текст, визуальный редактор и интеграцию с сервисами отправки, такими как Resend.

Когда применять

  • Создание транзакционных писем, таких как welcome-сообщения или уведомления об изменении пароля.
  • Генерация HTML-шаблонов для рассылок с использованием Tailwind CSS и специфичных для email компонентов.
  • Использование визуального редактора для конструирования писем без написания кода.
  • Отправка писем через Resend SDK с автоматическим рендерингом React-компонентов.

Как работает

  1. Установить пакет react-email и настроить скрипт dev для запуска локального сервера предпросмотра.
  2. Создать React-компонент, используя компоненты Html, Tailwind, Container и другие из библиотеки.
  3. Применить стилизацию через Tailwind с использованием pixelBasedPreset, избегая flexbox, grid и media queries.
  4. Добавить PreviewProps для тестирования шаблона в интерфейсе разработчика.
  5. Срендерить компонент в HTML или plain text с помощью функции render, либо отправить через Resend.

Примеры запросов агенту

Создай welcome-письмо с приветствием пользователя и кнопкой подтверждения email.
Напиши компонент письма для уведомления о смене пароля с использованием Tailwind стилей.
Настрой проект react-email и запусти локальный сервер для предпросмотра шаблонов.

Что понадобится

  • Node.js и пакетный менеджер (npm, yarn, pnpm, bun)
  • API-ключ Resend (для отправки писем через Resend SDK)
  • Файлы изображений в формате PNG или JPG (SVG и WEBP не поддерживаются)

Описание составлено по SKILL.md навыка, сверено 06.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «resend-react-email» из репозитория: # https://github.com/resend/react-email
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r resend-react-email/ ~/.claude/skills/resend-react-email/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.