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