Skip to main content
affpapa.org
RU EN
skill CX Codex

syncfusion-react-ribbon — Claude Code skill for React ribbon UIs

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.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ribbon -a claude-code
Open on GitHub

What syncfusion-react-ribbon 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.

What it helps with

  • 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 for the agent

  • 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

How to install syncfusion-react-ribbon

1Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ribbon -a claude-code

2Manually: put the files in place

~/.claude/skills/syncfusion-react-ribbon/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-ribbon/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about syncfusion-react-ribbon

How do I install syncfusion-react-ribbon in Claude Code?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-ribbon -a claude-code. The skill lands in ~/.claude/skills/syncfusion-react-ribbon/SKILL.md.

What does syncfusion-react-ribbon do?

It gives the agent instructions for building Syncfusion Ribbon UIs in React: structure, item types, layouts, events, theming and troubleshooting.

Which themes are available?

Material, Bootstrap, Fluent and Tailwind CSS. Each needs a separate import; dark mode is supported.

Similar skills

All skills for Frontend and UI →
magicpath MagicPathAI Connects your coding agent to MagicPath via CLI to browse, install, and edit UI components. Useful when pulling design systems directly into code. CX Codex +1 6,300installs antd ant-design Guides an agent through Ant Design API checks, project diagnostics, and version migrations when working with antd code. CX Codex +1 6,100installs mantine-custom-components mantinedev Teaches AI agents to build custom components for Mantine 9.x and React 19. It sets up component factories, Styles API support, and CSS variable resolvers. CX Codex +1 3,600installs elements assistant-ui Adds and configures styled assistant-ui components in your codebase. Useful when integrating chat threads, agent plan cards, or diff viewers. CX Codex +1 1,100installs beui starc007 Selects and installs animated React components from beUI via MCP or shadcn registry. Useful when building agent interfaces, chats, and motion UI. CX Codex +1 844installs ai-elements vercel React component library for AI interfaces: messages, conversation history, prompt inputs, tool call displays. Built on shadcn/ui. CX Codex +1 20,400installs

From the same set57

syncfusion-react-speech-to-text This skill guides React implementations of Syncfusion SpeechToText, including microphone input, transcript events, listening control, and accessible voice forms. CX Codex +1 705installs syncfusion-react-treeview An agent skill for building hierarchical trees with @syncfusion/ej2-react-navigations: node selection, checkboxes, drag-drop, inline editing and templates. CX Codex +1 705installs syncfusion-react-dropdown-tree Helps an agent build a Syncfusion React Dropdown Tree for hierarchical selection, checkboxes, and filtering. Useful with local or remote data sources. CX Codex +1 703installs syncfusion-react-inline-ai-assist This skill guides React implementations of Syncfusion Inline AI Assist with AI suggestions, commands, response handling, and service integrations. CX Codex +1 700installs syncfusion-react-data-manager Guides coding assistants in setting up Syncfusion DataManager for React apps, managing CRUD tasks, and selecting API adaptors safely. CX Codex +1 676installs syncfusion-react-buttons Provides implementation guides for Syncfusion React button components. Helps code assistants wire up styled buttons, toggle actions, and grouped selections. CX Codex +1 675installs 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. CX Codex +1 672installs syncfusion-react-dropdowns Implementation guide for Syncfusion React dropdown components. Helps coding assistants configure AutoComplete, remote data sources, and custom filters. CX Codex +1 668installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor