106.9K+Baixar
Ir para o guia de uso
Streamdownpor vercel

Streamdown Skill.

Renderize Markdown em streaming com diagramas, código e controles explícitos de conteúdo.

  • Markdown em streaming
  • React
Baixar OpenDesignVer guia de uso
Análise da fonte · streamdownSKILL.md
Tarefa Renderize Markdown em streaming com diagramas, código e controles explícitos de conteúdo. Entregáveis Um renderizador Streamdown conectado ao conteúdo Markdown da aplicação. Antes de começar Comece pelo formato de mensagens do app React, a versão Tailwind e as funcionalidades Markdown necessárias. Escolha plugins e controles de conteúdo antes de conectar o estado de streaming da resposta ativa.
Resumo editorial · fonte revisada em 2026-11-02 · não é um exemplo gerado

01 Funcionalidades

Renderize Markdown em streaming com diagramas, código e controles explícitos de conteúdo

Configure Streamdown para respostas de IA, destaque de sintaxe, Mermaid, matemática e texto CJK, com Tailwind e controles de segurança do conteúdo.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Streamdown ajuda um agente a integrar um renderizador React de Markdown criado para conteúdo que chega progressivamente. Abrange modos streaming e estático, destaque de código, diagramas, notação matemática e texto CJK. A skill também explica controles do conteúdo renderizado, incluindo cópia, links e tratamento de elementos personalizados.

O valor prático está em detalhes de integração fáceis de esquecer. A fonte destaca o escaneamento de arquivos dos pacotes pelo Tailwind, os estilos KaTeX para matemática e a relação entre o cursor de streaming e isAnimating. Plugins opcionais são adicionados conforme o conteúdo de que a interface realmente precisa.

Entregas esperadas

  • Um renderizador Streamdown conectado ao conteúdo Markdown da aplicação.
  • Configurações de plugins e Tailwind compatíveis com os pacotes instalados.
  • Escolhas explícitas de confirmação de links, elementos permitidos e controles interativos.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Escolha as capacidades de conteúdo

    Identifique se as respostas precisam de código, Mermaid, matemática ou CJK. Escolha streaming para respostas incrementais ou modo estático para documentos completos.

  2. 02
    Configure renderização e estilos

    Instale os pacotes selecionados e inclua seus arquivos de distribuição no escaneamento Tailwind. Tailwind v4 usa diretivas @source; v3 usa entradas content na configuração. Adicione caminhos somente de plugins instalados. Importe KaTeX CSS ao usar matemática e conecte o renderizador ao formato atual das mensagens.

  3. 03
    Confira streaming e segurança

    Defina o estado de animação da resposta ativa e revise HTML personalizado, tratamento de URL e confirmação de links. Inspecione respostas incompletas e conteúdo finalizado.

02 Quando usar

Quando usar

Comece pelo formato de mensagens do app React, a versão Tailwind e as funcionalidades Markdown necessárias. Escolha plugins e controles de conteúdo antes de conectar o estado de streaming da resposta ativa.

Bom encaixe

  • Respostas progressivasUma interface de chat de IA renderiza respostas formatadas enquanto os tokens chegam.
  • Documentos formatadosUma visualização React de documentos precisa de Markdown com suporte selecionável a diagramas ou matemática.

Limites a verificar

  • Backend sob responsabilidade do appA aplicação continua responsável pelo endpoint de IA e pelo ciclo de vida das mensagens.
  • Compatibilidade de versõesOs exemplos documentados precisam ser adaptados às versões SDK instaladas no app.
  • Verificação da integraçãoEstilos de plugins e controles de conteúdo precisam ser verificados na aplicação de destino.

Traga estas entradas

  • Conteúdo MarkdownO stream ou a string Markdown completa a renderizar.
  • Dependências selecionadasOs plugins escolhidos e a versão Tailwind instalada.
  • Controles de conteúdoRequisitos do projeto para links, HTML e controles de download.

03 Decisões importantes

Decisões importantes

  1. Dois modos de renderização

    Modos estático e streaming compartilham uma integração de renderizador.

  2. Plugins seletivos

    As capacidades de conteúdo podem ser escolhidas sem ativar todos os plugins opcionais.

  3. Verificações concretas de configuração

    As verificações documentadas tratam de estilos ausentes, matemática e problemas com o cursor de streaming.

04 Exemplo de briefing

Experimente um briefing específico

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Confira a fonte e a configuração

O stream ou a string Markdown completa a renderizar.

Arquivo-fonte original
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md

A referência abaixo abre as instruções originais. Confira a configuração do repositório antes de usá-las; não é um comando de instalação.

Comece com um entregável

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo
Use streamdown na área de resposta do assistente do nosso app React. Inspecione as versões instaladas do AI SDK e Tailwind antes de adaptar exemplos. Precisamos de código com destaque e diagramas Mermaid, mas não de plugin matemático nesta etapa. Configure o escaneamento dos pacotes, preserve o tema atual e aplique o indicador de streaming somente à resposta ativa. Mantenha a confirmação de links ativada. Visualize Markdown incompleto, um diagrama concluído e um bloco longo de código; depois relate alterações de configuração e controles ainda não testados.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

  • Os estilos dos plugins escolhidos estão incluídos e caminhos de plugins não instalados estão ausentes.
  • O cursor aparece apenas no estado de animação pretendido.
  • Links, controles de código e diagramas funcionam corretamente com conteúdo completo e parcial.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesignLer o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte
vercel
Repositório
vercel/streamdown
Arquivo da skill
SKILL.md
Licença
Apache-2.0
Versão revisada
2026-11-02 · 7dcabc64df94
Resumo editorial da fonte
Renderize Markdown em streaming com diagramas, código e controles explícitos de conteúdo.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Renderiza documentos comuns?

Sim. A fonte inclui modo estático para Markdown completo, como documentação ou conteúdo de blog.

Por que o cursor não aparece?

A configuração documentada exige um estilo de cursor e isAnimating definido como true.

Instalar suporte matemático conclui a configuração?

A fonte também exige a folha de estilos KaTeX. O tratamento padrão de matemática usa notação com dois cifrões para evitar conflitos com moedas.

Por que a cópia fica desativada enquanto a resposta chega?

Os controles documentados desativam a cópia enquanto isAnimating é true. Defina esse indicador somente na resposta ativa em streaming e remova-o ao concluir; caso contrário, mensagens concluídas podem manter o estado de streaming.

OpenDesign

Mantenha o briefing e o trabalho de design juntos.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesignExplorar skills de design
Arquivo-fonte original
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md