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

syncfusion-react-data-manager — Claude Code skill: setup guide

Guides coding assistants in setting up Syncfusion DataManager for React apps, managing CRUD tasks, and selecting API adaptors safely.

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

What syncfusion-react-data-manager does

This skill assists coding agents in structuring React data workflows using Syncfusion DataManager. It covers local arrays alongside remote sources like REST, OData v3/v4, GraphQL, and ASP.NET Web API. Queries are built using the Query class, chaining functions for paging, sorting, filtering, and grouping.

The skill enforces an adaptor decision gate. When you provide a backend link without declaring its protocol, the agent pauses code output. It reads the decision checklist and asks you to pick an adaptor such as UrlAdaptor or WebApiAdaptor. It proceeds only after your confirmation.

Remote calls follow strict safety rules. Generated setups require HTTPS, response validation, private URL variables, and restricted CORS origins. For network efficiency, the skill configures saveChanges() batching, middleware hooks, and enableCache.

What it helps with

  • connect React components to OData, REST, or GraphQL services
  • chain Query methods for sorting, filtering, and paging
  • execute batch CRUD operations with saveChanges
  • configure caching and offline storage for React views

Example prompts for the agent

  • Connect my React Grid to an OData v4 service at https://myserver/odata/employees using DataManager
  • Set up DataManager for local array data with pagination and enableCache enabled
  • Add authentication tokens to DataManager requests using applyPreRequestMiddlewares

How to install syncfusion-react-data-manager

1Skills CLI (Vercel)

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

2Manually: put the files in place

~/.claude/skills/syncfusion-react-data-manager/SKILL.md

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

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

Questions about syncfusion-react-data-manager

How to install syncfusion-react-data-manager in Claude Code?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-data-manager -a claude-code. The skill file will be stored at ~/.claude/skills/syncfusion-react-data-manager/SKILL.md.

What does syncfusion-react-data-manager do?

It instructs coding tools on configuring Syncfusion DataManager, choosing proper network adaptors, building queries, and implementing React data binding.

Why does the assistant pause when given an API URL?

Whenever an endpoint lacks an explicit format, a built-in safety gate requires the agent to confirm the adaptor type before generating code.

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-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 syncfusion-react-dropdown-tree Helps an agent build a Syncfusion React Dropdown Tree for hierarchical selection, checkboxes, and filtering. Useful with local or remote data sources. CX Codex +1 703installs syncfusion-react-inline-ai-assist This skill guides React implementations of Syncfusion Inline AI Assist with AI suggestions, commands, response handling, and service integrations. CX Codex +1 700installs syncfusion-react-ribbon A skill for building Office-style ribbon toolbars in React with Syncfusion: tabs, groups, galleries, backstage view, KeyTips. Use it when an agent needs to scaffold a command-centric UI. CX Codex +1 700installs syncfusion-react-buttons Provides implementation guides for Syncfusion React button components. Helps code assistants wire up styled buttons, toggle actions, and grouped selections. CX Codex +1 675installs syncfusion-react-inputs A skill covering Syncfusion input components for React: file uploads, numeric fields, OTP, signatures and sliders. Useful when a form is built on ej2-react-inputs. CX Codex +1 672installs syncfusion-react-dropdowns Implementation guide for Syncfusion React dropdown components. Helps coding assistants configure AutoComplete, remote data sources, and custom filters. CX Codex +1 668installs syncfusion-react-popups A skill that tells your coding agent how to build modal dialogs, tooltips and popovers with Syncfusion React components. CX Codex +1 663installs

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