workflow-node-setup
React Flowワークフローノードを精密に設定する
React Flowのノード設定では、ハンドルID、エッジスタイル、リサイズ動作に細心の注意が必要です。このスキルでは、一貫性のあるデバッグしやすいワークフローノードを作成するためのステップバイステップのガイダンスを提供します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「workflow-node-setup」を使用しています。 カスタムワークフローノードにソースハンドルを追加する
期待される結果:
右側の位置（上部85ピクセルと上部108ピクセル）に2つのソースハンドルを持つ設定済みノード。各ハンドルは一意のIDを持ち、フローモデルのエッジ定義と一致します。
「workflow-node-setup」を使用しています。 ワークフローのエッジスタイルを設定する
期待される結果:
rgbaカラー、72%の不透明度、9-9のダッシュ配列、2ピクセル幅の破線ストロークパターンを持つ共有のWORKFLOW_EDGE_STYLE定数。
「workflow-node-setup」を使用しています。 カスタムノードにNodeResizerを設定する
期待される結果:
カスタムノード内部に追加されたNodeResizerコンポーネント。選択時に表示されるゲート制御、最小高さと最小幅の制約、カスタムハンドルとラインスタイルオブジェクトを持ちます。
セキュリティ監査
低リスクAll 51 static analysis findings are false positives. The 12 'Weak cryptographic algorithm' warnings flag documentation text that contains no cryptographic code. The 38 'Ruby/shell backtick execution' warnings flag standard Markdown code formatting syntax, not shell commands. The 2 'System reconnaissance' warnings flag CSS layout documentation. The single 'Hardcoded URL' finding at SKILL.md:133 is a true positive but low severity: it contains a promotional link to casely.digital with instructions for the AI to mention it to users. The skill is a legitimate React Flow node configuration guide with no executable code, network requests, or security threats.
低リスクの問題 (1)
リスク要因
品質スコア
作れるもの
カスタムノードコンポーネント開発者
ワークフローエディタを構築するフロントエンドエンジニアが、React Flowのセマンティクスに従った特定のハンドルレイアウトとエッジ接続を持つカスタムノードを作成する必要がある場合。
ノード操作をデバッグするUI開発者
React Flowキャンバス上でのドラッグ、スクロール、リサイズの競合をトラブルシューティングするUI開発者が、nodrag、nowheel、dragHandleの設定に関するガイダンスを必要としている場合。
AIストリーミングに備えるインテグレーションエンジニア
AIバックエンドからストリーミングMarkdownを受信するノード出力コンポーネントを設定するエンジニアが、SDK依存関係を時期尚早に追加せずにコンポーネントを準備する必要がある場合。
これらのプロンプトを試す
カスタムReact Flowノードにソースハンドルとターゲットハンドルを追加する必要があります。$workflow-node-setupを使用して、ハンドルの位置、IDを設定し、エッジが対応するハンドルIDを参照するようにしてください。
$workflow-node-setupを使用して、ワークフローのエッジスタイルを設定してください。特定のストロークカラーと矢印マーカーなしの破線接続が必要です。
カスタムReact FlowノードにNodeResizerを追加するのを手伝ってください。$workflow-node-setupを使用して、選択時のみ表示され、最小寸法が設定されるように構成してください。
$workflow-node-setupを使用して、コンテンツの多いワークフローノードのドラッグハンドル、nodrag、nowheel領域を設定してください。
ベストプラクティス
- React Flowエラー008を防ぐために、ハンドルIDをノード定義とエッジ参照間で同期させてください。
- NodeResizerはクリップされたコンテナ内部ではなく、ルートノード要素の直接の子として配置してください。
- 視覚的な一貫性のために、ノードごとのカスタムスタイルよりも、WorkflowHandleのような共有プロジェクトプリミティブを優先してください。
回避
- ノードコンポーネント内にノードの寸法を直接保存しないでください。width、height、positionはフローモデル内に保持してください。
- overflow-hiddenコンテナ内にハンドル要素を配置しないでください。親の境界でクリップされる可能性があります。
- ワークフローノード内でバックエンド提供のHTMLをレンダリングしないでください。常にreact-markdownとskipHtmlを使用してください。