mosaicstack/stack
15
0
Fork 1
Code Issues 321 Pull Requests 12 Actions Packages Projects Releases 15 Wiki Activity
Files
0ca192baaaa8797520aba1ff85f706cf5ba0cc7a
stack/packages/mosaic/framework/skills/slidev/SKILL.md
T
fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree 
963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.
2026-08-19 14:37:17 -05:00

184 lines
12 KiB
Markdown
Raw Blame History

---
name: slidev
description: Create and present web-based slides for developers using Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, or teaching materials.
---
# Slidev - Presentation Slides for Developers
Web-based slides maker built on Vite, Vue, and Markdown.
## When to Use
- Technical presentations 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
## Quick Start
```bash
pnpm create slidev # Create project
pnpm run dev # Start dev server
pnpm run export # Export to PDF
```
## Basic Syntax
```md
---
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](references/core-syntax.md) |
| Animations | v-click, v-clicks, motion, transitions | [core-animations](references/core-animations.md) |
| Headmatter | Deck-wide configuration options | [core-headmatter](references/core-headmatter.md) |
| Frontmatter | Per-slide configuration options | [core-frontmatter](references/core-frontmatter.md) |
| CLI Commands | Dev, build, export, theme commands | [core-cli](references/core-cli.md) |
| Components | Built-in Vue components | [core-components](references/core-components.md) |
| Layouts | Built-in slide layouts | [core-layouts](references/core-layouts.md) |
| Exporting | PDF, PPTX, PNG export options | [core-exporting](references/core-exporting.md) |
| Hosting | Build and deploy to various platforms | [core-hosting](references/core-hosting.md) |
| Global Context | $nav, $slidev, composables API | [core-global-context](references/core-global-context.md) |
## Feature Reference
### Code & Editor
| Feature | Usage | Reference |
| ------------------------ | ------------------------------------- | -------------------------------------------------------------- |
| Line highlighting | ` ```ts {2,3} ` | [code-line-highlighting](references/code-line-highlighting.md) |
| Click-based highlighting | ` ```ts {1\|2-3\|all} ` | [code-line-highlighting](references/code-line-highlighting.md) |
| Line numbers | `lineNumbers: true` or `{lines:true}` | [code-line-numbers](references/code-line-numbers.md) |
| Scrollable code | `{maxHeight:'100px'}` | [code-max-height](references/code-max-height.md) |
| Code tabs | `::code-group` (requires `mdc: true`) | [code-groups](references/code-groups.md) |
| Monaco editor | ` ```ts {monaco} ` | [editor-monaco](references/editor-monaco.md) |
| Run code | ` ```ts {monaco-run} ` | [editor-monaco-run](references/editor-monaco-run.md) |
| Edit files | `<<< ./file.ts {monaco-write}` | [editor-monaco-write](references/editor-monaco-write.md) |
| Code animations | ` ````md magic-move ` | [code-magic-move](references/code-magic-move.md) |
| TypeScript types | ` ```ts twoslash ` | [code-twoslash](references/code-twoslash.md) |
| Import code | `<<< @/snippets/file.js` | [code-import-snippet](references/code-import-snippet.md) |
### Diagrams & Math
| Feature | Usage | Reference |
| ----------------- | ------------------------- | -------------------------------------------------- |
| Mermaid diagrams | ` ```mermaid ` | [diagram-mermaid](references/diagram-mermaid.md) |
| PlantUML diagrams | ` ```plantuml ` | [diagram-plantuml](references/diagram-plantuml.md) |
| LaTeX math | `$inline$` or `$$block$$` | [diagram-latex](references/diagram-latex.md) |
### Layout & Styling
| Feature | Usage | Reference |
| ------------------ | ------------------------------------- | ---------------------------------------------------------- |
| Canvas size | `canvasWidth`, `aspectRatio` | [layout-canvas-size](references/layout-canvas-size.md) |
| Zoom slide | `zoom: 0.8` | [layout-zoom](references/layout-zoom.md) |
| Scale elements | `<Transform :scale="0.5">` | [layout-transform](references/layout-transform.md) |
| Layout slots | `::right::`, `::default::` | [layout-slots](references/layout-slots.md) |
| Scoped CSS | `<style>` in slide | [style-scoped](references/style-scoped.md) |
| Global layers | `global-top.vue`, `global-bottom.vue` | [layout-global-layers](references/layout-global-layers.md) |
| Draggable elements | `v-drag`, `<v-drag>` | [layout-draggable](references/layout-draggable.md) |
| Icons | `<mdi-icon-name />` | [style-icons](references/style-icons.md) |
### Animation & Interaction
| Feature | Usage | Reference |
| ----------------- | ----------------------------------- | -------------------------------------------------------------- |
| Click animations | `v-click`, `<v-clicks>` | [core-animations](references/core-animations.md) |
| Rough markers | `v-mark.underline`, `v-mark.circle` | [animation-rough-marker](references/animation-rough-marker.md) |
| Drawing mode | Press `C` or config `drawings:` | [animation-drawing](references/animation-drawing.md) |
| Direction styles | `forward:delay-300` | [style-direction](references/style-direction.md) |
| Note highlighting | `[click]` in notes | [animation-click-marker](references/animation-click-marker.md) |
### Syntax Extensions
| Feature | Usage | Reference |
| ----------------- | ----------------------------------- | ---------------------------------------------------------------------- |
| MDC syntax | `mdc: true` + `{style="color:red"}` | [syntax-mdc](references/syntax-mdc.md) |
| Block frontmatter | ` ```yaml ` instead of `---` | [syntax-block-frontmatter](references/syntax-block-frontmatter.md) |
| Import slides | `src: ./other.md` | [syntax-importing-slides](references/syntax-importing-slides.md) |
| Merge frontmatter | Main entry wins | [syntax-frontmatter-merging](references/syntax-frontmatter-merging.md) |
### Presenter & Recording
| Feature | Usage | Reference |
| -------------- | ------------------------------------- | ---------------------------------------------------------- |
| Recording | Press `G` for camera | [presenter-recording](references/presenter-recording.md) |
| Timer | `duration: 30min`, `timer: countdown` | [presenter-timer](references/presenter-timer.md) |
| Remote control | `slidev --remote` | [presenter-remote](references/presenter-remote.md) |
| Ruby text | `notesAutoRuby:` | [presenter-notes-ruby](references/presenter-notes-ruby.md) |
### Export & Build
| Feature | Usage | Reference |
| -------------- | ----------------------------------- | -------------------------------------------------------- |
| Export options | `slidev export` | [core-exporting](references/core-exporting.md) |
| Build & deploy | `slidev build` | [core-hosting](references/core-hosting.md) |
| Build with PDF | `download: true` | [build-pdf](references/build-pdf.md) |
| Cache images | Automatic for remote URLs | [build-remote-assets](references/build-remote-assets.md) |
| OG image | `seoMeta.ogImage` or `og-image.png` | [build-og-image](references/build-og-image.md) |
| SEO tags | `seoMeta:` | [build-seo-meta](references/build-seo-meta.md) |
### Editor & Tools
| Feature | Usage | Reference |
| ----------------- | ------------------------ | -------------------------------------------------- |
| Side editor | Click edit icon | [editor-side](references/editor-side.md) |
| VS Code extension | Install `antfu.slidev` | [editor-vscode](references/editor-vscode.md) |
| Prettier | `prettier-plugin-slidev` | [editor-prettier](references/editor-prettier.md) |
| Eject theme | `slidev theme eject` | [tool-eject-theme](references/tool-eject-theme.md) |
### Lifecycle & API
| Feature | Usage | Reference |
| -------------- | ---------------------------------- | -------------------------------------------------------- |
| Slide hooks | `onSlideEnter()`, `onSlideLeave()` | [api-slide-hooks](references/api-slide-hooks.md) |
| Navigation API | `$nav`, `useNav()` | [core-global-context](references/core-global-context.md) |
## 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
Reference in New Issue View Git Blame Copy Permalink