devskill 2.0.2

package/skills/slidev/references/core-syntax.md

@@ -0,0 +1,155 @@
+---
+name: syntax
+description: Core Markdown syntax for Slidev presentations
+---
+
+# Slidev Markdown Syntax
+
+Core Markdown syntax for Slidev presentations.
+
+## Slide Separator
+
+Use `---` with blank lines before and after:
+
+```md
+# Slide 1
+
+Content
+
+---
+
+# Slide 2
+
+More content
+```
+
+## Headmatter (Deck Config)
+
+First frontmatter block configures the entire deck:
+
+```md
+---
+theme: default
+title: My Presentation
+lineNumbers: true
+---
+
+# First Slide
+```
+
+## Per-Slide Frontmatter
+
+Each slide can have its own frontmatter:
+
+```md
+---
+layout: center
+background: /image.jpg
+class: text-white
+---
+
+# Centered Slide
+```
+
+## Presenter Notes
+
+HTML comments at end of slide become presenter notes:
+
+```md
+# My Slide
+
+Content here
+
+<!--
+These are presenter notes.
+- Remember to mention X
+- Demo the feature
+-->
+```
+
+## Code Blocks
+
+Standard Markdown with Shiki highlighting:
+
+````md
+```ts
+const hello = 'world'
+```
+````
+
+With features:
+````md
+```ts {2,3}              // Line highlighting
+```ts {1|2-3|all}        // Click-based highlighting
+```ts {monaco}           // Monaco editor
+```ts {monaco-run}       // Runnable code
+```ts twoslash           // TypeScript types
+```
+````
+
+## LaTeX Math
+
+Inline: `$E = mc^2$`
+
+Block:
+```md
+$$
+\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
+$$
+```
+
+## Diagrams
+
+Mermaid:
+````md
+```mermaid
+graph LR
+  A --> B --> C
+```
+````
+
+PlantUML:
+````md
+```plantuml
+@startuml
+Alice -> Bob : Hello
+@enduml
+```
+````
+
+## 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
+---
+```

package/skills/slidev/references/diagram-latex.md

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

package/skills/slidev/references/diagram-mermaid.md

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

package/skills/slidev/references/diagram-plantuml.md

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

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

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

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

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

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

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

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.