Best practices for writing, reviewing, and refactoring React Flow / @xyflow/react v12 canvases. Use when work touches React Flow components, custom nodes, custom edges, handles, node data typing, viewport controls, MiniMap/Background/Panel usage, NodeToolbar, NodeResizer, or workflow-builder review tasks.
Receba novas skills de Design e Frontend toda segunda
1 email curto, só com as skills novas de Design e Frontend. 4 minutos de leitura, sem spam, cancela com 1 clique.
Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.
Ler descrição completaRecolher descrição
React Flow Best Practices
Purpose
Use this skill to review and improve React Flow implementations with the current @xyflow/react v12 patterns. Optimize for correctness first: stable node and handle IDs, typed node data, predictable viewport behavior, accessible controls, and performance that does not collapse as the workflow grows.
First Steps
Inspect the React Flow package and usage:
package.json for @xyflow/react.
Global CSS for @xyflow/react/dist/style.css.
[Description truncada. Veja o README completo no GitHub.]