react-flow은(는) 무엇을 하나요?
React Flow (@xyflow/react)를 사용한 워크플로 시각화 및 사용자 지정 노드와 엣지. 그래프 시각화를 구축하거나, 사용자 지정 워크플로 노드를 생성하거나, 엣지 레이블을 구현하거나, 뷰포트를 제어할 때 사용하세요. ReactFlow, @xyflow/react, Handle, NodeProps, EdgeProps, useReactFlow, fitView에 의해 트리거됩니다.
React Flow (@xyflow/react)를 사용한 워크플로 시각화 및 사용자 지정 노드/엣지 구현. 그래프 시각화, 워크플로 노드 생성, 엣지 레이블 구현, 뷰포트 제어에 사용됩니다. ReactFlow, @xyflow/react, Handle, NodeProps, EdgeProps, useReactFlow, fitView 트리거.
이 스킬은 React Flow (@xyflow/react) 라이브러리를 활용하여 워크플로 다이어그램, 그래프 시각화, 노드 기반 편집기 등을 구축할 때 필요한 모든 기능을 제공합니다. 사용자 정의 노드와 엣지를 생성하고, 엣지 레이블을 추가하며, 뷰포트(확대/축소, 이동)를 제어할 수 있습니다. React Flow에서 제공하는 Handle, NodeProps, EdgeProps, useReactFlow, fitView와 같은 주요 API와 컴포넌트를 기반으로 하며, 이들 용어가 코드에서 감지되면 스킬이 자동으로 활성화됩니다. 개발자는 이 스킬을 사용하여 복잡한 그래프 기반 인터페이스를 쉽게 구현할 수 있고, 특히 워크플로 자동화, 데이터 흐름 시각화, 노드 기반 로직 편집기 등에 유용합니다.
npx skills add https://github.com/existential-birds/beagle/tree/main/skills/react-flowInstalled? Explore more 이미지 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
React Flow (@xyflow/react)를 사용한 워크플로 시각화 및 사용자 지정 노드와 엣지. 그래프 시각화를 구축하거나, 사용자 지정 워크플로 노드를 생성하거나, 엣지 레이블을 구현하거나, 뷰포트를 제어할 때 사용하세요. ReactFlow, @xyflow/react, Handle, NodeProps, EdgeProps, useReactFlow, fitView에 의해 트리거됩니다.
This repo contains 1 individual skill — each has its own dedicated page.
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.