syncfusion-react-ribbon — скилл для Claude Code: ленточный UI в React
Скилл для сборки Ribbon-интерфейсов на React: вкладки, группы, галереи и backstage-меню по образцу Microsoft Office. Пригодится, когда нужен командный тулбар с клавиатурной навигацией.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ribbon -a claude-codeЧто делает syncfusion-react-ribbon
Скилл описывает работу с компонентом Ribbon из библиотеки Syncfusion: вкладки, группы, коллекции и элементы вроде кнопок, выпадающих списков, чекбоксов и цветовых палитр. Поддерживаются два режима — Classic с несколькими рядами и Simplified с одним, плюс динамическое переключение между ними.
Внутри — файлы с инструкциями по структуре ленты, настройке элементов, событиям, темам и устранению неполадок. Агент читает нужный reference-файл по контексту задачи: для вкладок один документ, для backstage-вида другой.
Из коробки доступны темы Material, Bootstrap, Fluent и Tailwind, тёмный режим, RTL и ARIA-атрибуты. KeyTips и управление с клавиатуры заявлены как приоритет доступности, поэтому скилл стоит брать, если тулбаром будут пользоваться не только мышью.
Какие задачи решает
- собрать ленту с вкладками и группами команд
- переключать Classic и Simplified раскладки
- показывать вкладки по условию через contextual tabs
- настроить галереи с фильтрацией и шаблонами элементов
- подключить KeyTips и клавиатурную навигацию
Примеры запросов агенту
- Создай Ribbon с вкладками Home и Insert, в Home — группу с кнопкой и выпадающим списком
- Добавь backstage-вид с пунктами New, Open и Save, ширину задай 350px
- Сделай contextual tab, который появляется только когда выделен объект на холсте
Как установить syncfusion-react-ribbon
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ribbon -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-ribbon/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-ribbon/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ribbon -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-ribbon/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ribbon -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-ribbon/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-ribbon2Вручную: положить файлы
.github/skills/syncfusion-react-ribbon/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ribbon -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-ribbonВручную: положить файлы
.devin/skills/syncfusion-react-ribbon/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ribbon -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-ribbon
Как установить syncfusion-react-ribbon в Claude Code?
Выполни npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ribbon -a claude-code. Скилл появится в ~/.claude/skills/syncfusion-react-ribbon/SKILL.md.
Что делает syncfusion-react-ribbon?
Даёт агенту инструкции по сборке Ribbon-интерфейсов на React через компонент Syncfusion: вкладки, группы, элементы, галереи, backstage-вид, темы и события.
Какие темы поддерживаются?
Material, Bootstrap, Fluent и Tailwind CSS. Каждую нужно импортировать отдельно, тёмный режим доступен.
