slidev-quick-start by yoanbernabeu/slidev-skills
npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-quick-start本技能帮助您开始使用 Slidev,这个专为开发者设计的演示文稿框架。您将学习如何创建新项目、理解基本语法并运行您的第一个演示文稿。
npm init slidev@latest
这个交互式命令将:
# 创建项目目录
mkdir my-presentation
cd my-presentation
# 初始化 package.json
npm init -y
# 安装 Slidev
npm install @slidev/cli @slidev/theme-default
# 创建幻灯片文件
touch slides.md
将以下脚本添加到 package.json:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
{
"scripts": {
"dev": "slidev --open",
"build": "slidev build",
"export": "slidev export"
}
}
创建 slides.md 并填入以下内容:
---
theme: default
title: My First Presentation
info: |
## My First Slidev Presentation
Created with Slidev
class: text-center
drawings:
persist: false
transition: slide-left
---
# Welcome to Slidev
Presentation slides for developers
<div class="pt-12">
<span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
Press Space for next page <carbon:arrow-right class="inline"/>
</span>
</div>
---
# What is Slidev?
Slidev is a slides maker and presenter designed for developers
- 📝 **Markdown-based** - focus on content with Markdown
- 🎨 **Themable** - themes can be shared and installed
- 🧑💻 **Developer Friendly** - code highlighting, live coding
- 🤹 **Interactive** - embed Vue components
- 🎥 **Recording** - built-in recording and camera view
- 📤 **Portable** - export to PDF, PPTX, or host online
---
layout: center
---
# Thank You!
[Documentation](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev)
# 启动开发服务器
npm run dev
# 或直接使用 npx
npx slidev
您的演示文稿将在 http://localhost:3030 地址可用。
| 快捷键 | 操作 |
|---|---|
Space / → | 下一张幻灯片/动画 |
← | 上一张幻灯片/动画 |
↑ / ↓ | 导航幻灯片(跳过动画) |
o | 概览模式 |
d | 切换深色模式 |
f | 全屏 |
g | 跳转到指定幻灯片 |
Esc | 退出概览/全屏模式 |
使用 ---(三个破折号)并用空行包围来分隔幻灯片:
# Slide 1
Content for slide 1
---
# Slide 2
Content for slide 2
---
# Slide 3
Content for slide 3
第一张幻灯片的 frontmatter 用于配置整个演示文稿:
---
# 演示文稿元数据
theme: seriph # 主题名称
title: My Presentation # 浏览器标签页标题
info: | # 演示文稿信息
## About
Description here
# 外观
colorSchema: auto # auto, light, 或 dark
class: text-center # 第一张幻灯片的 CSS 类
background: /image.jpg # 背景图片
# 功能
drawings:
persist: false # 重新加载时保留绘图
transition: slide-left # 默认过渡效果
highlighter: shiki # 代码高亮器
# 导出
exportFilename: slides # 导出文件名
download: true # 显示下载按钮
---
使用 frontmatter 为每张幻灯片指定布局:
---
layout: cover
background: https://cover.sli.dev
---
# Cover Slide
---
layout: two-cols
---
# Left Column
Content here
::right::
# Right Column
Content here
---
layout: center
---
# Centered Content
# Code Example
```typescript
interface User {
id: number
name: string
email: string
}
function greet(user: User): string {
return `Hello, ${user.name}!`
}
\`\`\`
在幻灯片末尾添加 HTML 注释来添加演讲者备注:
# My Slide
Important content here
<!--
Speaker notes go here.
- Remember to mention X
- Demo the feature Y
-->
slides.md 提交到 Git❌ 分隔符周围缺少空行
# Slide 1
---
# Slide 2
✓ 正确的分隔符语法
# Slide 1
---
# Slide 2
❌ Frontmatter 缩进无效
---
theme:seriph # 冒号后缺少空格
---
✓ 正确的 Frontmatter
---
theme: seriph
---
创建新的 Slidev 演示文稿时,请提供:
项目结构:
- slides.md (主演示文稿文件)
- package.json (包含 dev/build/export 脚本)
- 可选:public/ 目录用于存放资源文件
第一张幻灯片 Frontmatter:
---
theme: [推荐的主题]
title: [演示文稿标题]
---
建议的幻灯片结构:
1. 标题/封面幻灯片
2. 介绍/议程
3. 主要内容幻灯片
4. 总结/结论
5. 致谢/联系方式幻灯片
后续步骤:
- 运行 `npm run dev` 启动
- 编辑 slides.md 添加内容
- 使用 `o` 键进入概览模式
每周安装量
93
仓库
GitHub 星标数
22
首次出现
2026年1月25日
安全审计
安装于
opencode76
codex73
gemini-cli73
github-copilot72
cursor71
kimi-cli67
This skill helps you get started with Slidev, the presentation framework for developers. You'll learn how to create a new project, understand the basic syntax, and run your first presentation.
npm init slidev@latest
This interactive command will:
# Create project directory
mkdir my-presentation
cd my-presentation
# Initialize package.json
npm init -y
# Install Slidev
npm install @slidev/cli @slidev/theme-default
# Create slides file
touch slides.md
Add scripts to package.json:
{
"scripts": {
"dev": "slidev --open",
"build": "slidev build",
"export": "slidev export"
}
}
Create slides.md with this content:
---
theme: default
title: My First Presentation
info: |
## My First Slidev Presentation
Created with Slidev
class: text-center
drawings:
persist: false
transition: slide-left
---
# Welcome to Slidev
Presentation slides for developers
<div class="pt-12">
<span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
Press Space for next page <carbon:arrow-right class="inline"/>
</span>
</div>
---
# What is Slidev?
Slidev is a slides maker and presenter designed for developers
- 📝 **Markdown-based** - focus on content with Markdown
- 🎨 **Themable** - themes can be shared and installed
- 🧑💻 **Developer Friendly** - code highlighting, live coding
- 🤹 **Interactive** - embed Vue components
- 🎥 **Recording** - built-in recording and camera view
- 📤 **Portable** - export to PDF, PPTX, or host online
---
layout: center
---
# Thank You!
[Documentation](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev)
# Start development server
npm run dev
# Or directly with npx
npx slidev
Your presentation will be available at http://localhost:3030
| Shortcut | Action |
|---|---|
Space / → | Next slide/animation |
← | Previous slide/animation |
↑ / ↓ | Navigate slides (skip animations) |
o | Overview mode |
d | Toggle dark mode |
Use --- (three dashes) surrounded by blank lines to separate slides:
# Slide 1
Content for slide 1
---
# Slide 2
Content for slide 2
---
# Slide 3
Content for slide 3
The first slide's frontmatter configures the entire presentation:
---
# Presentation metadata
theme: seriph # Theme name
title: My Presentation # Browser tab title
info: | # Presentation info
## About
Description here
# Appearance
colorSchema: auto # auto, light, or dark
class: text-center # CSS classes for first slide
background: /image.jpg # Background image
# Features
drawings:
persist: false # Save drawings between reloads
transition: slide-left # Default transition
highlighter: shiki # Code highlighter
# Export
exportFilename: slides # Export filename
download: true # Show download button
---
Specify layouts per slide using frontmatter:
---
layout: cover
background: https://cover.sli.dev
---
# Cover Slide
---
layout: two-cols
---
# Left Column
Content here
::right::
# Right Column
Content here
---
layout: center
---
# Centered Content
# Code Example
\`\`\`typescript
interface User {
id: number
name: string
email: string
}
function greet(user: User): string {
return `Hello, ${user.name}!`
}
\`\`\`
Add HTML comments at the end of a slide for speaker notes:
# My Slide
Important content here
<!--
Speaker notes go here.
- Remember to mention X
- Demo the feature Y
-->
slides.md to Git❌ Missing blank lines around separators
# Slide 1
---
# Slide 2
✓ Correct separator syntax
# Slide 1
---
# Slide 2
❌ Invalid frontmatter indentation
---
theme:seriph # Missing space after colon
---
✓ Correct frontmatter
---
theme: seriph
---
When creating a new Slidev presentation, provide:
PROJECT STRUCTURE:
- slides.md (main presentation file)
- package.json (with dev/build/export scripts)
- Optional: public/ directory for assets
FIRST SLIDE FRONTMATTER:
---
theme: [recommended theme]
title: [presentation title]
---
SUGGESTED SLIDE STRUCTURE:
1. Title/Cover slide
2. Introduction/Agenda
3. Main content slides
4. Summary/Conclusion
5. Thank you/Contact slide
NEXT STEPS:
- Run `npm run dev` to start
- Edit slides.md to add content
- Use `o` key for overview
Weekly Installs
93
Repository
GitHub Stars
22
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubWarnSocketPassSnykPass
Installed on
opencode76
codex73
gemini-cli73
github-copilot72
cursor71
kimi-cli67
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
120,000 周安装
f| Fullscreen |
g | Go to slide |
Esc | Exit overview/fullscreen |