家

Skill

ウェブ開発

react-flow-node-ts

microsoft/skills

TypeScript の型、ハンドル、Zustand ストア統合を備えた React Flow ノードコンポーネントを作成し、ビジュアルワークフローエディタでカスタムノードを構築する。

...すべて拡張します

更新された時間 2026年9月13日

# typescript # react # zustand # node components # react flow # visual workflow

React Flow ノード

確立されたパターンに従い、適切な TypeScript 型とストア統合を備えた React Flow ノードコンポーネントを作成します。

クイックスタート

assets/ からテンプレートをコピーし、プレースホルダーを置き換えます：

{{NodeName}} → PascalCase のコンポーネント名（例：VideoNode）
{{nodeType}} → kebab-case の型識別子（例：video-node）
{{NodeData}} → データインターフェース名（例：VideoNodeData）

テンプレート

assets/template.tsx - ノードコンポーネント
assets/types.template.ts - TypeScript 定義

ノードコンポーネントパターン

export const MyNode = memo(function MyNode({
  id,
  data,
  selected,
  width,
  height,
}: MyNodeProps) {
  const updateNode = useAppStore((state) => state.updateNode);
  const canvasMode = useAppStore((state) => state.canvasMode);

  return (

      <noderesizer></noderesizer><handle></handle>
        {/* ノードコンテンツ */}
        <handle></handle>

    >
  );
});

型定義パターン

export interface MyNodeData extends Record<string> {
  title: string;
  description?: string;
}

export type MyNode = Node<mynodedata>;
</mynodedata></string>

統合手順

src/frontend/src/types/index.ts に型を追加
src/frontend/src/components/nodes/ にコンポーネントを作成
src/frontend/src/components/nodes/index.ts からエクスポート
src/frontend/src/store/app-store.ts にデフォルト値を追加
キャンバスの nodeTypes に登録
AddBlockMenu と ConnectMenu に追加

GitHubで見る

---
name: react-flow-node-ts
description: Create React Flow node components with TypeScript types, handles, and Zustand store integration for building custom nodes in visual workflow editors.
license: MIT
---

# React Flow Node

Create React Flow node components following established patterns with proper TypeScript types and store integration.

## Quick Start

Copy templates from [assets/](assets/) and replace placeholders:
- `{{NodeName}}` → PascalCase component name (e.g., `VideoNode`)
- `{{nodeType}}` → kebab-case type identifier (e.g., `video-node`)
- `{{NodeData}}` → Data interface name (e.g., `VideoNodeData`)

## Templates

- [assets/template.tsx](assets/template.tsx) - Node component
- [assets/types.template.ts](assets/types.template.ts) - TypeScript definitions

## Node Component Pattern

```tsx
export const MyNode = memo(function MyNode({
  id,
  data,
  selected,
  width,
  height,
}: MyNodeProps) {
  const updateNode = useAppStore((state) => state.updateNode);
  const canvasMode = useAppStore((state) => state.canvasMode);
  
  return (
    <>
      <NodeResizer isVisible={selected && canvasMode === 'editing'} />
      <div className="node-container">
        <Handle type="target" position={Position.Top} />
        {/* Node content */}
        <Handle type="source" position={Position.Bottom} />
      </div>
    </>
  );
});
```

## Type Definition Pattern

```typescript
export interface MyNodeData extends Record<string, unknown> {
  title: string;
  description?: string;
}

export type MyNode = Node<MyNodeData, 'my-node'>;
```

## Integration Steps

1. Add type to `src/frontend/src/types/index.ts`
2. Create component in `src/frontend/src/components/nodes/`
3. Export from `src/frontend/src/components/nodes/index.ts`
4. Add defaults in `src/frontend/src/store/app-store.ts`
5. Register in canvas `nodeTypes`
6. Add to AddBlockMenu and ConnectMenu

すべてのファイル

0件のファイル

react-flow-node-tsをインストール

スキルファイルをダウンロードして、.claude/skills/ ディレクトリに展開してください。

ZIPをダウンロード

リポジトリをクローンし、スキルファイルをプロジェクトにコピーしてください。

git clone https://github.com/microsoft/skills/tree/main/.github/plugins/azure-sdk-typescript/skills/react-flow-node-ts # Copy SKILL.md to your .claude/skills/ directory

コピー

クイックセットアップ: スキルフォルダを .claude/skills/ にコピーしてください。Claude はそのスキルを自動的に検出し、使用します。

リポジトリ microsoft/skills