Навыки react-flow-node-ts
📦

react-flow-node-ts

Безопасно

Создание компонентов узлов React Flow с использованием TypeScript

Для создания визуальных редакторов рабочих процессов требуются согласованные паттерны компонентов узлов. Этот навык предоставляет шаблоны TypeScript с правильными определениями типов, дескрипторами и интеграцией с хранилищем Zustand.

Поддерживает: Claude Codex Code(CC)
📊 71 Адекватно
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Протестировать

Использование «react-flow-node-ts». Создайте компонент VideoNode с элементами управления воспроизведением

Ожидаемый результат:

  • Интерфейс TypeScript: VideoNodeData с полями videoUrl, thumbnail и duration
  • React-компонент: VideoNode с memo, дескрипторами и UI видеоплеера
  • Контрольный список интеграции: 6 шагов для регистрации узла в вашем холсте React Flow

Использование «react-flow-node-ts». Сгенерируйте FormNode для сбора пользовательского ввода в рабочих процессах

Ожидаемый результат:

  • Определения типов: FormNodeData с массивом formFields и submitAction
  • Компонент: FormNode с условными режимами редактирования/просмотра на основе canvasMode
  • Интеграция с хранилищем: вызовы updateNode для изменений значений полей

Аудит безопасности

Безопасно
v1 • 2/24/2026

Static analyzer flagged 20 patterns as potential security issues, but all are false positives. The 'external_commands' detections (14) are Markdown code block backticks used for documentation formatting, not shell execution. The 'weak cryptographic algorithm' findings (6) are misidentified text patterns with no actual cryptographic code present. This skill is a documentation template for creating React Flow node components and poses no security risk.

1
Просканировано файлов
72
Проанализировано строк
0
находки
1
Всего аудитов
Проблем безопасности не найдено
Проверено: claude

Оценка качества

38
Архитектура
100
Сопровождаемость
87
Контент
31
Сообщество
100
Безопасность
91
Соответствие спецификации

Что вы можете построить

Визуальный конструктор рабочих процессов

Создание пользовательских узлов для редактора рабочих процессов с перетаскиванием, где пользователи могут соединять блоки для определения последовательностей автоматизации.

Редактор диаграмм и блок-схем

Создание интерактивных инструментов для построения диаграмм с пользовательскими типами узлов для технической документации или приложений для отображения процессов.

Визуализатор конвейеров данных

Проектирование визуальных интерфейсов для конвейеров обработки данных, где каждый узел представляет преобразование или источник данных.

Попробуйте эти промпты

Базовый компонент узла 
Создайте компонент узла React Flow с именем 'ProcessNode' с заголовком и индикатором статуса. Включите целевые и исходные дескрипторы для соединений.
Узел с данными 
Сгенерируйте компонент 'DataNode', который отображает динамические данные из свойства data узла. Включите интерфейсы TypeScript для структуры данных с необязательными полями.
Интерактивный узел с хранилищем 
Создайте компонент 'ConfigNode', который использует useAppStore для чтения canvasMode и обновления свойств узла. Включите дескрипторы изменения размера, видимые только в режиме редактирования.
Полная интеграция узла 
Сгенерируйте все файлы, необходимые для 'DecisionNode', включая: определения типов, компонент с условным рендерингом, значения по умолчанию хранилища и шаги регистрации в меню.

Лучшие практики

  • Всег��а оборачивайте компоненты узлов в memo для предотвращения лишних повторных рендеров при взаимодействии с холстом
  • Используйте дженерики TypeScript для типа Node, чтобы обеспечить безопасный доступ к данным во всём приложении
  • Проверяйте canvasMode перед отображением интерактивных элементов, чтобы предотвратить конфликты при панорамировании холста

Избегать

  • Избегайте прямого манипулирования DOM в компонентах узлов - используйте состояние и свойства React
  • Не пропускайте определения типов TypeScript - они необходимы для выявления ошибок в структуре данных
  • Никогда не изменяйте данные узла напрямую - всегда используйте действия хранилища, такие как updateNode, для изменения состояния

Часто задаваемые вопросы

Что такое React Flow и когда следует использовать этот навык?
React Flow - это библиотека React для создания интерактивных редакторов на основе узлов. Используйте этот навык, когда вам нужны пользовательские типы узлов сверх стандартных прямоугольных узлов.
Нужно ли устанавливать дополнительные зависимости?
Да, вам нужны reactflow (или @xyflow/react) для основных компонентов и Zustand для управления состоянием. Навык предполагает, что они уже настроены.
Можно ли настроить внешний вид генерируемых узлов?
Да, шаблоны предоставляют структурный паттерн. Вы настраиваете содержимое внутренних div-элементов, CSS-классы и стили в соответствии с вашей дизайн-системой.
Как работают несколько дескрипторов для сложных соединений?
Добавьте несколько компонентов Handle с уникальными свойствами id. Разместите их сверху, снизу, слева или справа. Используйте id для определения того, какой дескриптор инициировал соединение.
Каково назначение NodeResizer?
NodeResizer предоставляет дескрипторы изменения размера вокруг узла, когда он видим. Обычно он отображается только при выборе узла и нахождении холста в режиме редактирования.
Как обрабатывать взаимодействия с узлами, такие как нажатия или редактирование?
Добавьте обработчики onClick к элементам внутри вашего узла. Используйте действие updateNode хранилища для сохранения изменений. Получайте состояние selected из свойств узла для условного стилизации.

Сведения для разработчиков

Автор

sickn33

Лицензия

MIT

Репозиторий

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-flow-node-ts

Ссылка

main

Структура файлов

📄 SKILL.md