106.9K+Descargar
Ir a la guía de uso
Streamdownpor vercel

Streamdown Skill.

Renderiza Markdown en streaming con diagramas, código y controles explícitos de contenido.

  • Markdown en streaming
  • React
Descargar OpenDesignVer la guía de uso
Revisión de la fuente · streamdownSKILL.md
Tarea Renderiza Markdown en streaming con diagramas, código y controles explícitos de contenido. Resultados Un renderizador Streamdown conectado al Markdown de la aplicación. Antes de empezar Parte del formato de mensajes de React, la versión Tailwind y las funciones Markdown requeridas. Elige plugins y controles antes de conectar el estado de streaming de la respuesta activa.
Resumen editorial · fuente revisada el 2026-11-02 · no es un ejemplo generado

01 Qué hace

Renderiza Markdown en streaming con diagramas, código y controles explícitos de contenido

Configura Streamdown para respuestas IA, resaltado de sintaxis, Mermaid, matemáticas y texto CJK, con Tailwind y controles de seguridad del contenido.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

Streamdown ayuda a integrar un renderizador React de Markdown diseñado para contenido que llega progresivamente. Cubre modos streaming y estático, resaltado de código, diagramas, notación matemática y texto CJK. También explica controles del contenido renderizado: copia, enlaces y tratamiento de elementos personalizados.

Su valor práctico está en detalles de integración fáciles de omitir. La fuente destaca el escaneo de archivos de paquetes por Tailwind, los estilos KaTeX para matemáticas y la relación entre cursor de streaming e isAnimating. Los plugins opcionales se añaden según el contenido que realmente necesite la interfaz.

Entregables esperados

  • Un renderizador Streamdown conectado al Markdown de la aplicación.
  • Configuración de plugins y Tailwind ajustada a los paquetes instalados.
  • Decisiones explícitas sobre confirmación de enlaces, elementos permitidos y controles interactivos.
Ver el brief de ejemplo

Del brief a la revisión

  1. 01
    Elegir capacidades de contenido

    Identifica si las respuestas necesitan código, Mermaid, matemáticas o CJK. Elige streaming para respuestas incrementales o estático para documentos completos.

  2. 02
    Configurar renderizado y estilos

    Instala los paquetes elegidos e incluye sus archivos de distribución en el escaneo Tailwind. Tailwind v4 usa directivas @source; v3 usa entradas content en su configuración. Añade rutas solo de plugins instalados. Importa CSS KaTeX para matemáticas y conecta el renderizador a la estructura actual de mensajes.

  3. 03
    Comprobar streaming y seguridad

    Define el estado de animación para la respuesta activa y revisa HTML personalizado, manejo de URL y confirmación de enlaces. Inspecciona respuestas incompletas y contenido terminado.

02 Cuándo usarlo

Cuándo usarlo

Parte del formato de mensajes de React, la versión Tailwind y las funciones Markdown requeridas. Elige plugins y controles antes de conectar el estado de streaming de la respuesta activa.

Buen encaje

  • Respuestas progresivasUna vista de chat IA muestra respuestas con formato mientras llegan tokens.
  • Documentos formateadosUna vista documental React necesita Markdown y soporte seleccionable de diagramas o matemáticas.

Límites que conviene comprobar

  • Backend de la aplicaciónLa aplicación sigue gestionando su endpoint IA y el ciclo de vida de mensajes.
  • Compatibilidad de versionesLos ejemplos necesitan adaptarse a las versiones de SDK instaladas.
  • Verificación de integraciónEstilos de plugins y controles deben verificarse en la aplicación de destino.

Aporta estos datos

  • Contenido MarkdownEl flujo o cadena completa Markdown que renderizar.
  • Dependencias elegidasLos plugins seleccionados y la versión Tailwind instalada.
  • Controles de contenidoRequisitos de enlaces, HTML y controles de descarga del proyecto.

03 Decisiones importantes

Decisiones importantes

  1. Dos modos de renderizado

    Los modos estático y streaming comparten una integración.

  2. Plugins selectivos

    Se pueden elegir capacidades sin activar todos los plugins opcionales.

  3. Comprobaciones concretas

    Las comprobaciones documentadas abordan estilos ausentes, matemáticas y problemas del cursor de streaming.

04 Ejemplo de brief

Prueba con un encargo concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la fuente y la configuración

El flujo o cadena completa Markdown que renderizar.

Archivo fuente original
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md

La referencia siguiente abre las instrucciones originales. Revisa la configuración del repositorio antes de utilizarlas; no es un comando de instalación.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo
Usa streamdown para el área de respuesta del asistente en nuestra aplicación React. Inspecciona las versiones instaladas de AI SDK y Tailwind antes de adaptar ejemplos. Necesitamos código resaltado y diagramas Mermaid, sin plugin matemático en esta fase. Configura el escaneo de paquetes, conserva el tema y aplica el indicador de streaming solo a la respuesta activa. Mantén habilitada la confirmación de enlaces. Previsualiza Markdown incompleto, un diagrama terminado y un bloque de código largo; informa de cambios de configuración y controles no probados.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

  • Se incluyen estilos de plugins seleccionados y no hay rutas de plugins no instalados.
  • El cursor aparece solo con el estado de animación previsto.
  • Enlaces, controles de código y diagramas funcionan con contenido completo y parcial.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesignLeer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente
vercel
Repositorio
vercel/streamdown
Archivo del skill
SKILL.md
Licencia
Apache-2.0
Versión revisada
2026-11-02 · 7dcabc64df94
Resumen editorial de la fuente
Renderiza Markdown en streaming con diagramas, código y controles explícitos de contenido.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Puede renderizar documentos normales?

Sí. La fuente incluye un modo estático para Markdown completo, como documentación o artículos.

¿Por qué falta el cursor?

La configuración documentada requiere estilo de cursor e isAnimating en true.

¿Instalar soporte matemático completa la configuración?

La fuente exige también la hoja de estilos KaTeX. El tratamiento predeterminado usa notación de doble dólar para evitar conflictos con monedas.

¿Por qué se desactiva copiar mientras llega la respuesta?

Los controles documentados desactivan la copia cuando isAnimating es true. Actívalo solo en la respuesta en streaming y desactívalo al terminar; de otro modo, los mensajes completos pueden conservar ese estado.

OpenDesign

Mantén juntos tu encargo y tu trabajo de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesignExplorar skills de diseño
Archivo fuente original
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md