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.
Decision snapshot
Is this a fit?
Data analysis, Design and media, Includes SKILL.md, Reusable instructions
Compatibility not yet detected.
Permission behavior not yet detected.
Copy skill directory
2 months ago · MIT license
No specific cautions were detected. Review the source and requested permissions before installing.
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. See how SkillIndex evaluates profiles.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Data analysis
- Design and media
- Data analysis use cases
- Design and media use cases
Declared skill metadata
- Declared author: Microsoft
- Declared license: MIT
- Source file: .github/plugins/azure-sdk-typescript/skills/react-flow-node-ts/SKILL.md
These fields retain source and confidence evidence from the indexed SKILL.md.
Compatibility and setup
- 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
Verified compatibility and discovery
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.
Project health auto-fetched from the source repository.
Maintain this resource?
Review this source-backed profile, send a correction with evidence, or link to it from your documentation. Claims verify your relationship to the project; profile facts still require source evidence and editorial review.
