# 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.

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

## What it does

The skill covers the Syncfusion React Ribbon component end to end. It walks through tabs, groups, collections and item types such as buttons, dropdowns, checkboxes, split buttons and color pickers. Both layouts are documented: Classic with multiple rows and Simplified with a single row, plus switching between them.

Reference files split the material by topic, so the agent reads only what fits the task. One file explains structure and item sizing, another covers events and ARIA, a third handles theming and custom CSS.

KeyTips, keyboard navigation, RTL and WCAG compliance are included. Themes ship for Material, Bootstrap, Fluent and Tailwind. If the ribbon has to work without a mouse, this skill addresses that directly.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

## When to use it
- organize commands into ribbon tabs and groups
- switch between Classic and Simplified layouts
- show tabs only when a selection exists
- build galleries with filtering and templates
- wire up KeyTips for keyboard access

## Example prompts
- Scaffold a React ribbon with Home and Insert tabs, put a button and a dropdown in Home
- Add a backstage view with New, Open and Save items
- Create a contextual tab that appears only when a shape is selected

## Similar
- [magicpath](https://affpapa.org/en/nevibecode/skills/magicpathai-magicpath.md) — skill · 6300 installs
- [antd](https://affpapa.org/en/nevibecode/skills/antd.md) — skill · 6100 installs
- [mantine-custom-components](https://affpapa.org/en/nevibecode/skills/mantine-custom-components.md) — skill · 3600 installs
- [elements](https://affpapa.org/en/nevibecode/skills/elements.md) — skill · 1100 installs
- [beui](https://affpapa.org/en/nevibecode/skills/beui.md) — skill · 844 installs
- [ai-elements](https://affpapa.org/en/nevibecode/skills/vercel-ai-elements.md) — skill · 20400 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