react-flow-node-ts
TypeScript로 React Flow 노드 컴포넌트 구축
시각적 워크플로우 편집기를 구축하려면 일관된 노드 컴포넌트 패턴이 필요합니다. 이 스킬은 적절한 타입 정의, 핸들 및 Zustand 스토어 통합을 제공하는 TypeScript 템플릿을 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"react-flow-node-ts" 사용 중입니다. Create a VideoNode component with playback controls
예상 결과:
- TypeScript 인터페이스: videoUrl, thumbnail, duration 필드가 있는 VideoNodeData
- React 컴포넌트: memo, 핸들 및 비디오 플레이어 UI가 있는 VideoNode
- 통합 체크리스트: React Flow 캔버스에 노드를 등록하기 위한 6단계
"react-flow-node-ts" 사용 중입니다. Generate a FormNode for collecting user input in workflows
예상 결과:
- 타입 정의: formFields 배열과 submitAction이 있는 FormNodeData
- 컴포넌트: canvasMode에 따라 조건부 편집/뷰 모드가 있는 FormNode
- 스토어 통합: 필드 값 변경을 위한 updateNode 호출
보안 감사
안전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.
품질 점수
만들 수 있는 것
시각적 워크플로우 빌더
사용자가 블록을 연결하여 자동화 시퀀스를 정의할 수 있는 드래그 앤 드롭 워크플로우 편집기를 위한 커스텀 노드를 생성합니다.
다이어그램 및 플로우차트 편집기
기술 문서나 프로세스 매핑 애플리케이션을 위한 커스텀 노드 유형이 있는 대화형 다이어그램 도구를 구축합니다.
데이터 파이프라인 시각화 도구
각 노드가 변환 또는 데이터 소스를 나타내는 데이터 처리 파이프라인을 위한 시각적 인터페이스를 설계합니다.
이 프롬프트를 사용해 보세요
제목과 상태 표시기가 있는 'ProcessNode'라는 React Flow 노드 컴포넌트를 생성합니다. 연결을 위한 타겟 및 소스 핸들을 포함하세요.
노드의 data prop에서 동적 데이터를 표시하는 'DataNode' 컴포넌트를 생성합니다. 선택적 필드가 있는 데이터 구조를 위한 TypeScript 인터페이스를 포함하세요.
useAppStore를 사용하여 canvasMode를 읽고 노드 속성을 업데이트하는 'ConfigNode' 컴포넌트를 생성합니다. 편집 모드에서만 표시되는 크기 조정 핸들을 포함하세요.
'DecisionNode'에 필요한 모든 파일을 생성합니다: 타입 정의, 조건부 렌더링이 있는 컴포넌트, 스토어 기본값 및 메뉴 등록 단계.
모범 사례
- 캔버스 상호작용 시 불필요한 리렌더링을 방지하기 위해 노드 컴포넌트를 항상 memo로 래핑하세요
- 애플리케이션 전체에서 타입 안전 데이터 접근을 보장하려면 Node 타입에 TypeScript 제네릭을 사용하세요
- 캔버스 패닝 중 충돌을 방지하려면 대화형 요소를 표시하기 전에 canvasMode를 확인하세요
피하기
- 노드 컴포넌트에서 직접 DOM 조작을 피하고 대신 React 상태와 props를 사용하세요
- TypeScript 타입 정의를 건너뛰지 마세요 - 데이터 구조 오류를 포착하는 데 필수적입니다
- 노드 데이터를 직접 수정하지 말고 항상 updateNode와 같은 스토어 액션을 사용하여 상태를 변경하세요