Agent Skills › kqcoxn/MaaPipelineEditor › react-flow-node-ts

react-flow-node-ts

GitHub

提供 React Flow 自定义节点组件的 TypeScript 类型定义、Zustand 状态集成及标准代码模板，用于构建可视化工作流编辑器中的节点 UI 组件。

.agents/skills/react-flow-node-ts/SKILL.md kqcoxn/MaaPipelineEditor

Trigger Scenarios

创建 React Flow 自定义节点实现可视化流程编辑器配置节点 Handle 与 Zustand 状态

Install

npx skills add kqcoxn/MaaPipelineEditor --skill react-flow-node-ts -g -y

More Options

Non-standard path

npx skills add https://github.com/kqcoxn/MaaPipelineEditor/tree/main/.agents/skills/react-flow-node-ts -g -y

Use without installing

npx skills use kqcoxn/MaaPipelineEditor@react-flow-node-ts

指定 Agent (Claude Code)

npx skills add kqcoxn/MaaPipelineEditor --skill react-flow-node-ts -a claude-code -g -y

安装 repo 全部 skill

npx skills add kqcoxn/MaaPipelineEditor --all -g -y

预览 repo 内 skill

npx skills add kqcoxn/MaaPipelineEditor --list

SKILL.md

Frontmatter

{
    "name": "react-flow-node-ts",
    "license": "MIT",
    "metadata": {
        "author": "Microsoft",
        "version": "1.0.0"
    },
    "description": "Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing node-based UI components."
}

React Flow Node

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

Website: https://reactflow.dev/

References

This skill includes a local mirror of the React Flow official documentation under references/. Use it when you need detailed API signatures, guides, or UI component references without relying on network access:

references/api-reference/ — Full API reference for components, hooks, types, and utilities.
- Start with api-reference/index.md for an overview.
- Common node-related entries: components/handle.md, components/node-resizer.md, types/node.md, hooks/use-nodes.md.
references/learn/ — Tutorials, concepts, customization guides, and layouting best practices.
- Start with learn/index.md for the quick start.
- Relevant guides: learn/customization/custom-nodes.md, learn/layouting/layouting.md.
references/ui/ — React Flow UI components and templates built on shadcn/ui.
- Start with ui/index.md for setup and usage.

Prefer the local references over the website when exact API behavior or TypeScript types matter, because the mirrored docs are pinned to the same version this skill targets.

Quick Start

Copy templates from 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 - Node component
assets/types.template.ts - TypeScript definitions

Node Component Pattern

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

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

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