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

syncfusion-react-carousel — Claude Code skill: install

This skill guides an agent through a Syncfusion React carousel with slides, controls, transitions, and accessibility. Use it for galleries, product displays, or slideshows.

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

What syncfusion-react-carousel does

The skill covers the main Carousel workflow in React: defining items, choosing the starting slide, and adding navigation buttons or indicators. It also explains autoplay, hover pausing, looping, swipe input, and Fade or Slide transitions. Component properties, methods, and events are included.

Other sections cover CSS styling, themes, dark mode, ARIA support, keyboard controls, and screen readers. The examples use CarouselComponent, CarouselItemsDirective, and CarouselItemDirective from @syncfusion/ej2-react-navigations. Without that package, the example imports will not build in the React project.

What it helps with

  • build a rotating image gallery in React
  • configure carousel buttons and indicators
  • add autoplay with slide transitions
  • bind slide content to application data
  • support keyboard and ARIA navigation

Example prompts for the agent

  • Use the syncfusion-react-carousel skill to add a product carousel to my React project with controls, indicators, and autoplay.
  • Configure slides with CarouselItemDirective, select the opening item, and use a Fade transition.
  • Create an accessible image carousel with keyboard controls and swipe navigation.

How to install syncfusion-react-carousel

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

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

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

Questions about syncfusion-react-carousel

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

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

What does syncfusion-react-carousel do?

It guides the agent in implementing the Syncfusion React Carousel, including items, controls, indicators, transitions, autoplay, styling, and accessibility.

Which package do the skill examples use?

The examples import CarouselComponent, CarouselItemsDirective, and CarouselItemDirective from @syncfusion/ej2-react-navigations.

Similar skills

All skills for Frontend and UI →
cuboid-carousel heygen-com A skill that renders a 3D carousel of bevelled cuboids carrying card content: they fly in from the right, ride a wave, and exit left. Useful for promo clips and title sequences. CX Codex +1 10,000installs carousel-writer-sms blacktwist Writes carousel copy one slide at a time: cover, context, body, CTA. Useful when you need to break an idea into a swipeable format. CX Codex +1 2,300installs instagram-carousel marcolang Builds an Instagram carousel as a swipeable HTML preview and exports every slide as a ready 1080×1350 PNG. CX Codex +1 817installs carousel-writer social-media-skills A skill that writes multi-slide carousels for Instagram, LinkedIn and TikTok: a hooking cover, one idea per slide, and a save-leaning CTA. CX Codex +1 755installs ig-carousel Jakeschincariol Turns an idea into an Instagram carousel: the cover, slide-by-slide copy and 1080x1350 files. Best for step-shaped ideas. CX Codex +1 493installs vercel-react-native-skills vercel A rules pack for React Native and Expo work: lists, animations, navigation, native modules. Load it so your agent makes mobile changes the same way every time. CX Codex +1 255,200installs

From the same set57

syncfusion-react-3d-chart This skill walks your agent through Syncfusion 3D column and bar charts in a React app. Handy when a chart needs axes, a legend and export. CX Codex +1 661installs 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-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-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

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