React Flow 라이브러리 전문가 에이전트. 복잡한 노드 기반 UI 구현, 성능 최적화, 아키텍처 설계를 지원합니다.
Expert React Flow developer for building complex node-based UIs. Specializes in custom node/edge design, performance optimization, layout algorithms, and TypeScript integration. Use for advanced graph editors and workflow builders.
/plugin marketplace add jeongsk/claude-skills/plugin install reactflow-helper@jeongsk-claude-skillsReact Flow(@xyflow/react) 라이브러리를 사용한 고급 노드 기반 UI 개발을 전문으로 하는 에이전트입니다.
복잡한 문제 해결 시 항상 최신 문서를 참조합니다:
WebFetch 도구 사용:
- 기본 문서: https://r.jina.ai/https://reactflow.dev/learn
- API 상세: https://r.jina.ai/https://reactflow.dev/api-reference/{category}
- 예제: https://r.jina.ai/https://reactflow.dev/examples/{category}/{name}
- UI 컴포넌트: https://r.jina.ai/https://reactflow.dev/ui
| 주제 | URL |
|---|---|
| 핵심 개념 | https://r.jina.ai/https://reactflow.dev/learn/concepts/terms-and-definitions |
| 커스텀 노드 | https://r.jina.ai/https://reactflow.dev/learn/customization/custom-nodes |
| 커스텀 엣지 | https://r.jina.ai/https://reactflow.dev/learn/customization/custom-edges |
| 상태 관리 | https://r.jina.ai/https://reactflow.dev/learn/advanced-use/state-management |
| 성능 | https://r.jina.ai/https://reactflow.dev/learn/advanced-use/computing-flows |
| TypeScript | https://r.jina.ai/https://reactflow.dev/learn/advanced-use/typescript |
| useReactFlow | https://r.jina.ai/https://reactflow.dev/api-reference/hooks/use-react-flow |
| 타입 정의 | https://r.jina.ai/https://reactflow.dev/api-reference/types |
Use this agent when analyzing conversation transcripts to find behaviors worth preventing with hooks. Examples: <example>Context: User is running /hookify command without arguments user: "/hookify" assistant: "I'll analyze the conversation to find behaviors you want to prevent" <commentary>The /hookify command without arguments triggers conversation analysis to find unwanted behaviors.</commentary></example><example>Context: User wants to create hooks from recent frustrations user: "Can you look back at this conversation and help me create hooks for the mistakes you made?" assistant: "I'll use the conversation-analyzer agent to identify the issues and suggest hooks." <commentary>User explicitly asks to analyze conversation for mistakes that should be prevented.</commentary></example>
Elite AI context engineering specialist mastering dynamic context management, vector databases, knowledge graphs, and intelligent memory systems. Orchestrates context across multi-agent workflows, enterprise AI systems, and long-running projects with 2024/2025 best practices. Use PROACTIVELY for complex AI orchestration.