AIKraft/AI/Войти
AIKraft/Skills/Примитивы

Примитивы

Builds and customizes assistant-ui chat UI from composable, unstyled @assistant-ui/react primitives that follow Radix-style part composition. Use when assembling or styling a custom Thread, Composer, message rendering, action bar, or branch picker from building blocks: ThreadPrimitive (.Root, .Viewport, .ViewportFooter, .Messages, .Empty, .ScrollToBottom, .Suggestions), ComposerPrimitive (.Input,

assistant-ui official Дизайн

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

Набор нестилизированных примитивов @assistant-ui/react для сборки кастомного интерфейса чата по принципу композиции частей Radix. Позволяет создавать Thread, Composer, рендеринг сообщений и другие элементы, управляя только поведением (автопрокрутка, фокус, состояние стриминга), без навязанных стилей.

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

  • Создание полностью кастомизированного интерфейса чата (Thread, Composer) с нуля.
  • Стилизация и верстка отдельных компонентов чата с использованием собственных CSS-решений.
  • Реализация сложной логики взаимодействия, такой как ветвление сообщений или работа с инструментами.
  • Интеграция функций ввода, включая историю ввода, диктовку и прикрепление файлов.

Как работает

  1. Обернуть дерево компонентов в AssistantRuntimeProvider или AuiProvider.
  2. Использовать .Root для предоставления контекста и .PartName для чтения этого контекста.
  3. Применять проп asChild для объединения поведения примитива с собственными элементами вместо создания обёрток.
  4. Комбинировать примитивы (ThreadPrimitive, ComposerPrimitive, MessagePrimitive) для построения UI.
  5. Использовать ссылки на документацию (thread.md, composer.md и др.) для выбора нужных частей.

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

Собери кастомный Thread с использованием ThreadPrimitive.Viewport и ThreadPrimitive.Messages.
Реализуй Composer с кастомным вводом, используя ComposerPrimitive.Input и ComposerPrimitive.Send.
Настрой рендеринг сообщений с поддержкой инструментов и вложений через MessagePrimitive.

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

  • Пакет @assistant-ui/react
  • AssistantRuntimeProvider или AuiProvider

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

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

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

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