Keep the personal half of the desktop in one place, and ask before installing it

Agent instructions, skills, SSH host aliases and expansion triggers are worth having identical on every machine one person owns, and belong in none of the shared configuration. They live in user/ now, with a manifest saying where each piece goes and a link-user stage that puts it there. That stage does nothing unless the machine said yes. Somebody who clones Panama to try the desktop keeps their own ~/.claude/CLAUDE.md exactly where it was; the question names the destinations and defaults to no. Anything displaced goes to config/old rather than being deleted. ~/.claude/CLAUDE.md and ~/.codex/AGENTS.md were byte-identical copies of one file, which is the drift this exists to prevent. Also adds the vitals toggles for the battery and Claude usage readouts, which had preferences and no way to reach them.
2026-08-22 08:54:43 -04:00
parent 8b96d907a1
commit 89761a7da3
156 changed files with 16439 additions and 6 deletions
@@ -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
@@ -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.
@@ -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>
+```
@@ -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((to, from) => {
+  // Called when slide becomes active
+})
+
+onSlideLeave((to, from) => {
+  // 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
@@ -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.
@@ -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.
@@ -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" />
+```
@@ -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.
@@ -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 Comark syntax in headmatter:
+
+```md
+---
+comark: 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']
+})
+```
@@ -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}
+```
@@ -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
+```
+````
@@ -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
+```
+````
@@ -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/
@@ -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.
@@ -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/
@@ -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;
+}
+```
@@ -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
+```
@@ -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.
@@ -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
+```
@@ -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
+```
@@ -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((to, from) => {
+  // Slide became active
+  startAnimation()
+})
+
+onSlideLeave((to, from) => {
+  // 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'
+```
@@ -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
+---
+```
@@ -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.
@@ -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
+```
@@ -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
+```
+````
+
+## Comark Syntax
+
+Enable with `comark: 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
+---
+```
@@ -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+}
+$$
+```
@@ -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/
@@ -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
@@ -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`.
@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -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
@@ -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
@@ -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.
@@ -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.
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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.
@@ -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
@@ -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
@@ -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.
@@ -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/
@@ -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.
@@ -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
@@ -0,0 +1,51 @@
+---
+name: comark
+description: Comark Syntax support
+---
+
+# Comark Syntax
+
+Enhanced Markdown with component and style syntax.
+
+## Enable
+
+```md
+---
+comark: 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 Comark Syntax.
@@ -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.
@@ -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.
@@ -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.