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

syncfusion-react-context-menu — Claude Code skill: how to install

Helps AI agents implement Syncfusion ContextMenu in React, covering target selectors, nested items, click events, and animations.

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

What syncfusion-react-context-menu does

This skill guides coding agents through setting up ContextMenuComponent from the @syncfusion/ej2-react-navigations package. It details required properties like target for the trigger selector and items for the menu data. Without a valid target selector, the menu cannot bind to user interactions.

The documentation explains configuration for child filters, submenu hover delays, and custom markup using itemTemplate. It works with Vite and Create React App. Before running the component, you must import the corresponding Syncfusion CSS theme stylesheets into your app.

What it helps with

  • attach right-click popup menus to React elements
  • configure nested submenus with item separators
  • restrict menu triggers to specific child elements using filter
  • define custom item layouts through itemTemplate

Example prompts for the agent

  • Create a Syncfusion context menu for the #file-list element with rename and delete items.
  • Configure the context menu to open submenus on click with a SlideDown animation.
  • Define a custom item template that includes action icons and keyboard shortcuts.

How to install syncfusion-react-context-menu

1Skills CLI (Vercel)

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

2Manually: put the files in place

~/.claude/skills/syncfusion-react-context-menu/SKILL.md

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

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

Questions about syncfusion-react-context-menu

How to install syncfusion-react-context-menu in Claude Code?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-context-menu -a claude-code. The skill file is placed in ~/.claude/skills/syncfusion-react-context-menu/SKILL.md.

Which properties are mandatory for ContextMenuComponent?

You must specify target as a CSS selector string and provide an items array populated with MenuItemModel objects.

What dependencies does this component need?

It requires the @syncfusion/ej2-react-navigations package alongside Syncfusion CSS theme stylesheets.

Similar skills

All skills for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set57

syncfusion-react-stock-chart A skill that walks your agent through building a stock chart with the Syncfusion Stock Chart component in React: candles, OHLC, indicators. CX Codex +1 648installs syncfusion-react-treemaps This skill guides agents through building Syncfusion React TreeMap views. Use it to map hierarchical data, set up drill-down, and tune how categories appear. CX Codex +1 646installs syncfusion-react-cards This skill guides React card layouts with headers, images, action buttons, horizontal structure, and embedded Syncfusion components. CX Codex +1 624installs syncfusion-react-accordion This skill guides coding assistants in configuring Syncfusion collapsible panels for React. It assists with expand behavior, animations, and styling. CX Codex +1 621installs syncfusion-react-menu This skill guides an agent through Syncfusion React menus, from nested navigation to dropdown and context actions. Use it when a project needs configurable menu behavior. CX Codex +1 615installs syncfusion-react-toolbar This skill guides setup of Syncfusion’s React Toolbar, from item configuration to overflow behavior. Use it when building a command bar for an editor or another command-driven interface. CX Codex +1 613installs syncfusion-react-sparkline Guides the agent through building Syncfusion sparklines in React: five chart types, tooltips, markers and range bands where a full chart will not fit. CX Codex +1 608installs syncfusion-react-calendars A skill for building Syncfusion calendar controls in React, including date, range, and time selection with validation and formatting. CX Codex +1 541installs

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