devskill 2.0.2

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

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

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

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

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

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

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