К основному содержанию
affpapa.org
RU EN
скилл CX Codex

syncfusion-react-diagram — скилл для Claude Code

Скилл помогает собирать интерактивные диаграммы в React на базе Syncfusion Diagrams. Пригодится для блок-схем, BPMN, UML и оргструктур.

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

Что делает syncfusion-react-diagram

Скилл помогает настроить React-компонент Syncfusion Diagrams и описать диаграмму через узлы, соединители, подписи и порты. Он подходит для блок-схем, организационных схем, BPMN-процессов, UML-моделей, mind map и сетевых диаграмм. Элементы выводятся в SVG.

В материалах разобраны автоматические раскладки, swimlane, группы, палитра символов, привязка данных, события взаимодействия, сериализация состояния и экспорт. Модульная система подключает нужные возможности через Inject, а файлы в references/*.md служат справочником по API.

Перед генерацией примеров кода нужно сверить имена классов, свойства и сигнатуры с файлами в references/*.md. Без такой проверки легко получить неверный API.

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

  • собрать блок-схему процесса
  • связать узлы линиями и стрелками
  • создать BPMN- или UML-модель
  • построить оргструктуру из данных
  • добавить палитру перетаскиваемых фигур

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

  • Собери в React блок-схему процесса с узлами и соединителями через Syncfusion Diagrams.
  • Создай оргструктуру из иерархических данных и добавь автоматическую раскладку.
  • Настрой BPMN-диаграмму со swimlane, подписями и палитрой символов.

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

1Через Skills CLI (Vercel)

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

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

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

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

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

Вопросы о syncfusion-react-diagram

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

Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-diagram -a claude-code, затем проверьте файл ~/.claude/skills/syncfusion-react-diagram/SKILL.md.

Что делает syncfusion-react-diagram?

Скилл помогает создавать и настраивать интерактивные диаграммы в React: блок-схемы, оргструктуры, BPMN-, UML- и сетевые модели. Он охватывает узлы, соединители, раскладки, порты и палитру символов.

На каких платформах работает syncfusion-react-diagram?

Скилл доступен для Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode.

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

Все скиллы по теме «Фронтенд и 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-treegrid Помогает настраивать React-компонент TreeGrid от Syncfusion: строить иерархические таблицы, привязывать данные и включать экспорт. CX Codex +1 746установок syncfusion-react-common Скилл помогает агенту настраивать общие функции Syncfusion React: локализацию, RTL, анимации, drag-and-drop и сохранение состояния. CX Codex +1 732установок syncfusion-react-file-manager Помогает настроить компонент файлового менеджера Syncfusion в React: от локального JSON до подключения к Azure Blob Storage или S3. Пригодится при сборке проводника с загрузкой файлов. CX Codex +1 729установок syncfusion-react-themes Скилл помогает настраивать темы Syncfusion React, тёмный режим, CSS-переменные, иконки и размеры компонентов. Нужен при работе с визуальным стилем интерфейса. CX Codex +1 729установок syncfusion-react-license Разбирает лицензирование Syncfusion в React-проектах: генерация ключа, регистрация, ошибки валидации. Пригодится, когда сборка сыплет предупреждениями о лицензии. CX Codex +1 718установок syncfusion-react-image-editor Скилл для работы с компонентом Syncfusion React Image Editor: подскажет агенту, как встроить редактирование картинок в React-приложение. CX Codex +1 718установок syncfusion-react-chat-ui Скилл помогает собирать чат-интерфейсы на React с сообщениями, вложениями, индикаторами набора и настройкой внешнего вида. CX Codex +1 715установок syncfusion-react-tabs Помогает агенту собрать и настроить компонент Tab из Syncfusion для React: заголовки, перетаскивание, ленивую загрузку контента. CX Codex +1 715установок

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

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

Показы, клики и копирования кода — открытая статистика. Мы держим цифры публичными по той же логике, что и сам NeBlask. Стать спонсором