К основному содержанию
скилл CX Codex

syncfusion-react-file-manager — скилл для Claude Code: установка

Помогает настроить компонент файлового менеджера Syncfusion в React: от локального JSON до подключения к Azure Blob Storage или S3. Пригодится при сборке проводника с загрузкой файлов.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-file-manager -a claude-code
Открыть на GitHub

Что делает syncfusion-react-file-manager

Скилл содержит инструкции по внедрению компонента File Manager от Syncfusion (версия 34.1.29) в React-проекты. Он подсказывает агенту, как настроить отображение файлов списком или значками, привязать контекстное меню, включить выбор через Shift и Ctrl или активировать виртуализацию для каталогов от 1000 элементов.

Для работы с файлами без бэкенда скилл предлагает структуру FileData и управление состоянием через хуки React. Если же данные хранятся в облаке, для связки с Azure Blob Storage или Amazon S3 понадобится развернуть единый Docker-образ провайдера Syncfusion и настроить передачу параметров через ajaxSettings.

В материалах разобрана кастомизация интерфейса: добавление кнопок в тулбар, стилизация миниатюр и монтирование проводника внутри вкладок или диалоговых окон. Также поддерживаются стандарты доступности WCAG и языковая локализация с направлением RTL.

Какие задачи решает

  • встроить проводник файлов в React-компонент или диалоговое окно
  • настроить загрузку и скачивание файлов через Azure Blob Storage или Amazon S3
  • подключить виртуализацию списка для плавной прокрутки более 1000 файлов
  • организовать локальное управление файлами через JSON и хуки без бэкенда
  • настроить правила доступа и кастомные пункты контекстного меню

Примеры запросов агенту

  • Настрой Syncfusion File Manager для работы с локальным JSON через структуру FileData
  • Добавь в тулбар проводника Syncfusion кастомную кнопку и настрой передачу токена через ajaxSettings
  • Подключи компонент файлового менеджера к Amazon S3 через Docker-бэкенд Syncfusion

Как установить syncfusion-react-file-manager

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-file-manager/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о syncfusion-react-file-manager

Как установить syncfusion-react-file-manager в Claude Code?

Выполните в терминале команду npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-file-manager -a claude-code.

Что делает скилл syncfusion-react-file-manager?

Он снабжает ИИ-ассистента инструкциями по интеграции файлового менеджера Syncfusion в React, включая CRUD-операции, drag-and-drop, виртуализацию и кастомизацию панелей.

Как подключить облачное хранилище к файловому менеджеру?

Потребуется запустить единый Docker-контейнер провайдера от Syncfusion с переменными окружения для Azure Blob Storage или Amazon S3, а на клиенте настроить параметр ajaxSettings.

Похожие скиллы

Все скиллы по теме «Фронтенд и UI» →
frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

Из того же набора57

syncfusion-react-rich-text-editor Помогает настроить редактор RichTextEditorComponent из пакета ej2-react-richtexteditor в проектах на React. Пригодится для сборки HTML- или Markdown-редактора с панелью инструментов и медиа. CX Codex +1 757установок syncfusion-react-charts Скилл помогает собирать графики Syncfusion в React: настраивать оси, серии, данные и интерактивность. Пригодится для дашбордов и аналитики. CX Codex +1 749установок syncfusion-react-treegrid Помогает настраивать React-компонент TreeGrid от Syncfusion: строить иерархические таблицы, привязывать данные и включать экспорт. CX Codex +1 746установок syncfusion-react-common Скилл помогает агенту настраивать общие функции Syncfusion React: локализацию, RTL, анимации, drag-and-drop и сохранение состояния. CX Codex +1 732установок syncfusion-react-themes Скилл помогает настраивать темы Syncfusion React, тёмный режим, CSS-переменные, иконки и размеры компонентов. Нужен при работе с визуальным стилем интерфейса. CX Codex +1 729установок syncfusion-react-diagram Скилл помогает собирать интерактивные диаграммы в React на базе Syncfusion Diagrams. Пригодится для блок-схем, BPMN, UML и оргструктур. CX Codex +1 719установок syncfusion-react-license Разбирает лицензирование Syncfusion в React-проектах: генерация ключа, регистрация, ошибки валидации. Пригодится, когда сборка сыплет предупреждениями о лицензии. CX Codex +1 718установок syncfusion-react-image-editor Скилл для работы с компонентом Syncfusion React Image Editor: подскажет агенту, как встроить редактирование картинок в React-приложение. CX Codex +1 718установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой