html-ppt-skill — скилл для Claude Code: что делает и как установить
Генерирует статические HTML-презентации без сборщиков и фреймворков. Пригодится, когда нужно быстро собрать анимированный слайд-дек в браузере.
npx skills add reason-machines/trending-skills --skill html-ppt-skill -a claude-codeЧто делает html-ppt-skill
Скилл создаёт слайды на чистом HTML, CSS и JavaScript. Внутри заготовлены 36 цветовых тем, 31 готовый макет страниц и 47 вариантов анимаций, включая визуальные эффекты на Canvas. Переключение оформления сводится к замене одного CSS-файла темы в заголовке страницы.
Каждый дек опирается на базовый файл assets/base.css, одну выбранную тему и скрипт runtime.js. Этот скрипт отвечает за переключение слайдов клавишами, режим докладчика и обзорную сетку. Для генерации нового проекта используется скрипт ./scripts/new-deck.sh <name>, создающий разметку в папке examples.
Файл слайдов жёстко привязан к относительным путям директории assets/. Если скопировать готовый index.html отдельно от папки со стилями и скриптами рантайма, оформление и перелистывание перестанут работать.
Какие задачи решает
- сверстать питч-дек или доклад на чистом HTML без сборщиков
- оформить слайды готовой темой под терминал или нео-брутализм
- добавить анимации появления списков и цитат через CSS-классы
- встроить эффекты на Canvas при показе конкретного слайда
Примеры запросов агенту
- Собери презентацию о новом релизе на чистом HTML в тёмной теме tokyo-night
- Разверни новый дек через скрипт
./scripts/new-deck.sh my-talkи настрой слайд с цитатой - Добавь в текущий HTML-слайд макет
two-columnи эффект появления заголовка
Как установить html-ppt-skill
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill html-ppt-skill -a claude-code2Вручную: положить файлы
~/.claude/skills/html-ppt-skill/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/html-ppt-skill/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill html-ppt-skill -a codex2Вручную: положить файлы
.agents/skills/html-ppt-skill/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill html-ppt-skill -a cursor2Вручную: положить файлы
.cursor/skills/html-ppt-skill/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills html-ppt-skill2Вручную: положить файлы
.github/skills/html-ppt-skill/SKILL.md1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill html-ppt-skill -a gemini-cli2Командой платформы
gemini skills install https://github.com/reason-machines/trending-skills --path skills/html-ppt-skillВручную: положить файлы
.devin/skills/html-ppt-skill/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill html-ppt-skill -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о html-ppt-skill
Как установить html-ppt-skill в Claude Code?
Выполните команду npx skills add reason-machines/trending-skills --skill html-ppt-skill -a claude-code. Агент зарегистрирует скилл в вашем окружении.
Зачем нужен html-ppt-skill?
Инструмент создаёт интерактивные презентации в браузере без сборщиков вроде Vite или Webpack. Вы получаете готовые слайды с клавиатурным управлением и режимом докладчика.
Нужен ли Node.js для показа готовых слайдов?
Для просмотра слайдов сборка не требуется. Достаточно открыть файл index.html в браузере, сохранив рядом директорию assets/.
