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

react-flow-node-ts

GitHub

提供基于React Flow和TypeScript的自定义节点组件创建规范，包含模板、类型定义及Zustand状态管理集成指南，适用于构建可视化工作流编辑器。

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

Trigger Scenarios

创建React Flow自定义节点实现可视化流程图UI组件配置节点TypeScript类型与Handle

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">;