workflow-node-setup
React Flow 워크플로우 노드 정밀 구성
React Flow 노드 구성은 핸들 ID, 엣지 스타일, 리사이즈 동작에 세심한 주의가 필요합니다. 이 스킬은 일관되고 디버깅 가능한 워크플로우 노드를 생성하기 위한 단계별 가이드를 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"workflow-node-setup" 사용 중입니다. 커스텀 워크플로우 노드에 소스 핸들 추가
예상 결과:
오른쪽 위치(상단 85px 및 상단 108px)에 두 개의 소스 핸들이 있는 구성된 노드로, 각 핸들은 흐름 모델의 엣지 정의와 일치하는 고유 ID를 가집니다.
"workflow-node-setup" 사용 중입니다. 워크플로우 엣지 스타일 설정
예상 결과:
rgba 색상 72% 불투명도, 대시 배열 9-9, 2px 너비의 대시 선 패턴을 가진 공유 WORKFLOW_EDGE_STYLE 상수입니다.
"workflow-node-setup" 사용 중입니다. 커스텀 노드에 NodeResizer 구성
예상 결과:
선택 시 표시되는 조건부 가시성, 최소 높이 및 너비 제약 조건, 커스텀 핸들 및 라인 스타일 객체를 가진 NodeResizer 컴포넌트가 커스텀 노드 내부에 추가되었습니다.
보안 감사
낮은 위험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)
위험 요인
품질 점수
만들 수 있는 것
커스텀 노드 컴포넌트 개발자
워크플로우 에디터를 구축하는 프론트엔드 엔지니어가 React Flow 의미 체계를 따르는 특정 핸들 레이아웃 및 엣지 연결을 가진 커스텀 노드를 생성해야 합니다.
노드 상호작용을 디버깅하는 UI 개발자
React Flow 캔버스에서 드래그, 스크롤 및 리사이즈 충돌을 해결하는 UI 개발자가 nodrag, nowheel 및 dragHandle 구성에 대한 지침이 필요합니다.
AI 스트리밍을 준비하는 통합 엔지니어
AI 백엔드에서 스트리밍 Markdown을 수신할 노드 출력 컴포넌트를 설정하는 엔지니어가 SDK 종속성을 조기에 추가하지 않고 컴포넌트를 준비해야 합니다.
이 프롬프트를 사용해 보세요
커스텀 React Flow 노드에 소스 및 타겟 핸들을 추가해야 합니다. $workflow-node-setup을 사용하여 핸들 위치, ID를 구성하고 엣지가 일치하는 핸들 ID를 참조하도록 설정하세요.
$workflow-node-setup을 사용하여 워크플로우의 엣지 스타일을 설정하세요. 특정 선 색상과 화살표 마커가 없는 대시 연결이 필요합니다.
커스텀 React Flow 노드에 NodeResizer를 추가하려고 합니다. 최소 크기 제약 조건과 함께 $workflow-node-setup을 사용하여 선택된 경우에만 표시되도록 구성하세요.
$workflow-node-setup을 사용하여 콘텐츠가 많은 워크플로우 노드의 드래그 핸들, nodrag 및 nowheel 영역을 구성하세요.
모범 사례
- React Flow 오류 008을 방지하려면 노드 정의와 엣지 참조 간에 핸들 ID가 동기화되도록 유지하세요.
- NodeResizer를 클리핑된 컨테이너 내부가 아닌 루트 노드 요소의 직접 자식으로 배치하세요.
- 시각적 일관성을 위해 커스텀 노드별 스타일보다 WorkflowHandle과 같은 공유 프로젝트 프리미티브를 선호하세요.
피하기
- 노드 컴포넌트에 노드 크기를 직접 저장하지 마세요. width, height, position은 흐름 모델에 유지하세요.
- 핸들 요소를 overflow-hidden 컨테이너 내부에 배치하지 마세요. 부모 경계에 의해 클리핑될 수 있습니다.
- 워크플로우 노드에서 백엔드 제공 HTML을 렌더링하지 마세요. 항상 react-markdown과 함께 skipHtml을 사용하세요.