Skip to content

Commit 3384d3b

Browse files
harrybinharrybin
committed
feat: add Slidev skills documentation for various features
- Introduced PlantUML diagrams support with usage examples. - Added Monaco editor features for running and writing code directly in the editor. - Documented Prettier plugin for formatting Slidev markdown files. - Included integrated editor for live editing of slides. - Added VS Code extension for managing slides visually. - Configured slide canvas size and draggable elements for presentations. - Implemented global layers for persistent components across slides. - Introduced slot sugar for shorthand syntax in layouts. - Added Transform component for scaling elements without affecting layout. - Documented zoom functionality for individual slides. - Implemented presenter notes with auto ruby text and recording capabilities. - Added remote access features for sharing presentations. - Introduced presenter timer with configuration options. - Documented navigation direction-based styling and usage of open-source icons. - Added scoped CSS styles for individual slides. - Implemented block frontmatter for syntax highlighting in slides. - Documented Comark syntax support for enhanced Markdown features. - Added frontmatter merging rules for importing slides. - Documented importing slides for reusability. - Added eject theme command for local customization. - Created skills-lock.json for Slidev skills management.
1 parent 49535f5 commit 3384d3b

57 files changed

Lines changed: 4332 additions & 1 deletion

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/skills/slidev/README.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Slidev Skills for Claude Code
2+
3+
Agent skills that help Claude Code understand and work with [Slidev](https://sli.dev) presentations.
4+
5+
## Installation
6+
7+
```bash
8+
npx skills add slidevjs/slidev
9+
```
10+
11+
This will add the Slidev skill to your Claude Code configuration.
12+
13+
## What's Included
14+
15+
The Slidev skill provides Claude Code with knowledge about:
16+
17+
- **Core Syntax** - Markdown syntax, slide separators, frontmatter
18+
- **Animations** - Click animations, transitions, motion effects
19+
- **Code Features** - Line highlighting, Monaco editor, code groups, magic-move
20+
- **Diagrams** - Mermaid, PlantUML, LaTeX math
21+
- **Layouts** - Built-in layouts, slots, global layers
22+
- **Presenter Mode** - Recording, timer, remote access
23+
- **Exporting** - PDF, PPTX, PNG, SPA hosting
24+
25+
## Usage
26+
27+
Once installed, Claude Code will automatically use Slidev knowledge when:
28+
29+
- Creating new presentations
30+
- Adding slides with code examples
31+
- Setting up animations and transitions
32+
- Configuring themes and layouts
33+
- Exporting presentations
34+
35+
### Example Prompts
36+
37+
```
38+
Create a Slidev presentation about TypeScript generics with code examples
39+
```
40+
41+
```
42+
Add a two-column slide with code on the left and explanation on the right
43+
```
44+
45+
```
46+
Set up click animations to reveal bullet points one by one
47+
```
48+
49+
```
50+
Configure the presentation for PDF export with speaker notes
51+
```
52+
53+
## Documentation
54+
55+
- [Slidev Documentation](https://sli.dev)
56+
- [Theme Gallery](https://sli.dev/resources/theme-gallery)
57+
- [Showcases](https://sli.dev/resources/showcases)
58+
59+
## License
60+
61+
MIT

‎.github/skills/slidev/SKILL.md‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
---
2+
name: slidev
3+
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.
4+
---
5+
6+
# Slidev - Presentation Slides for Developers
7+
8+
Web-based slides maker built on Vite, Vue, and Markdown.
9+
10+
## When to Use
11+
12+
- Technical presentations or slidedecks with live code examples
13+
- Syntax-highlighted code snippets with animations
14+
- Interactive demos (Monaco editor, runnable code)
15+
- Mathematical equations (LaTeX) or diagrams (Mermaid, PlantUML)
16+
- Record presentations with presenter notes
17+
- Export to PDF, PPTX, or host as SPA
18+
- Code walkthroughs for developer talks or workshops
19+
20+
## Quick Start
21+
22+
```bash
23+
pnpm create slidev # Create project
24+
pnpm run dev # Start dev server (opens http://localhost:3030)
25+
pnpm run build # Build static SPA
26+
pnpm run export # Export to PDF (requires playwright-chromium)
27+
```
28+
29+
**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.
30+
31+
## Basic Syntax
32+
33+
```md
34+
---
35+
theme: default
36+
title: My Presentation
37+
---
38+
39+
# First Slide
40+
41+
Content here
42+
43+
---
44+
45+
# Second Slide
46+
47+
More content
48+
49+
<!--
50+
Presenter notes go here
51+
-->
52+
```
53+
54+
- `---` separates slides
55+
- First frontmatter = headmatter (deck config)
56+
- HTML comments = presenter notes
57+
58+
## Core References
59+
60+
| Topic | Description | Reference |
61+
|-------|-------------|-----------|
62+
| Markdown Syntax | Slide separators, frontmatter, notes, code blocks | [core-syntax](references/core-syntax.md) |
63+
| Animations | v-click, v-clicks, motion, transitions | [core-animations](references/core-animations.md) |
64+
| Headmatter | Deck-wide configuration options | [core-headmatter](references/core-headmatter.md) |
65+
| Frontmatter | Per-slide configuration options | [core-frontmatter](references/core-frontmatter.md) |
66+
| CLI Commands | Dev, build, export, theme commands | [core-cli](references/core-cli.md) |
67+
| Components | Built-in Vue components | [core-components](references/core-components.md) |
68+
| Layouts | Built-in slide layouts | [core-layouts](references/core-layouts.md) |
69+
| Exporting | PDF, PPTX, PNG export options | [core-exporting](references/core-exporting.md) |
70+
| Hosting | Build and deploy to various platforms | [core-hosting](references/core-hosting.md) |
71+
| Global Context | $nav, $slidev, composables API | [core-global-context](references/core-global-context.md) |
72+
73+
## Feature Reference
74+
75+
### Code & Editor
76+
77+
| Feature | Usage | Reference |
78+
|---------|-------|-----------|
79+
| Line highlighting | `` ```ts {2,3} `` | [code-line-highlighting](references/code-line-highlighting.md) |
80+
| Click-based highlighting | `` ```ts {1\|2-3\|all} `` | [code-line-highlighting](references/code-line-highlighting.md) |
81+
| Line numbers | `lineNumbers: true` or `{lines:true}` | [code-line-numbers](references/code-line-numbers.md) |
82+
| Scrollable code | `{maxHeight:'100px'}` | [code-max-height](references/code-max-height.md) |
83+
| Code tabs | `::code-group` (requires `comark: true`) | [code-groups](references/code-groups.md) |
84+
| Monaco editor | `` ```ts {monaco} `` | [editor-monaco](references/editor-monaco.md) |
85+
| Run code | `` ```ts {monaco-run} `` | [editor-monaco-run](references/editor-monaco-run.md) |
86+
| Edit files | `<<< ./file.ts {monaco-write}` | [editor-monaco-write](references/editor-monaco-write.md) |
87+
| Code animations | `` ````md magic-move `` | [code-magic-move](references/code-magic-move.md) |
88+
| TypeScript types | `` ```ts twoslash `` | [code-twoslash](references/code-twoslash.md) |
89+
| Import code | `<<< @/snippets/file.js` | [code-import-snippet](references/code-import-snippet.md) |
90+
91+
### Diagrams & Math
92+
93+
| Feature | Usage | Reference |
94+
|---------|-------|-----------|
95+
| Mermaid diagrams | `` ```mermaid `` | [diagram-mermaid](references/diagram-mermaid.md) |
96+
| PlantUML diagrams | `` ```plantuml `` | [diagram-plantuml](references/diagram-plantuml.md) |
97+
| LaTeX math | `$inline$` or `$$block$$` | [diagram-latex](references/diagram-latex.md) |
98+
99+
### Layout & Styling
100+
101+
| Feature | Usage | Reference |
102+
|---------|-------|-----------|
103+
| Canvas size | `canvasWidth`, `aspectRatio` | [layout-canvas-size](references/layout-canvas-size.md) |
104+
| Zoom slide | `zoom: 0.8` | [layout-zoom](references/layout-zoom.md) |
105+
| Scale elements | `<Transform :scale="0.5">` | [layout-transform](references/layout-transform.md) |
106+
| Layout slots | `::right::`, `::default::` | [layout-slots](references/layout-slots.md) |
107+
| Scoped CSS | `<style>` in slide | [style-scoped](references/style-scoped.md) |
108+
| Global layers | `global-top.vue`, `global-bottom.vue` | [layout-global-layers](references/layout-global-layers.md) |
109+
| Draggable elements | `v-drag`, `<v-drag>` | [layout-draggable](references/layout-draggable.md) |
110+
| Icons | `<mdi-icon-name />` | [style-icons](references/style-icons.md) |
111+
112+
### Animation & Interaction
113+
114+
| Feature | Usage | Reference |
115+
|---------|-------|-----------|
116+
| Click animations | `v-click`, `<v-clicks>` | [core-animations](references/core-animations.md) |
117+
| Rough markers | `v-mark.underline`, `v-mark.circle` | [animation-rough-marker](references/animation-rough-marker.md) |
118+
| Drawing mode | Press `C` or config `drawings:` | [animation-drawing](references/animation-drawing.md) |
119+
| Direction styles | `forward:delay-300` | [style-direction](references/style-direction.md) |
120+
| Note highlighting | `[click]` in notes | [animation-click-marker](references/animation-click-marker.md) |
121+
122+
### Syntax Extensions
123+
124+
| Feature | Usage | Reference |
125+
|---------|-------|-----------|
126+
| Comark syntax | `comark: true` + `{style="color:red"}` | [syntax-comark](references/syntax-comark.md) |
127+
| Block frontmatter | `` ```yaml `` instead of `---` | [syntax-block-frontmatter](references/syntax-block-frontmatter.md) |
128+
| Import slides | `src: ./other.md` | [syntax-importing-slides](references/syntax-importing-slides.md) |
129+
| Merge frontmatter | Main entry wins | [syntax-frontmatter-merging](references/syntax-frontmatter-merging.md) |
130+
131+
### Presenter & Recording
132+
133+
| Feature | Usage | Reference |
134+
|---------|-------|-----------|
135+
| Recording | Press `G` for camera | [presenter-recording](references/presenter-recording.md) |
136+
| Timer | `duration: 30min`, `timer: countdown` | [presenter-timer](references/presenter-timer.md) |
137+
| Remote control | `slidev --remote` | [presenter-remote](references/presenter-remote.md) |
138+
| Ruby text | `notesAutoRuby:` | [presenter-notes-ruby](references/presenter-notes-ruby.md) |
139+
140+
### Export & Build
141+
142+
| Feature | Usage | Reference |
143+
|---------|-------|-----------|
144+
| Export options | `slidev export` | [core-exporting](references/core-exporting.md) |
145+
| Build & deploy | `slidev build` | [core-hosting](references/core-hosting.md) |
146+
| Build with PDF | `download: true` | [build-pdf](references/build-pdf.md) |
147+
| Cache images | Automatic for remote URLs | [build-remote-assets](references/build-remote-assets.md) |
148+
| OG image | `seoMeta.ogImage` or `og-image.png` | [build-og-image](references/build-og-image.md) |
149+
| SEO tags | `seoMeta:` | [build-seo-meta](references/build-seo-meta.md) |
150+
151+
**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.
152+
153+
### Editor & Tools
154+
155+
| Feature | Usage | Reference |
156+
|---------|-------|-----------|
157+
| Side editor | Click edit icon | [editor-side](references/editor-side.md) |
158+
| VS Code extension | Install `antfu.slidev` | [editor-vscode](references/editor-vscode.md) |
159+
| Prettier | `prettier-plugin-slidev` | [editor-prettier](references/editor-prettier.md) |
160+
| Eject theme | `slidev theme eject` | [tool-eject-theme](references/tool-eject-theme.md) |
161+
162+
### Lifecycle & API
163+
164+
| Feature | Usage | Reference |
165+
|---------|-------|-----------|
166+
| Slide hooks | `onSlideEnter()`, `onSlideLeave()` | [api-slide-hooks](references/api-slide-hooks.md) |
167+
| Navigation API | `$nav`, `useNav()` | [core-global-context](references/core-global-context.md) |
168+
169+
## Common Layouts
170+
171+
| Layout | Purpose |
172+
|--------|---------|
173+
| `cover` | Title/cover slide |
174+
| `center` | Centered content |
175+
| `default` | Standard slide |
176+
| `two-cols` | Two columns (use `::right::`) |
177+
| `two-cols-header` | Header + two columns |
178+
| `image` / `image-left` / `image-right` | Image layouts |
179+
| `iframe` / `iframe-left` / `iframe-right` | Embed URLs |
180+
| `quote` | Quotation |
181+
| `section` | Section divider |
182+
| `fact` / `statement` | Data/statement display |
183+
| `intro` / `end` | Intro/end slides |
184+
185+
## Resources
186+
187+
- Documentation: https://sli.dev
188+
- Theme Gallery: https://sli.dev/resources/theme-gallery
189+
- Showcases: https://sli.dev/resources/showcases

‎.github/skills/slidev/references/animation-click-marker.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
name: click-marker
3+
description: Highlight and auto-scroll presenter notes based on click progress
4+
---
5+
6+
# Click Markers
7+
8+
Highlight and auto-scroll presenter notes based on click progress.
9+
10+
## Syntax
11+
12+
Add `[click]` markers in presenter notes:
13+
14+
```md
15+
<!--
16+
Content before the first click
17+
18+
[click] This will be highlighted after the first click
19+
20+
Also highlighted after the first click
21+
22+
- [click] This list element highlights after the second click
23+
24+
[click:3] Last click (skip two clicks)
25+
-->
26+
```
27+
28+
## Behavior
29+
30+
- Notes between markers highlight in sync with slide progress
31+
- Auto-scrolls presenter view to active section
32+
- Use `[click:{n}]` to skip to specific click number
33+
34+
## Requirements
35+
36+
- Only works in presenter mode
37+
- Notes must be HTML comments at end of slide

‎.github/skills/slidev/references/animation-drawing.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
name: drawing
3+
description: Draw and annotate slides during presentation
4+
---
5+
6+
# Drawing & Annotations
7+
8+
Draw and annotate slides during presentation. Powered by drauu.
9+
10+
## Enable Drawing
11+
12+
Click the pen icon in the navigation bar or press `C`.
13+
14+
## Stylus Support
15+
16+
Stylus pens (iPad + Apple Pencil) work automatically - draw with pen, navigate with fingers.
17+
18+
## Persist Drawings
19+
20+
Save drawings as SVGs and include in exports:
21+
22+
```md
23+
---
24+
drawings:
25+
persist: true
26+
---
27+
```
28+
29+
Drawings saved to `.slidev/drawings/`.
30+
31+
## Disable Drawing
32+
33+
Entirely:
34+
```md
35+
---
36+
drawings:
37+
enabled: false
38+
---
39+
```
40+
41+
Only in development:
42+
```md
43+
---
44+
drawings:
45+
enabled: dev
46+
---
47+
```
48+
49+
Only in presenter mode:
50+
```md
51+
---
52+
drawings:
53+
presenterOnly: true
54+
---
55+
```
56+
57+
## Sync Settings
58+
59+
Disable sync across instances:
60+
61+
```md
62+
---
63+
drawings:
64+
syncAll: false
65+
---
66+
```
67+
68+
Only presenter's drawings sync to others.

0 commit comments

Comments
 (0)