React Email — скилл для агентов
React Email skill
Скилл учит агента верстать письма на компонентах React Email: правила для почтовых клиентов, рендер в HTML и текст, отправка, переводы и редактор
- 19 863 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скилл только меняет инструкции агента, но по ним агент пишет файлы в папку `emails` и ставит npm-пакеты
- Пример отправки использует ключ `RESEND_API_KEY`, который не стоит держать в коде
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/react-email-skillОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл только меняет инструкции агента, но по ним агент пишет файлы в папку `emails` и ставит npm-пакеты
- Пример отправки использует ключ `RESEND_API_KEY`, который не стоит держать в коде
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл `react-email` лежит в папке `skills/react-email` репозитория React Email и подключается командой `npx skills add resend/react-email`. После подключения агент верстает письма на компонентах `Html`, `Body`, `Container`, `Button`, `Preview` и `Tailwind`, а шаблоны кладет в папку `emails`. Перед кодом он по инструкции выясняет у вас цвет бренда, формат логотипа (подходят PNG и JPG, про SVG и WEBP предупреждает), тон письма и адрес, где в проде будут лежать картинки. Главная часть скилла — правила для почтовых клиентов. Для `Tailwind` агент берет пресет `pixelBasedPreset`, потому что почтовые клиенты не понимают единицы `rem`. `Flexbox` и `grid` он заменяет компонентами `Row` и `Column`, не использует медиазапросы и селекторы `dark:` и `light:`, к кнопке добавляет класс `box-border`, а к границам — `border-solid`. Блок `Preview` ставится первым внутри `Body`, `Head` лежит внутри `Tailwind`, а тестовые данные идут в `PreviewProps`. Шаблонные переменные вроде двойных фигурных скобок агент пишет только в `PreviewProps`, в разметку компонента они не попадают. Готовый шаблон превращается в HTML или обычный текст функцией `render`, а командой `email dev` поднимается предпросмотр на порту 3000. Для отправки в скилле есть примеры с Resend SDK, `Nodemailer` и `SendGrid`, для переводов — `next-intl`, `react-i18next` и `react-intl`. Отдельный справочник описывает встраиваемый визуальный редактор писем `@react-email/editor` на `TipTap` и `ProseMirror`, а раздел о доступности требует один заголовок `h1`, описательный `alt` и контраст 4,5 к 1.
Для кого. Для разработчиков на React и TypeScript, которые делают транзакционные письма и рассылки и хотят, чтобы агент сразу учитывал ограничения почтовых клиентов.
Подходит, если
- Нужно письмо с подтверждением почты, сбросом пароля или подтверждением заказа, и вы хотите получить готовый компонент с типами и `PreviewProps`
- Верстка письма ломается в Outlook или Gmail, а агент по привычке пишет `flexbox` и медиазапросы
- Письма надо выпускать на нескольких языках, и вы выбираете между `next-intl`, `react-i18next` и `react-intl`
- В приложение нужно встроить визуальный редактор писем на базе `@react-email/editor`
- Шаблон надо вывести в статический HTML и обычный текст командой `email export`
Не подходит, если
- Проект не на JavaScript или TypeScript: скилл целиком построен на компонентах React и пакете `react-email`
- Нужен общий совет по доставляемости, прогреву домена и спам-фильтрам: скилл про верстку и отправку из кода, а об этом в нем почти ничего нет
- Нужны медиазапросы, `flexbox` или темная тема в письме: скилл запрещает агенту их использовать
- Нужно управлять контактами, рассылками и доменами Resend из чата: для этого в каталоге есть официальный сервер Resend MCP Server
Пример запроса к агенту
Сделай письмо для сброса пароля на React Email: логотип в PNG, наш синий цвет, кнопка со ссылкой, и сразу покажи, как его отправить через ResendОграничения
- Скилл требует Node.js и менеджера пакетов: `react-email` ставится командой `npm i react-email` или создается заготовка проекта командой `npx create-email@latest`.
- Отправку в примерах ведет Resend SDK, ему нужен ключ `RESEND_API_KEY` из аккаунта Resend. Команда `email resend setup` сохраняет такой ключ для CLI.
- Правила о `flexbox`, медиазапросах, SVG и WEBP отражают поддержку почтовых клиентов на момент написания скилла, а ее проверку на реальных клиентах скилл предлагает сделать вам.
- Из-за запрета медиазапросов письма получаются без адаптивных стилей: ширина держится около 600 пикселей. Gmail обрезает письма тяжелее 102 КБ.
- Файл `TESTS.md` описывает сценарии проверки с отметками о прогонах без скилла и со скиллом. Это внутренний журнал авторов, независимой оценки качества в репозитории нет.
- Лицензия MIT.
Как отключить. Удалите скилл `react-email` из папки скиллов вашего агента, и он перестанет подгружать эти правила. Уже созданные шаблоны в папке `emails` и пакет `react-email` в проекте останутся, их убирают командой `npm uninstall react-email`.
Частые вопросы
Как подключить скилл React Email к Claude Code, Cursor или Codex?
Выполните в проекте `npx skills add resend/react-email`. Авторы называют совместимыми Claude Code, Codex, Cursor и GitHub Copilot, список заканчивается словами «и другие». Сам скилл следует спецификации Agent Skills.
Почему агент отказывается использовать `flexbox` и медиазапросы в письме?
Скилл запрещает `flexbox`, `grid`, медиазапросы и селекторы `dark:` и `light:`, потому что почтовые клиенты их поддерживают плохо. Если вы попросите медиазапросы, агент предупредит об этом и предложит другой путь, например компоненты `Row` и `Column`.
Зачем в скилле `pixelBasedPreset` и класс `box-border`?
Почтовые клиенты не понимают единицу `rem`, поэтому `Tailwind` подключают с пресетом `pixelBasedPreset` из пакета `react-email`. Класс `box-border` на `Button` держит отступы внутри ширины кнопки. Класс `border-solid` задает тип границы, который клиенты сами не наследуют.
Можно ли использовать `{{name}}` в шаблоне письма?
В разметку компонента такую запись скилл не пускает: там агент использует свойство вроде `{firstName}`. Строка с двойными фигурными скобками допустима только в `PreviewProps`. Если вы настаиваете, агент объяснит, что шаблон станет недействительным кодом.
Как с этим скиллом сделать письмо на нескольких языках?
В справочнике `I18N.md` разобраны `next-intl`, `react-i18next` и `react-intl`: установка, настройка, файлы переводов по пространствам имен. Язык передают в компонент и записывают в атрибут `lang` корневого `Html`, а направление текста задается атрибутом `dir`.
Умеет ли скилл подключать визуальный редактор писем?
Да, справочник `EDITOR.md` описывает пакет `@react-email/editor`. В нем компонент `EmailEditor` с темами basic и minimal, набор `StarterKit` из более чем 35 расширений и функция `composeReactEmail`, которая выдает HTML и обычный текст.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыПанель разметки для React-страниц: клик по элементу дает агенту селектор и контекст, скиллы настраивают подключение и сами ведут критику интерфейса
Скиллы Material UI
Material UI agent skills
Четыре официальных скилла Material UI: стилизация, темы, интеграция с Next.js и совместная работа с Tailwind CSS
React Joyride — скилл для агентов
React Joyride
Скилл по третьей версии React Joyride: пошаговые туры по интерфейсу, шаги, события, свои компоненты и разбор типовых поломок
Скиллы против шаблонных интерфейсов: сетка, типографика, анимация и отступы, плюс генерация референсов для веба и мобильных
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
Скилл и MCP-сервер библиотеки Shaders: агент собирает фоны, стекло, градиенты и курсорные эффекты на WebGPU для React, Vue, Svelte, Solid и JS
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| React Email — скилл для агентов (эта запись) | да | 19 863 | ||
| Скиллы Resend | нет | API-ключ | 203 | официальный набор Resend: отправка и прием писем, React Email и CLI, плюс удаленный MCP |
| Resend MCP Server | да | OAuth | 576 | официальный MCP-сервер Resend для управления письмами, контактами и доменами из агента |
Коротко о README
В репозитории React Email есть основная документация по компонентам с примером кнопки, раздел «Использование с ИИ» с командой установки скилла и ссылка на документацию для моделей в формате llms.txt. Папка `skills/react-email` содержит `SKILL.md` короче 350 строк, шесть справочников (компоненты, редактор, переводы, шаблоны, отправка, стили), краткое описание структуры и файл с тестовыми сценариями. Основные инструкции загружаются сразу, справочники подтягиваются по необходимости.