slidev

slidevjs/slidev · Agent Skill

使用Slidev，開發人員可以透過Markdown、Vue元件、程式碼高亮和動畫來建立簡報。

總覽

發布者	slidevjs組織
儲存庫	slidevjs/slidev ↗
技能資料夾	`slidev`
星	49,230
分支	2,248
附帶檔案	55
授權	MIT
最近更新	2026年10月23日
連結	技能原始碼 ↗ · 儲存庫 ↗

Mozgi 檢查

我們在技能檔案中發現的內容。詳細資訊需訂閱。

安全性

低風險 · 未發現明顯風險 — 完整報告會顯示細節

相容性

僅含說明 — 適用於多數代理

相似技能

找到 72 個相似技能

訂閱另含

安裝

技能就是一個含 SKILL.md 的資料夾。選擇你的代理，在專案根目錄的終端機（macOS、Linux 或 Windows 的 Git Bash）執行指令。

把提示貼到 Claude、Codex 或其他助理：它會自行檢查並安裝技能。

Install the “slidev” skill from mozgi.io (https://mozgi.io/skills/antfu-slidev/) for me.

1. Download the archive: https://mozgi.io/skills/antfu-slidev/download
   If it fails, take the skill folder from the source: https://github.com/slidevjs/slidev/tree/main/skills/slidev
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “slidev” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/slidev/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

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 啟動時會載入技能；在 Agent 聊天輸入「/」呼叫。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 適用哪些 AI 模型？

技能是純 Markdown 指示（Agent Skills 格式），因此 slidev 適用任何讀取 SKILL.md 的代理：Claude Code、Codex、Cursor、Gemini CLI、GitHub Copilot、OpenCode 等。只有在任務符合技能描述時，模型才會載入指示。

slidev 是免費的嗎？

此技能由 slidevjs 公開發布，採用 MIT 授權。技能本身免費 — 你只需向 AI 供應商支付實際使用的 token 費用。

安裝技能安全嗎？

技能是代理會遵循的指示，安裝前請閱讀 SKILL.md 及相關檔案。技能資料夾中的腳本只有在代理執行時才會運行 — 留意它的動作，不要授予多餘權限。

技能和 MCP 伺服器或外掛有何不同？

MCP 伺服器或外掛為模型提供新工具 — 會執行並回傳結果的程式碼。技能提供的是知識與流程：如何處理任務、要遵循哪些步驟、好的成果長什麼樣子。它不需要伺服器或 API 金鑰。

總覽

Mozgi 檢查

安裝

技能檔案

SKILL.md 內容

Slidev - Presentation Slides for Developers

When to Use

Quick Start

Basic Syntax

Core References

Feature Reference

Code & Editor

Diagrams & Math

Layout & Styling

Animation & Interaction

Syntax Extensions

Presenter & Recording

Export & Build

Editor & Tools

Lifecycle & API

Common Layouts

Resources

常見問題

相關技能