106.9K+Download
Zur Nutzungsanleitung springen
Streamdownvon vercel

Streamdown Skill.

Streaming-Markdown mit Diagrammen, Code und ausdrücklichen Inhaltskontrollen rendern.

  • Streaming-Markdown
  • React
OpenDesign herunterladenNutzungsanleitung ansehen
Quellprüfung · streamdownSKILL.md
Aufgabe Streaming-Markdown mit Diagrammen, Code und ausdrücklichen Inhaltskontrollen rendern. Ergebnisse Ein Streamdown-Renderer, der an die Markdown-Inhalte der Anwendung angebunden ist. Vor dem Start Mit dem Nachrichtenformat der React-Anwendung, der Tailwind-Version und den benötigten Markdown-Funktionen beginnen. Plugins und Inhaltskontrollen wählen, bevor der Streaming-Zustand der aktiven Antwort angebunden wird.
Redaktionelle Zusammenfassung · Quelle geprüft am 2026-11-02 · kein generiertes Beispiel

01 Funktionen

Streaming-Markdown mit Diagrammen, Code und ausdrücklichen Inhaltskontrollen rendern

Streamdown für KI-Antworten, Syntaxhervorhebung, Mermaid, Mathematik und CJK-Text konfigurieren – inklusive Tailwind und Inhaltssicherheit.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Streamdown hilft einem Agenten, einen React-Markdown-Renderer für schrittweise eintreffende Inhalte zu integrieren. Der Skill behandelt Streaming- und statische Modi, Code-Hervorhebung, Diagramme, mathematische Notation und CJK-Text. Er erläutert außerdem Steuerelemente für gerenderte Inhalte, darunter Kopieren, Links und die Behandlung eigener Elemente.

Sein praktischer Wert liegt in leicht übersehenen Integrationsdetails. Die Quelle nennt ausdrücklich das Scannen von Paketdateien durch Tailwind, KaTeX-Stile für Mathematik und den Zusammenhang zwischen Streaming-Cursor und isAnimating-Flag. Optionale Plugins werden passend zu den tatsächlich benötigten Inhalten ergänzt.

Erwartete Ergebnisse

  • Ein Streamdown-Renderer, der an die Markdown-Inhalte der Anwendung angebunden ist.
  • Plugin- und Tailwind-Konfiguration passend zu den installierten Paketen.
  • Ausdrückliche Festlegungen zu Linkbestätigung, erlaubten Elementen und interaktiven Bedienelementen.
Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Inhaltsfunktionen auswählen

    Feststellen, ob Antworten Code, Mermaid, Mathematik oder CJK-Unterstützung benötigen. Für schrittweise Antworten den Streaming-Modus wählen, für vollständige Dokumente den statischen Modus.

  2. 02
    Rendering und Stile konfigurieren

    Die gewählten Pakete installieren und ihre Distributionsdateien in das Tailwind-Scanning aufnehmen. Tailwind v4 verwendet @source-Direktiven; v3 verwendet content-Einträge in der Konfiguration. Nur Pfade installierter Plugins ergänzen. Bei Mathematik KaTeX CSS importieren und den Renderer dann an die aktuelle Nachrichtenstruktur anbinden.

  3. 03
    Streaming und Sicherheit prüfen

    Den Animationszustand für die aktive Antwort setzen und eigenes HTML, URL-Verarbeitung und Linkbestätigung prüfen. Sowohl unvollständige Antworten als auch fertige Inhalte inspizieren.

02 Einsatzbereiche

Wann einsetzen?

Mit dem Nachrichtenformat der React-Anwendung, der Tailwind-Version und den benötigten Markdown-Funktionen beginnen. Plugins und Inhaltskontrollen wählen, bevor der Streaming-Zustand der aktiven Antwort angebunden wird.

Gut geeignet

  • Schrittweise AntwortenEine KI-Chatansicht rendert formatierte Antworten, während Tokens eintreffen.
  • Formatierte DokumenteEine React-Dokumentansicht benötigt Markdown und wahlweise Unterstützung für Diagramme oder Mathematik.

Zu prüfende Grenzen

  • Backend bleibt bei der AnwendungKI-Endpunkt und Nachrichtenlebenszyklus liegen weiterhin in der Verantwortung der Anwendung.
  • VersionskompatibilitätDie dokumentierten Beispiele müssen an die installierten SDK-Versionen der Anwendung angepasst werden.
  • Integration überprüfenPlugin-Stile und Inhaltskontrollen müssen in der Zielanwendung geprüft werden.

Diese Eingaben mitbringen

  • Markdown-InhaltDer zu rendernde Stream oder die vollständige Markdown-Zeichenfolge.
  • Gewählte AbhängigkeitenDie ausgewählten Plugins und die installierte Tailwind-Version.
  • InhaltskontrollenDie Anforderungen des Projekts an Links, HTML und Download-Bedienelemente.

03 Wichtige Entscheidungen

Wichtige Entscheidungen

  1. Zwei Rendering-Modi

    Statischer und Streaming-Modus nutzen dieselbe Renderer-Integration.

  2. Gezielte Plugin-Auswahl

    Inhaltsfunktionen lassen sich auswählen, ohne jedes optionale Plugin zu aktivieren.

  3. Konkrete Konfigurationsprüfungen

    Die dokumentierten Prüfungen betreffen fehlende Stile, Mathematik und Probleme mit dem Streaming-Cursor.

04 Beispielbriefing

Ein konkretes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Quelle und Einrichtung prüfen

Der zu rendernde Stream oder die vollständige Markdown-Zeichenfolge.

Upstream-Quelldatei
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md

Der folgende Verweis öffnet die Originalanleitung. Prüfe vor der Nutzung die Einrichtung des Repositorys; dies ist kein Installationsbefehl.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Rahmenbedingungen in diesem Briefing an, bevor Sie den Skill ausführen.

Beispiel-Briefing
Verwende streamdown für den Antwortbereich des Assistenten in unserer React-Anwendung. Prüfe die installierten AI-SDK- und Tailwind-Versionen, bevor du Beispiele anpasst. Wir benötigen Code-Hervorhebung und Mermaid-Diagramme, diesmal aber kein Mathematik-Plugin. Konfiguriere das Paket-Scanning, bewahre das aktuelle Theme und aktiviere den Streaming-Indikator nur für die aktive Antwort. Lass die Linkbestätigung eingeschaltet. Prüfe unvollständiges Markdown, ein fertiges Diagramm und einen langen Codeblock in der Vorschau. Berichte anschließend über Konfigurationsänderungen und noch nicht getestete Bedienelemente.

Ergebnis prüfen

Prüfen Sie die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

  • Stile der gewählten Plugins sind enthalten; Pfade nicht installierter Plugins fehlen.
  • Der Cursor erscheint nur im vorgesehenen Animationszustand.
  • Links, Code-Bedienelemente und Diagramme funktionieren bei fertigen und unvollständigen Inhalten korrekt.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladenSchnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellinhaber
vercel
Repository
vercel/streamdown
Skill-Datei
SKILL.md
Lizenz
Apache-2.0
Geprüfter Stand
2026-11-02 · 7dcabc64df94
Redaktionelle Quellenzusammenfassung
Streaming-Markdown mit Diagrammen, Code und ausdrücklichen Inhaltskontrollen rendern.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, keine Skill-Nutzung und keine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Kann der Skill gewöhnliche Dokumente rendern?

Ja. Die Quelle enthält einen statischen Modus für vollständiges Markdown, etwa Dokumentation oder Blogbeiträge.

Warum fehlt der Cursor?

Die dokumentierte Konfiguration verlangt sowohl einen Cursor-Stil als auch isAnimating mit dem Wert true.

Ist die Einrichtung nach Installation der Mathematikunterstützung abgeschlossen?

Die Quelle verlangt zusätzlich das KaTeX-Stylesheet. Die Standardbehandlung von Mathematik nutzt doppelte Dollarzeichen, um Konflikte mit Währungsangaben zu vermeiden.

Warum ist Kopieren deaktiviert, während eine Antwort eintrifft?

Die dokumentierten Steuerelemente deaktivieren das Kopieren, solange isAnimating true ist. Setze dieses Flag nur für die aktive Streaming-Antwort und lösche es nach Abschluss. Andernfalls können fertige Nachrichten im Streaming-Zustand bleiben.

OpenDesign

Briefing und Designarbeit an einem Ort.

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladenDesign-Skills durchsuchen
Upstream-Quelldatei
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md