106.9K+Scarica
Vai alla guida all’uso
Streamdowndi vercel

Streamdown Skill.

Renderizza Markdown in streaming con diagrammi, codice e controlli espliciti dei contenuti.

  • Markdown in streaming
  • React
Scarica OpenDesignVedi la guida all'uso
Esame della fonte · streamdownSKILL.md
Attività Renderizza Markdown in streaming con diagrammi, codice e controlli espliciti dei contenuti. Risultati Un renderer Streamdown collegato al Markdown dell’applicazione. Prima di iniziare Parti dal formato dei messaggi React, dalla versione Tailwind e dalle funzionalità Markdown richieste. Scegli plugin e controlli prima di collegare lo stato di streaming della risposta attiva.
Sintesi editoriale · fonte esaminata il 2026-11-02 · non è un esempio generato

01 Funzionalità

Renderizza Markdown in streaming con diagrammi, codice e controlli espliciti dei contenuti

Configura Streamdown per risposte IA, evidenziazione della sintassi, Mermaid, matematica e testo CJK, con Tailwind e controlli di sicurezza dei contenuti.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Streamdown aiuta un agente a integrare un renderer React Markdown progettato per contenuti che arrivano progressivamente. Copre modalità streaming e statica, evidenziazione del codice, diagrammi, notazione matematica e testo CJK. Spiega anche controlli sul contenuto renderizzato: copia, link e gestione di elementi personalizzati.

Il valore pratico è nei dettagli d’integrazione facili da trascurare. La fonte evidenzia la scansione Tailwind dei file dei pacchetti, gli stili KaTeX per la matematica e la relazione tra cursore di streaming e isAnimating. I plugin opzionali si aggiungono in base ai contenuti realmente necessari all’interfaccia.

Risultati attesi

  • Un renderer Streamdown collegato al Markdown dell’applicazione.
  • Configurazione di plugin e Tailwind adeguata ai pacchetti installati.
  • Scelte esplicite su conferma dei link, elementi consentiti e controlli interattivi.
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Scegliere le capacità dei contenuti

    Individua se servono codice, Mermaid, matematica o CJK. Scegli streaming per risposte incrementali o modalità statica per documenti completi.

  2. 02
    Configurare rendering e stili

    Installa i pacchetti scelti e includi i file di distribuzione nella scansione Tailwind. Tailwind v4 usa direttive @source; v3 usa voci content nella configurazione. Aggiungi percorsi soltanto per plugin installati. Importa CSS KaTeX per la matematica, poi collega il renderer alla struttura attuale dei messaggi.

  3. 03
    Verificare streaming e sicurezza

    Imposta lo stato di animazione della risposta attiva e controlla HTML personalizzato, gestione URL e conferma dei link. Esamina risposte incomplete e contenuti finiti.

02 Quando usarlo

Quando usarla

Parti dal formato dei messaggi React, dalla versione Tailwind e dalle funzionalità Markdown richieste. Scegli plugin e controlli prima di collegare lo stato di streaming della risposta attiva.

Adatta a

  • Risposte progressiveUna chat IA mostra risposte formattate mentre arrivano i token.
  • Documenti formattatiUna vista documentale React richiede Markdown e supporto selezionabile per diagrammi o matematica.

Limiti da verificare

  • Backend dell’applicazioneL’applicazione resta responsabile del proprio endpoint IA e del ciclo di vita dei messaggi.
  • Compatibilità delle versioniGli esempi documentati vanno adattati alle versioni SDK installate.
  • Verifica d’integrazioneStili dei plugin e controlli dei contenuti richiedono verifica nell’applicazione di destinazione.

Cosa portare

  • Contenuto MarkdownIl flusso o la stringa Markdown completa da renderizzare.
  • Dipendenze selezionatePlugin scelti e versione Tailwind installata.
  • Controlli dei contenutiRequisiti del progetto per link, HTML e controlli di download.

03 Decisioni importanti

Le decisioni importanti

  1. Due modalità di rendering

    Modalità statica e streaming condividono la stessa integrazione.

  2. Plugin selettivi

    Le capacità si scelgono senza attivare ogni plugin opzionale.

  3. Controlli di configurazione concreti

    I controlli documentati affrontano stili mancanti, matematica e problemi del cursore di streaming.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Esamina la fonte e la configurazione

Il flusso o la stringa Markdown completa da renderizzare.

File sorgente originale
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md

Il riferimento seguente apre le istruzioni originali. Verifica la configurazione del repository prima di usarle: non è un comando di installazione.

Inizia con un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio
Usa streamdown nell’area di risposta dell’assistente della nostra applicazione React. Esamina le versioni installate di AI SDK e Tailwind prima di adattare esempi. Servono codice evidenziato e diagrammi Mermaid, senza plugin matematico in questa fase. Configura la scansione dei pacchetti, preserva il tema e applica l’indicatore di streaming solo alla risposta attiva. Mantieni la conferma dei link abilitata. Visualizza Markdown incompleto, un diagramma finito e un lungo blocco di codice, poi riporta modifiche di configurazione e controlli non testati.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Sono inclusi gli stili dei plugin scelti e non ci sono percorsi di plugin non installati.
  • Il cursore compare solo con lo stato di animazione previsto.
  • Link, controlli del codice e diagrammi funzionano con contenuti completi e parziali.

OpenDesign offre uno spazio di lavoro di design locale per agenti di programmazione. Questa scheda non significa che la skill sia inclusa nel pacchetto né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata e collegata qui sotto. Comportamento e requisiti upstream possono cambiare.

Proprietario della fonte
vercel
Repository
vercel/streamdown
File della skill
SKILL.md
Licenza
Apache-2.0
Snapshot esaminato
2026-11-02 · 7dcabc64df94
Sintesi editoriale della fonte
Renderizza Markdown in streaming con diagrammi, codice e controlli espliciti dei contenuti.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore di popolarità datato, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Può renderizzare documenti normali?

Sì. La fonte include una modalità statica per Markdown completo, come documentazione o articoli.

Perché manca il cursore?

La configurazione documentata richiede uno stile del cursore e isAnimating impostato a true.

Installare il supporto matematico completa la configurazione?

La fonte richiede anche il foglio di stile KaTeX. La gestione predefinita usa la notazione a doppio dollaro per evitare conflitti con le valute.

Perché la copia è disabilitata mentre arriva la risposta?

I controlli documentati disabilitano la copia quando isAnimating è true. Attiva il flag soltanto per la risposta in streaming e disattivalo al termine; altrimenti i messaggi finiti possono conservare lo stato di streaming.

OpenDesign

Tieni insieme il brief e il lavoro di design.

Tieni brief, materiali di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesignSfoglia le skill di design
File sorgente originale
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md