106.9K+İndir
Kullanım kılavuzuna geç
Streamdownyazan vercel

Streamdown Skill'i.

Diyagramlar, kod ve açık içerik denetimleriyle akış hâlindeki Markdown’ı işleyin.

  • Akış hâlinde Markdown
  • React
OpenDesign İndirKullanım Kılavuzunu Görüntüle
Kaynak incelemesi · streamdownSKILL.md
Görev Diyagramlar, kod ve açık içerik denetimleriyle akış hâlindeki Markdown’ı işleyin. Çıktılar Uygulamanın Markdown içeriğine bağlı Streamdown işleyicisi. Başlamadan önce React uygulamasının mesaj biçimi, Tailwind sürümü ve gereken Markdown özellikleriyle başlayın. Etkin yanıtın akış durumunu bağlamadan önce eklentileri ve içerik kontrollerini seçin.
Editoryal özet · kaynak inceleme tarihi 2026-11-02 · oluşturulmuş bir örnek değildir

01 İşlevler

Diyagramlar, kod ve açık içerik denetimleriyle akış hâlindeki Markdown’ı işleyin

AI yanıtları, sözdizimi vurgusu, Mermaid, matematik ve CJK metni için Streamdown’ı Tailwind kurulumu ve içerik güvenliği denetimleriyle yapılandırın.

Kaynağa dayalı iş akışıÇalıştırma kıyaslaması değildir

Çalışma Yaklaşımı

Streamdown, ajanın kademeli gelen içerik için geliştirilmiş React Markdown işleyicisini entegre etmesine yardımcı olur. Akış ve statik modları, kod vurgulamayı, diyagramları, matematik gösterimini ve CJK metnini kapsar. Skill ayrıca kopyalama, bağlantılar ve özel öğelerin işlenmesi dahil, gösterilen içerik çevresindeki kontrolleri açıklar.

Pratik değeri, kolayca gözden kaçan entegrasyon ayrıntılarındadır. Kaynak; Tailwind’in paket dosyalarını taramasını, matematik için KaTeX stillerini ve akış imleciyle isAnimating bayrağının ilişkisini vurgular. İsteğe bağlı eklentiler arayüzün gerçekten ihtiyaç duyduğu içeriğe göre eklenir.

Beklenen Çıktılar

  • Uygulamanın Markdown içeriğine bağlı Streamdown işleyicisi.
  • Kurulu paketlere uygun eklenti ve Tailwind yapılandırması.
  • Bağlantı onayı, izin verilen öğeler ve etkileşimli kontroller için açık tercihler.
Örnek Brief'i Gör

Brifden İncelemeye

  1. 01
    İçerik yeteneklerini seçin

    Yanıtların kod, Mermaid, matematik veya CJK desteğine ihtiyacı olup olmadığını belirleyin. Artımlı yanıtlar için akış, tamamlanmış belgeler için statik modu seçin.

  2. 02
    İşleme ve stilleri yapılandırın

    Seçilen paketleri kurup dağıtım dosyalarını Tailwind taramasına ekleyin. Tailwind v4 @source yönergeleri, v3 ise yapılandırmada content girdileri kullanır. Yalnızca kurulu eklentilerin yollarını ekleyin. Matematik kullanırken KaTeX CSS içe aktarın; ardından işleyiciyi mevcut mesaj yapısına bağlayın.

  3. 03
    Akışı ve güvenlik davranışını kontrol edin

    Etkin yanıtın animasyon durumunu belirleyin; özel HTML’yi, URL işlemeyi ve bağlantı onayını inceleyin. Hem eksik yanıtları hem tamamlanmış içeriği denetleyin.

02 Kullanım Alanları

Ne zaman kullanılır

React uygulamasının mesaj biçimi, Tailwind sürümü ve gereken Markdown özellikleriyle başlayın. Etkin yanıtın akış durumunu bağlamadan önce eklentileri ve içerik kontrollerini seçin.

İyi Bir Uyum

  • Kademeli yanıtlarAI sohbet görünümü, token’lar gelirken biçimlendirilmiş yanıtları işler.
  • Biçimlendirilmiş belgelerReact belge görünümü Markdown ve seçilebilir diyagram ya da matematik desteği gerektirir.

Kontrol Edilecek Sınırlar

  • Backend uygulamaya aittirUygulama kendi AI endpoint’inden ve mesaj yaşam döngüsünden sorumlu olmaya devam eder.
  • Sürüm uyumluluğuBelgelenmiş örnekler uygulamada kurulu SDK sürümlerine uyarlanmalıdır.
  • Entegrasyon doğrulamasıEklenti stilleri ve içerik kontrolleri hedef uygulamada doğrulanmalıdır.

Bu Girdileri Getirin

  • Markdown içeriğiİşlenecek akış veya tamamlanmış Markdown dizesi.
  • Seçilen bağımlılıklarSeçilen eklentiler ve kurulu Tailwind sürümü.
  • İçerik kontrolleriProjenin bağlantı, HTML ve indirme denetimi gereksinimleri.

03 Önemli Kararlar

Önemli kararlar

  1. İki işleme modu

    Statik ve akış modları tek işleyici entegrasyonunu paylaşır.

  2. Seçici eklentiler

    Her isteğe bağlı eklentiyi açmadan içerik yetenekleri seçilebilir.

  3. Somut kurulum kontrolleri

    Belgelenmiş kontroller eksik stilleri, matematiği ve akış imleci sorunlarını hedefler.

04 Örnek Görev Tanımı

Odaklı bir brief deneyin

Aşağıdaki örnek brif test edilmemiştir. Kullanmadan önce skill'in kurulumunu kontrol edin.

Kaynağı ve kurulumu inceleyin

İşlenecek akış veya tamamlanmış Markdown dizesi.

Üst Kaynak Dosyası
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md

Aşağıdaki referans, özgün talimatları açar. Kullanmadan önce depo kurulumunu inceleyin; bu bir kurulum komutu değildir.

Tek bir çıktıyla başlayın

Skill'i çalıştırmadan önce bu brifteki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brif
React uygulamamızdaki asistan yanıt alanında streamdown kullan. Örnekleri uyarlamadan önce kurulu AI SDK ve Tailwind sürümlerini incele. Vurgulanmış kod ve Mermaid diyagramları gerekiyor; bu turda matematik eklentisi gerekmiyor. Paket taramasını yapılandır, mevcut temayı koru ve akış göstergesini yalnızca etkin yanıta uygula. Bağlantı onayını açık tut. Eksik Markdown’ı, tamamlanmış diyagramı ve uzun kod bloğunu önizle; sonra yapılandırma değişikliklerini ve test edilmemiş kontrolleri bildir.

Sonucu inceleyin

Gerçek çıktıyı bu gözlemlenebilir ölçütlere göre kontrol edin.

  • Seçilen eklentilerin stilleri dahil; kurulu olmayan eklenti yolları yoktur.
  • İmleç yalnızca amaçlanan animasyon durumunda görünür.
  • Bağlantılar, kod kontrolleri ve diyagramlar tamamlanmış ve kısmi içerikte doğru çalışır.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu listeleme, skill'in paketle birlikte geldiği veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının dahil olduğu anlamına gelmez.

OpenDesign İndirHızlı Başlangıcı Oku

05 Kaynak ve Lisans

Kaynak ve lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak revizyonunu açıklar. Upstream davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi
vercel
Depo
vercel/streamdown
Skill Dosyası
SKILL.md
Lisans
Apache-2.0
İncelenen Sürüm
2026-11-02 · 7dcabc64df94
Editoryal Kaynak Özeti
Diyagramlar, kod ve açık içerik denetimleriyle akış hâlindeki Markdown’ı işleyin.

Bağlantılı kaynağa dayanan, OpenDesign tarafından hazırlanmış özgün özet. Depo yıldızları tarihli bir popülerlik göstergesidir; skill kullanımını veya kalite puanını göstermez.

06 Başlamadan Önce Sorular

Başlamadan önce sorular

Normal belgeleri işleyebilir mi?

Evet. Kaynak, dokümantasyon veya blog içeriği gibi tamamlanmış Markdown için statik mod içerir.

İmleç neden görünmüyor?

Belgelenmiş yapılandırma hem imleç stili hem isAnimating değerinin true olmasını gerektirir.

Matematik desteğini kurmak yeterli mi?

Kaynak ayrıca KaTeX stil dosyasını gerektirir. Varsayılan matematik işlemesi para birimi çakışmalarını önlemek için çift dolar gösterimi kullanır.

Yanıt gelirken kopyalama neden kapalı?

Belgelenmiş kontroller, isAnimating true iken kopyalamayı kapatır. Bu bayrağı yalnızca etkin akış yanıtında açın, yanıt bitince temizleyin; aksi hâlde tamamlanmış mesajlar akış durumunda kalabilir.

OpenDesign

Brief'inizi ve tasarım çalışmanızı bir arada tutun.

Brifinizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce skill'in kendi kurulumunu kontrol edin.

OpenDesign İndirTasarım Skill'lerine Göz At
Üst Kaynak Dosyası
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md