React Flow Advanced
This one's for when you're past basic nodes and edges. It covers the tricky parts: nesting nodes inside groups with correct relative positioning, building custom connection lines that respond to valid/invalid targets, dropping nodes from external sources (with proper coordinate conversion via screenToFlowPosition), implementing undo/redo with a simple history stack, and auto-arranging graphs with dagre. The gates section is genuinely useful, it calls out the footguns like forgetting preventDefault on drag events or not using shallow selectors with the store. If you're building a workflow editor or diagramming tool and hit any of these patterns, the examples are concrete enough to adapt directly.
- skills.sh installs
- 643
- GitHub stars
- 87
- last updated
- Aug 21, 2026
Install
$ npx -y skills add existential-birds/beagle --skill react-flow-advanced --agent claude-codeInstalls into .claude/skills of the current project.
Files
Advanced React Flow Patterns
Gates (check before shipping)
Use these as sequenced checks—not “I think it works.”
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/existential-birds/beagle
- Category
- Frontend Development
- First seen
- Jun 3, 2026
More from existential-birds/beagle
All 40- React Router V7577
- React Flow Architecture536
- Vitest Testing471
- Docling431
- Fastapi Code Review387
- React Flow Implementation374
- Shadcn Ui356
- React Flow Code Review324
- Langgraph Architecture282
- Swiftui Code Review273
- Tutorial Docs271
- Bubbletea Code Review265
- Zustand State258
- Adr Writing250
- Dagre React Flow247
- Swift Code Review247
- Pytest Code Review232
- Sqlalchemy Code Review225
- Pydantic Ai Common Pitfalls221
- Pydantic Ai Agent Creation219
- Agent Architecture Analysis217
- Ai Elements209
- Go Code Review204
- Shadcn Code Review204
Recommended
More Frontend Development
astro-developerwithastro/astroComprehensive guide for developing in the Astro monorepo. Covers architecture, debugging, testing, and critical constraints. Use when working on features, fixes596skills.sh installs
managing-astro-deploymentsastronomer/agentsManage Astronomer production deployments with Astro CLI. Use when the user wants to authenticate, switch workspaces, create/update/delete deployments, or deploy595skills.sh installs
angular-best-practices-signalstorealfredoperez/angular-best-practicesangular best practices signalstore579skills.sh installs
react-router-v7existential-birds/beagleReact Router v7 best practices for data-driven routing. Use when implementing routes, loaders, actions, Form components, fetchers, navigation guards, protected 577skills.sh installs
react-springdylantarre/animation-principlesUse when implementing Disney's 12 animation principles with React Spring's physics-based animations562skills.sh installs