syncfusion-react-calendars — скилл для Claude Code
Скилл помогает собирать календарные компоненты Syncfusion для React: выбор дат, диапазонов и времени, форматирование и валидация.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-calendars -a claude-codeЧто делает syncfusion-react-calendars
Скилл подсказывает, как подключать Calendar, DatePicker, DateRangePicker, DateTimePicker и TimePicker в React. Он охватывает выбор одной или нескольких дат, диапазоны, ограничение минимальных и максимальных значений, форматы ввода, маски, локализацию и настройку ячеек календаря.
В инструкциях разобраны управляемые компоненты через React state, события вроде change, навигация через ref, темы CSS, RTL, клавиатурное управление и ARIA. Для базового календаря нужны пакеты @syncfusion/ej2-react-calendars и @syncfusion/ej2-base; стили темы подключаются отдельно. Без импорта CSS тема компонента не применится.
Скилл рассчитан на Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для React-проекта он полезен, когда нужно выбрать правильный компонент и связать его значение с состоянием приложения.
Какие задачи решает
- подключить календарь Syncfusion к React
- связать выбранную дату с React state
- добавить выбор диапазона дат
- настроить форматы и маску ввода
- ограничить доступные даты и проверить ввод
Примеры запросов агенту
- Подключи Syncfusion Calendar в React и свяжи выбранную дату с состоянием через событие
change. - Собери для формы DatePicker с минимальной и максимальной датой, маской ввода и нужным форматом.
- Покажи, как настроить DateRangePicker для выбора диапазона и подключить CSS-тему.
Как установить syncfusion-react-calendars
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-calendars -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-calendars/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-calendars/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-calendars -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-calendars/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-calendars -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-calendars/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-calendars2Вручную: положить файлы
.github/skills/syncfusion-react-calendars/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-calendars -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-calendarsВручную: положить файлы
.devin/skills/syncfusion-react-calendars/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-calendars -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-calendars
Как установить syncfusion-react-calendars в Claude Code?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-calendars -a claude-code, затем откройте ~/.claude/skills/syncfusion-react-calendars/SKILL.md.
Что делает syncfusion-react-calendars?
Скилл объясняет создание календарей, полей выбора даты, диапазонов и времени в React с компонентами Syncfusion. Он также разбирает состояние, события, форматы, валидацию, локализацию и стили.
Какие пакеты нужны для базового Calendar в React?
Нужны @syncfusion/ej2-react-calendars и @syncfusion/ej2-base. CSS темы подключается отдельным импортом.
