# syncfusion-react-common

This skill guides Syncfusion React setup for localization, RTL, animation, drag-and-drop, persistence, templates, and security-related component work.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 732 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-common/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-common

## What it does

syncfusion-react-common gives the coding agent a map for shared Syncfusion React features rather than a single widget implementation. It covers right-to-left layouts, language and locale handling, CLDR-based internationalization, number, currency, date, and time formatting, plus reusable templates and HTML sanitization.

The skill includes setup guidance for package installation, theme CSS, component initialization, and license activation. It also explains how to keep component state with `enablePersistence`, add animation effects, and connect draggable elements to drop targets. A Syncfusion license key is needed for the license activation step; set `SYNCFUSION_LICENSE` and run `npx syncfusion-license activate`.

## Install

### Claude Code (native platform)

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

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

### Codex

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

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-common/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-common -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-common/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-common
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-common/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-common -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-common/SKILL.md

## When to use it
- configure RTL for a React component
- add locale-aware date and number formatting
- keep component state across sessions
- connect draggable items to drop targets
- sanitize HTML used by templates

## Example prompts
- Set up RTL for `ListViewComponent` and show both global and local options.
- Add persistence to `GridComponent` with `enablePersistence`.
- Create an entrance animation and wire a `draggable` element to a `droppable` target.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 57 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