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.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a claude-codeWhat 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
UploaderComponentand 500000-byte chunks - Create a numeric field with min and max values and validation
- Turn on
directoryUploadso 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-code2Manually: put the files in place
~/.claude/skills/syncfusion-react-inputs/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/syncfusion-react-inputs/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a codex2Manually: put the files in place
.agents/skills/syncfusion-react-inputs/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a cursor2Manually: put the files in place
.cursor/skills/syncfusion-react-inputs/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-inputs2Manually: put the files in place
.github/skills/syncfusion-react-inputs/SKILL.md1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a gemini-cli2Platform CLI
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-inputsManually: put the files in place
.devin/skills/syncfusion-react-inputs/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
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.