AIKraft/AI/Войти
AIKraft/Skills/markdown

markdown

Render and customize assistant message text as markdown in assistant-ui. Use when displaying model output as formatted markdown with MarkdownTextPrimitive from @assistant-ui/react-markdown wired into the MessagePrimitive.Parts text branch, configuring remarkPlugins (remark-gfm, remark-math) and rehypePlugins (rehype-katex), or memoizing components with unstable_memoizeMarkdownComponents. Covers co

assistant-ui official Дизайн

Что делает навык

Skill обеспечивает рендеринг и кастомизацию текста сообщений ассистента в формате Markdown в рамках assistant-ui. Он позволяет выбирать между легковесным MarkdownTextPrimitive и функциональным StreamdownTextPrimitive, а также настраивать плагины для подсветки синтаксиса, математики и диаграмм.

Когда применять

  • Отображение вывода модели в виде форматированного Markdown с использованием MarkdownTextPrimitive, подключенного к MessagePrimitive.Parts.
  • Настройка плагинов remark (например, remark-gfm, remark-math) и rehype (например, rehype-katex) для расширенного форматирования.
  • Использование StreamdownTextPrimitive для поддержки блочного стриминга, неполного исправления Markdown или интеграции Shiki, KaTeX, Mermaid.
  • Мемоизация компонентов через unstable_memoizeMarkdownComponents для оптимизации производительности.
  • Применение кастомных карт компонентов react-markdown или переопределение SyntaxHighlighter и CodeHeader для конкретных языков.

Как работает

  1. Выбрать подходящий рендерер: MarkdownTextPrimitive для легковесного варианта или StreamdownTextPrimitive для поддержки стриминга и плагинов.
  2. Установить и подключить выбранный элемент (например, MarkdownText) к MessagePrimitive.Parts.
  3. Настроить необходимые плагины (remarkPlugins, rehypePlugins) или кастомные компоненты в зависимости от требований к форматированию.
  4. При использовании StreamdownTextPrimitive убедиться, что другой рендерер для той же части не монтируется.
  5. При необходимости применить memoization к компонентам через unstable_memoizeMarkdownComponents.

Примеры запросов агенту

Как настроить MarkdownText для отображения сообщений с поддержкой GitHub Flavored Markdown?
Подключи StreamdownTextPrimitive для блочного стриминга с поддержкой KaTeX и Mermaid.
Как кастомизировать рендеринг кода в MarkdownText с помощью собственного SyntaxHighlighter?

Что понадобится

  • Пакет @assistant-ui/react-markdown
  • Среда React с поддержкой assistant-ui

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «markdown» из репозитория: # https://github.com/assistant-ui/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r markdown/ ~/.claude/skills/markdown/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.