slidev

slidevjs/slidev · Agent Skill

Geliştiriciler için Slidev ile Markdown, Vue bileşenleri, kod vurgulama ve animasyonlar kullanarak slaytlar oluşturun.

Genel bakış

Yayıncı	slidevjsKuruluş
Depo	slidevjs/slidev ↗
Skill klasörü	`slidev`
Yıldız	49.230
Fork	2.248
Dosyalar	55
Lisans	MIT
Son güncelleme	23 Ekim 2026
Bağlantılar	Skill kaynağı ↗ · Depo ↗

Mozgi kontrolü

Skill dosyalarında bulduklarımız. Ayrıntılar abonelikle.

Güvenlik

düşük risk · belirgin risk bulunamadı — tam rapor ayrıntıları gösterir

Uyumluluk

yalnızca talimatlar — çoğu ajanla çalışır

Benzer skiller

72 benzer skill bulundu

Abonelikte ayrıca

Kurulum

Skill, SKILL.md dosyası içeren bir klasördür. Ajanınızı seçin ve komutları proje kökünde bir terminalde çalıştırın (macOS, Linux veya Windows'ta Git Bash).

Promptu Claude, Codex veya başka bir asistana yapıştırın: skill'i inceleyip sizin için kuracaktır.

Install the “slidev” skill from mozgi.io (https://mozgi.io/skills/antfu-slidev/) for me.

1. Download the archive: https://mozgi.io/skills/antfu-slidev/download
   If it fails, take the skill folder from the source: https://github.com/slidevjs/slidev/tree/main/skills/slidev
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “slidev” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/slidev/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

git clone --depth 1 --branch main https://github.com/slidevjs/slidev.git /tmp/slidev
mkdir -p .claude/skills
cp -r /tmp/slidev/skills/slidev .claude/skills/slidev

Claude Code'u yeniden başlatın — skill listede görünür; elle çağırmak için /slidev. Tüm projeler için ~/.claude/skills.

git clone --depth 1 --branch main https://github.com/slidevjs/slidev.git /tmp/slidev
mkdir -p .agents/skills
cp -r /tmp/slidev/skills/slidev .agents/skills/slidev

Codex skill'leri geçerli klasörden depo köküne kadar .agents/skills içinde arar; /skills veya $slidev ile çağırın. Tüm projeler için ~/.agents/skills.

git clone --depth 1 --branch main https://github.com/slidevjs/slidev.git /tmp/slidev
mkdir -p .cursor/skills
cp -r /tmp/slidev/skills/slidev .cursor/skills/slidev

Cursor skill'i açılışta yükler; Agent sohbetinde “/” ile çağırın. Cursor .claude/skills ve .agents/skills klasörlerini de okur. Tüm projeler için ~/.cursor/skills.

git clone --depth 1 --branch main https://github.com/slidevjs/slidev.git /tmp/slidev
mkdir -p .gemini/skills
cp -r /tmp/slidev/skills/slidev .gemini/skills/slidev

Gemini CLI, görev uyduğunda skill'i etkinleştirmeyi önerir — siz onaylarsınız. Tüm projeler için ~/.gemini/skills.

Kaynak dosyaları

55 dosya ZIP indir

Kurulumdan önce SKILL.md ve eşlik eden dosyaları inceleyin. Önizleme için dosyaya tıklayın.

SKILL.md içeriği

Yazarın orijinal metni · salt okunur

Slidev - Presentation Slides for Developers

Web-based slides maker built on Vite, Vue, and Markdown.

When to Use

Technical presentations or slidedecks with live code examples
Syntax-highlighted code snippets with animations
Interactive demos (Monaco editor, runnable code)
Mathematical equations (LaTeX) or diagrams (Mermaid, PlantUML)
Record presentations with presenter notes
Export to PDF, PPTX, or host as SPA
Code walkthroughs for developer talks or workshops

Quick Start

pnpm create slidev    # Create project
pnpm run dev          # Start dev server (opens http://localhost:3030)
pnpm run build        # Build static SPA
pnpm run export       # Export to PDF (requires playwright-chromium)

Verify: After pnpm run dev, confirm slides load at http://localhost:3030. After pnpm run export, check the output PDF exists in the project root.

Basic Syntax

---
theme: default
title: My Presentation
---

# First Slide

Content here

---

# Second Slide

More content

<!--
Presenter notes go here
-->

--- separates slides
First frontmatter = headmatter (deck config)
HTML comments = presenter notes

Core References

| Topic | Description | Reference |

|-------|-------------|-----------|

| Markdown Syntax | Slide separators, frontmatter, notes, code blocks | core-syntax ↗ |

| Animations | v-click, v-clicks, motion, transitions | core-animations ↗ |

| Headmatter | Deck-wide configuration options | core-headmatter ↗ |

| Frontmatter | Per-slide configuration options | core-frontmatter ↗ |

| CLI Commands | Dev, build, export, theme commands | core-cli ↗ |

| Components | Built-in Vue components | core-components ↗ |

| Layouts | Built-in slide layouts | core-layouts ↗ |

| Exporting | PDF, PPTX, PNG export options | core-exporting ↗ |

| Hosting | Build and deploy to various platforms | core-hosting ↗ |

| Global Context | $nav, $slidev, composables API | core-global-context ↗ |

Feature Reference

Code & Editor

| Feature | Usage | Reference |

|---------|-------|-----------|

| Line highlighting | ` `ts {2,3} ` | code-line-highlighting ↗ |

| Click-based highlighting | ` `ts {1\|2-3\|all} ` | code-line-highlighting ↗ |

| Line numbers | lineNumbers: true or {lines:true} | code-line-numbers ↗ |

| Scrollable code | {maxHeight:'100px'} | code-max-height ↗ |

| Code tabs | ::code-group (requires comark: true) | code-groups ↗ |

| Monaco editor | ` `ts {monaco} ` | editor-monaco ↗ |

| Run code | ` `ts {monaco-run} ` | editor-monaco-run ↗ |

| Edit files | <<< ./file.ts {monaco-write} | editor-monaco-write ↗ |

| Code animations | ` ``md magic-move ` | code-magic-move ↗ |

| TypeScript types | ` `ts twoslash ` | code-twoslash ↗ |

| Import code | <<< @/snippets/file.js | code-import-snippet ↗ |

Diagrams & Math

| Feature | Usage | Reference |

|---------|-------|-----------|

| Mermaid diagrams | ` `mermaid ` | diagram-mermaid ↗ |

| PlantUML diagrams | ` `plantuml ` | diagram-plantuml ↗ |

| LaTeX math | $inline$ or $$block$$ | diagram-latex ↗ |

Layout & Styling

| Feature | Usage | Reference |

|---------|-------|-----------|

| Canvas size | canvasWidth, aspectRatio | layout-canvas-size ↗ |

| Zoom slide | zoom: 0.8 | layout-zoom ↗ |

| Scale elements | <Transform :scale="0.5"> | layout-transform ↗ |

| Layout slots | ::right::, ::default:: | layout-slots ↗ |

| Scoped CSS | <style> in slide | style-scoped ↗ |

| Global layers | global-top.vue, global-bottom.vue | layout-global-layers ↗ |

| Draggable elements | v-drag, <v-drag> | layout-draggable ↗ |

| Icons | <mdi-icon-name /> | style-icons ↗ |

Animation & Interaction

| Feature | Usage | Reference |

|---------|-------|-----------|

| Click animations | v-click, <v-clicks> | core-animations ↗ |

| Rough markers | v-mark.underline, v-mark.circle | animation-rough-marker ↗ |

| Drawing mode | Press C or config drawings: | animation-drawing ↗ |

| Direction styles | forward:delay-300 | style-direction ↗ |

| Note highlighting | [click] in notes | animation-click-marker ↗ |

Syntax Extensions

| Feature | Usage | Reference |

|---------|-------|-----------|

| Comark syntax | comark: true + {style="color:red"} | syntax-comark ↗ |

| Block frontmatter | ` `yaml instead of ---` | syntax-block-frontmatter ↗ |

| Import slides | src: ./other.md | syntax-importing-slides ↗ |

| Merge frontmatter | Main entry wins | syntax-frontmatter-merging ↗ |

Presenter & Recording

| Feature | Usage | Reference |

|---------|-------|-----------|

| Recording | Press G for camera | presenter-recording ↗ |

| Timer | duration: 30min, timer: countdown | presenter-timer ↗ |

| Remote control | slidev --remote | presenter-remote ↗ |

| Ruby text | notesAutoRuby: | presenter-notes-ruby ↗ |

Export & Build

| Feature | Usage | Reference |

|---------|-------|-----------|

| Export options | slidev export | core-exporting ↗ |

| Build & deploy | slidev build | core-hosting ↗ |

| Build with PDF | download: true | build-pdf ↗ |

| Cache images | Automatic for remote URLs | build-remote-assets ↗ |

| OG image | seoMeta.ogImage or og-image.png | build-og-image ↗ |

| SEO tags | seoMeta: | build-seo-meta ↗ |

Export prerequisite: pnpm add -D playwright-chromium is required for PDF/PPTX/PNG export. If export fails with a browser error, install this dependency first.

Editor & Tools

| Feature | Usage | Reference |

|---------|-------|-----------|

| Side editor | Click edit icon | editor-side ↗ |

| VS Code extension | Install antfu.slidev | editor-vscode ↗ |

| Prettier | prettier-plugin-slidev | editor-prettier ↗ |

| Eject theme | slidev theme eject | tool-eject-theme ↗ |

| MCP server (AI agents) | http://localhost:<port>/__mcp or slidev mcp | tool-mcp ↗ |

Lifecycle & API

| Feature | Usage | Reference |

|---------|-------|-----------|

| Slide hooks | onSlideEnter(), onSlideLeave() | api-slide-hooks ↗ |

| Navigation API | $nav, useNav() | core-global-context ↗ |

Common Layouts

| Layout | Purpose |

|--------|---------|

| cover | Title/cover slide |

| center | Centered content |

| default | Standard slide |

| two-cols | Two columns (use ::right::) |

| two-cols-header | Header + two columns |

| image / image-left / image-right | Image layouts |

| iframe / iframe-left / iframe-right | Embed URLs |

| quote | Quotation |

| section | Section divider |

| fact / statement | Data/statement display |

| intro / end | Intro/end slides |

Resources

Documentation: https://sli.dev
Theme Gallery: https://sli.dev/resources/theme-gallery
Showcases: https://sli.dev/resources/showcases

Sık sorulan sorular

slidev skill'i ne yapar?

Geliştiriciler için Slidev ile Markdown, Vue bileşenleri, kod vurgulama ve animasyonlar kullanarak slaytlar oluşturun.

slidev nasıl kurulur?

Bu sayfadaki “Kurulum” bölümünü açın ve ajanınızı seçin — Claude Code, Codex, Cursor veya Gemini CLI: skill klasörünü doğru yere kopyalayan hazır komutlar orada. Ya da “Asistanla” sekmesindeki promptu kopyalayın; asistan skill'i inceleyip kuracaktır.

slidev hangi yapay zekâlarla çalışır?

Skill'ler düz Markdown talimatlarıdır (Agent Skills formatı), bu yüzden slidev SKILL.md okuyan her ajanla çalışır: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode ve diğerleri. Model talimatları yalnızca görev skill açıklamasına uyduğunda yükler.

slidev ücretsiz mi?

Skill, slidevjs tarafından açık olarak yayımlandı (MIT lisansı). Skill'in kendisi ücretsizdir — yalnızca kullandığınız token'lar için yapay zekâ sağlayıcınıza ödeme yaparsınız.

Skill kurmak güvenli mi?

Skill, ajanınızın izleyeceği talimatlardır; kurmadan önce SKILL.md ve eşlik eden dosyaları okuyun. Skill klasöründeki betikler yalnızca ajanınız çalıştırırsa çalışır — ne yaptığını izleyin ve gereksiz izin vermeyin.

Skill, MCP sunucusu veya eklentiden nasıl farklıdır?

MCP sunucusu veya eklenti modele yeni araçlar verir — çalışıp sonuç döndüren kod. Skill ise bilgi ve süreç verir: göreve nasıl yaklaşılacağı, hangi adımların izleneceği ve iyi sonucun neye benzediği. Sunucu veya API anahtarı gerekmez.

Benzer skiller

Tüm skiller →

remotion-video-creation Remotion kullanarak React'ta video oluşturmak için 3D, animasyon, ses ve altyazıları kapsayan 29 kural sunar. affaan-m258k

videodb Video ve sesleri işler: alır, indeksler, arar, düzenler, dönüştürür, medya oluşturur ve uyarılar üretir. affaan-m258k

ui-demo Playwright kullanarak web uygulamaları için profesyonel kullanıcı arayüzü demo videoları oluşturur, imleç ve doğal hız içerir. affaan-m258k

taste Angelcore, cloud-trance, hyperpop tarzlarında müzik videoları ve kısa düzenlemeler için yaratıcı bir yön oluşturur, görselleri müzikle senkronize eder. affaan-m258k

fal-ai-media Metinden görüntüye, metinden videoya ve metinden konuşmaya dahil olmak üzere fal.ai modellerini kullanarak resimler, videolar ve sesler oluşturur. affaan-m258k

tasteforge-video Video, resim ve 3D varlıklar için stil analizi, doğrulama ve zaman çizelgesi dışa aktarma dahil iş akışları oluşturur ve yönetir. affaan-m258k