slidev

Создаёт и презентует веб-слайд-деки для разработчиков на основе Markdown, Vue-компонентов, подсветки кода и анимаций. Подходит для технических презентаций, докладов, разборов кода и обучающих материалов.

SLSlidev official Разработка ★ 48.9k

Что делает навык

Slidev — это веб-инструмент для создания презентаций на основе Markdown, Vue и Vite, оптимизированный для технических докладов. Он позволяет включать анимированный код, диаграммы, LaTeX-формулы и интерактивные демо-версии прямо в слайды.

Когда применять

  • Технические презентации и доклады с живыми примерами кода и подсветкой синтаксиса.
  • Обучающие материалы и воркшопы с пошаговым разбором кода (code walkthroughs).
  • Создание интерактивных демо с использованием редактора Monaco или запускаемого кода.
  • Подготовка материалов с математическими уравнениями (LaTeX) и диаграммами (Mermaid, PlantUML).
  • Запись презентаций с заметками спикера и последующим экспортом в PDF или PPTX.

Как работает

  1. Создать проект командой `pnpm create slidev` и запустить сервер разработки через `pnpm run dev`.
  2. Написать структуру слайдов в Markdown, используя `---` для разделения, frontmatter для конфигурации и HTML-комментарии для заметок.
  3. Добавлять код с подсветкой, анимациями (`v-click`) и интерактивными элементами (Monaco, run, tabs).
  4. Включать диаграммы (Mermaid, PlantUML) и математические формулы (LaTeX) в блоки кода.
  5. Экспортировать презентацию в PDF/PPTX командой `pnpm run export` (требуется playwright-chromium) или собрать статический SPA через `pnpm run build`.
  6. При необходимости использовать встроенные компоненты, макеты и глобальные контексты ($nav, $slidev) для кастомизации.

Примеры запросов агенту

Создай презентацию на Slidev с тремя слайдами: заголовок, пример кода на TypeScript с подсветкой строк 2 и 3, и диаграмма Mermaid.
Подготовь технический доклад для воркшопа, где на слайдах можно редактировать код в реальном времени с помощью редактора Monaco.
Экспортируй текущую презентацию Slidev в PDF-файл, убедившись, что установлены все необходимые зависимости для экспорта.

Что понадобится

  • Node.js и пакетный менеджер pnpm
  • playwright-chromium (для экспорта в PDF/PPTX/PNG)
  • VS Code расширение antfu.slidev (опционально, для удобства редактирования)

Описание составлено по SKILL.md навыка, сверено 06.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «slidevjs-slidev» из репозитория: # https://github.com/slidevjs/slidev
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r slidevjs-slidev/ ~/.claude/skills/slidevjs-slidev/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.