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

syncfusion-react-file-manager — Claude Code skill: how to install

Configures the Syncfusion React File Manager component for web apps. Guides agents through local JSON state, S3 or Azure integration, and custom toolbar controls.

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

What syncfusion-react-file-manager does

This skill guides coding agents on integrating Syncfusion File Manager (version 34.1.29) into React projects. It covers list and thumbnail layouts, drag-and-drop interactions, breadcrumb navigation, and tree-view panels. The reference notes also detail multi-selection workflows using Shift-click and range selection, plus virtualization for file sets exceeding 1000 items.

For offline setups, the guide demonstrates managing files in memory via a flat FileData JSON structure and React hooks. When hosting remote files, you must run the unified Syncfusion Docker provider with environment variables configured for Amazon S3 or Azure Blob Storage, wiring endpoints through client ajaxSettings.

Component styling instructions address custom icons, embedding inside dialog modals, and injecting custom tools into action bars or context menus. Accessibility guidelines include WCAG keyboard patterns and RTL localization support.

What it helps with

  • embed a file explorer into React tabs or modal dialogs
  • connect file browsing to Amazon S3 or Azure Blob Storage via Docker
  • enable list virtualization for smooth scrolling across 1000+ files
  • handle in-memory file operations using local JSON data and React hooks

Example prompts for the agent

  • Configure the Syncfusion File Manager component using local JSON data with custom file permissions
  • Set up client ajaxSettings to pass authentication headers to the Docker file provider
  • Add a custom action button to the Syncfusion File Manager toolbar and context menu

How to install syncfusion-react-file-manager

1Skills CLI (Vercel)

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

2Manually: put the files in place

~/.claude/skills/syncfusion-react-file-manager/SKILL.md

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

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

Questions about syncfusion-react-file-manager

How do I install syncfusion-react-file-manager in Claude Code?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-file-manager -a claude-code in your terminal.

What does syncfusion-react-file-manager do?

It teaches coding agents how to implement and style Syncfusion's React File Manager, covering CRUD handling, cloud storage backends, and UI customization.

What backend is required for cloud storage support?

Connecting to Azure Blob Storage or Amazon S3 requires running Syncfusion's unified provider Docker container and pointing the React component's ajaxSettings to its endpoints.

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-rich-text-editor Configures the Syncfusion React Rich Text Editor for HTML or Markdown editing. Useful for setting up toolbars, media uploads, and document export in React apps. CX Codex +1 757installs syncfusion-react-charts This skill helps build Syncfusion charts in React, covering axes, series, data sources, styling, and interactions. Use it for dashboards and analytics views. CX Codex +1 749installs syncfusion-react-treegrid Guides AI agents through configuring Syncfusion React TreeGrid components, handling nested data binding, and column setups. CX Codex +1 746installs syncfusion-react-common This skill guides Syncfusion React setup for localization, RTL, animation, drag-and-drop, persistence, templates, and security-related component work. CX Codex +1 732installs syncfusion-react-themes This skill helps configure Syncfusion React themes, dark mode, CSS variables, icons, and component sizing. Use it when changing an app’s visual styling. CX Codex +1 729installs syncfusion-react-diagram This skill helps build interactive React diagrams with Syncfusion Diagrams. Use it for flowcharts, BPMN, UML models, org charts, and related visual layouts. CX Codex +1 719installs syncfusion-react-license Walks through Syncfusion licensing in React apps: issuing a key, registering it, and clearing validation errors. Useful when your build starts warning about licenses. CX Codex +1 718installs syncfusion-react-image-editor A skill for the Syncfusion React Image Editor component: tells the agent how to wire image editing into a React app. CX Codex +1 718installs

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