syncfusion-react-query-builder — скилл для Claude Code
Помогает внедрить визуальный конструктор фильтров Syncfusion в React-приложения. Генерирует интерфейсы правил и переводит условия в SQL или Mongo.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-query-builder -a claude-codeЧто делает syncfusion-react-query-builder
Скилл содержит инструкции по работе с компонентом QueryBuilderComponent из пакета @syncfusion/ej2-react-querybuilder. Он объясняет, как объявлять схему полей через ColumnsModel и связывать компонент с удалёнными источниками через DataManager с адаптером ODataV4Adaptor.
В материалах разобраны методы программного управления деревом правил: создание групп условий, блокировка узлов для чтения и вызов шестнадцати встроенных операторов фильтрации. Интерфейс поддерживает перетаскивание мышью. Скилл учит конвертировать дерево фильтров в SQL через getSqlFromRules и парсить готовые запросы обратно в форму с помощью setRulesFromSql.
Без установки npm-пакета @syncfusion/ej2-react-querybuilder сгенерированный код не запустится. Стили и темы оформления также потребуется импортировать в проект вручную.
Какие задачи решает
- Собрать визуальный конструктор условий фильтрации на React
- Экспортировать дерево правил в SQL или запрос Mongo
- Подключить удалённый источник данных через ODataV4Adaptor
- Восстановить визуальное дерево фильтра из готовой строки SQL
Примеры запросов агенту
- Настрой QueryBuilderComponent с шестнадцатью стандартными операторами и кнопками удаления правил
- Напиши функцию экспорта правил из Query Builder в параметризованный SQL
- Покажи пример связывания Query Builder с удалённым OData-сервисом через DataManager
Как установить syncfusion-react-query-builder
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-query-builder -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-query-builder/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-query-builder/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-query-builder -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-query-builder/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-query-builder -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-query-builder/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-query-builder2Вручную: положить файлы
.github/skills/syncfusion-react-query-builder/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-query-builder -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-query-builderВручную: положить файлы
.devin/skills/syncfusion-react-query-builder/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-query-builder -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-query-builder
Как установить syncfusion-react-query-builder в Claude Code?
Выполните команду npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-query-builder -a claude-code. Файл навыка появится по пути ~/.claude/skills/syncfusion-react-query-builder/SKILL.md.
Что делает этот скилл?
Он предоставляет модели данных и примеры кода для работы с React Query Builder от Syncfusion. С его помощью агент правильно конфигурирует колонки, валидацию и трансляцию правил фильтрации.
Поддерживает ли компонент импорт из готового SQL?
Да, скилл содержит примеры вызова метода setRulesFromSql. Метод принимает строку запроса SQL и перестраивает визуальные блоки фильтрации.
