React Flow Architect

This one handles the heavy lifting for building complex ReactFlow apps with collapsible tree structures and large node counts. It gives you patterns for incremental rendering so you're not rebuilding the entire graph on every expand/collapse, memoization strategies to prevent unnecessary re-renders, and a reducer-based state system with undo/redo. The hierarchical navigation approach is solid if you're building process diagrams or org charts where users drill down through layers. Also includes Dagre auto-layout integration and a focus mode that isolates selected nodes. The code examples are production-oriented rather than toy demos, which is refreshing.

skills.sh installs: 176
GitHub stars: 39.4K
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add sickn33/antigravity-awesome-skills --skill react-flow-architect --agent claude-code

Installs into .claude/skills of the current project.

Files

ReactFlow Architect

Build production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state management.

Detailed Guide

Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.

Minimal Controlled Graph Example

Target React Flow v12 (@xyflow/react); use matching docs for older reactflow v11 projects. This is a starting component, not an implementation of hierarchy/history/persistence.

import { ReactFlow, useNodesState, useEdgesState, addEdge, type Connection } from '@xyflow/react';
import { useCallback } from 'react';
import '@xyflow/react/dist/style.css';

SKILL.md on GitHub