syncfusion-react-inputs — скилл для Claude Code
Скилл по компонентам ввода Syncfusion для React: загрузка файлов, числовые поля, OTP, подписи и слайдеры. Пригодится, когда форма собирается на ej2-react-inputs.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a claude-codeЧто делает syncfusion-react-inputs
Скилл описывает, как подключать и настраивать компоненты ввода из пакета @syncfusion/ej2-react-inputs: UploaderComponent, NumericTextBox, TextBox, TextArea, CheckBox, OTP Input, Signature, RangeSlider, ColorPicker, MaskedTextBox и Rating. Внутри — разбитые по темам справочники: установка и регистрация лицензии, асинхронная и чанковая загрузка файлов, валидация, шаблоны, работа с формами, локализация, доступность и полный список свойств, методов и событий.
Загрузчик разбирается подробно: asyncSettings с saveUrl и removeUrl, autoUpload, sequentialUpload, directoryUpload, пауза и возобновление чанков, повторные попытки через retryCount и retryAfterDelay, ограничения по расширениям и размеру файла. Есть готовые сценарии — предпросмотр картинки до отправки, подтверждение удаления, вызов файлового браузера из внешней кнопки, JWT-аутентификация. Для последней в самом скилле стоит прямое предупреждение: токены не хардкодить, брать из защищённого хранилища сессии и не логировать заголовки запросов.
Скилл требует дисциплины от агента: перед установкой пакета, запуском и созданием файлов он должен спрашивать подтверждение. Установку пакета скилл тоже не делает сам — просит пользователя выполнить npm install @syncfusion/ej2-react-inputs. Без этого пакета примеры из справочников просто не соберутся, потому что все импорты идут из него.
Какие задачи решает
- собрать загрузку файлов с докачкой и паузой
- ограничить типы и размер загружаемых файлов
- подключить числовое поле с форматированием и валидацией
- сделать ввод OTP-кода или подписи в форме
- настроить кастомную кнопку выбора файла вместо стандартной
Примеры запросов агенту
- Добавь в форму загрузку файлов через
UploaderComponentс чанками по 500000 байт - Сделай числовое поле с минимальным и максимальным значением и валидацией
- Настрой
directoryUpload, чтобы можно было загружать целую папку
Как установить syncfusion-react-inputs
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-inputs/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-inputs/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-inputs/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-inputs/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-inputs2Вручную: положить файлы
.github/skills/syncfusion-react-inputs/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-inputsВручную: положить файлы
.devin/skills/syncfusion-react-inputs/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-inputs
Как установить syncfusion-react-inputs в Claude Code?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a claude-code. Файл скилла появится по пути ~/.claude/skills/syncfusion-react-inputs/SKILL.md.
Что делает syncfusion-react-inputs?
Даёт агенту справочники по компонентам ввода Syncfusion для React — от загрузчика файлов до OTP и слайдеров — вместе с примерами кода и разбором свойств и событий.
Нужен ли пакет ej2-react-inputs для работы скилла?
Да, все примеры опираются на @syncfusion/ej2-react-inputs. Скилл не ставит его сам и просит вас выполнить npm install @syncfusion/ej2-react-inputs.
