syncfusion-react-ai-assistview — скилл для Claude Code: установка
Помогает агенту встраивать диалоговый компонент Syncfusion в React. Пригодится при создании чат-интерфейсов со стримингом и цепочками рассуждений модели.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ai-assistview -a claude-codeЧто делает syncfusion-react-ai-assistview
Скилл обучает ассистента работать с компонентом AI AssistView из пакета @syncfusion/ej2-react-interactive-chat. Он содержит инструкции по настройке диалогового окна, отображению этапов рассуждений модели, парсингу Markdown и выводу ответов в режиме реального времени.
Внутри заложены сценарии для голосового ввода и озвучки текста, прикрепления файлов с проверкой размера, а также настройки всплывающих упоминаний через символы @ или /. Компонент поддерживает переключение между несколькими экранами, кастомные панели инструментов и сбор телеметрии с фиксацией токенов.
Для нормального отображения интерфейса проект обязан содержать импорты CSS-стилей тем Syncfusion, иначе вёрстка развалится. Интеграция с бэкендом строится вокруг событий вроде promptRequest, куда подключаются сервисы OpenAI или Azure.
Какие задачи решает
- внедрить диалоговый интерфейс для LLM в React-проект
- визуализировать этапы рассуждений модели через thinking blocks
- настроить передачу файлов и голосовой ввод в чате
- подключить отслеживание токенов и времени ответа модели
Примеры запросов агенту
- Собери компонент AI AssistView с поддержкой стриминга ответа от OpenAI
- Добавь в чат загрузку файлов с ограничением по типам и размеру
- Настрой тулбар с кнопкой повторной генерации ответа и телеметрией токенов
Как установить syncfusion-react-ai-assistview
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ai-assistview -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-ai-assistview/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-ai-assistview/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ai-assistview -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-ai-assistview/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ai-assistview -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-ai-assistview/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-ai-assistview2Вручную: положить файлы
.github/skills/syncfusion-react-ai-assistview/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ai-assistview -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-ai-assistviewВручную: положить файлы
.devin/skills/syncfusion-react-ai-assistview/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ai-assistview -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-ai-assistview
Как установить syncfusion-react-ai-assistview в Claude Code?
Выполните команду npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ai-assistview -a claude-code. Инструкция сохранится в файле ~/.claude/skills/syncfusion-react-ai-assistview/SKILL.md.
Что делает syncfusion-react-ai-assistview?
Он предоставляет ИИ-агенту контекст и правила для реализации диалоговых интерфейсов Syncfusion в приложениях на React.
Что требуется для корректного отображения компонента?
Нужно установить пакет @syncfusion/ej2-react-interactive-chat и подключить файл темы CSS от Syncfusion.
