feat: Complete fleet — 94 skills across 10+ domains

Pulled ALL skills from 15 source repositories:
- anthropics/skills: 16 (docs, design, MCP, testing)
- obra/superpowers: 14 (TDD, debugging, agents, planning)
- coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth)
- better-auth/skills: 5 (auth patterns)
- vercel-labs/agent-skills: 5 (React, design, Vercel)
- antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo)
- Plus 13 individual skills from various repos

Mosaic Stack is not limited to coding — the Orchestrator and
subagents serve coding, business, design, marketing, writing,
logistics, analysis, and more.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

@@ -0,0 +1,37 @@
+---
+name: click-marker
+description: Highlight and auto-scroll presenter notes based on click progress
+---
+
+# Click Markers
+
+Highlight and auto-scroll presenter notes based on click progress.
+
+## Syntax
+
+Add `[click]` markers in presenter notes:
+
+```md
+<!--
+Content before the first click
+
+[click] This will be highlighted after the first click
+
+Also highlighted after the first click
+
+- [click] This list element highlights after the second click
+
+[click:3] Last click (skip two clicks)
+-->
+```
+
+## Behavior
+
+- Notes between markers highlight in sync with slide progress
+- Auto-scrolls presenter view to active section
+- Use `[click:{n}]` to skip to specific click number
+
+## Requirements
+
+- Only works in presenter mode
+- Notes must be HTML comments at end of slide

skills/slidev/references/animation-drawing.md

@@ -0,0 +1,68 @@
+---
+name: drawing
+description: Draw and annotate slides during presentation
+---
+
+# Drawing & Annotations
+
+Draw and annotate slides during presentation. Powered by drauu.
+
+## Enable Drawing
+
+Click the pen icon in the navigation bar or press `C`.
+
+## Stylus Support
+
+Stylus pens (iPad + Apple Pencil) work automatically - draw with pen, navigate with fingers.
+
+## Persist Drawings
+
+Save drawings as SVGs and include in exports:
+
+```md
+---
+drawings:
+  persist: true
+---
+```
+
+Drawings saved to `.slidev/drawings/`.
+
+## Disable Drawing
+
+Entirely:
+```md
+---
+drawings:
+  enabled: false
+---
+```
+
+Only in development:
+```md
+---
+drawings:
+  enabled: dev
+---
+```
+
+Only in presenter mode:
+```md
+---
+drawings:
+  presenterOnly: true
+---
+```
+
+## Sync Settings
+
+Disable sync across instances:
+
+```md
+---
+drawings:
+  syncAll: false
+---
+```
+
+Only presenter's drawings sync to others.

skills/slidev/references/animation-rough-marker.md

@@ -0,0 +1,53 @@
+---
+name: rough-marker
+description: Hand-drawn style highlighting using Rough Notation
+---
+
+# Rough Markers
+
+Hand-drawn style highlighting using Rough Notation.
+
+## v-mark Directive
+
+```html
+<span v-mark>Important text</span>
+```
+
+## Marker Types
+
+```html
+<span v-mark.underline>Underlined</span>
+<span v-mark.circle>Circled</span>
+<span v-mark.highlight>Highlighted</span>
+<span v-mark.strike-through>Struck through</span>
+<span v-mark.box>Boxed</span>
+```
+
+## Colors
+
+```html
+<span v-mark.red>Red marker</span>
+<span v-mark.blue>Blue marker</span>
+```
+
+Custom color:
+```html
+<span v-mark="{ color: '#234' }">Custom color</span>
+```
+
+## Click Timing
+
+Works like v-click:
+
+```html
+<span v-mark="5">Appears on click 5</span>
+<span v-mark="'+1'">Next click</span>
+```
+
+## Full Options
+
+```html
+<span v-mark="{ at: 5, color: '#234', type: 'circle' }">
+  Custom marker
+</span>
+```

skills/slidev/references/api-slide-hooks.md

@@ -0,0 +1,37 @@
+---
+name: slide-hooks
+description: Lifecycle hooks for slide components
+---
+
+# Slide Hooks
+
+Lifecycle hooks for slide components.
+
+## Available Hooks
+
+```ts
+import { onSlideEnter, onSlideLeave, useIsSlideActive } from '@slidev/client'
+
+const isActive = useIsSlideActive()
+
+onSlideEnter(() => {
+  // Called when slide becomes active
+})
+
+onSlideLeave(() => {
+  // Called when slide becomes inactive
+})
+```
+
+## Important
+
+Do NOT use `onMounted` / `onUnmounted` in slides - component instance persists even when slide is inactive.
+
+Use `onSlideEnter` and `onSlideLeave` instead.
+
+## Use Cases
+
+- Start/stop animations
+- Play/pause media
+- Initialize/cleanup resources
+- Track analytics

skills/slidev/references/build-og-image.md

@@ -0,0 +1,36 @@
+---
+name: og-image
+description: Configure Open Graph preview image for social sharing
+---
+
+# Open Graph Image
+
+Set preview image for social media sharing.
+
+## Custom URL
+
+```md
+---
+seoMeta:
+  ogImage: https://url.to.your.image.png
+---
+```
+
+## Local Image
+
+Place `./og-image.png` in project root - Slidev uses it automatically.
+
+## Auto-generate
+
+Generate from first slide:
+
+```md
+---
+seoMeta:
+  ogImage: auto
+---
+```
+
+Uses Playwright to capture first slide. Requires playwright to be installed.
+
+Generated image saved as `./og-image.png` - can be committed to repo.

skills/slidev/references/build-pdf.md

@@ -0,0 +1,40 @@
+---
+name: pdf
+description: Include downloadable PDF in SPA build
+---
+
+# Generate PDF when Building
+
+Generate a downloadable PDF alongside your built slides.
+
+## Enable in Headmatter
+
+```md
+---
+download: true
+---
+```
+
+This generates a PDF and adds a download button to the built slides.
+
+## Custom PDF URL
+
+Skip generation and use an existing PDF:
+
+```md
+---
+download: 'https://example.com/my-talk.pdf'
+---
+```
+
+## CLI Option
+
+```bash
+slidev build --download
+```
+
+## Export Options
+
+Configure PDF export settings via:
+- CLI: `slidev build --download --with-clicks --timeout 60000`
+- Headmatter: Set `exportFilename`, `withClicks`, etc.

skills/slidev/references/build-remote-assets.md

@@ -0,0 +1,34 @@
+---
+name: remote-assets
+description: Bundle remote images and assets for offline use
+---
+
+# Bundle Remote Assets
+
+Remote images are automatically cached on first run for faster loading.
+
+## Remote Images
+
+```md
+![Remote Image](https://sli.dev/favicon.png)
+```
+
+Cached automatically by vite-plugin-remote-assets.
+
+## Local Images
+
+Place in `public/` folder and reference with leading slash:
+
+```md
+![Local Image](/pic.png)
+```
+
+Do NOT use relative paths like `./pic.png`.
+
+## Custom Styling
+
+Convert to img tag for custom sizes/styles:
+
+```html
+<img src="/pic.png" class="m-40 h-40 rounded shadow" />
+```

skills/slidev/references/build-seo-meta.md

@@ -0,0 +1,43 @@
+---
+name: seo-meta
+description: Configure SEO and social media meta tags
+---
+
+# SEO Meta Tags
+
+Configure social media and search engine meta tags.
+
+## Configuration
+
+```yaml
+---
+seoMeta:
+  ogTitle: Slidev Starter Template
+  ogDescription: Presentation slides for developers
+  ogImage: https://cover.sli.dev
+  ogUrl: https://example.com
+  twitterCard: summary_large_image
+  twitterTitle: Slidev Starter Template
+  twitterDescription: Presentation slides for developers
+  twitterImage: https://cover.sli.dev
+  twitterSite: username
+  twitterUrl: https://example.com
+---
+```
+
+## Available Options
+
+**Open Graph (Facebook, LinkedIn):**
+- `ogTitle` - Title
+- `ogDescription` - Description
+- `ogImage` - Preview image URL
+- `ogUrl` - Canonical URL
+
+**Twitter Card:**
+- `twitterCard` - Card type (summary, summary_large_image)
+- `twitterTitle` - Title
+- `twitterDescription` - Description
+- `twitterImage` - Preview image URL
+- `twitterSite` - Twitter username
+
+Powered by unhead.

skills/slidev/references/code-groups.md

@@ -0,0 +1,64 @@
+---
+name: code-groups
+description: Group multiple code blocks with tabs and automatic icons
+---
+
+# Code Groups
+
+Group multiple code blocks with tabs and automatic icons.
+
+## Requirements
+
+Enable MDC syntax in headmatter:
+
+```md
+---
+mdc: true
+---
+```
+
+## Syntax
+
+````md
+::code-group
+
+```sh [npm]
+npm i @slidev/cli
+```
+
+```sh [yarn]
+yarn add @slidev/cli
+```
+
+```sh [pnpm]
+pnpm add @slidev/cli
+```
+
+::
+````
+
+## Title Icon Matching
+
+Icons auto-match by title name. Install `@iconify-json/vscode-icons` for built-in icons.
+
+Supported: npm, yarn, pnpm, bun, deno, vue, react, typescript, javascript, and many more.
+
+## Custom Icons
+
+Use `~icon~` syntax in title:
+
+````md
+```js [npm ~i-uil:github~]
+console.log('Hello!')
+```
+````
+
+Requires:
+1. Install icon collection: `pnpm add @iconify-json/uil`
+2. Add to safelist in `uno.config.ts`:
+
+```ts
+export default defineConfig({
+  safelist: ['i-uil:github']
+})
+```

skills/slidev/references/code-import-snippet.md

@@ -0,0 +1,55 @@
+---
+name: import-snippet
+description: Import code from external files into slides with optional region selection
+---
+
+# Import Code Snippets
+
+Import code from external files into slides.
+
+## Basic Syntax
+
+```md
+<<< @/snippets/snippet.js
+```
+
+`@` = package root directory. Recommended: place snippets in `@/snippets/`.
+
+## Import Region
+
+Use VS Code region syntax:
+
+```md
+<<< @/snippets/snippet.js#region-name
+```
+
+## Specify Language
+
+```md
+<<< @/snippets/snippet.js ts
+```
+
+## With Features
+
+Combine with line highlighting, Monaco editor:
+
+```md
+<<< @/snippets/snippet.js {2,3|5}{lines:true}
+<<< @/snippets/snippet.js ts {monaco}{height:200px}
+```
+
+## Placeholder
+
+Use `{*}` for line highlighting placeholder:
+
+```md
+<<< @/snippets/snippet.js {*}{lines:true}
+```
+
+## Monaco Write
+
+Link editor to file for live editing:
+
+```md
+<<< ./some-file.ts {monaco-write}
+```

skills/slidev/references/code-line-highlighting.md

@@ -0,0 +1,50 @@
+---
+name: line-highlighting
+description: Highlight specific lines in code blocks with static or click-based dynamic highlighting
+---
+
+# Line Highlighting
+
+Highlight specific lines in code blocks.
+
+## Static Highlighting
+
+````md
+```ts {2,3}
+function add(
+  a: Ref<number> | number,
+  b: Ref<number> | number
+) {
+  return computed(() => unref(a) + unref(b))
+}
+```
+````
+
+## Dynamic (Click-based)
+
+Use `|` to separate stages:
+
+````md
+```ts {2-3|5|all}
+function add(
+  a: Ref<number> | number,
+  b: Ref<number> | number
+) {
+  return computed(() => unref(a) + unref(b))
+}
+```
+````
+
+Click progression: lines 2-3 → line 5 → all lines
+
+## Special Values
+
+- `hide` - Hide the code block
+- `none` - Show code without highlighting
+- `all` - Highlight all lines
+
+````md
+```ts {hide|none|all}
+// Hidden → No highlight → All highlighted
+```
+````

skills/slidev/references/code-line-numbers.md

@@ -0,0 +1,46 @@
+---
+name: line-numbers
+description: Enable line numbering for code blocks globally or per-block
+---
+
+# Code Block Line Numbers
+
+Enable line numbering for code blocks.
+
+## Global Setting
+
+Enable for all code blocks in headmatter:
+
+```md
+---
+lineNumbers: true
+---
+```
+
+## Per-Block Setting
+
+````md
+```ts {6,7}{lines:true,startLine:5}
+function add(
+  a: Ref<number> | number,
+  b: Ref<number> | number
+) {
+  return computed(() => unref(a) + unref(b))
+}
+```
+````
+
+## Options
+
+- `lines: true/false` - Enable/disable line numbers
+- `startLine: number` - Starting line number (default: 1)
+
+## With Line Highlighting
+
+Use `{*}` as placeholder when combining with other features:
+
+````md
+```ts {*}{lines:true,startLine:5}
+// code here
+```
+````

skills/slidev/references/code-magic-move.md

@@ -0,0 +1,57 @@
+---
+name: magic-move
+description: Animate code changes with smooth transitions between code blocks
+---
+
+# Shiki Magic Move
+
+Animate code changes with smooth transitions (like Keynote's Magic Move).
+
+## Basic Usage
+
+`````md
+````md magic-move
+```js
+console.log(`Step ${1}`)
+```
+```js
+console.log(`Step ${1 + 1}`)
+```
+```ts
+console.log(`Step ${3}` as string)
+```
+````
+`````
+
+Note: Use 4 backticks for the wrapper.
+
+## With Line Highlighting
+
+`````md
+````md magic-move {at:4, lines: true}
+```js {*|1|2-5}
+let count = 1
+function add() {
+  count++
+}
+```
+
+Non-code blocks in between are ignored.
+
+```js {*}{lines: false}
+let count = 1
+const add = () => count += 1
+```
+````
+`````
+
+## How It Works
+
+- Wraps multiple code blocks as one
+- Each block is a "step"
+- Morphs between steps on click
+- Syntax highlighting preserved during animation
+
+## Resources
+
+- Playground: https://shiki-magic-move.netlify.app/

skills/slidev/references/code-max-height.md

@@ -0,0 +1,37 @@
+---
+name: max-height
+description: Set a fixed height for code blocks with scrolling for long code
+---
+
+# Code Block Max Height
+
+Set a fixed height for code blocks with scrolling.
+
+## Usage
+
+````md
+```ts {2|3|7|12}{maxHeight:'100px'}
+function add(
+  a: Ref<number> | number,
+  b: Ref<number> | number
+) {
+  return computed(() => unref(a) + unref(b))
+}
+/// ...as many lines as you want
+const c = add(1, 2)
+```
+````
+
+## With Line Highlighting Placeholder
+
+Use `{*}` when you only need maxHeight:
+
+````md
+```ts {*}{maxHeight:'100px'}
+// long code here
+```
+````
+
+## Use Case
+
+When code is too long to fit on one slide but you want to show it all with scrolling.

skills/slidev/references/code-twoslash.md

@@ -0,0 +1,42 @@
+---
+name: twoslash
+description: Show TypeScript type information inline or on hover in code blocks
+---
+
+# TwoSlash Integration
+
+Show TypeScript type information inline or on hover.
+
+## Usage
+
+````md
+```ts twoslash
+import { ref } from 'vue'
+
+const count = ref(0)
+//            ^?
+```
+````
+
+## Features
+
+- Type information on hover
+- Inline type annotations with `^?`
+- Errors and warnings display
+- Full TypeScript compiler integration
+
+## Annotations
+
+```ts twoslash
+const count = ref(0)
+//            ^?
+// Shows: const count: Ref<number>
+```
+
+## Use Case
+
+Perfect for TypeScript/JavaScript teaching materials where showing types helps understanding.
+
+## Resources
+
+- TwoSlash docs: https://twoslash.netlify.app/

skills/slidev/references/core-animations.md

@@ -0,0 +1,196 @@
+---
+name: animations
+description: Click animations, motion effects, and slide transitions
+---
+
+# Animations
+
+Click animations, motion effects, and slide transitions.
+
+## Click Animations
+
+### v-click Directive
+
+```md
+<div v-click>Appears on click</div>
+<div v-click>Appears on next click</div>
+```
+
+### v-clicks Component
+
+Animate list items:
+
+```md
+<v-clicks>
+
+- Item 1
+- Item 2
+- Item 3
+
+</v-clicks>
+```
+
+With depth for nested lists:
+
+```md
+<v-clicks depth="2">
+
+- Parent 1
+  - Child 1
+  - Child 2
+- Parent 2
+
+</v-clicks>
+```
+
+### Click Positioning
+
+Relative positioning:
+```md
+<div v-click>1st (default)</div>
+<div v-click="+1">2nd</div>
+<div v-click="-1">Same as previous</div>
+```
+
+Absolute positioning:
+```md
+<div v-click="3">Appears on click 3</div>
+<div v-click="[2,5]">Visible clicks 2-5</div>
+```
+
+### v-after
+
+Show with previous element:
+
+```md
+<div v-click>Main element</div>
+<div v-after>Appears with main element</div>
+```
+
+### v-switch
+
+Conditional rendering by click:
+
+```md
+<v-switch>
+  <template #1>First state</template>
+  <template #2>Second state</template>
+  <template #3>Third state</template>
+</v-switch>
+```
+
+## Custom Click Count
+
+```md
+---
+clicks: 10
+---
+```
+
+Or starting from specific count:
+
+```md
+---
+clicksStart: 5
+---
+```
+
+## Motion Animations
+
+Using @vueuse/motion:
+
+```md
+<div
+  v-motion
+  :initial="{ x: -100, opacity: 0 }"
+  :enter="{ x: 0, opacity: 1 }"
+>
+  Animated content
+</div>
+```
+
+Click-based motion:
+
+```md
+<div
+  v-motion
+  :initial="{ scale: 1 }"
+  :click-1="{ scale: 1.5 }"
+  :click-2="{ scale: 1 }"
+>
+  Scales on clicks
+</div>
+```
+
+## Slide Transitions
+
+In headmatter (all slides):
+
+```md
+---
+transition: slide-left
+---
+```
+
+Per-slide:
+
+```md
+---
+transition: fade
+---
+```
+
+### Built-in Transitions
+
+- `fade` / `fade-out`
+- `slide-left` / `slide-right`
+- `slide-up` / `slide-down`
+- `view-transition` (View Transitions API)
+
+### Directional Transitions
+
+Different transitions for forward/backward:
+
+```md
+---
+transition: slide-left | slide-right
+---
+```
+
+### Custom Transitions
+
+Define CSS classes:
+
+```css
+.my-transition-enter-active,
+.my-transition-leave-active {
+  transition: all 0.5s ease;
+}
+.my-transition-enter-from,
+.my-transition-leave-to {
+  opacity: 0;
+  transform: translateX(100px);
+}
+```
+
+Use: `transition: my-transition`
+
+## CSS Classes
+
+Animation targets get these classes:
+- `.slidev-vclick-target` - Animated element
+- `.slidev-vclick-hidden` - Hidden state
+- `.slidev-vclick-current` - Current click target
+- `.slidev-vclick-prior` - Previously shown
+
+## Default Animation CSS
+
+```css
+.slidev-vclick-target {
+  transition: opacity 100ms ease;
+}
+.slidev-vclick-hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+```

skills/slidev/references/core-cli.md

@@ -0,0 +1,140 @@
+---
+name: cli
+description: Slidev command-line interface reference
+---
+
+# CLI Commands
+
+Slidev command-line interface reference.
+
+## Dev Server
+
+```bash
+slidev [entry]
+slidev slides.md
+```
+
+Options:
+| Option | Default | Description |
+|--------|---------|-------------|
+| `--port` | 3030 | Server port |
+| `--open` | false | Open browser |
+| `--remote [password]` | - | Enable remote access |
+| `--bind` | 0.0.0.0 | Bind address |
+| `--base` | / | Base URL path |
+| `--log` | warn | Log level |
+| `--force` | false | Force optimizer re-bundle |
+| `--theme` | - | Override theme |
+
+Examples:
+```bash
+slidev --port 8080 --open
+slidev --remote mypassword
+slidev --base /talks/my-talk/
+```
+
+## Build
+
+```bash
+slidev build [entry]
+```
+
+Options:
+| Option | Default | Description |
+|--------|---------|-------------|
+| `--out` | dist | Output directory |
+| `--base` | / | Base URL for deployment |
+| `--download` | false | Include PDF download |
+| `--theme` | - | Override theme |
+| `--without-notes` | false | Exclude presenter notes |
+
+Examples:
+```bash
+slidev build --base /my-repo/
+slidev build --download --out public
+slidev build slides1.md slides2.md  # Multiple builds
+```
+
+## Export
+
+```bash
+slidev export [entry]
+```
+
+Options:
+| Option | Default | Description |
+|--------|---------|-------------|
+| `--output` | - | Output filename |
+| `--format` | pdf | pdf / png / pptx / md |
+| `--timeout` | 30000 | Timeout per slide (ms) |
+| `--range` | - | Slide range (e.g., 1,4-7) |
+| `--dark` | false | Export dark mode |
+| `--with-clicks` | false | Include click steps |
+| `--with-toc` | false | PDF table of contents |
+| `--wait` | 0 | Wait ms before export |
+| `--wait-until` | networkidle | Wait condition |
+| `--omit-background` | false | Transparent background |
+| `--executable-path` | - | Browser path |
+
+Examples:
+```bash
+slidev export
+slidev export --format pptx
+slidev export --format png --range 1-5
+slidev export --with-clicks --dark
+slidev export --timeout 60000 --wait 2000
+```
+
+## Format
+
+```bash
+slidev format [entry]
+```
+
+Formats the slides markdown file.
+
+## Theme Eject
+
+```bash
+slidev theme eject [entry]
+```
+
+Options:
+| Option | Default | Description |
+|--------|---------|-------------|
+| `--dir` | theme | Output directory |
+| `--theme` | - | Theme to eject |
+
+Extracts theme to local directory for customization.
+
+## npm Script Usage
+
+In package.json:
+```json
+{
+  "scripts": {
+    "dev": "slidev",
+    "build": "slidev build",
+    "export": "slidev export"
+  }
+}
+```
+
+With arguments (note `--`):
+```bash
+npm run dev -- --port 8080 --open
+npm run export -- --format pptx
+```
+
+## Boolean Options
+
+```bash
+slidev --open           # Same as --open true
+slidev --no-open        # Same as --open false
+```
+
+## Install CLI Globally
+
+```bash
+npm i -g @slidev/cli
+```

skills/slidev/references/core-components.md

@@ -0,0 +1,197 @@
+---
+name: components
+description: Ready-to-use components in Slidev
+---
+
+# Built-in Components
+
+Ready-to-use components in Slidev.
+
+## Navigation
+
+### Link
+
+Navigate to slide:
+```md
+<Link to="5">Go to slide 5</Link>
+<Link to="intro">Go to intro</Link>  <!-- with routeAlias -->
+```
+
+### SlideCurrentNo / SlidesTotal
+
+```md
+Slide <SlideCurrentNo /> of <SlidesTotal />
+```
+
+### Toc (Table of Contents)
+
+```md
+<Toc />
+<Toc maxDepth="2" />
+<Toc columns="2" />
+```
+
+Props:
+- `columns` - Number of columns
+- `maxDepth` / `minDepth` - Heading depth filter
+- `mode` - 'all' | 'onlyCurrentTree' | 'onlySiblings'
+
+### TitleRenderer
+
+Render slide title:
+```md
+<TitleRenderer no="3" />
+```
+
+## Animations
+
+### VClick / VClicks
+
+```md
+<VClick>Shows on click</VClick>
+
+<VClicks>
+
+- Item 1
+- Item 2
+
+</VClicks>
+```
+
+### VAfter
+
+```md
+<VClick>First</VClick>
+<VAfter>Shows with first</VAfter>
+```
+
+### VSwitch
+
+```md
+<VSwitch>
+  <template #1>State 1</template>
+  <template #2>State 2</template>
+</VSwitch>
+```
+
+## Drawing
+
+### Arrow
+
+```md
+<Arrow x1="10" y1="10" x2="100" y2="100" />
+<Arrow x1="10" y1="10" x2="100" y2="100" two-way />
+```
+
+Props: `x1`, `y1`, `x2`, `y2`, `width`, `color`, `two-way`
+
+### VDragArrow
+
+Draggable arrow:
+```md
+<VDragArrow />
+```
+
+## Layout
+
+### Transform
+
+Scale elements:
+```md
+<Transform :scale="0.5">
+  <LargeContent />
+</Transform>
+```
+
+Props: `scale`, `origin`
+
+### AutoFitText
+
+Auto-sizing text:
+```md
+<AutoFitText :max="200" :min="50" modelValue="Hello" />
+```
+
+## Media
+
+### SlidevVideo
+
+```md
+<SlidevVideo v-click autoplay controls>
+  <source src="/video.mp4" type="video/mp4" />
+</SlidevVideo>
+```
+
+Props: `controls`, `autoplay`, `autoreset`, `poster`, `timestamp`
+
+### Youtube
+
+```md
+<Youtube id="dQw4w9WgXcQ" />
+<Youtube id="dQw4w9WgXcQ" width="600" height="400" />
+```
+
+### Tweet
+
+```md
+<Tweet id="1423789844234231808" />
+<Tweet id="1423789844234231808" :scale="0.8" />
+```
+
+## Conditional
+
+### LightOrDark
+
+```md
+<LightOrDark>
+  <template #dark>Dark mode content</template>
+  <template #light>Light mode content</template>
+</LightOrDark>
+```
+
+### RenderWhen
+
+```md
+<RenderWhen context="presenter">
+  Only in presenter mode
+</RenderWhen>
+```
+
+Context values:
+- `main` - Main presentation view
+- `visible` - Visible slides
+- `print` - Print/export mode
+- `slide` - Normal slide view
+- `overview` - Overview mode
+- `presenter` - Presenter mode
+- `previewNext` - Next slide preview
+
+## Branding
+
+### PoweredBySlidev
+
+```md
+<PoweredBySlidev />
+```
+
+## Draggable
+
+### VDrag
+
+```md
+<VDrag pos="myElement">
+  Draggable content
+</VDrag>
+```
+
+See [draggable](draggable.md) for details.
+
+## Component Auto-Import
+
+Components from these sources are auto-imported:
+1. Built-in components
+2. Theme components
+3. Addon components
+4. `./components/` directory
+
+No import statements needed.

skills/slidev/references/core-exporting.md

@@ -0,0 +1,148 @@
+---
+name: exporting
+description: Export presentations to PDF, PPTX, PNG, or Markdown
+---
+
+# Exporting Slides
+
+Export presentations to PDF, PPTX, PNG, or Markdown.
+
+## Browser Exporter
+
+Access at `http://localhost:3030/export`:
+- Select format and options
+- Preview and download
+
+## CLI Export
+
+Requires playwright:
+```bash
+pnpm add -D playwright-chromium
+```
+
+### PDF Export
+
+```bash
+slidev export
+slidev export --output my-slides.pdf
+```
+
+### PowerPoint Export
+
+```bash
+slidev export --format pptx
+```
+
+### PNG Export
+
+```bash
+slidev export --format png
+slidev export --format png --range 1-5
+```
+
+### Markdown Export
+
+```bash
+slidev export --format md
+```
+
+## Export Options
+
+### With Click Steps
+
+Export each click as separate page:
+```bash
+slidev export --with-clicks
+```
+
+### Dark Mode
+
+```bash
+slidev export --dark
+```
+
+### Slide Range
+
+```bash
+slidev export --range 1,4-7,10
+```
+
+### Table of Contents
+
+PDF with clickable outline:
+```bash
+slidev export --with-toc
+```
+
+### Timeout
+
+For slow-rendering slides:
+```bash
+slidev export --timeout 60000
+```
+
+### Wait
+
+Wait before capture:
+```bash
+slidev export --wait 2000
+```
+
+### Wait Until
+
+Wait condition:
+```bash
+slidev export --wait-until networkidle   # Default
+slidev export --wait-until domcontentloaded
+slidev export --wait-until load
+slidev export --wait-until none
+```
+
+### Transparent Background
+
+```bash
+slidev export --omit-background
+```
+
+### Custom Browser
+
+```bash
+slidev export --executable-path /path/to/chrome
+```
+
+## Headmatter Options
+
+```yaml
+---
+exportFilename: my-presentation
+download: true              # Add download button in build
+export:
+  format: pdf
+  timeout: 30000
+  withClicks: false
+---
+```
+
+## Troubleshooting
+
+### Missing Content
+
+Increase wait time:
+```bash
+slidev export --wait 3000 --timeout 60000
+```
+
+### Wrong Global Layer State
+
+Use `--per-slide` or use `slide-top.vue` instead of `global-top.vue`.
+
+### Broken Emojis
+
+Use system fonts or install emoji font on server.
+
+### CI/CD Export
+
+Install playwright browsers:
+```bash
+npx playwright install chromium
+```

skills/slidev/references/core-frontmatter.md

@@ -0,0 +1,195 @@
+---
+name: frontmatter
+description: Configuration options for individual slides
+---
+
+# Per-Slide Frontmatter
+
+Configuration options for individual slides.
+
+## Layout
+
+```yaml
+---
+layout: center
+---
+```
+
+Available layouts: `default`, `cover`, `center`, `two-cols`, `two-cols-header`, `image`, `image-left`, `image-right`, `iframe`, `iframe-left`, `iframe-right`, `quote`, `section`, `statement`, `fact`, `full`, `intro`, `end`, `none`
+
+## Background
+
+```yaml
+---
+background: /image.jpg
+backgroundSize: cover
+class: text-white
+---
+```
+
+## Click Count
+
+```yaml
+---
+clicks: 5                   # Total clicks for this slide
+clicksStart: 0              # Starting click number
+---
+```
+
+## Transitions
+
+```yaml
+---
+transition: fade            # Slide transition
+---
+```
+
+Or different for forward/backward:
+
+```yaml
+---
+transition: slide-left | slide-right
+---
+```
+
+## Zoom
+
+```yaml
+---
+zoom: 0.8                   # Scale content (0.8 = 80%)
+---
+```
+
+## Hide Slide
+
+```yaml
+---
+disabled: true              # Hide this slide
+# or
+hide: true
+---
+```
+
+## Table of Contents
+
+```yaml
+---
+hideInToc: true             # Hide from Toc component
+level: 2                    # Override heading level
+title: Custom Title         # Override slide title
+---
+```
+
+## Import External File
+
+```yaml
+---
+src: ./slides/intro.md      # Import markdown file
+---
+```
+
+With specific slides:
+
+```yaml
+---
+src: ./other.md#2,5-7       # Import slides 2, 5, 6, 7
+---
+```
+
+## Route Alias
+
+```yaml
+---
+routeAlias: intro           # URL: /intro instead of /1
+---
+```
+
+## Preload
+
+```yaml
+---
+preload: false              # Don't mount until entering
+---
+```
+
+## Draggable Positions
+
+```yaml
+---
+dragPos:
+  logo: 100,50,200,100,0    # Left,Top,Width,Height,Rotate
+  arrow: 300,200,50,50,45
+---
+```
+
+## Image Layouts
+
+```yaml
+---
+layout: image-left
+image: /photo.jpg
+backgroundSize: contain
+class: my-custom-class
+---
+```
+
+## Iframe Layouts
+
+```yaml
+---
+layout: iframe
+url: https://example.com
+---
+```
+
+## Two Columns
+
+```yaml
+---
+layout: two-cols
+---
+
+# Left Side
+
+Content
+
+::right::
+
+# Right Side
+
+Content
+```
+
+## Two Columns with Header
+
+```yaml
+---
+layout: two-cols-header
+---
+
+# Header
+
+::left::
+
+Left content
+
+::right::
+
+Right content
+```
+
+## Full Example
+
+```yaml
+---
+layout: center
+background: /bg.jpg
+class: text-white text-center
+transition: fade
+clicks: 3
+zoom: 0.9
+hideInToc: false
+---
+
+# Slide Content
+```

skills/slidev/references/core-global-context.md

@@ -0,0 +1,155 @@
+---
+name: global-context
+description: Access navigation, slide info, and configuration programmatically
+---
+
+# Global Context & API
+
+Access navigation, slide info, and configuration programmatically.
+
+## Template Variables
+
+Available in slides and components:
+
+```md
+Page {{ $page }} of {{ $nav.total }}
+Title: {{ $slidev.configs.title }}
+```
+
+### $nav
+
+Navigation state and controls:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `$nav.currentPage` | number | Current page (1-indexed) |
+| `$nav.currentLayout` | string | Current layout name |
+| `$nav.total` | number | Total slides |
+| `$nav.isPresenter` | boolean | In presenter mode |
+| `$nav.next()` | function | Next click/slide |
+| `$nav.prev()` | function | Previous click/slide |
+| `$nav.nextSlide()` | function | Next slide |
+| `$nav.prevSlide()` | function | Previous slide |
+| `$nav.go(n)` | function | Go to slide n |
+
+### $slidev
+
+Global context:
+
+| Property | Description |
+|----------|-------------|
+| `$slidev.configs` | Project config (title, etc.) |
+| `$slidev.themeConfigs` | Theme config |
+
+### $frontmatter
+
+Current slide frontmatter:
+
+```md
+Layout: {{ $frontmatter.layout }}
+```
+
+### $clicks
+
+Current click count on slide.
+
+### $page
+
+Current page number (1-indexed).
+
+### $renderContext
+
+Current render context:
+- `'slide'` - Normal slide view
+- `'overview'` - Overview mode
+- `'presenter'` - Presenter mode
+- `'previewNext'` - Next slide preview
+
+## Composables
+
+Import from `@slidev/client`:
+
+```ts
+import {
+  useNav,
+  useDarkMode,
+  useIsSlideActive,
+  useSlideContext,
+  onSlideEnter,
+  onSlideLeave,
+} from '@slidev/client'
+```
+
+### useNav
+
+```ts
+const nav = useNav()
+nav.next()
+nav.go(5)
+console.log(nav.currentPage)
+```
+
+### useDarkMode
+
+```ts
+const { isDark, toggle } = useDarkMode()
+```
+
+### useIsSlideActive
+
+```ts
+const isActive = useIsSlideActive()
+// Returns ref<boolean>
+```
+
+### useSlideContext
+
+```ts
+const { $page, $clicks, $frontmatter } = useSlideContext()
+```
+
+## Lifecycle Hooks
+
+```ts
+import { onSlideEnter, onSlideLeave } from '@slidev/client'
+
+onSlideEnter(() => {
+  // Slide became active
+  startAnimation()
+})
+
+onSlideLeave(() => {
+  // Slide became inactive
+  cleanup()
+})
+```
+
+**Important:** Don't use `onMounted`/`onUnmounted` in slides - component instance persists. Use `onSlideEnter`/`onSlideLeave` instead.
+
+## Conditional Rendering Examples
+
+```html
+<!-- Show only in presenter mode -->
+<div v-if="$nav.isPresenter">
+  Presenter notes
+</div>
+
+<!-- Hide on cover slide -->
+<footer v-if="$nav.currentLayout !== 'cover'">
+  Page {{ $nav.currentPage }}
+</footer>
+
+<!-- Different content by context -->
+<template v-if="$renderContext === 'slide'">
+  Normal view
+</template>
+<template v-else-if="$renderContext === 'presenter'">
+  Presenter view
+</template>
+```
+
+## Type Imports
+
+```ts
+import type { TocItem } from '@slidev/types'
+```

skills/slidev/references/core-headmatter.md

@@ -0,0 +1,188 @@
+---
+name: headmatter
+description: Deck-wide configuration options in the first frontmatter block
+---
+
+# Headmatter Configuration
+
+Deck-wide configuration options in the first frontmatter block.
+
+## Theme & Appearance
+
+```yaml
+---
+theme: default              # Theme package or path
+colorSchema: auto           # 'auto' | 'light' | 'dark'
+favicon: /favicon.ico       # Favicon URL
+aspectRatio: 16/9           # Slide aspect ratio
+canvasWidth: 980            # Canvas width in px
+---
+```
+
+## Fonts
+
+```yaml
+---
+fonts:
+  sans: Roboto
+  serif: Roboto Slab
+  mono: Fira Code
+  provider: google          # 'google' | 'none'
+---
+```
+
+## Code & Highlighting
+
+```yaml
+---
+highlighter: shiki          # Code highlighter
+lineNumbers: false          # Show line numbers
+monaco: true                # Enable Monaco editor ('true' | 'dev' | 'build')
+twoslash: true              # Enable TwoSlash
+monacoTypesSource: local    # 'local' | 'cdn' | 'none'
+---
+```
+
+## Features
+
+```yaml
+---
+drawings:
+  enabled: true             # Enable drawing mode
+  persist: false            # Save drawings
+  presenterOnly: false      # Only presenter can draw
+  syncAll: true             # Sync across instances
+record: dev                 # Enable recording
+selectable: true            # Text selection
+contextMenu: true           # Right-click menu
+wakeLock: true              # Prevent screen sleep
+---
+```
+
+## Export & Build
+
+```yaml
+---
+download: false             # PDF download button
+exportFilename: slides      # Export filename
+export:
+  format: pdf
+  timeout: 30000
+  withClicks: false
+  withToc: false
+---
+```
+
+## Info & SEO
+
+```yaml
+---
+title: My Presentation
+titleTemplate: '%s - Slidev'
+author: Your Name
+keywords: slidev, presentation
+info: |
+  ## About
+  Presentation description
+---
+```
+
+## SEO Meta Tags
+
+```yaml
+---
+seoMeta:
+  ogTitle: Presentation Title
+  ogDescription: Description
+  ogImage: https://example.com/og.png
+  ogUrl: https://example.com
+  twitterCard: summary_large_image
+  twitterTitle: Title
+  twitterDescription: Description
+  twitterImage: https://example.com/twitter.png
+---
+```
+
+## Addons & Themes
+
+```yaml
+---
+theme: seriph
+addons:
+  - excalidraw
+  - '@slidev/plugin-notes'
+---
+```
+
+## Theme Configuration
+
+```yaml
+---
+themeConfig:
+  primary: '#5d8392'
+  # Theme-specific options
+---
+```
+
+## Defaults
+
+Set default frontmatter for all slides:
+
+```yaml
+---
+defaults:
+  layout: default
+  transition: fade
+---
+```
+
+## HTML Attributes
+
+```yaml
+---
+htmlAttrs:
+  dir: ltr
+  lang: en
+---
+```
+
+## Presenter & Browser
+
+```yaml
+---
+presenter: true             # 'true' | 'dev' | 'build'
+browserExporter: dev        # 'true' | 'dev' | 'build'
+routerMode: history         # 'history' | 'hash'
+---
+```
+
+## Remote Assets
+
+```yaml
+---
+remoteAssets: false         # Download remote assets locally
+plantUmlServer: https://www.plantuml.com/plantuml
+---
+```
+
+## Full Template
+
+```yaml
+---
+theme: default
+title: Presentation Title
+author: Your Name
+highlighter: shiki
+lineNumbers: true
+transition: slide-left
+aspectRatio: 16/9
+canvasWidth: 980
+fonts:
+  sans: Roboto
+  mono: Fira Code
+drawings:
+  enabled: true
+  persist: true
+download: true
+---
+```

skills/slidev/references/core-hosting.md

@@ -0,0 +1,152 @@
+---
+name: hosting
+description: Build and deploy Slidev presentations
+---
+
+# Hosting & Deployment
+
+Build and deploy Slidev presentations.
+
+## Build for Production
+
+```bash
+slidev build
+```
+
+Output: `dist/` folder (static SPA)
+
+### Options
+
+```bash
+slidev build --base /talks/my-talk/    # Custom base path
+slidev build --out public              # Custom output dir
+slidev build --download                # Include PDF
+slidev build --without-notes           # Exclude notes
+```
+
+### Multiple Presentations
+
+```bash
+slidev build slides1.md slides2.md
+```
+
+## GitHub Pages
+
+### GitHub Actions
+
+Create `.github/workflows/deploy.yml`:
+
+```yaml
+name: Deploy
+
+on:
+  push:
+    branches: [main]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+
+      - name: Install
+        run: npm install
+
+      - name: Build
+        run: npm run build -- --base /${{ github.event.repository.name }}/
+
+      - uses: actions/configure-pages@v4
+
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist
+
+      - uses: actions/deploy-pages@v4
+```
+
+## Netlify
+
+Create `netlify.toml`:
+
+```toml
+[build]
+  publish = 'dist'
+  command = 'npm run build'
+
+[[redirects]]
+  from = '/*'
+  to = '/index.html'
+  status = 200
+```
+
+## Vercel
+
+Create `vercel.json`:
+
+```json
+{
+  "rewrites": [
+    { "source": "/(.*)", "destination": "/index.html" }
+  ]
+}
+```
+
+## Docker
+
+### Using Official Image
+
+```bash
+docker run --name slidev --rm -it \
+  -v ${PWD}:/slidev \
+  -p 3030:3030 \
+  tangramor/slidev:latest
+```
+
+### Custom Dockerfile
+
+```dockerfile
+FROM tangramor/slidev:latest
+
+COPY slides.md .
+COPY public ./public
+
+RUN npm run build
+
+EXPOSE 80
+CMD ["npx", "serve", "dist"]
+```
+
+## Base Path
+
+For subdirectory deployment:
+
+```bash
+# Build
+slidev build --base /my-slides/
+
+# Or in headmatter
+---
+base: /my-slides/
+---
+```
+
+## Router Mode
+
+For servers without rewrite support:
+
+```yaml
+---
+routerMode: hash
+---
+```
+
+URLs become: `/#/1`, `/#/2`, etc.

skills/slidev/references/core-layouts.md

@@ -0,0 +1,286 @@
+---
+name: layouts
+description: Available layouts for slides
+---
+
+# Built-in Layouts
+
+Available layouts for slides.
+
+## Basic Layouts
+
+### default
+
+Standard slide layout.
+```yaml
+---
+layout: default
+---
+```
+
+### center
+
+Content centered horizontally and vertically.
+```yaml
+---
+layout: center
+---
+```
+
+### cover
+
+Title/cover slide with centered content.
+```yaml
+---
+layout: cover
+---
+```
+
+### end
+
+End slide.
+```yaml
+---
+layout: end
+---
+```
+
+### full
+
+Full-screen content, no padding.
+```yaml
+---
+layout: full
+---
+```
+
+### none
+
+No layout styling.
+```yaml
+---
+layout: none
+---
+```
+
+## Text Layouts
+
+### intro
+
+Introduction slide.
+```yaml
+---
+layout: intro
+---
+```
+
+### quote
+
+Large quotation display.
+```yaml
+---
+layout: quote
+---
+```
+
+### section
+
+Section divider.
+```yaml
+---
+layout: section
+---
+```
+
+### statement
+
+Statement/affirmation display.
+```yaml
+---
+layout: statement
+---
+```
+
+### fact
+
+Fact/data display.
+```yaml
+---
+layout: fact
+---
+```
+
+## Multi-Column Layouts
+
+### two-cols
+
+Two columns side by side:
+```md
+---
+layout: two-cols
+---
+
+# Left Column
+
+Left content
+
+::right::
+
+# Right Column
+
+Right content
+```
+
+### two-cols-header
+
+Header with two columns below:
+```md
+---
+layout: two-cols-header
+---
+
+# Header
+
+::left::
+
+Left content
+
+::right::
+
+Right content
+```
+
+## Image Layouts
+
+### image
+
+Full-screen image:
+```yaml
+---
+layout: image
+image: /photo.jpg
+backgroundSize: cover
+---
+```
+
+### image-left
+
+Image on left, content on right:
+```yaml
+---
+layout: image-left
+image: /photo.jpg
+class: my-class
+---
+
+# Content on Right
+```
+
+### image-right
+
+Image on right, content on left:
+```yaml
+---
+layout: image-right
+image: /photo.jpg
+---
+
+# Content on Left
+```
+
+Props: `image`, `class`, `backgroundSize`
+
+## Iframe Layouts
+
+### iframe
+
+Full-screen iframe:
+```yaml
+---
+layout: iframe
+url: https://example.com
+---
+```
+
+### iframe-left
+
+Iframe on left, content on right:
+```yaml
+---
+layout: iframe-left
+url: https://example.com
+---
+
+# Content
+```
+
+### iframe-right
+
+Iframe on right, content on left:
+```yaml
+---
+layout: iframe-right
+url: https://example.com
+---
+
+# Content
+```
+
+## Layout Loading Order
+
+1. Slidev default layouts
+2. Theme layouts
+3. Addon layouts
+4. Custom layouts (`./layouts/`)
+
+Later sources override earlier ones.
+
+## Custom Layouts
+
+Create `layouts/my-layout.vue`:
+
+```vue
+<template>
+  <div class="slidev-layout my-layout">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.my-layout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
+```
+
+With named slots:
+
+```vue
+<template>
+  <div class="slidev-layout two-areas">
+    <div class="top">
+      <slot name="top" />
+    </div>
+    <div class="bottom">
+      <slot />
+    </div>
+  </div>
+</template>
+```
+
+Usage:
+```md
+---
+layout: two-areas
+---
+
+::top::
+
+Top content
+
+::default::
+
+Bottom content
+```

skills/slidev/references/core-syntax.md

@@ -0,0 +1,155 @@
+---
+name: syntax
+description: Core Markdown syntax for Slidev presentations
+---
+
+# Slidev Markdown Syntax
+
+Core Markdown syntax for Slidev presentations.
+
+## Slide Separator
+
+Use `---` with blank lines before and after:
+
+```md
+# Slide 1
+
+Content
+
+---
+
+# Slide 2
+
+More content
+```
+
+## Headmatter (Deck Config)
+
+First frontmatter block configures the entire deck:
+
+```md
+---
+theme: default
+title: My Presentation
+lineNumbers: true
+---
+
+# First Slide
+```
+
+## Per-Slide Frontmatter
+
+Each slide can have its own frontmatter:
+
+```md
+---
+layout: center
+background: /image.jpg
+class: text-white
+---
+
+# Centered Slide
+```
+
+## Presenter Notes
+
+HTML comments at end of slide become presenter notes:
+
+```md
+# My Slide
+
+Content here
+
+<!--
+These are presenter notes.
+- Remember to mention X
+- Demo the feature
+-->
+```
+
+## Code Blocks
+
+Standard Markdown with Shiki highlighting:
+
+````md
+```ts
+const hello = 'world'
+```
+````
+
+With features:
+````md
+```ts {2,3}              // Line highlighting
+```ts {1|2-3|all}        // Click-based highlighting
+```ts {monaco}           // Monaco editor
+```ts {monaco-run}       // Runnable code
+```ts twoslash           // TypeScript types
+```
+````
+
+## LaTeX Math
+
+Inline: `$E = mc^2$`
+
+Block:
+```md
+$$
+\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
+$$
+```
+
+## Diagrams
+
+Mermaid:
+````md
+```mermaid
+graph LR
+  A --> B --> C
+```
+````
+
+PlantUML:
+````md
+```plantuml
+@startuml
+Alice -> Bob : Hello
+@enduml
+```
+````
+
+## MDC Syntax
+
+Enable with `mdc: true`:
+
+```md
+[styled text]{style="color:red"}
+![](/image.png){width=500px}
+::component{prop="value"}
+```
+
+## Scoped CSS
+
+Styles apply only to current slide:
+
+```md
+# Red Title
+
+<style>
+h1 { color: red; }
+</style>
+```
+
+## Import Slides
+
+```md
+---
+src: ./pages/intro.md
+---
+```
+
+Import specific slides:
+```md
+---
+src: ./other.md#2,5-7
+---
+```

skills/slidev/references/diagram-latex.md

@@ -0,0 +1,55 @@
+---
+name: latex
+description: Render mathematical equations using KaTeX
+---
+
+# LaTeX
+
+Render mathematical equations. Powered by KaTeX.
+
+## Inline Math
+
+```md
+$\sqrt{3x-1}+(1+x)^2$
+```
+
+## Block Math
+
+```md
+$$
+\begin{aligned}
+\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\
+\nabla \cdot \vec{B} &= 0
+\end{aligned}
+$$
+```
+
+## Line Highlighting
+
+```md
+$$ {1|3|all}
+\begin{aligned}
+\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\
+\nabla \cdot \vec{B} &= 0 \\
+\nabla \times \vec{E} &= -\frac{\partial\vec{B}}{\partial t}
+\end{aligned}
+$$
+```
+
+## Chemical Equations
+
+Enable mhchem extension in `vite.config.ts`:
+
+```ts
+import 'katex/contrib/mhchem'
+
+export default {}
+```
+
+Then use:
+
+```md
+$$
+\ce{B(OH)3 + H2O <--> B(OH)4^- + H+}
+$$
+```

skills/slidev/references/diagram-mermaid.md

@@ -0,0 +1,44 @@
+---
+name: mermaid
+description: Create diagrams from text descriptions
+---
+
+# Mermaid Diagrams
+
+Create diagrams from text descriptions.
+
+## Basic Usage
+
+````md
+```mermaid
+sequenceDiagram
+  Alice->John: Hello John, how are you?
+  Note over Alice,John: A typical interaction
+```
+````
+
+## With Options
+
+````md
+```mermaid {theme: 'neutral', scale: 0.8}
+graph TD
+B[Text] --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
+```
+````
+
+## Diagram Types
+
+- `graph` / `flowchart` - Flow diagrams
+- `sequenceDiagram` - Sequence diagrams
+- `classDiagram` - Class diagrams
+- `stateDiagram` - State diagrams
+- `erDiagram` - Entity relationship
+- `gantt` - Gantt charts
+- `pie` - Pie charts
+
+## Resources
+
+- Mermaid docs: https://mermaid.js.org/
+- Live editor: https://mermaid.live/

skills/slidev/references/diagram-plantuml.md

@@ -0,0 +1,45 @@
+---
+name: plantuml
+description: Create UML diagrams from text descriptions
+---
+
+# PlantUML Diagrams
+
+Create UML diagrams from text descriptions.
+
+## Basic Usage
+
+````md
+```plantuml
+@startuml
+Alice -> Bob : Hello!
+@enduml
+```
+````
+
+## Server Configuration
+
+Default: Uses https://www.plantuml.com/plantuml
+
+Custom server in headmatter:
+
+```md
+---
+plantUmlServer: https://your-server.com/plantuml
+---
+```
+
+## Diagram Types
+
+- Sequence diagrams
+- Class diagrams
+- Activity diagrams
+- Component diagrams
+- State diagrams
+- Object diagrams
+- Use case diagrams
+
+## Resources
+
+- PlantUML docs: https://plantuml.com/
+- Live editor: https://plantuml.com/plantuml

skills/slidev/references/editor-monaco-run.md

@@ -0,0 +1,44 @@
+---
+name: monaco-run
+description: Run code directly in the editor and see results
+---
+
+# Monaco Runner
+
+Run code directly in the editor and see results.
+
+## Basic Usage
+
+````md
+```ts {monaco-run}
+function distance(x: number, y: number) {
+  return Math.sqrt(x ** 2 + y ** 2)
+}
+console.log(distance(3, 4))
+```
+````
+
+Shows a "Run" button and displays output below the code.
+
+## Disable Auto-run
+
+````md
+```ts {monaco-run} {autorun:false}
+console.log('Click the play button to run me')
+```
+````
+
+## Show Output on Click
+
+````md
+```ts {monaco-run} {showOutputAt:'+1'}
+console.log('Shown after 1 click')
+```
+````
+
+## Supported Languages
+
+- JavaScript
+- TypeScript
+
+For other languages, configure custom code runners in `/custom/config-code-runners`.

skills/slidev/references/editor-monaco-write.md

@@ -0,0 +1,24 @@
+---
+name: monaco-write
+description: Edit code and save changes back to the file
+---
+
+# Writable Monaco Editor
+
+Edit code and save changes back to the file.
+
+## Usage
+
+```md
+<<< ./some-file.ts {monaco-write}
+```
+
+## Behavior
+
+- Links Monaco editor to actual file on filesystem
+- Changes are saved directly to the file
+- Useful for live coding demonstrations
+
+## Warning
+
+Back up files before using - changes are saved directly.

skills/slidev/references/editor-monaco.md

@@ -0,0 +1,50 @@
+---
+name: monaco
+description: Turn code blocks into fully-featured editors
+---
+
+# Monaco Editor
+
+Turn code blocks into fully-featured editors.
+
+## Basic Usage
+
+````md
+```ts {monaco}
+console.log('HelloWorld')
+```
+````
+
+## Diff Editor
+
+Compare two code versions:
+
+````md
+```ts {monaco-diff}
+console.log('Original text')
+~~~
+console.log('Modified text')
+```
+````
+
+## Editor Height
+
+Auto-grow as you type:
+
+````md
+```ts {monaco} {height:'auto'}
+console.log('Hello, World!')
+```
+````
+
+Fixed height:
+
+````md
+```ts {monaco} {height:'300px'}
+// code here
+```
+````
+
+## Configuration
+
+See `/custom/config-monaco` for Monaco editor customization options.

skills/slidev/references/editor-prettier.md

@@ -0,0 +1,40 @@
+---
+name: prettier-plugin
+description: Format Slidev markdown files correctly
+---
+
+# Prettier Plugin
+
+Format Slidev markdown files correctly.
+
+## Installation
+
+```bash
+pnpm i -D prettier prettier-plugin-slidev
+```
+
+## Configuration
+
+Create/modify `.prettierrc`:
+
+```json
+{
+  "overrides": [
+    {
+      "files": ["slides.md", "pages/*.md"],
+      "options": {
+        "parser": "slidev",
+        "plugins": ["prettier-plugin-slidev"]
+      }
+    }
+  ]
+}
+```
+
+## Why Needed
+
+Slidev's syntax (frontmatter, code blocks) may conflict with default Markdown formatting. This plugin understands Slidev-specific syntax.
+
+## Note
+
+Must specify files via `overrides` since Slidev and regular Markdown share `.md` extension.

skills/slidev/references/editor-side.md

@@ -0,0 +1,23 @@
+---
+name: side-editor
+description: Edit slides source alongside the presentation
+---
+
+# Integrated Editor
+
+Edit slides source alongside the presentation.
+
+## Open Editor
+
+Click the edit icon in the navigation panel.
+
+## Features
+
+- Live reload on changes
+- Auto-save to file
+- Side-by-side editing
+- Syntax highlighting
+
+## Use Case
+
+Make quick edits during presentation preparation without switching applications.

skills/slidev/references/editor-vscode.md

@@ -0,0 +1,55 @@
+---
+name: vscode-extension
+description: Manage slides visually in VS Code
+---
+
+# VS Code Extension
+
+Manage slides visually in VS Code.
+
+## Installation
+
+Install from VS Code Marketplace: `antfu.slidev`
+
+## Features
+
+- Preview slides in side panel
+- Slides tree view
+- Drag and drop to reorder slides
+- Folding for slide blocks
+- Multiple project support
+- One-click dev server start
+
+## Usage
+
+1. Click `Slidev` icon in activity bar
+2. Projects tree shows all Slidev projects in workspace
+3. Slides tree shows slides in active project
+4. Preview panel shows live preview
+
+## Commands
+
+Type `Slidev` in command palette to see available commands.
+
+## Configuration
+
+Include specific files as Slidev entries:
+
+```json
+{
+  "slidev.include": ["**/presentation.md"]
+}
+```
+
+Custom dev command:
+
+```json
+{
+  "slidev.dev-command": "pnpm slidev ${args}"
+}
+```
+
+## Placeholders
+
+- `${args}` - All CLI arguments
+- `${port}` - Port number

skills/slidev/references/layout-canvas-size.md

@@ -0,0 +1,25 @@
+---
+name: canvas-size
+description: Configure slide canvas dimensions and aspect ratio
+---
+
+# Slide Canvas Size
+
+Set the canvas dimensions for all slides.
+
+## Configuration
+
+```md
+---
+aspectRatio: 16/9
+canvasWidth: 980
+---
+```
+
+- `aspectRatio`: Ratio of width to height (default: `16/9`)
+- `canvasWidth`: Canvas width in pixels (default: `980`)
+
+## Related Features
+
+- Scale individual slides: use `zoom` frontmatter option
+- Scale elements: use `<Transform>` component

skills/slidev/references/layout-draggable.md

@@ -0,0 +1,57 @@
+---
+name: draggable-elements
+description: Move, resize, and rotate elements by dragging during presentation
+---
+
+# Draggable Elements
+
+Move, resize, and rotate elements by dragging during presentation.
+
+## Directive Usage
+
+### With Frontmatter Position
+
+```md
+---
+dragPos:
+  square: Left,Top,Width,Height,Rotate
+---
+
+<img v-drag="'square'" src="https://sli.dev/logo.png">
+```
+
+### Inline Position
+
+```md
+<img v-drag="[Left,Top,Width,Height,Rotate]" src="https://sli.dev/logo.png">
+```
+
+## Component Usage
+
+```md
+---
+dragPos:
+  foo: Left,Top,Width,Height,Rotate
+---
+
+<v-drag pos="foo" text-3xl>
+  Draggable content
+</v-drag>
+```
+
+## Draggable Arrow
+
+```md
+<v-drag-arrow />
+```
+
+## Controls
+
+- Double-click: Start dragging
+- Arrow keys: Move element
+- Shift + drag: Preserve aspect ratio
+- Click outside: Stop dragging
+
+## Auto Height
+
+Set Height to `NaN` or `_` for auto height based on content.

skills/slidev/references/layout-global-layers.md

@@ -0,0 +1,50 @@
+---
+name: global-layers
+description: Create components that persist across slides like footers and backgrounds
+---
+
+# Global Layers
+
+Create components that persist across slides.
+
+## Layer Files
+
+Create in project root:
+- `global-top.vue` - Above all slides (single instance)
+- `global-bottom.vue` - Below all slides (single instance)
+- `slide-top.vue` - Above each slide (per-slide instance)
+- `slide-bottom.vue` - Below each slide (per-slide instance)
+- `custom-nav-controls.vue` - Custom navigation controls
+
+## Z-Order (top to bottom)
+
+1. NavControls / custom-nav-controls.vue
+2. global-top.vue
+3. slide-top.vue
+4. Slide Content
+5. slide-bottom.vue
+6. global-bottom.vue
+
+## Example: Footer
+
+```html
+<!-- global-bottom.vue -->
+<template>
+  <footer class="absolute bottom-0 left-0 right-0 p-2">Your Name</footer>
+</template>
+```
+
+## Conditional Rendering
+
+```html
+<!-- Hide on cover layout -->
+<template>
+  <footer v-if="$nav.currentLayout !== 'cover'" class="absolute bottom-0 p-2">
+    {{ $nav.currentPage }} / {{ $nav.total }}
+  </footer>
+</template>
+```
+
+## Export Note
+
+Use `--per-slide` export option when global layers depend on navigation state.

skills/slidev/references/layout-slots.md

@@ -0,0 +1,75 @@
+---
+name: slot-sugar
+description: Shorthand syntax for layout named slots in multi-column layouts
+---
+
+# Slot Sugar for Layouts
+
+Shorthand syntax for layout named slots.
+
+## Standard Vue Slot Syntax
+
+```md
+---
+layout: two-cols
+---
+
+<template v-slot:default>
+
+# Left
+
+This shows on the left
+
+</template>
+<template v-slot:right>
+
+# Right
+
+This shows on the right
+
+</template>
+```
+
+## Shorthand Syntax
+
+```md
+---
+layout: two-cols
+---
+
+# Left
+
+This shows on the left
+
+::right::
+
+# Right
+
+This shows on the right
+```
+
+## Explicit Default Slot
+
+```md
+---
+layout: two-cols
+---
+
+::right::
+
+# Right
+
+This shows on the right
+
+::default::
+
+# Left
+
+This shows on the left
+```
+
+## Common Layouts with Slots
+
+- `two-cols`: `default` (left) and `right`
+- `two-cols-header`: `default`, `left`, `right`
+- `image-left/right`: `default` for content

skills/slidev/references/layout-transform.md

@@ -0,0 +1,33 @@
+---
+name: transform-component
+description: Scale elements without affecting slide layout using the Transform component
+---
+
+# Transform Component
+
+Scale elements without affecting slide layout.
+
+## Usage
+
+```md
+<Transform :scale="0.5" origin="top center">
+  <YourElements />
+</Transform>
+```
+
+## Props
+
+- `scale`: Scale factor (0.5 = 50%, 2 = 200%)
+- `origin`: Transform origin (CSS transform-origin value)
+
+## Use Cases
+
+- Shrink large diagrams
+- Scale code blocks
+- Fit oversized content
+- Create emphasis effects
+
+## Related Features
+
+- Scale all slides: Use `canvasWidth` / `aspectRatio` in headmatter
+- Scale individual slides: Use `zoom` frontmatter option

skills/slidev/references/layout-zoom.md

@@ -0,0 +1,39 @@
+---
+name: zoom-slides
+description: Scale individual slide content using the zoom frontmatter option
+---
+
+# Zoom Slides
+
+Scale individual slide content.
+
+## Usage
+
+```md
+---
+zoom: 0.8
+---
+
+# A Slide with lots of content
+
+---
+
+# Other slides aren't affected
+```
+
+## Values
+
+- `zoom: 0.8` - 80% size (fits more content)
+- `zoom: 1.2` - 120% size (larger, less content)
+- `zoom: 1` - Normal (default)
+
+## Use Cases
+
+- Fit dense content on one slide
+- Make text more readable
+- Adjust for different content densities
+
+## Related Features
+
+- Scale all slides: Use `canvasWidth` / `aspectRatio` in headmatter
+- Scale elements: Use `<Transform>` component

skills/slidev/references/presenter-notes-ruby.md

@@ -0,0 +1,35 @@
+---
+name: notes-auto-ruby
+description: Automatically add ruby text (pronunciation guides) to presenter notes
+---
+
+# Notes Auto Ruby
+
+Automatically add ruby text (pronunciation guides) to presenter notes.
+
+## Configuration
+
+```md
+---
+notesAutoRuby:
+  日本語: ni hon go
+  勉強: べんきょう
+---
+```
+
+## Example
+
+Notes:
+```md
+<!--
+私は日本語を勉強しています。
+-->
+```
+
+Renders with ruby annotations above the matched words.
+
+## Use Case
+
+- Language learning presentations
+- Pronunciation guides for technical terms
+- Reading assistance for non-native text

skills/slidev/references/presenter-recording.md

@@ -0,0 +1,30 @@
+---
+name: recording
+description: Record presentations with camera and screen capture
+---
+
+# Recording
+
+Record presentations with built-in camera and screen capture.
+
+## Camera View
+
+Click the camera icon in navigation bar to show camera overlay.
+
+- Drag to move
+- Resize from bottom-right corner
+- Position persists across reloads
+
+## Start Recording
+
+Click the video icon in navigation bar.
+
+Options:
+- Camera embedded in slides
+- Separate video files for camera and slides
+
+Saves as WebM video.
+
+## Technology
+
+Powered by RecordRTC and WebRTC API.

skills/slidev/references/presenter-remote.md

@@ -0,0 +1,40 @@
+---
+name: remote-access
+description: Share presentation across network or internet
+---
+
+# Remote Access
+
+Share presentation across network or internet.
+
+## Enable Remote Access
+
+```bash
+slidev --remote
+```
+
+## Password Protection
+
+```bash
+slidev --remote=your_password
+```
+
+Password required for presenter mode access.
+
+## Remote Tunnel
+
+Expose to internet via Cloudflare Quick Tunnels:
+
+```bash
+slidev --remote --tunnel
+```
+
+Creates public URL for sharing without server setup.
+
+## Use Cases
+
+- Control presentation from phone/tablet
+- Multiple presenters
+- Remote presentations
+- Live streaming
+- Audience viewing on their devices

skills/slidev/references/presenter-timer.md

@@ -0,0 +1,34 @@
+---
+name: presenter-timer
+description: Timer and progress bar in presenter mode
+---
+
+# Presenter Timer
+
+Timer and progress bar in presenter mode.
+
+## Configuration
+
+```yaml
+---
+duration: 30min
+timer: stopwatch
+---
+```
+
+## Options
+
+- `duration`: Presentation length (default: `30min`)
+- `timer`: Mode - `stopwatch` or `countdown` (default: `stopwatch`)
+
+## Features
+
+- Start, pause, reset controls
+- Progress bar showing time elapsed/remaining
+- Visible only in presenter mode
+
+## Duration Format
+
+- `30min` - 30 minutes
+- `1h` - 1 hour
+- `45min` - 45 minutes

skills/slidev/references/style-direction.md

@@ -0,0 +1,34 @@
+---
+name: direction
+description: Navigation direction-based styling
+---
+
+# Navigation Direction Variants
+
+Apply different styles based on navigation direction (forward/backward).
+
+## CSS Classes
+
+```css
+/* Delay only when navigating forward */
+.slidev-nav-go-forward .slidev-vclick-target {
+  transition-delay: 500ms;
+}
+.slidev-nav-go-backward .slidev-vclick-target {
+  transition-delay: 0;
+}
+```
+
+## UnoCSS Variants
+
+Use `forward:` or `backward:` prefix:
+
+```html
+<div v-click class="transition forward:delay-300">Element</div>
+```
+
+Animation is only delayed when navigating forward, not when going back.
+
+## Use Case
+
+Create asymmetric animations where entering a slide feels different from leaving it.

skills/slidev/references/style-icons.md

@@ -0,0 +1,46 @@
+---
+name: icons
+description: Using open-source icons in slides
+---
+
+# Icons
+
+Use any open-source icon directly in markdown. Powered by unplugin-icons and Iconify.
+
+## Installation
+
+```bash
+pnpm add @iconify-json/[collection-name]
+```
+
+## Usage
+
+Use component syntax `<collection-icon-name />`:
+
+```md
+<mdi-account-circle />
+<carbon-badge />
+<uim-rocket />
+<logos-vue />
+```
+
+## Popular Collections
+
+- `@iconify-json/mdi` - Material Design Icons
+- `@iconify-json/carbon` - Carbon Design
+- `@iconify-json/logos` - SVG Logos
+- `@iconify-json/twemoji` - Twitter Emoji
+
+## Styling
+
+Style like any HTML element:
+
+```html
+<uim-rocket class="text-3xl text-red-400 mx-2" />
+<uim-rocket class="text-3xl text-orange-400 animate-ping" />
+```
+
+## Browse Icons
+
+- https://icones.js.org/
+- https://icon-sets.iconify.design/

skills/slidev/references/style-scoped.md

@@ -0,0 +1,50 @@
+---
+name: scoped
+description: Slide-scoped CSS styles
+---
+
+# Slide Scope Styles
+
+Define CSS that applies only to the current slide.
+
+## Usage
+
+```md
+# This is Red
+
+<style>
+h1 {
+  color: red;
+}
+</style>
+
+---
+
+# Other slides are not affected
+```
+
+## Scoped by Default
+
+All `<style>` tags in slides are automatically scoped.
+
+Child combinators (`.a > .b`) don't work as expected due to scoping.
+
+## Nested CSS with UnoCSS
+
+```md
+# Slidev
+
+> Hello **world**
+
+<style>
+blockquote {
+  strong {
+    --uno: 'text-teal-500 dark:text-teal-400';
+  }
+}
+</style>
+```
+
+## Global Styles
+
+For global styles, use `styles/index.css` in your project.

skills/slidev/references/syntax-block-frontmatter.md

@@ -0,0 +1,39 @@
+---
+name: block-frontmatter
+description: Using YAML code blocks as slide frontmatter for syntax highlighting
+---
+
+# Block Frontmatter
+
+Use a YAML code block as the frontmatter for slides when you need syntax highlighting and formatter support.
+
+## Usage
+
+Instead of traditional frontmatter `---`, use a yaml code block at the start of a slide:
+
+````md
+---
+theme: default
+---
+
+# Slide 1
+
+---
+
+```yaml
+layout: quote
+```
+
+# Slide 2
+
+---
+
+# Slide 3
+````
+
+## Key Points
+
+- Works for per-slide frontmatter only
+- Cannot use for headmatter (first frontmatter of the deck)
+- Provides syntax highlighting in editors
+- Compatible with prettier-plugin-slidev

skills/slidev/references/syntax-frontmatter-merging.md

@@ -0,0 +1,49 @@
+---
+name: frontmatter-merging
+description: Priority rules when importing slides with conflicting frontmatter
+---
+
+# Frontmatter Merging
+
+When importing slides, frontmatter from main entry takes priority.
+
+## Example
+
+Main file (`slides.md`):
+```md
+---
+src: ./cover.md
+background: https://sli.dev/bar.png
+class: text-center
+---
+```
+
+Imported file (`cover.md`):
+```md
+---
+layout: cover
+background: https://sli.dev/foo.png
+---
+
+# Cover
+
+Cover Page
+```
+
+## Result
+
+```md
+---
+layout: cover
+background: https://sli.dev/bar.png  # main entry wins
+class: text-center
+---
+
+# Cover
+
+Cover Page
+```
+
+## Priority Rule
+
+Main entry > Imported file for duplicate keys.

skills/slidev/references/syntax-importing-slides.md

@@ -0,0 +1,60 @@
+---
+name: importing-slides
+description: Split presentations into multiple files for reusability
+---
+
+# Importing Slides
+
+Split presentations into multiple files for reusability.
+
+## Basic Import
+
+```md
+# Title
+
+This is a normal page
+
+---
+src: ./pages/toc.md
+---
+
+<!-- Content here is ignored -->
+
+---
+
+# Page 4
+
+Another normal page
+```
+
+## Import Specific Slides
+
+Use hash to select slides:
+
+```md
+---
+src: ./another-presentation.md#2,5-7
+---
+```
+
+Imports slides 2, 5, 6, and 7.
+
+## Reuse Slides
+
+Import the same file multiple times:
+
+```md
+---
+src: ./pages/toc.md
+---
+
+<!-- later... -->
+
+---
+src: ./pages/toc.md
+---
+```
+
+## Frontmatter Priority
+
+Main entry frontmatter overrides imported file frontmatter for duplicate keys.

skills/slidev/references/syntax-mdc.md

@@ -0,0 +1,51 @@
+---
+name: mdc
+description: MDC (Markdown Components) syntax support
+---
+
+# MDC Syntax
+
+Enhanced Markdown with component and style syntax.
+
+## Enable
+
+```md
+---
+mdc: true
+---
+```
+
+## Inline Styles
+
+```md
+This is a [red text]{style="color:red"}
+```
+
+## Inline Components
+
+```md
+:inline-component{prop="value"}
+```
+
+## Image Attributes
+
+```md
+![](/image.png){width=500px lazy}
+```
+
+## Block Components
+
+```md
+::block-component{prop="value"}
+The **default** slot content
+::
+```
+
+## Use Cases
+
+- Add inline styles without HTML
+- Use Vue components inline
+- Add attributes to images
+- Create complex component layouts
+
+Based on Nuxt's MDC (Markdown Components) syntax.

skills/slidev/references/tool-eject-theme.md

@@ -0,0 +1,27 @@
+---
+name: eject-theme
+description: Extract theme to local filesystem for customization
+---
+
+# Eject Theme
+
+Extract installed theme to local filesystem for customization.
+
+## Command
+
+```bash
+slidev theme eject
+```
+
+## Result
+
+- Theme files copied to `./theme/`
+- Frontmatter updated to `theme: ./theme`
+
+## Use Case
+
+- Full control over theme
+- Create new theme based on existing one
+- Customize without modifying node_modules
+
+If creating a derivative theme, credit the original theme and author.