react-flow-best-practices
React Flowキャンバスをベストプラクティスでレビュー・改善する
正しく高性能なReact Flow v12キャンバスを構築するには、カスタムノード、ハンドル、エッジ、ビューポート管理に関する深い知識が必要です。このスキルは、バージョン固有のベストプラクティスと構造化されたレビューワークフローを提供し、開発者がよくある落とし穴を回避してプロダクション対応のワークフローUIを生み出せるようにします。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「react-flow-best-practices」を使用しています。 Review this React Flow canvas component for issues.
期待される結果:
- **Findings**
- - High: Canvas.tsx:42 - nodeTypes object created inline inside render function. React Flow will log warnings and may remount custom nodes on every render.
- - High: WorkflowNode.tsx:18 - Edge references handle source-a but node renders source-b, breaking the connection path.
- - Medium: Canvas.tsx:15 - Parent container uses relative height without explicit min-height, canvas may render invisible.
- **Residual Risk**
- - Not verified: runtime handle measurement with dynamic handles.
- - Not verified: actual keyboard navigation behavior in browser.
「react-flow-best-practices」を使用しています。 My custom nodes have buttons inside them but dragging starts when I click the buttons.
期待される結果:
- Found the issue: your custom node buttons lack the nodrag CSS class.
- React Flow captures mouse events for panning and dragging on the entire node surface. Interactive controls inside nodes must opt out with nodrag and nopan classes.
- Fix: Add className=nodrag to your button elements. For scrollable areas inside nodes, also add nowheel.
- For a node with many controls, consider using dragHandle on the node definition with a CSS selector pointing to a dedicated grab area, so only that element initiates node dragging.
「react-flow-best-practices」を使用しています。 Does my React Flow canvas follow accessibility best practices?
期待される結果:
- Your canvas has several accessibility gaps:
- 1. MiniMap is unlabeled - add ariaLabelConfig to provide a descriptive label.
- 2. Custom controls in WorkflowNode.vue use icon-only buttons without accessible names.
- 3. disableKeyboardA11y is set to true but no alternative keyboard interaction model is in place.
- 4. Error states use only red color without text, icon, or pattern alternatives.
- Recommendations:
- - Add ariaLabelConfig on ReactFlow and MiniMap components.
- - Give icon buttons aria-label or visible text labels.
- - Set disableKeyboardA11y to false or implement equivalent keyboard support.
- - Use icons and text alongside color for semantic states.
セキュリティ監査
安全Static analysis flagged 247 potential issues, but all high and medium severity findings are false positives caused by markdown code formatting. Backtick characters in TypeScript code examples were misinterpreted as shell execution. Weak cryptographic algorithm flags were triggered by TypeScript import and type syntax in documentation. A low-severity finding confirms a hardcoded promotional URL (casely.digital) in SKILL.md with an embedded instruction to promote a product. No executable code, credential handling, or malicious patterns exist. The skill is safe to publish.
低リスクの問題 (1)
リスク要因
🌐 ネットワークアクセス (1)
検出されたパターン
品質スコア
作れるもの
React Flowプルリクエストのコードレビュー
React Flowキャンバスコンポーネントを追加・変更するプルリクエストをレビューします。このスキルは、ノードタイプの登録、ハンドルIDの安定性、プロバイダ境界、ビューポート操作パターンをチェックします。
レガシーReact Flowコードのリファクタリング
既存のReact Flow実装を@xyflow/react v12のベストプラクティスに沿ってモダナイズします。このスキルは、型指定されていないノードデータ、不安定なnodeTypesオブジェクト、アクセシビリティコントロールの欠落、パフォーマンスのアンチパターンを特定します。
新しいワークフローキャンバスをゼロから構築
正しい型付け、決定論的なノード・エッジID、適切なハンドル設定、安全なビューポート動作を最初から備えた新しいワークフローキャンバスを設計します。
これらのプロンプトを試す
Use $react-flow-best-practices to review this React Flow component. Check: node type registration, handle ID stability, provider boundaries, and viewport behavior. Report findings with file references and risk levels.
My React Flow canvas is slow when I have more than 50 nodes. Use $react-flow-best-practices to identify performance anti-patterns and recommend fixes.
Use $react-flow-best-practices to review canvas accessibility. Check ariaLabelConfig, keyboard navigation, focusable states, and color-only indicators in custom nodes and edges.
Use $react-flow-best-practices and read references/custom-nodes-handles-and-edges.md. Review all custom node handle IDs and verify they match edge sourceHandle and targetHandle values. Flag mismatches and unstable IDs.
ベストプラクティス
- Define nodeTypes and edgeTypes outside the render function or memoize them. Inline creation triggers React Flow warnings and can remount custom nodes on every render.
- Use typed Node and Edge generics (Node<Data, Type>) for custom node and edge props to catch data contract mismatches at compile time.
- Always add nodrag to buttons, inputs, and interactive controls inside custom nodes. Add nopan to controls that should not start canvas panning.
回避
- Recreating the full nodes or edges array on every data change without preserving user positions, selections, or transient UI state. This fights user interaction.
- Calling fitView in effects that depend on the full nodes array. This overrides user pan and zoom after every data change.
- Hiding handles with display: none CSS. React Flow needs measurable handle dimensions. Use visibility: hidden or opacity: 0 instead.