react-flow-node-ts

The react-flow-node-ts skill provides a standardized architectural template for developers building custom node-based UI components within React Flow. Designed for engineers working on visual workflow builders, node-based editors, or interactive canvas applications, this skill enforces best practices for type safety and state management. By utilizing this skill, developers can rapidly bootstrap new nodes that integrate seamlessly with an existing application store via Zustand, ensuring that canvas interactions—such as node resizing, data updates, and connection handling—follow a consistent implementation pattern across the codebase.

• Streamlines the creation of React Flow custom nodes using pre-defined TypeScript interfaces and component patterns.

• Facilitates deep integration with application state through Zustand, enabling centralized control over node data and canvas configuration.

• Includes support for essential React Flow primitives, such as Handle components for connections and NodeResizer for interactive editing.

• Provides a structured directory and file naming convention to ensure maintainability as the number of node types grows.

• Incorporates type definitions that strictly enforce the structure of node data, reducing runtime errors in complex workflow visualizations.

• Input: Requires user-defined parameters for the node name (PascalCase), type identifier (kebab-case), and data interface.

• Output: Generates boilerplate code for React components and associated TypeScript definitions ready for registration in the React Flow nodeTypes object.

• Usage Tip: Ensure you have a configured Zustand store (e.g., app-store.ts) before implementation, as the template relies on specific selectors for updating node states.

• Practical Note: Follow the provided integration steps to register new nodes in the central registry and add them to the application's AddBlockMenu and ConnectMenu.

• Constraint: This skill is specifically tailored for React Flow implementations using TypeScript and Zustand; it assumes an established project structure following the Microsoft skills repository architecture.