devskill 2.0.2

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

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

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

package/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'
+```