Skip to main content
affpapa.org
RU EN
skill CX Codex

syncfusion-react-query-builder — Claude Code skill: how to install

Guides integration of Syncfusion's visual query builder in React. Useful when constructing condition trees and transforming filter rules into SQL or Mongo queries.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-query-builder -a claude-code
Open on GitHub

What syncfusion-react-query-builder does

This skill instructs coding agents on configuring QueryBuilderComponent from the @syncfusion/ej2-react-querybuilder library. It covers defining field schemas through ColumnsModel and binding remote datasets using DataManager with ODataV4Adaptor.

The reference guides explain programmatic rule handling: building nested conditions, locking rules against editing, and applying 16 built-in operators. State persists via localStorage. Assistants learn to export rule hierarchies to SQL via getSqlFromRules and parse raw query strings back into UI components using setRulesFromSql.

The generated code will fail without @syncfusion/ej2-react-querybuilder installed in your project. Component CSS files must also be imported separately.

What it helps with

  • Build a visual condition builder with nested rules in React
  • Export UI rule hierarchies into SQL or Mongo queries
  • Bind remote datasets to filter controls using DataManager
  • Reconstruct interactive filter trees from raw SQL strings

Example prompts for the agent

  • Configure QueryBuilderComponent with drag-and-drop reordering and summary view
  • Write a handler that exports current filter rules to parameterized SQL
  • Show how to bind a remote OData service to the Query Builder using DataManager

How to install syncfusion-react-query-builder

1Skills CLI (Vercel)

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

2Manually: put the files in place

~/.claude/skills/syncfusion-react-query-builder/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-query-builder/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about syncfusion-react-query-builder

How to install syncfusion-react-query-builder in Claude Code?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-query-builder -a claude-code. The skill will be saved to ~/.claude/skills/syncfusion-react-query-builder/SKILL.md.

What does syncfusion-react-query-builder do?

It provides your AI assistant with component setups, API methods, and code patterns for Syncfusion React Query Builder. It simplifies configuring rule groups, layouts, and data transformations.

Can the query builder parse SQL back into UI rules?

Yes, it documents the setRulesFromSql method. This function parses an incoming SQL string and generates the corresponding visual filter structure.

Similar skills

All skills for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set57

syncfusion-react-accumulation-chart This skill guides React implementations of Pie, Doughnut, Funnel, and Pyramid charts. Use it for proportional data, percentage views, and hierarchical displays. CX Codex +1 711installs syncfusion-react-barcode A skill for generating barcodes, QR codes and Data Matrix codes in React with Syncfusion components. Useful when codes go into a form, report or label. CX Codex +1 711installs syncfusion-react-pivot-table Build and customize Syncfusion PivotView in React with guidance for data binding, grouping, filters, aggregation, exports, and pivot charts. CX Codex +1 709installs syncfusion-react-dashboard-layout A skill that tells your coding agent how to build React dashboards with draggable Syncfusion panels. CX Codex +1 709installs syncfusion-react-maps Walks the agent through building geographic maps in React: GeoJSON, markers, bubbles, legends, choropleth. Useful when data has to be shown by region. CX Codex +1 707installs syncfusion-react-blockeditor A skill that walks your agent through the Syncfusion React BlockEditor: block-based content editing with menus, drag-and-drop and Yjs collaboration. CX Codex +1 706installs syncfusion-react-speech-to-text This skill guides React implementations of Syncfusion SpeechToText, including microphone input, transcript events, listening control, and accessible voice forms. CX Codex +1 705installs syncfusion-react-treeview An agent skill for building hierarchical trees with @syncfusion/ej2-react-navigations: node selection, checkboxes, drag-drop, inline editing and templates. CX Codex +1 705installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor