React Flow Node Builder
Create typed React Flow nodes with handles, resizing behavior, and Zustand-backed state integration.
The skill provides only React Flow/TypeScript coding patterns and project integration steps; it instructs no external actions, credential access, or data transfer. MIT licensing and Microsoft authorship provide traceable provenance. Points are deducted because dependency security, data flow, user confirmation, rollback, and sensitive-data handling are not addressed.
SKILL.md, the two templates, and the integration checklist are broadly consistent and identify node types, components, state, and registration points. However, there are no dependency versions, build validation, abnormal-input handling, or failure-feedback guidance, and no execution was performed; the score is conservatively limited by static evidence.
The audience and scenarios are clear: custom React Flow nodes, visual workflow editors, and node-based UI components. Points are deducted because React Flow version, project-structure variants, non-fit cases, trigger boundaries, and Chinese/mainland-China environment support are unspecified.
The document has front matter, Quick Start guidance, linked templates, code patterns, and an integration checklist, with MIT license, author, and version metadata. It lacks installation/dependency notes, known limitations, FAQs, changelog, and a clear maintenance/update path, so points are deducted.
The templates and examples are a usable implementation starting point, covering types, handles, memoization, NodeResizer, Zustand, and registration steps. Points are deducted because they depend on specific project paths and unstated store/APIs, and no verified output for this skill's key path is supplied; therefore it receives only a conservative core-task score.
Evidence consists mainly of the SKILL.md and its templates. The repository context includes general CI, evaluation workflows, and tests, but the supplied material does not show coverage of this skill; there are no skill-specific acceptance examples or independent reproductions, so the score remains low.
- The examples depend on undeclared dependencies and project APIs such as @xyflow/react, NodeResizer, Handle, Position, and useAppStore; verify actual versions and type signatures before use.
- The integration steps assume a fixed src/frontend/src layout and specific store/menu/canvas structures, which may not fit other React Flow projects.
- No skill-specific tests, acceptance criteria, error handling, or rollback guidance is provided; generated code still requires human review and the project's own type checks and tests.
- Chinese-language support and mainland-China network reachability are not documented; the core skill does not appear to depend on an online overseas service.
What does this skill do, and when should you use it?
This skill is for developers building visual workflow editors and node-based interfaces with React Flow. It supplies templates for node components and TypeScript definitions, while documenting patterns for handles, resizing, selection state, and Zustand integration. It also outlines the project wiring needed for types, exports, defaults, canvas registration, and menus. It fits projects already using React Flow, TypeScript, and Zustand, but does not document dependency installation, version requirements, or a dedicated test workflow.
Guides the developer to copy component and type templates from assets/, replace node-name, node-type, and data-interface placeholders, and create a React node component using memo, NodeResizer, target/source Handles, and Zustand store selectors. It defines node data interfaces extending Record<string, unknown> and React Flow Node types. It also specifies how to update the project type index, component index, app store defaults, canvas nodeTypes, AddBlockMenu, and ConnectMenu.
- A frontend developer needs to add a reusable custom node to a React Flow workflow editor.
- A TypeScript team wants explicit types for node data, node identifiers, and connection handles.
- A node-based UI developer needs node updates connected to a Zustand application store.
- A team maintaining a React Flow canvas wants a consistent process for node defaults, registration, and menu integration.
What are this skill's strengths and limitations?
- Includes reusable component and type templates.
- Covers important node patterns including handles, resizing, selection state, and Zustand integration.
- Provides a concrete wiring checklist from type definitions through canvas and menu registration.
- Uses the MIT license and is part of Microsoft's actively maintained Agent Skills collection.
- The SKILL.md does not specify React Flow, React, TypeScript, or Zustand versions.
- It provides no dependency-installation command or complete runnable project.
- The source does not show dedicated test results or a skill-specific test suite.
- Its scope is node construction and integration, not complete workflow-editor architecture.
How do you install this skill?
This skill is distributed in the microsoft/skills collection. Run npx skills add microsoft/skills and select the needed skill in the wizard. Skills are installed into the selected agent's directory, such as .github/skills/ for GitHub Copilot. The source does not document a command for installing only react-flow-node-ts or a standalone package.
How do you use this skill?
In an agent where the skill is installed, use a prompt such as: Create a VideoNode for my React Flow canvas with TypeScript types, a top target Handle, a bottom source Handle, NodeResizer, Zustand state updates, and the required type, nodeTypes, and menu registration. Copy assets/template.tsx and assets/types.template.ts as needed, replace their placeholders, and follow the documented integration steps.