react-flow-node-ts Skill
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. Published by microsoft in skills.
What is react-flow-node-ts Skill?
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. Published by microsoft in skills. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Data analysis
- Design and media
- Data analysis use cases
- Design and media use cases
Technical details
- Install or run with Copy skill directory
When to use react-flow-node-ts Skill
- Use it for data analysis.
- Use it for design and media.
Built with
Editorial notes
Source
- Creator: microsoft
- Repository: microsoft/skills
- Skill file: .github/plugins/azure-sdk-typescript/skills/react-flow-node-ts/SKILL.md
What it does
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.
Skill instructions
React Flow Node Create React Flow node components following established patterns with proper TypeScript types and store integration. 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 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 typescr
Explore related resources
Frequently asked questions
What is react-flow-node-ts?
react-flow-node-ts is a open-source AI agent skill with Copy skill directory. Create React Flow node components with TypeScript types, handles, and Zustand integration.
Who is react-flow-node-ts best for?
react-flow-node-ts is best for reusing agent instructions, scripts, and references, data analysis workflows, design and media workflows.
How do I install react-flow-node-ts?
Install or run react-flow-node-ts using Copy skill directory. Check react-flow-node-ts for the latest setup command.
Is react-flow-node-ts actively maintained?
react-flow-node-ts may need a closer maintenance check before production use.
Auto-fetched from GitHub.
