syncfusion-react-progress-bar — скилл для Claude Code
Помогает внедрять линейные и круговые шкалы прогресса Syncfusion в React. Пригодится для отображения загрузки файлов, фоновых операций или буферизации данных.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-progress-bar -a claude-codeЧто делает syncfusion-react-progress-bar
Скилл снабжает ИИ-агента правилами и шаблонами кода для компонента ProgressBarComponent из библиотеки @syncfusion/ej2-react-progressbar. Ассистент сразу подбирает нужную форму индикатора: классическую полосу Linear или круговой индикатор Circular.
Внутри собраны готовые схемы для определённого (determinate) и циклического (indeterminate) состояний, а также режима буферизации со вторым значением через secondaryProgress. Без предварительной установки npm-пакета @syncfusion/ej2-react-progressbar в проект компонент не отрендерится. Инструкции также помогают агенту задавать анимацию заполнения и атрибуты доступности по спецификации WCAG 2.1.
Какие задачи решает
- показать процент выполнения фоновой задачи или загрузки файла
- настроить бесконечный круговой спиннер для ожидания ответа сервера
- сделать двухслойный индикатор буферизации потоковых данных
- задать анимацию заполнения и градиентную заливку для полосы прогресса
Примеры запросов агенту
- Добавь в карточку загрузки файла линейный ProgressBarComponent с отображением процентов
- Сделай круглый спиннер ожидания через Syncfusion Progress Bar в режиме indeterminate
- Покажи буферизацию видео с помощью ProgressBarComponent и свойства secondaryProgress
Как установить syncfusion-react-progress-bar
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-progress-bar -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-progress-bar/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-progress-bar/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-progress-bar -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-progress-bar/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-progress-bar -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-progress-bar/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-progress-bar2Вручную: положить файлы
.github/skills/syncfusion-react-progress-bar/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-progress-bar -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-progress-barВручную: положить файлы
.devin/skills/syncfusion-react-progress-bar/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-progress-bar -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-progress-bar
Как установить syncfusion-react-progress-bar в Claude Code?
Выполните команду npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-progress-bar -a claude-code. Также можно вручную поместить файл по пути ~/.claude/skills/syncfusion-react-progress-bar/SKILL.md.
Какие формы шкал поддерживает этот компонент?
Компонент поддерживает типы Linear, Circular и Semicircle. Нужный вариант передаётся через свойство type.
Что требуется для запуска компонента в коде?
Необходимо установить пакет @syncfusion/ej2-react-progressbar. Из него импортируется ProgressBarComponent, свойства которого настраиваются через props.
