Skip to content
Conduit

skill

react-flow-expert

Global Claude Code skill: deep, source-verified React Flow / Svelte Flow / @xyflow knowledge base

dyammarcano/react-flow-expertcommunitylistedunreviewed
Use skill

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/dyammarcano/react-flow-expert itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 23, 2026

react-flow-expert

A global Claude Code skill that turns any session into a deep React Flow / Svelte Flow / @xyflow expert — not just the public API, but the internals.

The knowledge base was mined from real source across four upstream repos and adversarially fact-checked against the live code (every API, hook, prop, type, and error code verified or corrected). Pinned to:

  • @xyflow/react 12.10.2
  • @xyflow/svelte 1.5.2
  • @xyflow/system 0.0.76

What's inside

PathWhat
SKILL.mdAlways-loaded entry: core mental model + routing table + top gotchas
agents/react-flow-expert.mdDispatchable subagent for deep Q&A / building features
reference/01..13-*.md~48k words of source-verified depth
DESIGN.mdThe design spec (how/why it was built)
build/The Claude Code Workflow that generated the KB — re-runnable

Reference docs

  1. Architecture & mental model — the 3-package engine, data flow, coordinate systems
  2. @xyflow/system internals — XYPanZoom / XYDrag / XYHandle / XYResizer / XYMinimap
  3. Edge-path algorithms & markers — bezier / smoothstep / step / straight math
  4. React components & every <ReactFlow> prop
  5. Every React hook — signatures, returns, internals, when-to-use
  6. Svelte Flow — Svelte 5 runes, stores, component/hook equivalents
  7. State management & the store — controlled vs uncontrolled, change system, perf
  8. Custom nodes, edges & the handle/connection system
  9. Patterns & recipes — layouting, drag-and-drop, sub-flows, computing flows
  10. Gotchas, error codes & performance
  11. Migration reactflow v11 → @xyflow/react v12
  12. Node-UI ecosystem & when to choose what
  13. TypeScript types reference

Install

Clone into your Claude Code skills directory:

git clone https://github.com/dyammarcano/react-flow-expert.git \
  ~/.claude/skills/react-flow-expert

Use

In any Claude Code session:

  • Invoke the react-flow-expert skill for instant orientation + routing to the right reference doc.
  • Or dispatch the react-flow-expert subagent for a source-citing deep answer or to build a React Flow / Svelte Flow feature.

Regenerate / extend

The build/ Workflow re-mines the KB from local clones of the upstream repos (see DESIGN.md for the repo layout and the 4-phase extract → verify → synthesize → polish pipeline).

License & attribution

Original prose and tooling: BSD 3-Clause (see LICENSE). The reference docs quote and cite MIT-licensed source from the xyflow project — see NOTICE for attribution.

↑↓ navigate openesc close