К основному содержанию
affpapa.org
RU EN
скилл CX Codex

syncfusion-react-buttons — скилл для Claude Code: как установить

Скилл обучает ассистента верстать интерфейсы на базе кнопочных компонентов Syncfusion в React. Помогает настроить стили, сгруппировать действия и подключить иконки.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓ 
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-buttons -a claude-code
Открыть на GitHub

Что делает syncfusion-react-buttons

Скилл передаёт агенту справочные руководства по пакету @syncfusion/ej2-react-buttons. Внутри собраны примеры для ButtonComponent, групп ButtonGroup, выпадающих SplitButton и чипов Chips. Ассистент ориентируется на файлы из каталога references, изучая параметры разметки и доступные события.

Разметка использует классы вроде e-primary или e-outline. Поддерживаются иконки и полноразмерные блоки e-block. Для групп кнопок агент настроит поведение одиночного или множественного выбора.

Пакет @syncfusion/ej2-react-buttons придётся ставить вручную через npm. Без импорта стилей темы и @syncfusion/ej2-base кнопки останутся без визуального оформления.

Какие задачи решает

  • Добавить ButtonComponent с иконкой и стилем e-primary или e-outline
  • Собрать горизонтальную или вертикальную группу кнопок через e-btn-group
  • Настроить режим переключателя isToggle с отслеживанием кликов в стейте
  • Реализовать единичный или множественный выбор внутри группы кнопок

Примеры запросов агенту

  • Создай кнопку сохранения с иконкой e-save и стилем e-primary через Syncfusion React
  • Собери группу кнопок выбора тарифа с одиночным выделением в React
  • Добавь полноразмерную кнопку на всю ширину контейнера с классом e-block

Как установить syncfusion-react-buttons

1Через Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-buttons -a claude-code

2Вручную: положить файлы

~/.claude/skills/syncfusion-react-buttons/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-buttons/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о syncfusion-react-buttons

Как установить syncfusion-react-buttons в Claude Code?

Выполните в терминале команду npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-buttons -a claude-code. Конфигурация запишется в ~/.claude/skills/syncfusion-react-buttons/SKILL.md.

Какие компоненты кнопок поддерживает этот скилл?

Скилл охватывает ButtonComponent, ButtonGroup, а также DropDownButton, SplitButton, Switch и Chips.

Что нужно подключить в проект для отображения стилей?

Требуется импортировать таблицы стилей из @syncfusion/ej2-base и @syncfusion/ej2-react-buttons, например тему tailwind3.css.

Похожие скиллы

Все скиллы по теме «Фронтенд и UI» →
frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

Из того же набора57

syncfusion-react-dropdown-tree Помогает агенту реализовать React Dropdown Tree для иерархического выбора, чекбоксов и фильтрации. Пригодится для локальных и удалённых данных. CX Codex +1 703установок syncfusion-react-inline-ai-assist Скилл помогает добавить в React Inline AI Assist от Syncfusion: подсказки, команды, ответы и подключение AI-сервисов. Нужен при сборке AI-интерфейса. CX Codex +1 700установок syncfusion-react-ribbon Скилл для сборки Ribbon-интерфейсов на React: вкладки, группы, галереи и backstage-меню по образцу Microsoft Office. Пригодится, когда нужен командный тулбар с клавиатурной навигацией. CX Codex +1 700установок syncfusion-react-data-manager Генерирует код привязки данных и CRUD через Syncfusion DataManager в React. Останавливает генерацию и запрашивает тип адаптера, если эндпоинт указан без протокола. CX Codex +1 676установок syncfusion-react-inputs Скилл по компонентам ввода Syncfusion для React: загрузка файлов, числовые поля, OTP, подписи и слайдеры. Пригодится, когда форма собирается на ej2-react-inputs. CX Codex +1 672установок syncfusion-react-dropdowns Справочник для ИИ-ассистентов по компонентам выпадающих списков Syncfusion в React. Помогает настроить автодополнение, фильтрацию и удалённые данные. CX Codex +1 668установок syncfusion-react-popups Скилл для ИИ-агентов, который подсказывает, как собирать модальные окна, тултипы и поповеры на компонентах Syncfusion для React. CX Codex +1 663установок syncfusion-react-appbar Скилл помогает собирать навигационные панели и панели действий на React с помощью AppBar. Пригодится для верхней, нижней и закреплённой навигации. CX Codex +1 661установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

Показы, клики и копирования кода — открытая статистика. Мы держим цифры публичными по той же логике, что и сам NeBlask. Стать спонсором