reactflow

Creates interactive React+TypeScript node-edge visualizations and editors for envelope graphs using @xyclow/react library with dark theme customization.

Updated Feb 12, 2026

Search Tags:#typescript #web-ui #node-editor #custom-nodes #graph-visualization #reactflow

Ready to run

npx skills add https://github.com/tonyoconnell/agent-ui --skill reactflow

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: reactflow
Source: https://github.com/tonyoconnell/agent-ui/tree/main/.claude/skills/reactflow
Command: npx skills add https://github.com/tonyoconnell/agent-ui --skill reactflow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables developers to create and customize node-edge visualizations for envelope chains, allowing intuitive inspection, editing, and debugging of signal flows within the Envelope System.

Core Features & Use Cases

Custom node types and edges for envelope graphs to model sender/receiver relationships.
Built-in dark theme and layout-ready components to accelerate UI development.
Interactive flow editing with pan, zoom, and minimap to explore complex envelopes and agents.

Quick Start

Integrate the FlowCanvas into your React app and begin visualizing envelopes with custom nodes and edges.

Frequently Asked Questions about reactflow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build interactive node-edge visualizations for envelope chains?▼

Build interactive node-edge visualizations for envelope chains by integrating a custom ReactFlow canvas with custom node types and edges to model sender and receiver relationships. It provides built-in dark theme components for intuitive inspection and debugging of signal flows.

Can I use ReactFlow to visualize agents and envelopes in a dashboard?▼

Yes, you can use ReactFlow to visualize agents and envelopes in a dashboard. The skill provides interactive flow editing with pan, zoom, and minimap features to explore complex envelope relationships and signal flows within a dark-themed UI.

Do I need TypeScript and @xyflow/react to create custom graph visualizations?▼

Yes, you need a React and TypeScript environment with the @xyflow/react library installed to create custom graph visualizations. This setup is required to apply the custom nodes, edges, and dark theme styling.

What's the best way to debug signal flows within an Envelope System?▼

Debug signal flows within an Envelope System by using an interactive ReactFlow editor to inspect, edit, and visualize the node-edge relationships. The built-in pan, zoom, and minimap controls help navigate complex sender and receiver chains.

How does a custom node editor handle complex graph visualization layouts?▼

A custom node editor handles complex graph visualization layouts by providing layout-ready components and interactive controls. Users can pan, zoom, and use a minimap to explore intricate envelope and agent relationships without losing context.