html-email
HTML-письма с табличной разметкой, inline CSS, dark-mode-aware. Outlook-safe.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
HTML-письма с табличной разметкой, inline CSS, dark-mode-aware. Outlook-safe.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Research a company or person for sales intel — web search standalone, richer with enrichment tools or CRM connected. Trigger with "research [company]", "look up [person]", "intel on [prospect]", "who is [name] at [company]".
AI-музыка локально на your GPU (ACE-Step 1.5): инструменталы и песни, авто/кастомная лирика, модели base/xl-turbo; CLI scripts/generate.py. Триггеры: «напиши песню», jingle, soundtrack, background music. НЕ Suno (skill suno), не ElevenLabs Music.
OpenAI-совместимый HTTP-сервер поверх ЛОКАЛЬНОГО claude CLI (подписка Max, без API-ключа) — отдаёт Claude как /v1/chat/completions для n8n, OpenAI-SDK, IDE, curl, Open WebUI; SSE-стрим, X-Session-Id. НЕ: наружу к OpenAI/Perplexity/Runway→local-gateway; разовый вызов из Python→claude-cli-runner; боевые Hermes-боты→agent-builder tooling.
Prepare for a sales call — account context, attendee research, suggested agenda; richer with CRM, email, chat or transcripts connected. Trigger with "prep me for my call with [company]", "call prep [company]", "get me ready for [meeting]".
Создание визуальных карточек-каруселей для Telegram-канала — editorial стиль. HTML+CSS шаблон → Playwright render → PNG-серия 1080×1350. Библиотека шаблонов лежит в templates/ (read-only образцы); новая серия создаётся в рабочей директории (CWD). Вызывается сам или из tg-post. Триггеры — «карточки для канала», «карусель в канал», «сделай series», «нарисуй cover», «slides для поста».
Verify any fact, claim, number, statement, citation or AI-generated output for hallucinations — cross-check sources, validate research findings. Triggers: "/check-skill-solo", «проверь», «перепроверь», "verify", "fact-check".
| name | html-email |
| description | HTML-письма с табличной разметкой, inline CSS, dark-mode-aware. Outlook-safe. |
| when_to_use | Транзакционные письма, рассылки, подтверждения. НЕ обычная веб-страница. |
HTML-письма — это не HTML 2026 года, это HTML 1999-го. Outlook рендерит через Word. Gmail обрезает CSS. Apple Mail почти нормальный.
<table> с явным width.<style> снаружи (Gmail обрезает).<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Заголовок</title>
</head>
<body style="margin:0;padding:0;background:#f4f4f4;font-family:-apple-system,Segoe UI,Helvetica,Arial,sans-serif;">
<!-- Preheader: текст-предпросмотр в inbox, скрыт в письме -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">
Превью текста в inbox — первые 80 символов.
</div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background:#f4f4f4;">
<tr>
<td align="center" style="padding:32px 16px;">
<!-- Конверт -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="max-width:600px;background:#fff;border-radius:8px;">
<!-- Header -->
<tr>
<td style="padding:32px 32px 16px;text-align:center;">
<img src="https://example.com/logo.png" width="120" alt="Brand" style="display:block;margin:0 auto;">
</td>
</tr>
<!-- Body -->
<tr>
<td style="padding:16px 32px;color:#111;font-size:16px;line-height:1.5;">
<h1 style="font-size:24px;line-height:1.2;margin:0 0 16px;color:#111;">Здравствуйте, Иван!</h1>
<p style="margin:0 0 16px;">Спасибо за регистрацию. Подтвердите email, нажав кнопку ниже.</p>
</td>
</tr>
<!-- CTA -->
<tr>
<td style="padding:8px 32px 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#111111" style="border-radius:6px;">
<a href="https://example.com/verify?t=abc" style="display:inline-block;padding:14px 28px;color:#fff;text-decoration:none;font-weight:600;font-size:15px;">Подтвердить email</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:24px 32px;border-top:1px solid #eee;color:#666;font-size:12px;line-height:1.5;text-align:center;">
Если кнопка не работает, скопируйте ссылку:<br>
<a href="https://example.com/verify?t=abc" style="color:#666;word-break:break-all;">https://example.com/verify?t=abc</a>
</td>
</tr>
</table>
<p style="color:#999;font-size:11px;margin:16px 0 0;">
Получено по адресу ivan@example.com.
<a href="https://example.com/unsub" style="color:#999;">Отписаться</a>.
</p>
</td>
</tr>
</table>
</body>
</html>
Outlook 2007–2019 рендерит через Word, ломает практически всё. Особое внимание:
border-radius Outlook не понимает — будет квадратная.padding на <a> Outlook игнорирует — нужен padding на <td>, обёртывающий <a>.Для VML-кнопок (если важна закруглённость в Outlook) ищи bulletproof email button generators.
Apple Mail и iOS Mail инвертируют светлые письма. Можно подсказать:
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
И в CSS:
@media (prefers-color-scheme: dark) {
body, .container { background: #1a1a1a !important; color: #eee !important; }
a { color: #88aaff !important; }
}
!important нужен, потому что inline-стили перевешивают media query.
[Message clipped].<form> внутри письма — не сработает в Gmail.<video> — никто не покажет.Прежняя расширенная версия скилла (дерево @2026-04-30) сохранена целиком в references/legacy-html-email.md. Секции там: Что НЕ работает в email, Что работает, Каркас, Правила, Bulletproof button, Mobile responsive, Тестирование, MJML alternative, Антипаттерны.