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

syncfusion-react-sidebar — Claude Code skill: install

Build responsive Syncfusion React sidebars for navigation layouts. Use this skill for drawer menus, nested navigation, and mobile-friendly panels.

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

What syncfusion-react-sidebar does

This skill guides SidebarComponent setup from @syncfusion/ej2-react-navigations. It covers Over, Push, Slide, and Auto behavior, left or right placement, sizing, docked states, and media-query-driven layouts. It also shows how to open, close, and toggle the panel from code.

The included guidance covers ListView and TreeView content, animation choices, backdrop behavior, outside-click and Escape handling, RTL layouts, and keyboard access. It is meant for a React project using Syncfusion components. The @syncfusion/ej2-react-navigations import is required for the SidebarComponent example to build.

What it helps with

  • build a responsive navigation drawer
  • switch a sidebar between Over and Push behavior
  • connect the panel to ListView or TreeView
  • close the drawer from an outside click or Escape
  • add keyboard navigation and ARIA support

Example prompts for the agent

  • Create a responsive Syncfusion React sidebar for a mobile and desktop layout.
  • Configure SidebarComponent with Auto behavior, a backdrop, and outside-click closing.
  • Connect the sidebar to TreeView, enable RTL, and support keyboard navigation.

How to install syncfusion-react-sidebar

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

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

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

Questions about syncfusion-react-sidebar

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

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sidebar -a claude-code, then check ~/.claude/skills/syncfusion-react-sidebar/SKILL.md.

What does syncfusion-react-sidebar do?

It helps configure a responsive Syncfusion React Sidebar for drawer and navigation layouts, including display behavior, animation, backdrop handling, and state control.

Which navigation components can it work with?

The skill covers Sidebar integration with ListView and TreeView, including nested and multi-level navigation structures.

Similar skills

All skills for Frontend and UI →
cmux-custom-sidebar manaflow-ai Skill for writing a custom cmux sidebar in a SwiftUI-like language. The sidebar binds to workspaces, tabs, PRs, and clock; hot-reloads on save; runs cmux commands on tap. CX Codex +1 4,800installs cmux-sidebar-builder manaflow-ai A skill that walks the agent through writing and revising cmux custom sidebars in the SwiftUI-style dialect cmux interprets at runtime. CX Codex +1 636installs react-doctor millionco Audits React codebases for architecture, accessibility, and rendering issues. Computes a health score from 0 to 100 and helps patch regressions. CX Codex +1 19,200installs better-layout jakubkrehel A skill that sets grouping, alignment, reading order and responsive structure, then stress-tests the result by resizing, translating and mirroring it for RTL. CX Codex +1 30,800installs react-testing affaan-m A skill for writing React component, hook and page tests with React Testing Library, Vitest or Jest, MSW network mocks and axe accessibility assertions. CX Codex +1 4,800installs react-code-review giuseppe-trisciuoglio Reviews React components and hooks before merge: composition, hook dependencies, accessibility, TypeScript types. Findings come sorted by severity. CX Codex +1 4,300installs

From the same set57

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. CX Codex +1 659installs syncfusion-react-heatmap Walks the agent through building a React heatmap with axes, legend and tooltips. Handy when a matrix of values needs colour. CX Codex +1 658installs syncfusion-react-breadcrumb A skill that walks your coding agent through building and configuring the Syncfusion Breadcrumb component in React: routes, icons, overflow. Useful when you need a navigation trail without digging through docs. CX Codex +1 658installs syncfusion-react-carousel This skill guides an agent through a Syncfusion React carousel with slides, controls, transitions, and accessibility. Use it for galleries, product displays, or slideshows. CX Codex +1 657installs syncfusion-react-timeline Tells your agent how to build event chronologies with the Syncfusion Timeline component for React. Useful for roadmaps, shipping tracking and activity feeds. CX Codex +1 655installs syncfusion-react-splitter This skill helps build React layouts with resizable panes, collapse controls, nested splits, and resize event handling. CX Codex +1 653installs syncfusion-react-smithchart A skill that walks your agent through building and customizing Syncfusion's React Smith Chart for impedance and RF work. CX Codex +1 652installs syncfusion-react-circular-gauge Build React circular gauges for KPIs, sensor readings, speedometers, and live monitoring dashboards with this skill. CX Codex +1 651installs

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