syncfusion-react-notifications — Claude Code skill for React toasts
A skill covering Syncfusion's React notification components: Toast, Badge, Message, Skeleton and Spinner. Useful when you need status indicators without digging through docs.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a claude-codeWhat syncfusion-react-notifications does
The skill walks an agent through five components from @syncfusion/ej2-react-notifications: Toast, Badge, Message, Skeleton and Spinner. Reference files cover setup, positioning, timeouts, templates, animation, accessibility and the API. The agent reads the relevant reference and writes code from it instead of guessing.
Toast coverage includes nine preset positions, timeOut defaulting to 5000 ms, extendedTimeout at 1000 ms on hover, persistent toasts via timeOut: 0, templates, action buttons and ToastUtility.show() for a quick toast without instantiating the component. There is a WAI-ARIA section and RTL support.
Before installing the package, the skill tells the agent to stop and ask: the user runs npm install @syncfusion/[email protected] --save, not the agent. Same for npm run dev. If you want an agent that runs unattended, this one deliberately pauses at every step. The text cuts off inside the Message section, so that component gets less detail than Toast.
What it helps with
- show a toast after a form saves
- attach a count badge to an icon
- render an error message with the right severity
- swap in a skeleton while data loads
- set toast position and animation without reading the docs
Example prompts for the agent
- Add a success toast in the bottom right with a progress bar and a close button
- Make a persistent toast with Undo and Confirm buttons that never auto-dismisses
- Show a skeleton with a shimmer animation in place of the product card while loading
How to install syncfusion-react-notifications
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a claude-code2Manually: put the files in place
~/.claude/skills/syncfusion-react-notifications/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/syncfusion-react-notifications/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a codex2Manually: put the files in place
.agents/skills/syncfusion-react-notifications/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a cursor2Manually: put the files in place
.cursor/skills/syncfusion-react-notifications/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-notifications2Manually: put the files in place
.github/skills/syncfusion-react-notifications/SKILL.md1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a gemini-cli2Platform CLI
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-notificationsManually: put the files in place
.devin/skills/syncfusion-react-notifications/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -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-notifications
How do I install syncfusion-react-notifications in Claude?
Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a claude-code. The skill file then lands at ~/.claude/skills/syncfusion-react-notifications/SKILL.md.
What does syncfusion-react-notifications do?
It guides an agent through Syncfusion's React notification components: toasts, badges, messages, skeletons and spinners. The agent reads the matching reference file and writes code from it.
Will the skill install the package and start the dev server on its own?
No. It asks for confirmation before each action: the user runs npm install @syncfusion/[email protected] --save and npm run dev.
