syncfusion-react-appbar — скилл для Claude Code: что делает, установка
Скилл помогает собирать навигационные панели и панели действий на React с помощью AppBar. Пригодится для верхней, нижней и закреплённой навигации.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-appbar -a claude-codeЧто делает syncfusion-react-appbar
Скилл объясняет, как создавать панели AppBar для верхней или нижней части интерфейса. Агент может собрать навигацию с кнопками, меню, иконками, заголовком и боковой панелью, а также учесть адаптивную раскладку. Для разнесения элементов используются spacer и separator.
Внутри описаны режимы цвета Light, Dark, Primary и Inherit, размеры Regular, Prominent и Dense, закрепление при прокрутке, RTL и пользовательские CSS-классы. Есть примеры связки AppBar с Menu, Button, DropDownButton, Sidebar и TreeView, а также настройки aria-атрибутов и клавиатурной навигации.
В примерах используются @syncfusion/ej2-react-navigations и @syncfusion/ej2-react-buttons, поэтому эти пакеты нужно подключить до сборки. Доступность разобрана через WCAG 2.2 и Section 508.
Какие задачи решает
- собрать верхнюю панель с брендингом и навигацией
- разместить кнопки действий в адаптивном тулбаре
- закрепить AppBar сверху или снизу при прокрутке
- добавить разделители и промежутки между группами
- связать панель с боковым меню и TreeView
Примеры запросов агенту
- Собери верхний AppBar с кнопкой меню, названием приложения и кнопкой входа.
- Сделай тёмный плотный тулбар с иконками редактирования и разделителем.
- Добавь закреплённый нижний AppBar с действиями «Сохранить» и «Отмена».
Как установить syncfusion-react-appbar
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-appbar -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-appbar/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-appbar/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-appbar -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-appbar/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-appbar -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-appbar/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-appbar2Вручную: положить файлы
.github/skills/syncfusion-react-appbar/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-appbar -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-appbarВручную: положить файлы
.devin/skills/syncfusion-react-appbar/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-appbar -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-appbar
Как установить syncfusion-react-appbar в Claude Code?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-appbar -a claude-code, затем проверьте файл ~/.claude/skills/syncfusion-react-appbar/SKILL.md.
Что делает syncfusion-react-appbar?
Скилл помогает создавать React-панели AppBar для навигации и действий. Он охватывает позиционирование, размеры, цвета, кнопки, меню, боковые панели и доступность.
Какие режимы есть у AppBar?
Для цвета доступны Light, Dark, Primary и Inherit, для размера — Regular, Prominent и Dense. Панель также можно разместить сверху или снизу и закрепить при прокрутке.
