JHamidun Slides
HTML-презентация на основе веб-компонента <deck-stage>. Один HTML-файл = одна презентация.
Принципы
- Канвас фиксированного размера (по умолчанию 1920×1080), отмасштабированный под viewport через
transform: scale(). Чёрные полосы по краям, если соотношения не совпадают. - Каждый слайд —
<section>внутри<deck-stage>. - Навигация: ←/→, Space, клик по краям, цифры на клавиатуре.
- Печать в PDF: одна страница = один слайд (через
@page+@media print).
Как делать дек
- Скопируй
templates/deck-stage.jsрядом с HTML-файлом. - Возьми
templates/deck-template.htmlкак стартовый каркас. - Сформулируй дизайн-систему ВСЛУХ перед слайдами:
- Шрифтовая пара (заголовок + основной).
- Базовая палитра: фон, текст, 0–2 акцента.
- Сетка: колонки, базовый отступ.
- Ритм слайдов: где full-bleed, где разделители-секции, где данные.
- Каждый слайд —
<section>со своим layout. Не используй один шаблон на всё. - На текстовых слайдах не больше ~30 слов. Остальное — в спикер-ноты.
Размеры
| Формат | Размеры | Когда |
|---|---|---|
| 16:9 FullHD | 1920×1080 | Дефолт. Конференции, ревью. |
| 16:9 lite | 1280×720 | Если важна скорость рендера. |
| Square | 1080×1080 | Соцсети, карусели. |
| Vertical | 1080×1920 | Сторис, мобильные плееры. |
Указывается атрибутами на <deck-stage>:
<deck-stage width="1920" height="1080">
<section>...</section>
<section>...</section>
</deck-stage>
Спикер-ноты
Если нужны — добавь в <head>:
<script type="application/json" id="speaker-notes">
[
"Заметки к слайду 1",
"Заметки к слайду 2"
]
</script>
Полные разговорные тексты, не тезисы. Это сценарий выступления.
Типографические правила
- Минимальный размер на 1920×1080: 24px, и то редко. Заголовки от 80px.
- Не больше 2 шрифтов в деке.
- Контраст текста к фону — минимум 4.5:1.
- Не центрируй длинные абзацы. Центрируй короткие — заголовки и манифесты.
Композиция слайдов
Полезные архетипы (комбинируй):
- Statement — одна большая фраза, всё остальное минимум.
- Title + supporting — заголовок сверху, 1–3 пункта или картинка.
- Two-column — слева тезис, справа доказательство (картинка / данные).
- Section divider — контрастный фон, номер секции и название. Использовать для ритма каждые 4–6 слайдов.
- Full-bleed image — фото на весь экран, текст в углу с полупрозрачной плашкой.
- Data slide — один график крупно, один вывод текстом.
- Quote — большая цитата, мелкая атрибуция.
Не повторяй один и тот же шаблон 10 раз подряд.
Изображения
Если нет реальных — рисуй плейсхолдер:
<div class="placeholder">
<span>product shot · 1200×800</span>
</div>
.placeholder {
background: repeating-linear-gradient(
45deg, #1a1a1a, #1a1a1a 8px, #222 8px, #222 16px
);
display: grid; place-items: center;
font-family: ui-monospace, monospace;
color: #888; font-size: 14px;
}
Метки для контекста
Поставь data-screen-label на каждом <section>, тогда при инспекции элементов видно, где какой слайд:
<section data-screen-label="01 Title">...</section>
<section data-screen-label="02 Problem">...</section>
Нумерация с 1, как у пользователя в интерфейсе.
Экспорты
Когда готово — пользователь может попросить:
- PDF → подключи скилл
export-pdf. - PNG-кадры →
export-png. - PPTX →
export-pptx. - Один HTML-файл →
standalone-html.
Проверка
Открой результат: open deck.html (mac) или xdg-open deck.html (linux). Если есть скилл verifier — позови его проверить консоль и снять скриншоты.
Legacy reference
Прежняя расширенная версия скилла (дерево @2026-04-30) сохранена целиком в references/legacy-slides.md. Секции там: Каркас, Правила слайдов, Структура дека (типовая), Стек со связанными скиллами, URL-навигация, Антипаттерны.