Compétences react-flow-node-ts
📦

react-flow-node-ts

Sûr

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

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

Prend en charge: Claude Codex Code(CC)
📊 70 Adéquat
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "react-flow-node-ts". 再生コントロールを備えたVideoNodeコンポーネントを作成

Résultat attendu:

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

Utilisation de "react-flow-node-ts". ワークフローでユーザー入力を収集するためのFormNodeを生成

Résultat attendu:

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

Audit de sécurité

Sûr
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
Fichiers analysés
72
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
21
Communauté
100
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

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

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

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

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

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

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

Essayez ces prompts

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

Bonnes pratiques

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

Éviter

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

Foire aux questions

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状態にアクセスしてください。

Détails du développeur

Auteur

sickn33

Licence

MIT

Dépôt

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

Réf

main

Structure de fichiers

📄 SKILL.md