slidevyazan Slidev

Slidev Skill.

PPT ve slayt desteler için bir Claude Code ve Codex skill'i: Markdown, Vue bileşenleri, kod vurgulama ve animasyon ile geliştirici slayt desteleri.

Presentations
HTML slaytları

OpenDesign İndir Kullanım kılavuzunu görüntüle

slidevjs/slidev · skills/slidev/SKILL.mdSKILL.md

--- name: slidev description: Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks. --- ## When to Use ## Quick Start ## Basic Syntax ## Common Layouts

Ön bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okundu · Toplamda 8.896 karakter

01 Ne yapar

slidev Skill'inin Claude Code ve Codex'te Yaptıkları

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Slidev, Vite, Vue ve Markdown üzerine kurulmuş, geliştiriciler için web tabanlı bir slayt oluşturucudur. Sözdizimi vurgulamalı kod parçacıkları, Monaco editörünü kullanan canlı kod örnekleri, etkileşimli demolar, LaTeX denklemleri ve Mermaid veya PlantUML diyagramları içeren teknik sunumlar oluşturur. Slaytlar, --- ayırıcılarıyla, deck yapılandırması için headmatter olarak kullanılan ilk frontmatter ile ve sunum notları için HTML yorumlarıyla Markdown'da yazılır.

Tıklama tabanlı animasyonları (v-click, magic-move), satır vurgulamayı, kod sekmelerini, kamera ile kaydı, uzaktan kumandayı ve zamanlayıcıyı destekler. PDF veya PPTX olarak dışa aktarmak için playwright-chromium gerekir. Derleme komutları arasında yerel önizleme için localhost:3030 adresinde pnpm run dev, PDF için pnpm run export ve statik SPA dağıtımı için pnpm run build bulunur.

Neler üretir

Sunumun PDF olarak dışa aktarımı

Örnek istemi görün ↗

Nasıl Çalışır

01
Projeyi Başlatın
Yeni bir Slidev sunum projesi oluşturmak için pnpm create slidev komutunu çalıştırın.
02
Slaytları Markdown'da Yazın
Slaytları --- ile ayırın, deck ayarlarını ilk frontmatter bloğunda yapılandırın ve sunum notlarını HTML yorumlarına ekleyin.
03
Geliştirme Sunucusunu Başlatın
Yerel sunucuyu başlatmak ve sunumu http://localhost:3030 adresinde açmak için pnpm run dev komutunu çalıştırın.
04
Dışa Aktarın veya Derleyin
PDF çıkışı için pnpm run export komutunu veya barındırma için statik bir SPA oluşturmak için pnpm run build komutunu kullanın.

02 Uyumunuzu bulun

slidev Skill Ne Zaman Kullanılır

İş bu türden PPT ve slayt desteleri olduğunda Claude Code veya Codex'te slidev skill'ini kullanın. Aşağıdaki uygunluk ve sınırlar, skill'in kendi dosyasından alınmıştır.

İyi Uyum

Canlı kod örnekleri içeren teknik sunumlar veya slayt desteleri
Animasyonlu sözdizimi vurgulama ile kod parçacıkları
Monaco editörü kullanan etkileşimli demolar veya çalıştırılabilir kod
LaTeX ile matematiksel denklemler veya Mermaid ve PlantUML ile diyagramlar
Geliştirici konuşmaları veya çalıştaylar için kod anlatımları

Sınırları Bilin

Slidev GerektirirSKILL.md bu bağımlılığı belirtir; skill projenizde bu olmadan çalışmaz.

Ne Sağlamalısınız

Kod parçacıklarıSlaytlarda gösterilmek üzere <<< @/snippets/file.js sözdizimiyle içe aktarılan harici kod dosyaları.

03 Skill'in içinde

slidev Skill'inin Claude Code ve Codex'e Verdiği Kurallar

Ajanın için SKILL.md dosyasının belirlediği 5 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

Headmatter, İlk Frontmatter'dır
Dosyadaki ilk frontmatter bloğu, tek tek slayt ayarlarını değil, deck genelindeki ayarları yapılandırır.
HTML Yorumlarında Sunum Notları
Sunum notlarını, her slaytın içindeki HTML yorum bloklarının içine yazın. Bunlar slaytın kendisinde görünmez.
Dışa Aktarma İçin playwright-chromium Gerekir
Dışa aktarma komutlarını çalıştırmadan önce pnpm add -D playwright-chromium komutunu kurun. Dışa aktarma bir tarayıcı hatasıyla başarısız olursa, bu bağımlılık eksik demektir.
Birleştirmede Ana Giriş Kazanır
Slaytlar src ile içe aktarıldığında, ana giriş dosyasındaki frontmatter, içe aktarılan dosyanın frontmatter'ına göre önceliklidir.
Comark Gelişmiş Sözdizimini Etkinleştirir
Kod gruplarını ve {style="color:red"} gibi satır içi style özniteliklerini etkinleştirmek için headmatter içinde comark: true değerini ayarlayın.

04 İşe koyun

Claude Code veya Codex'te slidev'i yükleyin

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

Claude Code, Codex veya Ajanınıza slidev ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal

npx skills add https://github.com/slidevjs/slidev --skill slidev

skills/slidev/SKILL.md için genel skills CLI biçimi; depo kendi yolunu farklı belgeleyebilir.

Beceriye İlk PPT ve Slayt Sunumu Görevini Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt

Create a technical presentation for a React workshop with three sections: component lifecycle, hooks deep-dive, and performance optimization. Include live Monaco editor demos showing useState and useEffect patterns, syntax-highlighted TypeScript code with click-based line reveals for the reconciliation algorithm explanation, a Mermaid diagram of the component tree, and a two-column layout comparing class components and functional components. Add presenter notes with timing estimates for each section and configure a 45-minute countdown timer.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

pnpm run dev çalıştırdıktan sonra slaytların http://localhost:3030 adresinde yüklendiğini doğrulayın
pnpm run export çalıştırdıktan sonra çıktı PDF'sinin proje kök dizininde bulunduğunu doğrulayın
Dışa aktarma bir tarayıcı hatasıyla başarısız olursa önce playwright-chromium bağımlılığını yükleyin
v-click öğelerinin sırayla göründüğünden emin olmak için slaytlar arasında ilerleyerek tıklama tabanlı animasyonları test edin

OpenDesign'da slidev'i SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta seçin.

OpenDesign İndir Hızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author: Slidev
Repository: github.com/slidevjs/slidev Dal main
Skill dosyası: skills/slidev/SKILL.md İçerik sağlama toplamı doğrulamada kaydedildi; commit a8d8ff7
License: MIT LICENSE dosyasından.
Repository yıldızları: 48.658 GitHub anlık görüntüsü 2026-09-14 tarihinde tüm slidevjs/slidev deposu için alındı. slidev için derecelendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı: 2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

Ne Zaman KullanılırKullanım örneklerini listeler: teknik sunumlar, kod parçacıkları, etkileşimli demolar, denklemler, diyagramlar, kayıt, dışa aktarma biçimleri
Hızlı BaşlangıçProje oluşturma, geliştirme sunucusunu başlatma, SPA derleme ve PDF olarak dışa aktarma komutları
Temel SözdizimiSlayt ayırıcı, headmatter yapılandırması, HTML yorumlarında sunucu notları
Temel ReferanslarTemel konuların tablosu: sözdizimi, animasyonlar, frontmatter, CLI, bileşenler, düzenler, dışa aktarma, barındırma, global bağlam
Özellik ReferansıKod vurgulama, Monaco editörü, diyagramlar, matematik, düzenler, biçimlendirme, animasyonlar, sözdizimi uzantıları, sunum araçları, dışa aktarma seçeneklerini kapsayan kapsamlı tablolar
Yaygın DüzenlerYerleşik düzenler: kapak, merkez, iki sütun, görsel varyantları, iframe varyantları, alıntı, bölüm, gerçek, giriş, son
KaynaklarBelgelere, tema galerisine ve tanıtım örneklerine bağlantılar

Skill'in Kendi Açıklaması

"Markdown, Vue bileşenleri, kod vurgulama, animasyonlar ve etkileşimli özelliklerle geliştiriciler için Slidev kullanarak web tabanlı slayt sunumları oluşturun ve sunun. Teknik sunumlar, konferans konuşmaları, kod incelemeleri, öğretim materyalleri veya geliştirici sunumları oluştururken kullanın."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 8.896 karakter. GitHub'da tam dosyayı okuyun.

Slidev

Gerçek bir PPT ve Slayt Sunumu Görevinde slidev'i çalıştırın.

OpenDesign'ı indirin, slidev'i SKILL.md bağlantısından içe aktarın, yukarıdaki promptu yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın