# Slides
> HTML-презентации: навигация, скейлинг под экран, спикер-ноты, печать в PDF. Триггеры: «сделай слайды», «дек», «питч», «1920x1080 дек». НЕ стили Manus→команда /slides.
- Skill: `jhamidun/slides-2` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add jhamidun/slides-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jhamidun/slides-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: JHamidun (https://skillmd.com/u/jhamidun)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/jhamidun/slides-2
---
# Slides
HTML-презентация на основе веб-компонента ``. Один HTML-файл = одна презентация.
## Принципы
- Канвас фиксированного размера (по умолчанию 1920×1080), отмасштабированный под viewport через `transform: scale()`. Чёрные полосы по краям, если соотношения не совпадают.
- Каждый слайд — `` внутри ``.
- Навигация: ←/→, Space, клик по краям, цифры на клавиатуре.
- Печать в PDF: одна страница = один слайд (через `@page` + `@media print`).
## Как делать дек
1. Скопируй `templates/deck-stage.js` рядом с HTML-файлом.
2. Возьми `templates/deck-template.html` как стартовый каркас.
3. Сформулируй дизайн-систему ВСЛУХ перед слайдами:
- Шрифтовая пара (заголовок + основной).
- Базовая палитра: фон, текст, 0–2 акцента.
- Сетка: колонки, базовый отступ.
- Ритм слайдов: где full-bleed, где разделители-секции, где данные.
4. Каждый слайд — `` со своим layout. Не используй один шаблон на всё.
5. На текстовых слайдах не больше ~30 слов. Остальное — в спикер-ноты.
## Размеры
| Формат | Размеры | Когда |
|---|---|---|
| 16:9 FullHD | 1920×1080 | Дефолт. Конференции, ревью. |
| 16:9 lite | 1280×720 | Если важна скорость рендера. |
| Square | 1080×1080 | Соцсети, карусели. |
| Vertical | 1080×1920 | Сторис, мобильные плееры. |
Указывается атрибутами на ``:
```html
```
## Спикер-ноты
Если нужны — добавь в ``:
```html
```
Полные разговорные тексты, не тезисы. Это сценарий выступления.
## Типографические правила
- Минимальный размер на 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 раз подряд.
## Изображения
Если нет реальных — рисуй плейсхолдер:
```html
product shot · 1200×800
```
```css
.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` на каждом ``, тогда при инспекции элементов видно, где какой слайд:
```html
```
Нумерация с 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-навигация, Антипаттерны.