KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #codex #ai-agents #claude-code #dsh #dsh-plugin #cli #macos #ai-agent #deepseek-harness #open-source

react-flow-skill

★ 43 Open GitHub ↗

Claude Code skill for building interactive node-based UIs with React Flow (@xyflow/react v12+)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-flow-skill

A [Claude Code](https://docs.anthropic.com/en/docs/claude-code) skill for building interactive node-based UIs with [React Flow](https://reactflow.dev/) (`@xyflow/react` v12+).

## What's included

The skill provides expert guidance across 14 reference topics:

- **Migration** - Upgrading from `reactflow`/`react-flow-renderer` to `@xyflow/react` v12
- **Fundamentals** - Installation, setup, first flow, node/edge objects
- **Custom Nodes** - Custom node components, Handle, multiple handles, drag handles
- **Custom Edges** - Custom edge components, path utilities, edge labels, markers
- **Interactivity** - Event handlers, callbacks, connection validation, selection, keyboard
- **State Management** - Controlled vs uncontrolled, Zustand integration, state update patterns
- **TypeScript** - Node/Edge types, generics, union types, type guards
- **Layouting** - External layout libraries (dagre, elkjs, d3), sub-flows, parent-child
- **Components & Hooks** - Background, Controls, MiniMap, Panel, NodeToolbar, NodeResizer, hooks
- **Performance & Styling** - Memoization, render optimization, theming, CSS variables, Tailwind
- **Troubleshooting** - Common errors, debugging, edge display issues, Zustand warnings
- **E2E Testing** - Playwright setup, React Flow selectors, node/edge/viewport/connection test patterns
- **Advanced Patterns** - Undo/redo, copy/paste, computed flows, dynamic handles, save/restore, collaboration
- **Common Recipes** - Context menu node creation, drag-and-drop sidebar, detail panels, export as image

It also includes a 12-rule agent behavior contract covering the most critical React Flow patterns (imports, container sizing, nodeTypes stability, handle visibility, state immutability, and more) so Claude follows best practices automatically.

## Installation

```bash
npx skills add framara/react-flow-skill
```

To install globally (all projects):

```bash
npx skills add framara/react-flow-skill -g
```

## Usage

Once installed, Claude Code will automatically use this skill when you work on React Flow code. Ask it to:

- Set up a new React Flow project
- Create custom nodes and edges
- Debug blank canvas or missing edge issues
- Integrate with Zustand for state management
- Add automatic layouting with dagre or elkjs
- Optimize performance for large graphs
- Write Playwright E2E tests for React Flow applications
- Migrate from legacy `reactflow` package to `@xyflow/react` v12
- Implement undo/redo, copy/paste, or computed data flows

## License

[MIT](LICENSE)

react-flow-skill

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README