# email-render-builder

Собирает HTML-вёрстку письма из готового креатива и проверяет, как она отрисуется в Gmail, Outlook, Apple Mail и на мобильных.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1000 установок · ★ 3013
- Автор: aaron-he-zhu
- Лицензия: Apache-2.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/aaron-he-zhu/aaron-marketing-skills/tree/HEAD/email/engage/email-render-builder/SKILL.md
- Обновлён: 2026-10-25
- HTML: https://affpapa.org/nevibecode/skills/email-render-builder

## Что делает

Скилл берёт одобренный креатив — тему, тело, CTA — и превращает его в табличную вёрстку с инлайн-стилями, которая перестраивается под мобильный экран. Дальше идёт проход по тёмной теме и доступности: alt-текст, порядок чтения, контраст, размер шрифта. На выходе — матрица рендера по клиентам и заметки о том, что ломается при выключенных картинках.

Копирайт скилл не пишет, это работа `email-creative-builder`. Оценку и EQS считает `email-quality-auditor`. Если у вас нет Litmus или Email on Acid, выводы о рендере строятся по матрице поддержки клиентов из `references/client-render-matrix.md` — то есть оценочно, а не по факту.

Есть готовый скрипт для тестовой отправки через Resend: `python3 "${CLAUDE_PLUGIN_ROOT}/scripts/connectors/resend.py" send --from <verified sender> --to <your own test inboxes> --subject "[render test] …" --html build.html`. Сначала прогон без `--live`, потом отдельное разрешение на конкретных получателей, отправителя, тему и `html_hash`. Отправляйте только на свои тестовые ящики — это проверка рендера, а не кампания. Любой вставленный HTML скилл считает недоверенным вводом и не выполняет инструкции из него.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add aaron-he-zhu/aaron-marketing-skills --skill email-render-builder -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/email-render-builder/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/email-render-builder/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add aaron-he-zhu/aaron-marketing-skills --skill email-render-builder -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/email-render-builder/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add aaron-he-zhu/aaron-marketing-skills --skill email-render-builder -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/email-render-builder/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install aaron-he-zhu/aaron-marketing-skills email-render-builder
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/email-render-builder/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add aaron-he-zhu/aaron-marketing-skills --skill email-render-builder -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/aaron-he-zhu/aaron-marketing-skills --path email/engage/email-render-builder
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/email-render-builder/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add aaron-he-zhu/aaron-marketing-skills --skill email-render-builder -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/aaron-he-zhu/aaron-marketing-skills/tree/HEAD/email/engage/email-render-builder/SKILL.md

## Когда брать
- собрать табличную HTML-вёрстку письма из готового текста
- проверить, как письмо отрисуется в Gmail, Outlook и Apple Mail
- починить инверсию цветов в тёмной теме
- добавить alt-текст и проверить контраст
- сверить текстовую версию письма с HTML

## Примеры запросов агенту
- Собери адаптивный HTML из этого креатива: [тема + тело + CTA], ссылка [URL]
- Проверь этот HTML письма в Gmail, Outlook, Apple Mail и на мобильных. Отметь, что ломается в тёмной теме и без картинок
- В Outlook и без картинок вёрстка разъезжается — почини и добавь фолбэки: [HTML]

## Похожие
- [email-html-mjml](https://affpapa.org/nevibecode/skills/email-html-mjml.md) — скилл · 945 установок
- [email-best-practices](https://affpapa.org/nevibecode/skills/email-best-practices.md) — скилл · 13500 установок
- [mjml-email-templates](https://affpapa.org/nevibecode/skills/mjml-email-templates.md) — скилл · 492 установки
- [landing-page](https://affpapa.org/nevibecode/skills/jezweb-landing-page.md) — скилл · 1500 установок
- [tailwindcss-responsive-darkmode](https://affpapa.org/nevibecode/skills/tailwindcss-responsive-darkmode.md) — скилл · 476 установок
- [tailwind-css](https://affpapa.org/nevibecode/skills/manutej-tailwind-css.md) — скилл · 461 установка

Из того же набора: [aaron-he-zhu/aaron-marketing-skills](https://affpapa.org/nevibecode/by/aaron-he-zhu/aaron-marketing-skills.md) — 113 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md