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

syncfusion-react-splitter — Claude Code skill

This skill helps build React layouts with resizable panes, collapse controls, nested splits, and resize event handling.

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

What syncfusion-react-splitter does

The skill explains how to use SplitterComponent with PaneDirective elements inside PanesDirective. It covers horizontal, vertical, and nested arrangements, pane sizes in pixels or percentages, min and max limits, and pane content supplied as HTML, React components, or CSS selectors.

Its guidance also covers adding and removing panes at runtime, programmatic expand and collapse, separator styling, themes, and the resize event lifecycle. Accessibility topics include keyboard use, ARIA, screen readers, RTL, and localization. The project needs @syncfusion/ej2-react-layouts for the component examples to run.

What it helps with

  • build a two-column interface with adjustable panes
  • configure a vertical split for a work area
  • add a collapsible sidebar
  • enforce pane limits with min and max
  • react to resizeStart, resizing, and resizeStop

Example prompts for the agent

  • Use syncfusion-react-splitter to build a React two-pane layout with SplitterComponent, PanesDirective, and PaneDirective.
  • Create a vertical splitter with a collapsed top pane and a content pane below it.
  • Set percentage-based pane sizes and wire up resizeStart, resizing, and resizeStop handlers.

How to install syncfusion-react-splitter

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

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

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

Questions about syncfusion-react-splitter

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

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

What does syncfusion-react-splitter do?

It guides the agent through building React interfaces with resizable, collapsible, and nested panes, including component events and layout settings.

Which package is needed for the examples?

The project needs @syncfusion/ej2-react-layouts. The skill also covers CSS imports and theme setup.

Similar skills

Everything for Frontend and UI →
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 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 react-component-generator OneWave-AI A skill that generates React components in TypeScript with props, hooks and accessibility. Useful when building new UI elements or refactoring old ones. CX Codex +1 318installs gsap-react greensock This skill guides GSAP animation work in React and Next.js, including scoped selectors, cleanup, and client-only execution. CX Codex +1 66,900installs stitch::react-components official google-labs-code Turns Stitch designs into modular Vite and React components. Can also sync existing components with updated Stitch designs. CX Codex +1 50,400installs

From the same set37

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-sidebar Build responsive Syncfusion React sidebars for navigation layouts. Use this skill for drawer menus, nested navigation, and mobile-friendly panels. CX Codex +1 656installs 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-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 syncfusion-react-3d-circular-chart A skill that walks your coding agent through building 3D pie and donut charts in React with Syncfusion components. CX Codex +1 651installs syncfusion-react-stepper This skill helps an agent build React step flows for wizards, multi-step forms, and guided process screens. CX Codex +1 649installs

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