@slidev/cli 52.11.3 → 52.11.5

package/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.

package/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.

package/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

package/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

package/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.

package/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.

package/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

package/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

package/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

package/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

package/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.

package/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

package/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

package/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.

package/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/

package/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.