react-flow-usage
✓노드 기반 UI, 워크플로 편집기 및 대화형 다이어그램을 구축하기 위한 포괄적인 React Flow(@xyflow/react) 패턴 및 모범 사례입니다. (1) 흐름 편집기 또는 노드 기반 인터페이스 구축, (2) 사용자 정의 노드 및 에지 생성, (3) 드래그 앤 드롭 워크플로 구현, (4) 대규모 그래프의 성능 최적화, (5) 흐름 상태 및 상호 작용 관리, (6) 자동 레이아웃 또는 위치 지정 구현 또는 (7) React Flow와의 TypeScript 통합을 위해 React Flow로 작업할 때 사용합니다.
SKILL.md
Comprehensive patterns and best practices for building production-ready node-based UIs with React Flow (@xyflow/react v12+).
| 1 | Setup & Configuration | CRITICAL | setup- | | 2 | Performance Optimization | CRITICAL | perf- | | 3 | Node Patterns | HIGH | node- | | 4 | Edge Patterns | HIGH | edge- | | 5 | State Management | HIGH | state- | | 6 | Hooks Usage | MEDIUM | hook- | | 7 | Layout & Positioning | MEDIUM | layout- | | 8 | Interaction Patterns | MEDIUM | interaction- |
| 9 | TypeScript Integration | MEDIUM | typescript- |
노드 기반 UI, 워크플로 편집기 및 대화형 다이어그램을 구축하기 위한 포괄적인 React Flow(@xyflow/react) 패턴 및 모범 사례입니다. (1) 흐름 편집기 또는 노드 기반 인터페이스 구축, (2) 사용자 정의 노드 및 에지 생성, (3) 드래그 앤 드롭 워크플로 구현, (4) 대규모 그래프의 성능 최적화, (5) 흐름 상태 및 상호 작용 관리, (6) 자동 레이아웃 또는 위치 지정 구현 또는 (7) React Flow와의 TypeScript 통합을 위해 React Flow로 작업할 때 사용합니다. 출처: thedogwiththedataonit/react-flow.
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/thedogwiththedataonit/react-flow --skill react-flow-usage- 카테고리
- </>개발 도구
- 인증됨
- ✓
- 최초 등록
- 2026-02-01
- 업데이트
- 2026-02-18
빠른 답변
react-flow-usage이란?
노드 기반 UI, 워크플로 편집기 및 대화형 다이어그램을 구축하기 위한 포괄적인 React Flow(@xyflow/react) 패턴 및 모범 사례입니다. (1) 흐름 편집기 또는 노드 기반 인터페이스 구축, (2) 사용자 정의 노드 및 에지 생성, (3) 드래그 앤 드롭 워크플로 구현, (4) 대규모 그래프의 성능 최적화, (5) 흐름 상태 및 상호 작용 관리, (6) 자동 레이아웃 또는 위치 지정 구현 또는 (7) React Flow와의 TypeScript 통합을 위해 React Flow로 작업할 때 사용합니다. 출처: thedogwiththedataonit/react-flow.
react-flow-usage 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/thedogwiththedataonit/react-flow --skill react-flow-usage 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/thedogwiththedataonit/react-flow
상세
- 카테고리
- </>개발 도구
- 출처
- skills.sh
- 최초 등록
- 2026-02-01