106.9K+Télécharger
Aller au guide d’utilisation
Streamdownpar vercel

Streamdown Skill.

Affichez du Markdown en streaming avec diagrammes, code et contrôles de contenu explicites.

  • Markdown en streaming
  • React
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · streamdownSKILL.md
Tâche Affichez du Markdown en streaming avec diagrammes, code et contrôles de contenu explicites. Résultats Un moteur Streamdown relié au contenu Markdown de l’application. Avant de commencer Partez du format des messages de l’application React, de la version Tailwind et des fonctions Markdown requises. Choisissez plugins et contrôles avant de relier l’état de streaming de la réponse active.
Résumé éditorial · source examinée le 2026-11-02 · ce n’est pas un exemple généré

01 Fonctionnement

Affichez du Markdown en streaming avec diagrammes, code et contrôles de contenu explicites

Configurez Streamdown pour les réponses IA, la coloration syntaxique, Mermaid, les maths et le texte CJK, avec Tailwind et des contrôles de sécurité du contenu.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

Streamdown aide un agent à intégrer un moteur React de rendu Markdown conçu pour un contenu reçu progressivement. Il couvre modes streaming et statique, coloration du code, diagrammes, notation mathématique et texte CJK. Le skill explique aussi les contrôles du contenu rendu : copie, liens et traitement des éléments personnalisés.

Sa valeur pratique réside dans les détails d’intégration faciles à oublier. La source souligne l’analyse des fichiers de packages par Tailwind, les styles KaTeX pour les maths et la relation entre le curseur de streaming et isAnimating. Les plugins optionnels sont ajoutés selon les besoins réels de contenu de l’interface.

Livrables attendus

  • Un moteur Streamdown relié au contenu Markdown de l’application.
  • Une configuration des plugins et de Tailwind adaptée aux packages installés.
  • Des choix explicites pour confirmation des liens, éléments autorisés et contrôles interactifs.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Choisir les capacités de contenu

    Déterminez si les réponses nécessitent code, Mermaid, maths ou CJK. Choisissez le mode streaming pour les réponses progressives ou statique pour les documents complets.

  2. 02
    Configurer rendu et styles

    Installez les packages choisis et incluez leurs fichiers de distribution dans l’analyse Tailwind. Tailwind v4 utilise @source ; v3 utilise les entrées content de sa configuration. Ajoutez seulement les chemins des plugins installés. Importez le CSS KaTeX pour les maths, puis reliez le moteur à la structure actuelle des messages.

  3. 03
    Vérifier streaming et sécurité

    Définissez l’état d’animation de la réponse active et examinez HTML personnalisé, gestion des URL et confirmation des liens. Inspectez réponses incomplètes et contenu terminé.

02 Cas d’usage

Quand l’utiliser

Partez du format des messages de l’application React, de la version Tailwind et des fonctions Markdown requises. Choisissez plugins et contrôles avant de relier l’état de streaming de la réponse active.

Un bon choix

  • Réponses progressivesUne conversation IA affiche des réponses formatées à mesure que les tokens arrivent.
  • Documents formatésUne vue documentaire React nécessite Markdown et un support optionnel de diagrammes ou de maths.

Limites à vérifier

  • Le backend appartient à l’applicationL’application reste responsable de son point d’accès IA et du cycle de vie des messages.
  • Compatibilité des versionsLes exemples documentés doivent être adaptés aux versions des SDK installées.
  • Vérification de l’intégrationStyles des plugins et contrôles de contenu doivent être vérifiés dans l’application cible.

Éléments à fournir

  • Contenu MarkdownLe flux ou la chaîne Markdown complète à afficher.
  • Dépendances choisiesLes plugins sélectionnés et la version Tailwind installée.
  • Contrôles de contenuLes exigences du projet pour liens, HTML et contrôles de téléchargement.

03 Décisions importantes

Les décisions importantes

  1. Deux modes de rendu

    Modes statique et streaming partagent la même intégration.

  2. Plugins sélectifs

    Les capacités de contenu se choisissent sans activer tous les plugins optionnels.

  3. Contrôles de configuration concrets

    Les contrôles documentés ciblent styles manquants, maths et problèmes du curseur de streaming.

04 Exemple de brief

Essayez un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Examinez la source et la configuration

Le flux ou la chaîne Markdown complète à afficher.

Fichier source amont
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md

Le lien ci-dessous ouvre les instructions d’origine. Vérifiez la configuration du dépôt avant utilisation ; ce n’est pas une commande d’installation.

Commencez par un livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief
Utilise streamdown pour la zone de réponse de l’assistant dans notre application React. Examine les versions installées d’AI SDK et de Tailwind avant d’adapter un exemple. Nous voulons du code coloré et des diagrammes Mermaid, sans plugin de maths à cette étape. Configure l’analyse des packages, conserve le thème actuel et n’applique l’indicateur de streaming qu’à la réponse active. Garde la confirmation des liens activée. Prévisualise du Markdown incomplet, un diagramme terminé et un long bloc de code, puis rapporte les changements de configuration et les contrôles non testés.

Examinez le résultat

Comparez le résultat réel à ces critères observables.

  • Les styles des plugins choisis sont inclus et les chemins des plugins non installés sont absents.
  • Le curseur n’apparaît qu’avec l’état d’animation prévu.
  • Liens, contrôles de code et diagrammes fonctionnent pour le contenu complet et partiel.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants et ses dépendances logicielles.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
vercel
Dépôt
vercel/streamdown
Fichier du skill
SKILL.md
Licence
Apache-2.0
Version examinée
2026-11-02 · 7dcabc64df94
Résumé éditorial de la source
Affichez du Markdown en streaming avec diagrammes, code et contrôles de contenu explicites.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Peut-il afficher des documents ordinaires ?

Oui. La source inclut un mode statique pour du Markdown complet, comme la documentation ou les articles de blog.

Pourquoi le curseur manque-t-il ?

La configuration documentée exige un style de curseur et isAnimating défini sur true.

Installer le support mathématique termine-t-il sa configuration ?

La source exige aussi la feuille de style KaTeX. Le traitement par défaut utilise la notation à doubles dollars pour éviter les conflits avec les montants monétaires.

Pourquoi la copie est-elle désactivée pendant l’arrivée d’une réponse ?

Les contrôles documentés désactivent la copie lorsque isAnimating vaut true. Activez ce drapeau uniquement pour la réponse en cours et désactivez-le à la fin ; sinon, les messages terminés peuvent conserver l’état de streaming.

OpenDesign

Gardez votre brief et votre travail de design au même endroit.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md