slidev

slidevjs/slidev · Agent Skill

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

Обзор

Автор	slidevjsОрганизация
Репозиторий	slidevjs/slidev ↗
Папка скилла	`slidev`
Звёзды	49 230
Форки	2 248
Файлы	55
Лицензия	MIT
Обновлён	23 октября 2026 г.
Ссылки	Исходник скилла ↗ · Репозиторий ↗

Проверка Mozgi

Что мы нашли в файлах скилла. Подробности — по подписке.

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

низкий риск · явных рисков не найдено — полный отчёт покажет детали

Совместимость

только инструкции — подходит большинству агентов

Похожие скиллы

найдено 72 похожих скилла

Ещё в подписке

Установка

Скилл — это папка с файлом SKILL.md. Выберите своего агента и скопируйте команды в терминал (macOS, Linux или Git Bash на Windows) в корне проекта.

Скопируйте промпт и вставьте в Claude, Codex или другого ассистента: он сам проверит скилл и подключит его.

Установи мне скилл «slidev» с mozgi.io (https://mozgi.io/skills/antfu-slidev/).

1. Скачай архив: https://mozgi.io/skills/antfu-slidev/download
   Если не скачивается — возьми папку скилла из исходника: https://github.com/slidevjs/slidev/tree/main/skills/slidev
2. Прочитай SKILL.md и остальные файлы. Проверь, что скилл безопасен: нет скрытых команд, отправки данных наружу или скриптов, которые делают не то, что описано. Если что-то подозрительно — остановись и скажи мне.
3. Положи папку «slidev» в папку скиллов своего агента: .claude/skills/ для Claude Code, .agents/skills/ для Codex, .cursor/skills/ для Cursor, .gemini/skills/ для Gemini CLI. В проекте — внутри проекта, иначе в домашней папке (~/.claude/skills/ и т. п.).
4. Убедись, что получилось <папка скиллов>/slidev/SKILL.md.
5. Коротко расскажи, что умеет этот скилл, и предложи попробовать его на моей задаче.

Если какой-то шаг не можешь сделать сам — подскажи, что нажать или ввести.

git clone --depth 1 --branch main https://github.com/slidevjs/slidev.git /tmp/slidev
mkdir -p .claude/skills
cp -r /tmp/slidev/skills/slidev .claude/skills/slidev

Перезапустите Claude Code — скилл появится в списке, вызвать вручную: /slidev. Для всех проектов сразу — папка ~/.claude/skills.

git clone --depth 1 --branch main https://github.com/slidevjs/slidev.git /tmp/slidev
mkdir -p .agents/skills
cp -r /tmp/slidev/skills/slidev .agents/skills/slidev

Codex ищет скиллы в .agents/skills от текущей папки до корня репозитория; вызвать вручную — /skills или $slidev. Для всех проектов — ~/.agents/skills.

git clone --depth 1 --branch main https://github.com/slidevjs/slidev.git /tmp/slidev
mkdir -p .cursor/skills
cp -r /tmp/slidev/skills/slidev .cursor/skills/slidev

Cursor подхватит скилл при запуске; вызвать вручную — «/» в чате агента. Cursor также читает .claude/skills и .agents/skills. Для всех проектов — ~/.cursor/skills.

git clone --depth 1 --branch main https://github.com/slidevjs/slidev.git /tmp/slidev
mkdir -p .gemini/skills
cp -r /tmp/slidev/skills/slidev .gemini/skills/slidev

Gemini CLI сам предложит включить скилл, когда задача подходит, — вы подтверждаете. Для всех проектов — ~/.gemini/skills.

Файлы скилла

55 файлов Скачать ZIP

Просмотрите SKILL.md и сопутствующие файлы перед установкой. Клик по файлу — предпросмотр.

Содержимое SKILL.md

Оригинальный текст автора · только чтение

Slidev - Presentation Slides for Developers

Web-based slides maker built on Vite, Vue, and Markdown.

When to Use

Technical presentations or slidedecks with live code examples
Syntax-highlighted code snippets with animations
Interactive demos (Monaco editor, runnable code)
Mathematical equations (LaTeX) or diagrams (Mermaid, PlantUML)
Record presentations with presenter notes
Export to PDF, PPTX, or host as SPA
Code walkthroughs for developer talks or workshops

Quick Start

pnpm create slidev    # Create project
pnpm run dev          # Start dev server (opens http://localhost:3030)
pnpm run build        # Build static SPA
pnpm run export       # Export to PDF (requires playwright-chromium)

Verify: After pnpm run dev, confirm slides load at http://localhost:3030. After pnpm run export, check the output PDF exists in the project root.

Basic Syntax

---
theme: default
title: My Presentation
---

# First Slide

Content here

---

# Second Slide

More content

<!--
Presenter notes go here
-->

--- separates slides
First frontmatter = headmatter (deck config)
HTML comments = presenter notes

Core References

| Topic | Description | Reference |

|-------|-------------|-----------|

| Markdown Syntax | Slide separators, frontmatter, notes, code blocks | core-syntax ↗ |

| Animations | v-click, v-clicks, motion, transitions | core-animations ↗ |

| Headmatter | Deck-wide configuration options | core-headmatter ↗ |

| Frontmatter | Per-slide configuration options | core-frontmatter ↗ |

| CLI Commands | Dev, build, export, theme commands | core-cli ↗ |

| Components | Built-in Vue components | core-components ↗ |

| Layouts | Built-in slide layouts | core-layouts ↗ |

| Exporting | PDF, PPTX, PNG export options | core-exporting ↗ |

| Hosting | Build and deploy to various platforms | core-hosting ↗ |

| Global Context | $nav, $slidev, composables API | core-global-context ↗ |

Feature Reference

Code & Editor

| Feature | Usage | Reference |

|---------|-------|-----------|

| Line highlighting | ` `ts {2,3} ` | code-line-highlighting ↗ |

| Click-based highlighting | ` `ts {1\|2-3\|all} ` | code-line-highlighting ↗ |

| Line numbers | lineNumbers: true or {lines:true} | code-line-numbers ↗ |

| Scrollable code | {maxHeight:'100px'} | code-max-height ↗ |

| Code tabs | ::code-group (requires comark: true) | code-groups ↗ |

| Monaco editor | ` `ts {monaco} ` | editor-monaco ↗ |

| Run code | ` `ts {monaco-run} ` | editor-monaco-run ↗ |

| Edit files | <<< ./file.ts {monaco-write} | editor-monaco-write ↗ |

| Code animations | ` ``md magic-move ` | code-magic-move ↗ |

| TypeScript types | ` `ts twoslash ` | code-twoslash ↗ |

| Import code | <<< @/snippets/file.js | code-import-snippet ↗ |

Diagrams & Math

| Feature | Usage | Reference |

|---------|-------|-----------|

| Mermaid diagrams | ` `mermaid ` | diagram-mermaid ↗ |

| PlantUML diagrams | ` `plantuml ` | diagram-plantuml ↗ |

| LaTeX math | $inline$ or $$block$$ | diagram-latex ↗ |

Layout & Styling

| Feature | Usage | Reference |

|---------|-------|-----------|

| Canvas size | canvasWidth, aspectRatio | layout-canvas-size ↗ |

| Zoom slide | zoom: 0.8 | layout-zoom ↗ |

| Scale elements | <Transform :scale="0.5"> | layout-transform ↗ |

| Layout slots | ::right::, ::default:: | layout-slots ↗ |

| Scoped CSS | <style> in slide | style-scoped ↗ |

| Global layers | global-top.vue, global-bottom.vue | layout-global-layers ↗ |

| Draggable elements | v-drag, <v-drag> | layout-draggable ↗ |

| Icons | <mdi-icon-name /> | style-icons ↗ |

Animation & Interaction

| Feature | Usage | Reference |

|---------|-------|-----------|

| Click animations | v-click, <v-clicks> | core-animations ↗ |

| Rough markers | v-mark.underline, v-mark.circle | animation-rough-marker ↗ |

| Drawing mode | Press C or config drawings: | animation-drawing ↗ |

| Direction styles | forward:delay-300 | style-direction ↗ |

| Note highlighting | [click] in notes | animation-click-marker ↗ |

Syntax Extensions

| Feature | Usage | Reference |

|---------|-------|-----------|

| Comark syntax | comark: true + {style="color:red"} | syntax-comark ↗ |

| Block frontmatter | ` `yaml instead of ---` | syntax-block-frontmatter ↗ |

| Import slides | src: ./other.md | syntax-importing-slides ↗ |

| Merge frontmatter | Main entry wins | syntax-frontmatter-merging ↗ |

Presenter & Recording

| Feature | Usage | Reference |

|---------|-------|-----------|

| Recording | Press G for camera | presenter-recording ↗ |

| Timer | duration: 30min, timer: countdown | presenter-timer ↗ |

| Remote control | slidev --remote | presenter-remote ↗ |

| Ruby text | notesAutoRuby: | presenter-notes-ruby ↗ |

Export & Build

| Feature | Usage | Reference |

|---------|-------|-----------|

| Export options | slidev export | core-exporting ↗ |

| Build & deploy | slidev build | core-hosting ↗ |

| Build with PDF | download: true | build-pdf ↗ |

| Cache images | Automatic for remote URLs | build-remote-assets ↗ |

| OG image | seoMeta.ogImage or og-image.png | build-og-image ↗ |

| SEO tags | seoMeta: | build-seo-meta ↗ |

Export prerequisite: pnpm add -D playwright-chromium is required for PDF/PPTX/PNG export. If export fails with a browser error, install this dependency first.

Editor & Tools

| Feature | Usage | Reference |

|---------|-------|-----------|

| Side editor | Click edit icon | editor-side ↗ |

| VS Code extension | Install antfu.slidev | editor-vscode ↗ |

| Prettier | prettier-plugin-slidev | editor-prettier ↗ |

| Eject theme | slidev theme eject | tool-eject-theme ↗ |

| MCP server (AI agents) | http://localhost:<port>/__mcp or slidev mcp | tool-mcp ↗ |

Lifecycle & API

| Feature | Usage | Reference |

|---------|-------|-----------|

| Slide hooks | onSlideEnter(), onSlideLeave() | api-slide-hooks ↗ |

| Navigation API | $nav, useNav() | core-global-context ↗ |

Common Layouts

| Layout | Purpose |

|--------|---------|

| cover | Title/cover slide |

| center | Centered content |

| default | Standard slide |

| two-cols | Two columns (use ::right::) |

| two-cols-header | Header + two columns |

| image / image-left / image-right | Image layouts |

| iframe / iframe-left / iframe-right | Embed URLs |

| quote | Quotation |

| section | Section divider |

| fact / statement | Data/statement display |

| intro / end | Intro/end slides |

Resources

Documentation: https://sli.dev
Theme Gallery: https://sli.dev/resources/theme-gallery
Showcases: https://sli.dev/resources/showcases

Вопросы и ответы

Что делает скилл slidev?

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

Как установить slidev?

Откройте блок «Установка» на этой странице и выберите своего агента — Claude Code, Codex, Cursor или Gemini CLI: там готовые команды, которые копируют папку скилла в нужное место. Либо скопируйте промпт из вкладки «Через ассистента» — ассистент сам проверит и подключит скилл.

С какими нейросетями работает slidev?

Скиллы — это обычные инструкции в Markdown (формат Agent Skills), поэтому slidev подходит любому агенту, который читает SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode и другие. Модель загружает инструкции только когда задача подходит под описание скилла.

Скилл slidev бесплатный?

Скилл опубликован автором slidevjs в открытом доступе под лицензией MIT. Сам скилл ничего не стоит — вы платите только своему провайдеру нейросети за использованные токены.

Безопасно ли устанавливать скиллы?

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

Чем скилл отличается от MCP-сервера или плагина?

MCP-сервер и плагин дают модели новые инструменты — код, который выполняется и возвращает результат. Скилл даёт знания и порядок действий: как подходить к задаче, какие шаги делать и как выглядит хороший результат. Ему не нужен сервер или ключ API.