syncfusion-react-accordion — скилл для Claude Code: как настроить
Скилл учит нейросеть добавлять аккордеоны Syncfusion в React-приложения. Он подсказывает структуру компонентов, анимации и загрузку данных.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-accordion -a claude-codeЧто делает syncfusion-react-accordion
Скилл передаёт агенту правила настройки AccordionComponent из пакета @syncfusion/ej2-react-navigations. Ассистент генерирует разметку через директивы AccordionItemDirective либо инициализирует блоки через свойства. Доступны одиночный и множественный режимы раскрытия секций.
Внутри заложены инструкции по динамической подгрузке контента через метод addItem, связке с внешними источниками и кастомным шаблонам заголовков. Описана работа с анимациями (SlideDown, ZoomIn), перехватом событий через event.cancel и хуками React.
Для корректного рендера интерфейса обязательно импортировать стили @syncfusion/ej2-base и @syncfusion/ej2-react-navigations под нужную тему (Tailwind или Bootstrap). Без подключённых CSS-файлов панели раскрываются без стилизации и вёрстка разъедется.
Какие задачи решает
- настроить сворачиваемые списки вопросов в блоке FAQ
- подключить пошаговую форму на компонентах React
- организовать подгрузку содержимого панелей через HTTP-запросы
- задать анимации появления секций с контролем длительности
Примеры запросов агенту
- Сделай FAQ-секцию на Syncfusion React с режимом Single, чтобы открывалась только одна вкладка.
- Добавь динамическую загрузку данных в AccordionComponent через метод addItem.
- Настрой аккордеон с темой Tailwind3 и предраскрытой первой секцией.
Как установить syncfusion-react-accordion
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-accordion -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-accordion/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-accordion/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-accordion -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-accordion/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-accordion -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-accordion/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-accordion2Вручную: положить файлы
.github/skills/syncfusion-react-accordion/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-accordion -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-accordionВручную: положить файлы
.devin/skills/syncfusion-react-accordion/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-accordion -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-accordion
Как установить syncfusion-react-accordion в Claude Code?
Выполните команду npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-accordion -a claude-code. Файл навыка сохранится по пути ~/.claude/skills/syncfusion-react-accordion/SKILL.md.
Что делает syncfusion-react-accordion?
Он даёт ассистенту справочник по API аккордеона от Syncfusion: правильный синтаксис директив, анимации, режимы раскрытия и интеграцию с React-хуками.
Какие стили требуются для работы компонента?
В проект нужно импортировать CSS-стили пакетов @syncfusion/ej2-base, @syncfusion/ej2-buttons, @syncfusion/ej2-popups и @syncfusion/ej2-react-navigations. Можно выбрать тему Tailwind или Bootstrap.
