Interactive Slides (Claude Skill) — Установка & Живое демо

Зачем использовать

Ключевые функции

Три режима: слайд-презентация, история прокрутки, интерактивная колода.
Автономный HTML — один файл, любой браузер.
Анимация GSAP, Google Fonts, Chart.js (CDN)
Навигация: клавиатура / щелчок / касание / пролистывание / колесо прокрутки.
Дополнительный экспорт .pptx через pptxgenjs.

Живое демо

Как выглядит на практике

interactive-slides-skill.replay ▶ готово

0/0

Установка

Репозиторий автора · Официальная документация Claude Skills

Сценарии использования

Реальные сценарии: Interactive Slides

Превратите одностраничный сайт в колоду для инвесторов

👤 Основатели и руководители проектов готовят презентации ⏱ ~30 min beginner

Когда использовать: У вас есть контент; вам нужна форма настоящей колоды за считанные минуты.

Поток

Вызов навыка

/interactive-slides — режим: слайд-дека. Содержание: <одностраничный>. Тема: минималистичная темная.✓ Скопировано

→ Создает файлeck.html; открывается в браузере
Перебирать разделы

Добавьте раздел «Тракция» с линейной диаграммой MRR.✓ Скопировано

→ Линейная диаграмма Chart.js, отображаемая внутри слайда
Экспорт .pptx

Экспортировать в формате Pitch.pptx.✓ Скопировано

→ Редактируемый .pptx сохранен; текст полностью редактируемый в PowerPoint

Итог: Колода, которую вы можете продемонстрировать сегодня и отправить по электронной почте в формате .pptx завтра.

Подводные камни

В экспортированном формате .pptx отсутствует анимация. — HTML-анимация не повторяется; сохраните HTML для живых выступлений и .pptx для передачи

Сочетать с: mcp-echarts

Создайте объяснение истории прокрутки

👤 Технические писатели и маркетологи ⏱ ~60 min intermediate

Когда использовать: Вам нужна длинная вещь в среднем стиле с визуальными эффектами, вызываемыми прокруткой.

Поток

Выберите режим

Режим: Прокрутка истории. Содержание: эта статья. Добавляйте диаграммы и визуальные эффекты, активируемые прокруткой.✓ Скопировано

→ Результатом является прокручиваемая страница с разделами, закрепленными GSAP.
Настройте темп

Замедлите прокрутку раздела «Проблема».✓ Скопировано

→ График скраба изменен

Итог: Захватывающий фрагмент прокрутки, который ваши читатели действительно заканчивают.

Подводные камни

Перегрузка эффектами — Одна анимация на раздел; отдых должен быть тихим

Интерактивная демонстрационная колода для мастер-класса

👤 Преподаватели и DevRel проводят семинары ⏱ ~90 min intermediate

Когда использовать: Вам нужны встроенные слайды с небольшими интерактивными упражнениями.

Поток

Режим: Интерактивный

Режим: Интерактивная колода. Встройте поле ввода + Chart.js, которое обновляется в реальном времени.✓ Скопировано

→ Интерактивный элемент проводной; обновления диаграммы при вводе
Добавить опрос

Добавьте слайд «выберите один», который локально записывает клики и подсчитывает их.✓ Скопировано

→ Обновления счетчика только локально при нажатии

Итог: Живая колода без бэкенда.

Комбинации

Сочетайте с другими MCP — эффект x10

interactive-slides-skill + mcp-echarts

Создавайте диаграммы с помощью ECharts и встраивайте в колоду.

Отобразите диаграмму доходов с помощью mcp-echarts в формате SVG; встроить в слайд «Traction».✓ Скопировано

interactive-slides-skill + claude-code-design-skills

Примените жетоны бренда к теме колоды

Используйте жетоны бренда для палитры и типа колоды.✓ Скопировано

interactive-slides-skill + magic-ui-mcp

Выбор компонентов пользовательского интерфейса для режима интерактивной колоды

Интерактивный режим: используйте рамку Magic UI для слайда с логотипами доверия.✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать	Стоимость
/interactive-slides (SKILL)	mode + content + theme	В любой момент, когда вам понадобится колода или история-свиток из уже имеющегося у вас контента.	0

Стоимость и лимиты

Во что обходится

Квота API: Никто
Токенов на вызов: Умеренный — контент колоды имеет длину HTML.
Деньги: Бесплатно
Совет: Не превышайте 80 слов на каждый слайд; в противном случае колоды быстро раздуваются.

Безопасность

Права, секреты, радиус поражения

Хранение учётных данных: Никто

Исходящий трафик: GSAP, Google Fonts, Chart.js загружаются из CDN. Если вам нужен полностью автономный режим, попросите навык инлайнить библиотеки.

Зависимости CDN означают, что получателям нужна сеть для просмотра анимации. Для демо-версий с воздушным зазором запросите встроенную сборку.
Интерактивные колоды хранят состояние в localStorage; обратите внимание, будет ли колода общедоступной.

Устранение неполадок

Частые ошибки и исправления

Слайды не продвигаются по клавишам со стрелками

Убедитесь, что прослушиватель клавиатуры привязан; некоторые браузеры блокируют, когда HTML-файл обслуживается из файла://. Попробуйте локальный сервер: python3 -m http.server.

Проверить: Open dev console; inspect keyup handler

Экспорт отсутствующих анимаций в формате .pptx

Анимации поддерживаются только HTML; .pptx экспортирует текст + макет. Используйте HTML для прямых трансляций; .pptx для передачи электронной почты.

Проверить: Open the .pptx in PowerPoint; check layout only

Шрифты выглядят неправильно в офлайн-режиме

Попросите специалиста внедрить @font-face с URI данных base64 для автономного использования.

Проверить: Open airplane-mode; load the HTML

Альтернативы

Interactive Slides в сравнении

Альтернатива	Когда использовать	Компромисс
mck-ppt-design-skill	Вам нужны слайды в формате .pptx в консультационном стиле, а не HTML.	Менее интерактивный; больше слайд-полировки
mermaid-skill	Вам нужны диаграммы, а не колода	Другой артефакт
markmap-mcp-server	Интеллект-карта подходит лучше, чем колода	Другая форма повествования

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills