スキル react-flow-node-ts
📦

react-flow-node-ts

安全

TypeScriptでReact Flowノードコンポーネントを構築

ビジュアルワークフローエディターには一貫したノードコンポーネントパターンが必要です。このスキルは、適切な型定義、ハンドル、Zustandストア統合を含むTypeScriptテンプレートを提供します。

対応: Claude Codex Code(CC)
📊 71 十分
1

スキルZIPをダウンロード

2

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

3

オンにして利用開始

テストする

「react-flow-node-ts」を使用しています。 再生コントロールを備えたVideoNodeコンポーネントを作成

期待される結果:

  • TypeScriptインターフェース: videoUrl、thumbnail、durationフィールドを含むVideoNodeData
  • Reactコンポーネント: memo、ハンドル、ビデオプレーヤーUIを���えたVideoNode
  • 統合チェックリスト: React Flowキャンバスでノードを登録する6つのステップ

「react-flow-node-ts」を使用しています。 ワークフローでユーザー入力を収集するためのFormNodeを生成

期待される結果:

  • 型定義: formFields配列とsubmitActionを含むFormNodeData
  • コンポーネント: canvasModeに���づいて条件付きの編集/表示モードを備えたFormNode
  • ストア統合: フィールド値変更のためのupdateNode呼び出し

セキュリティ監査

安全
v1 • 2/24/2026

Static analyzer flagged 20 patterns as potential security issues, but all are false positives. The 'external_commands' detections (14) are Markdown code block backticks used for documentation formatting, not shell execution. The 'weak cryptographic algorithm' findings (6) are misidentified text patterns with no actual cryptographic code present. This skill is a documentation template for creating React Flow node components and poses no security risk.

1
スキャンされたファイル
72
解析された行数
0
検出結果
1
総監査数
セキュリティ問題は見つかりませんでした
監査者: claude

品質スコア

38
アーキテクチャ
100
保守性
87
コンテンツ
31
コミュニティ
100
セキュリティ
91
仕様準拠

作れるもの

ビジュアルワークフロービルダー

ユーザーがブロックを接続して自動化シーケンスを定義できるドラッグ＆ドロップワークフローエディター用のカスタムノードを作成します。

ダイアグラム・フローチャートエディター

技術ドキュメントやプロセスマッピングアプリケーション用のカスタムノードタイプを備えた対話的なダイアグラムツールを構築します。

データパイプラインビジュアライザー

各ノードが変換またはデータソースを表すデータ処理パイプライン用のビジュアルインターフェースを設計します。

これらのプロンプトを試す

基本ノードコンポーネント 
タイトルとステータスインジケーターを備えた'ProcessNode'というReact Flowノードコンポーネントを作成します。接続用のターゲットハンドルとソースハンドルを含めます。
データ駆動ノード 
ノードのdata propから動的データを表示する'DataNode'コンポーネントを生成します。オプションフィールドを含むデータ構造用のTypeScriptインターフェースを含めます。
ス���ア統合インタラクティブノード 
useAppStoreを使用してcanvasModeを読み取り、ノードプロパティを更新する'ConfigNode'コンポーネントを作成します。編集モード時にのみ表示されるリサイズハンドルを含めます。
完全なノード統合 
'DecisionNode'に必要なすべてのファイルを生成します：型定義、条件付きレンダリングを含むコンポーネント、ストアデフォルト、メニュー登録手順。

ベストプラクティス

  • キャンバス操作時の不必要な再レンダリングを防ぐため、必ずノードコンポーネントをmemoでラップしてください
  • アプリケーション全体でタイプセーフなデータアクセスを確保するため、NodeタイプにTypeScriptジェネリックスを使用してください
  • キャンバスパン中の競合を防ぐため、インタラクティブな要素を表示する前にcanvasModeをチェックしてください

回避

  • ノードコンポーネントでの直接のDOM操作は避けてください - 代わりにReactの状態とpropsを使用してください
  • TypeScript型定義をスキップしないでください - データ構造エラーの検出に不可欠です
  • ノードデータを直接変更しないでください - 状態変更には常にupdateNodeなどのストアアクションを使用してください

よくある質問

React Flowとは何ですか？また、いつこのスキルを使用すべきですか？
React Flowは対話型ノードベースエディターを構築するためのReactライブラリです。デフォルトの長方形ノードを超えるカスタムノードタイプが必要な場合にこのスキルを使用してください。
追加の依存関係をインストールする必要がありますか？
はい、コアコンポーネントにreactflow（または@xyflow/react）、状態管理にZustandが必要です。このスキルはこれらが既にセットアップされていることを前提としています。
生成されたノードの視覚的な外観をカスタマイズできますか？
はい、テンプレートは構造パターンを提供します。デザインシステムに合わせて内側のdivコンテンツ、CSSクラス、スタイリングをカスタマイズしてください。
複雑な接続で複数のハンドルはどのように機能しますか？
一意のid propを持つ複��のHandleコンポーネントを追加してください。Top、Bottom、Left、またはRightに配置します。接続をトリガーしたハンドルを識別するためにidを使用してください。
NodeResizerの目的は何ですか？
NodeResizerは、表示時にノードの周囲にリサイズハンドルを提供します。通常、ノードが選択され、キャンバスが編集モードの場合にのみ表示されます。
クリックや編集などのノード操作をどのように処理しますか？
ノード内の要素にonClickハ��ドラーを追加してください。変更を永続化するにはストアのupdateNodeアクションを使用してください。条件付きスタイリングのためにノードpropsからselected状態にアクセスしてください。

開発者の詳細

作成者

sickn33

ライセンス

MIT

リポジトリ

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-flow-node-ts

参照

main

ファイル構成

📄 SKILL.md