syncfusion-react-chat-ui — скилл для Claude Code
Скилл помогает собирать чат-интерфейсы на React с сообщениями, вложениями, индикаторами набора и настройкой внешнего вида.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-chat-ui -a claude-codeЧто делает syncfusion-react-chat-ui
Скилл подсказывает, как внедрить ChatUIComponent из @syncfusion/ej2-react-interactive-chat в React-приложение. Он охватывает начальную настройку, вывод и обновление сообщений, автопрокрутку, загрузку истории по запросу, статусы сообщений и настройку панели действий.
Внутри разобраны модели пользователей, аватары, статусы присутствия, шаблоны сообщений и пустого чата, индикатор набора, подсказки и нижняя часть интерфейса. Есть настройки заголовка, временных меток, часовых разделителей, упоминаний, локализации и RTL. При включении вложений нужно настроить endpoint загрузки и ограничения типов или размера файлов.
Скилл рассчитан на Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для базовой реализации используются ChatUIComponent, MessagesDirective и MessageDirective.
Какие задачи решает
- собрать чат поддержки на React
- добавить сообщения и автопрокрутку
- подключить загрузку файлов в чат
- настроить шаблон сообщений и индикатор набора
- показать статусы пользователей и упоминания
Примеры запросов агенту
- Собери чат поддержки на React с
ChatUIComponent, заголовком и двумя тестовыми сообщениями. - Добавь в интерфейс вложения, временные метки и действия копирования, ответа и удаления.
- Настрой шаблоны сообщения, пустого чата и индикатора набора для
syncfusion-react-chat-ui.
Как установить syncfusion-react-chat-ui
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-chat-ui -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-chat-ui/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-chat-ui/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-chat-ui -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-chat-ui/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-chat-ui -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-chat-ui/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-chat-ui2Вручную: положить файлы
.github/skills/syncfusion-react-chat-ui/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-chat-ui -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-chat-uiВручную: положить файлы
.devin/skills/syncfusion-react-chat-ui/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-chat-ui -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-chat-ui
Как установить syncfusion-react-chat-ui в Claude Code?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-chat-ui -a claude-code, затем откройте ~/.claude/skills/syncfusion-react-chat-ui/SKILL.md.
Что делает syncfusion-react-chat-ui?
Скилл помогает реализовать и настроить чат-компонент Syncfusion для React: сообщения, пользователей, вложения, события, шаблоны, темы и обновления в реальном времени.
Что нужно для загрузки файлов в чате?
Нужно включить поддержку вложений и настроить endpoint загрузки. Также можно задать ограничения для типов и размера файлов.
