slidevавтор Slidev

Slidev Skill.

Скилл Claude Code и Codex для создания презентаций PPT и слайдов: презентации для разработчиков с Markdown, компонентами Vue, подсветкой кода и анимацией.

Presentations
HTML-слайды

Скачать OpenDesign Инструкция по использованию

slidevjs/slidev · skills/slidev/SKILL.mdSKILL.md

--- name: slidev description: Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks. --- ## When to Use ## Quick Start ## Basic Syntax ## Common Layouts

Метаданные и заголовки разделов из исходного файла от 14.09.2026 · 8 896 символов полностью

01 Что делает

Что делает skill slidev в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Slidev — это веб-инструмент для создания слайдов для разработчиков, построенный на Vite, Vue и Markdown. Он создаёт технические презентации с подсветкой синтаксиса в сниппетах кода, живыми примерами кода на редакторе Monaco, интерактивными демо, уравнениями LaTeX и диаграммами Mermaid или PlantUML. Слайды пишутся в Markdown с разделителями ---, первый блок frontmatter выступает как headmatter для настроек деки, а заметки докладчика оформляются как HTML-комментарии.

Slidev поддерживает анимации на основе кликов (v-click, magic-move), выделение строк, вкладки с кодом, запись с камеры, удалённое управление и таймер. Экспорт в PDF или PPTX требует playwright-chromium. Команды сборки включают pnpm run dev для локального просмотра на localhost:3030, pnpm run export для PDF и pnpm run build для развёртывания статичного SPA.

Что он выдаёт

Экспорт презентации в PDF

Смотрите пример запроса ↗

Как это работает

01
Инициализация проекта
Запустите pnpm create slidev, чтобы создать новый проект презентации Slidev.
02
Написание слайдов в Markdown
Разделяйте слайды с помощью ---, настраивайте параметры деки в первом блоке frontmatter и добавляйте заметки докладчика в HTML-комментариях.
03
Запуск сервера разработки
Запустите pnpm run dev, чтобы запустить локальный сервер и открыть презентацию по адресу http://localhost:3030.
04
Экспорт или сборка
Используйте pnpm run export для вывода в PDF или pnpm run build для создания статичного SPA для хостинга.

02 Определите своё применение

Когда использовать навык slidev

Используйте навык slidev в Claude Code или Codex, когда задача — презентации и слайды такого рода. Возможности и ограничения ниже взяты из файла самого навыка.

Хорошо подходит

Технические презентации или слайдеки с живыми примерами кода
Фрагменты кода с подсветкой синтаксиса и анимацией
Интерактивные демо на редакторе Monaco или исполняемый код
Математические уравнения на LaTeX или диаграммы на Mermaid и PlantUML
Разбор кода для выступлений разработчиков или воркшопов

Знайте границы

Требуется SlidevSKILL.md указывает эту зависимость; навык не работает без неё в вашем проекте.

Что предоставить

Сниппеты кодаВнешние файлы с кодом, импортированные с синтаксисом <<< @/snippets/file.js, для отображения на слайдах.

03 Внутри скилла

Правила, которые skill slidev задаёт Claude Code и Codex

5 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задает агенту, — та часть файла, которая меняет результат.

Headmatter — это первый frontmatter
Первый блок frontmatter в файле настраивает параметры для всей деки, а не отдельных слайдов.
Заметки докладчика в HTML-комментариях
Пишите заметки докладчика внутри блоков HTML-комментариев в каждом слайде. Они не будут отображаться на самом слайде.
Для экспорта требуется playwright-chromium
Установите pnpm add -D playwright-chromium перед запуском команд экспорта. Если экспорт завершается с ошибкой браузера, значит эта зависимость отсутствует.
Главный файл имеет приоритет при слиянии
При импорте слайдов через src, frontmatter из главного файла имеет приоритет над frontmatter импортированного файла.
Comark включает расширенный синтаксис
Установите comark: true в headmatter, чтобы включить группы кода и встроенные атрибуты стиля, например {style="color:red"}.

04 Применение

Установить slidev в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавить slidev в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/slidevjs/slidev --skill slidev

Общая форма CLI для skills для skills/slidev/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу с PPT и слайд-деками

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt

Create a technical presentation for a React workshop with three sections: component lifecycle, hooks deep-dive, and performance optimization. Include live Monaco editor demos showing useState and useEffect patterns, syntax-highlighted TypeScript code with click-based line reveals for the reconciliation algorithm explanation, a Mermaid diagram of the component tree, and a two-column layout comparing class components and functional components. Add presenter notes with timing estimates for each section and configure a 45-minute countdown timer.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

После запуска pnpm run dev убедитесь, что слайды загружаются по адресу http://localhost:3030
После запуска pnpm run export убедитесь, что итоговый PDF появился в корневой директории проекта
Если экспорт завершается с ошибкой браузера, сначала установите зависимость playwright-chromium
Проверьте анимации по кликам, переходя по слайдам, чтобы убедиться, что элементы v-click появляются последовательно

В OpenDesign импортируйте slidev по ссылке на SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Slidev
Repository: github.com/slidevjs/slidev Ветка main
Файл skill: skills/slidev/SKILL.md Контрольная сумма содержимого записана при проверке; коммит a8d8ff7
License: MIT Из LICENSE.
Звёзды репозитория: 48 658 Снимок GitHub сделан 14.09.2026 для всего репозитория slidevjs/slidev. Не является рейтингом или счётчиком использования для slidev.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Когда использоватьПеречисляет сценарии применения: технические презентации, фрагменты кода, интерактивные демо, формулы, диаграммы, запись, форматы экспорта
Быстрый стартКоманды для создания проекта, запуска dev-сервера, сборки SPA и экспорта в PDF
Базовый синтаксисРазделитель слайдов, настройка headmatter, заметки докладчика в HTML-комментариях
Основные материалыТаблица основных тем: синтаксис, анимации, frontmatter, CLI, компоненты, макеты, экспорт, хостинг, глобальный контекст
Справочник по функциямПодробные таблицы по подсветке кода, редактору Monaco, диаграммам, математике, макетам, стилизации, анимациям, расширениям синтаксиса, инструментам докладчика, вариантам экспорта
Стандартные макетыВстроенные макеты: обложка, центрирование, два столбца, варианты с изображениями, варианты с iframe, цитата, раздел, факт, вступление, финал
РесурсыСсылки на документацию, галерею тем и примеры

Собственное описание skill

«Создавайте и представляйте веб-презентации для разработчиков с помощью Slidev с использованием Markdown, Vue-компонентов, подсветки кода, анимации и интерактивных возможностей. Используйте для технических презентаций, докладов на конференциях, разбора кода, учебных материалов или презентаций для разработчиков».

Описание из front-matter в SKILL.md. Полный файл содержит около 8 896 символов. Прочитать полный файл на GitHub.

Slidev

Запустите slidev на реальной задаче создания презентации и слайдов.

Скачайте OpenDesign, импортируйте slidev по ссылке на SKILL.md, вставьте промпт выше и ознакомьтесь с планом перед результатом.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/slidevjs/slidev --skill slidev