Vercel Streamdown — скилл
Скилл для библиотеки Streamdown: агент подключает потоковый рендер Markdown из ответов моделей в React-приложение
- 5 757 ★ репозитория
- Последний коммит
Минимальный доступ
Почему такой уровень
- Скилл дает агенту инструкции по установке и стилям, а правит только код вашего приложения
- Ответы модели отображаются как HTML, поэтому ссылки и теги нужно ограничивать настройками безопасности
Установка
- Работает в
Ручная установка
npx skills add vercel/streamdown --skill streamdownОбщий способ skills CLI для репозитория со скиллами, проект его не документирует. Папку `skills/streamdown` можно скопировать вручную.
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл дает агенту инструкции по установке и стилям, а правит только код вашего приложения
- Ответы модели отображаются как HTML, поэтому ссылки и теги нужно ограничивать настройками безопасности
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл `streamdown` лежит в репозитории Streamdown, React-библиотеки Vercel для показа Markdown из потока ответов модели, и ведет агента по ее настройке. Библиотека заменяет `react-markdown` и корректно рисует недописанные блоки: незакрытый код, таблицу или список в момент, когда токены еще приходят. Скилл начинается с быстрой установки и главного подвоха: Tailwind должен видеть файлы библиотеки, для этого в стили добавляют директиву `@source` на каталог `node_modules/streamdown/dist`. Дальше разобраны плагины для подсветки кода, диаграмм Mermaid, формул KaTeX и китайского, японского и корейского текста, а также курсор, статический режим для блогов, кнопки управления, безопасность ссылок и свои компоненты. Отдельный список перечисляет восемь типичных ошибок, например пропавшие стили Tailwind или формулы без CSS.
Для кого. Фронтенд-разработчикам, которые делают чат с языковой моделью на React и Vercel AI SDK и поручают настройку вывода Claude Code, Cursor или Codex.
Подходит, если
- В чате ответ модели приходит по частям, и таблицы с кодом мигают, пока Markdown не дописан
- После установки пропали стили, и надо понять, что Tailwind не сканирует файлы библиотеки
- В ответах нужны блоки кода с подсветкой, диаграммы Mermaid или формулы LaTeX
- Блог или документацию рендерят из готового Markdown в статическом режиме
- Ответы модели содержат ссылки и HTML, и агент настраивает безопасный вывод
Не подходит, если
- Приложение не на React: библиотека и скилл рассчитаны на него
- Markdown приходит целиком, без потока: хватает обычного `react-markdown`
- Нужен терминальный просмотр Markdown: Streamdown рисует интерфейсы в браузере
Пример запроса к агенту
Замени react-markdown в нашем чате на Streamdown, подключи подсветку кода и курсор во время генерацииОграничения
Скилл описывает Tailwind v3 и v4, а без Tailwind библиотека не нарисует свои стили. Плагины подсветки, диаграмм, формул и CJK ставятся отдельными пакетами `@streamdown/*`, а для формул нужен еще CSS KaTeX. Курсор появляется только при двух условиях сразу: задан проп `caret` и включен `isAnimating`. В README репозитория скилла нет, и команда `npx skills add vercel/streamdown --skill streamdown` — общий способ skills CLI, который проект не документирует. Лицензия в метаданных GitHub отмечена как неопределенная, проверьте файл `LICENSE` перед использованием.
Как отключить. Удалите папку `streamdown` из каталога скиллов проекта. Пакет `streamdown` в зависимостях удаляется отдельно командой вашего менеджера пакетов.
Частые вопросы
Как поставить скилл Streamdown?
Скопируйте папку `skills/streamdown` в каталог скиллов агента или выполните `npx skills add vercel/streamdown --skill streamdown`. Команду проект не документирует, это общий путь skills CLI.
Почему пропали стили Streamdown?
Tailwind не просматривает файлы библиотеки. В Tailwind v4 добавьте в `globals.css` строку `@source "../node_modules/streamdown/dist/*.js"`, в v3 впишите путь в `content` файла `tailwind.config.js`.
Как показать курсор во время генерации?
Задайте проп `caret` со значением `block` или `circle` и включите `isAnimating` для последнего сообщения ассистента. Без обоих условий курсор не появится.
Какие плагины есть у Streamdown?
Четыре: `@streamdown/code` с подсветкой Shiki на 200 с лишним языков, `@streamdown/mermaid` для диаграмм, `@streamdown/math` для формул KaTeX и `@streamdown/cjk` для китайского, японского и корейского.
Что делать с модальным окном при клике на ссылку?
Подтверждение ссылок включено по умолчанию. Отключите его пропом `linkSafety={{ enabled: false }}`, если ссылки в вашем контенте надежны.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкиллы Vercel для агентов
Agent Skills
Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой
Скилл для Claude Code по React Flow 12: узлы и ребра, раскладка, состояние, тесты Playwright и миграция с reactflow.
Скилл подбирает и ставит анимированные React-компоненты beUI через публичный MCP или реестр shadcn вместо самодельных виджетов
React Email — скилл для агентов
React Email skill
Скилл учит агента верстать письма на компонентах React Email: правила для почтовых клиентов, рендер в HTML и текст, отправка, переводы и редактор
Скилл учит агента собирать чат ИИ-агента на 26 компонентах Agent Elements: карточки инструментов, ввод, стриминг
Скилл и MCP-сервер библиотеки Shaders: агент собирает фоны, стекло, градиенты и курсорные эффекты на WebGPU для React, Vue, Svelte, Solid и JS
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Vercel Streamdown (эта карточка) | да | 5 757 | |
| Streamdown | нет | 363 | терминальная программа для потокового вывода Markdown, не React-библиотека |
| Скиллы Vercel для агентов | нет | 33 964 | общие скиллы Vercel по React и деплою без Streamdown |
Коротко о README
README представляет Streamdown как замену `react-markdown` для потоковых ответов и перечисляет возможности: незавершенные блоки, GFM, формулы, диаграммы Mermaid, подсветка Shiki и защита через `rehype-harden`. Дальше идут установка с директивой Tailwind, настройка монорепозитория и плагины.
Бейдж для README
Исходный SKILL.md
--- name: streamdown description: >- Implement, configure, and customize Streamdown — a streaming-optimized React Markdown renderer with syntax highlighting, Mermaid diagrams, math rendering, and CJK support. Use when working with Streamdown setup, configuration, plugins, styling, security, or integration with AI streaming (e.g., Vercel AI SDK). Triggers on: (1) Installing or setting up Streamdown, (2) Configuring plugins (code, mermaid, math, cjk), (3) Styling or theming Streamdown output, (4) Integrating with AI chat/streaming, (5) Configuring security, link safety, or custom HTML tags, (6) Using carets, static mode, or custom components, (7) Troubleshooting Tailwind, Shiki, or Vite issues. --- # Streamdown Streaming-optimized React Markdown renderer. Drop-in replacement for `react-markdown` with built-in streaming support, security, and interactive controls. ## Quick Setup ### 1. Install ```bash npm install streamdown ``` Optional plugins (install only what's needed): ```bash npm install @streamdown/code @streamdown/mermaid @streamdown/math @streamdown/cjk ``` ### 2. Configure Tailwind CSS (Required) **This is the most commonly missed step.** Streamdown uses Tailwind for styling and the dist files must be scanned. **Tailwind v4** — add to `globals.css`: ```css @source "../node_modules/streamdown/dist/*.js"; ``` Add plugin `@source` lines **only for packages you have installed** (omitting uninstalled plugins avoids Tailwind errors). See plugin pages for exact paths: - Code: `@source "../node_modules/@streamdown/code/dist/*.js";` - CJK: `@source "../node_modules/@streamdown/cjk/dist/*.js";` - Math: `@source "../node_modules/@streamdown/math/dist/*.js";` - Mermaid: `@source "../node_modules/@streamdown/mermaid/dist/*.js";`