Skip to main content
skill CX Codex

syncfusion-react-inputs — Claude Code skill for 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.

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

What syncfusion-react-inputs does

The skill walks through wiring up input components from @syncfusion/ej2-react-inputs: UploaderComponent, NumericTextBox, TextBox, TextArea, CheckBox, OTP Input, Signature, RangeSlider, ColorPicker, MaskedTextBox and Rating. Reference files are split by topic — package setup and license registration, async and chunked uploads, validation, templates, form integration, localization, accessibility, plus the full list of properties, methods and events.

The uploader gets the most room. It covers asyncSettings with saveUrl and removeUrl, autoUpload, sequentialUpload, directoryUpload, pausing and resuming chunks, retries via retryCount and retryAfterDelay, extension and size limits. Ready-made recipes include previewing an image before it goes out, a confirmation dialog before removal, opening the file browser from an outside button, and JWT authentication. On that last one the skill is blunt: keep tokens out of the code, pull them from a secure session store at runtime, and never log request headers or token values.

The skill also reins in the agent. It must ask before installing, running anything or creating files, and it will not install the package itself — it asks you to run npm install @syncfusion/ej2-react-inputs. Skip that and the examples will not compile, since every import comes from that package.

What it helps with

  • build a file upload with chunking and pause
  • cap uploads by file type and size
  • add a numeric field with formatting and validation
  • put OTP entry or a signature pad into a form
  • replace the default browse button with a custom one

Example prompts for the agent

  • Add file upload to the form with UploaderComponent and 500000-byte chunks
  • Create a numeric field with min and max values and validation
  • Turn on directoryUpload so a whole folder can be uploaded

How to install syncfusion-react-inputs

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

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

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

Questions about syncfusion-react-inputs

How do I install syncfusion-react-inputs in Claude Code?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a claude-code. The skill file lands at ~/.claude/skills/syncfusion-react-inputs/SKILL.md.

What does syncfusion-react-inputs do?

It gives the agent reference material on Syncfusion input components for React, from the file uploader to OTP and sliders, with code samples and notes on properties and events.

Do I need the ej2-react-inputs package for this skill?

Yes — every example imports from @syncfusion/ej2-react-inputs. The skill does not install it and asks you to run npm install @syncfusion/ej2-react-inputs yourself.

Similar skills

All skills for Frontend and UI →

From the same set57

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-data-manager Guides coding assistants in setting up Syncfusion DataManager for React apps, managing CRUD tasks, and selecting API adaptors safely. CX Codex +1 676installs 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-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 syncfusion-react-appbar This skill helps build React navigation and action bars with AppBar. Use it for top, bottom, sticky, or responsive headers with controls and sidebars. CX Codex +1 661installs syncfusion-react-3d-chart This skill walks your agent through Syncfusion 3D column and bar charts in a React app. Handy when a chart needs axes, a legend and export. CX Codex +1 661installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

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