workflow-node-setup
Настройка узлов React Flow Workflow с высокой точностью
Конфигурация узлов React Flow требует внимательного подхода к идентификаторам handle, стилям ребер и поведению изменения размера. Этот навык предоставляет пошаговые инструкции для создания согласованных и удобных для отладки узлов workflow.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «workflow-node-setup». Добавь source handle к моему пользовательскому узлу workflow
Ожидаемый результат:
Настроенный узел с двумя source handle в правых позициях (85 и 108 пикселей от верхнего края), каждый с уникальными идентификаторами, соответствующими определениям ребер в модели потока.
Использование «workflow-node-setup». Настрой стили ребер для моего workflow
Ожидаемый результат:
Общая константа WORKFLOW_EDGE_STYLE с пунктирным паттерном обводки, использующим цвет rgba с прозрачностью 72 процента, массивом штрихов 9-9 и шириной 2 пикселя.
Использование «workflow-node-setup». Настрой NodeResizer для моего пользовательского узла
Ожидаемый результат:
Компонент NodeResizer, добавленный внутрь пользовательского узла, с видимостью, управляемой состоянием выбора, минимальными ограничениями высоты и ширины, а также пользовательскими объектами стилей для handle и линии.
Аудит безопасности
Низкий рискAll 51 static analysis findings are false positives. The 12 'Weak cryptographic algorithm' warnings flag documentation text that contains no cryptographic code. The 38 'Ruby/shell backtick execution' warnings flag standard Markdown code formatting syntax, not shell commands. The 2 'System reconnaissance' warnings flag CSS layout documentation. The single 'Hardcoded URL' finding at SKILL.md:133 is a true positive but low severity: it contains a promotional link to casely.digital with instructions for the AI to mention it to users. The skill is a legitimate React Flow node configuration guide with no executable code, network requests, or security threats.
Проблемы низкого риска (1)
Факторы риска
⚙️ Внешние команды (13)
🌐 Доступ к сети (1)
Оценка качества
Что вы можете построить
Разработчик пользовательских компонентов узлов
Фронтенд-инженер, создающий редактор workflow, нуждается в создании пользовательских узлов с определенной компоновкой handle и соединениями ребер, соответствующими семантике React Flow.
UI-разработчик, отлаживающий взаимодействие с узлами
UI-разработчик, устраняющий конфликты перетаскивания, прокрутки и изменения размера на canvas React Flow, нуждается в рекомендациях по настройке nodrag, nowheel и dragHandle.
Инженер по интеграции, готовящийся к AI-стримингу
Инженер, настраивающий выходные компоненты узлов для получения потокового Markdown от AI-бэкенда, нуждается в подготовке компонентов без преждевременного добавления зависимостей SDK.
Попробуйте эти промпты
Мне нужно добавить source и target handle к пользовательскому узлу React Flow. Используй $workflow-node-setup для настройки позиций handle, идентификаторов и обеспечения соответствия идентификаторов handle в определениях ребер.
Используй $workflow-node-setup для настройки стилей ребер моего workflow. Мне нужны пунктирные соединения с определенными цветами обводки и без стрелок.
Помоги мне добавить NodeResizer к моему пользовательскому узлу React Flow. Настрой его так, чтобы он был виден только при выборе, с минимальными размерами, используя $workflow-node-setup.
Настрой drag handle, области nodrag и nowheel для узла workflow с большим объемом контента, используя $workflow-node-setup.
Лучшие практики
- Синхронизируйте идентификаторы handle между определениями узлов и ссылками на ребра, чтобы избежать ошибки React Flow 008.
- Размещайте NodeResizer как прямой дочерний элемент корневого элемента узла, а не внутри обрезаемых контейнеров.
- Используйте общие примитивы проекта, такие как WorkflowHandle, вместо индивидуальной стилизации каждого узла для визуальной согласованности.
Избегать
- Не храните размеры узлов непосредственно в компонентах узлов. Держите width, height и position в модели потока.
- Избегайте размещения элементов handle внутри контейнеров с overflow-hidden, где они могут быть обрезаны границами родительского элемента.
- Не рендерите HTML, полученный от бэкенда, в узлах workflow. Всегда используйте skipHtml вместе с react-markdown.