# syncfusion-react-notifications

A skill covering Syncfusion's React notification components: Toast, Badge, Message, Skeleton and Spinner. Useful when you need status indicators without digging through docs.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 654 installs · ★ 3
- Author: Syncfusion Inc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-notifications/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-notifications

## What it 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/ej2-react-notifications@33.x.x --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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-notifications/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-notifications/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-notifications/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-notifications/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-notifications
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-notifications/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-notifications
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-notifications/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-notifications/SKILL.md

## When to use it
- 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
- 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

## Similar
- [ask-sonner](https://affpapa.org/en/nevibecode/skills/ask-sonner.md) — skill · 140500 installs
- [notifications-and-recovery](https://affpapa.org/en/nevibecode/skills/notifications-and-recovery.md) — skill · 854 installs
- [configure-notifications](https://affpapa.org/en/nevibecode/skills/configure-notifications.md) — skill · 780 installs
- [slack-notifications](https://affpapa.org/en/nevibecode/hooks/slack-notifications.md) — hook · 279 installs
- [discord-notifications](https://affpapa.org/en/nevibecode/hooks/discord-notifications.md) — hook · 217 installs
- [setup-notifications-via-wecom](https://affpapa.org/en/nevibecode/skills/setup-notifications-via-wecom.md) — skill · 341 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 15 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md