How does this skill handle edge logic and connections?

It covers standard edge types (bezier, step, straight) as well as advanced techniques like floating edges that calculate the closest connection points dynamically.

Does this skill support the latest Svelte 5 features?

Yes, the skill is optimized for Svelte 5, emphasizing the use of $state.raw for nodes and edges to prevent unnecessary deep reactivity and ensure maximum performance.

Is it possible to create custom nodes with unique functionality?

Absolutely. The skill provides patterns for building and registering custom Svelte components as nodes, including custom handle placement and data passing.

Can I implement automatic layouts for complex graphs?

Yes, the skill includes specific implementation guides for using layout engines like Dagre to automatically arrange nodes in hierarchical or directional formats.

Svelte Flow Graph Builder

Name: Svelte Flow Graph Builder
Author: linehaul-ai

bylinehaul-ai

•

Design Tools

Build highly customizable node-based editors and interactive flow visualizations using Svelte Flow and Svelte 5.

About

Svelte Flow is a specialized Claude Code skill designed to help developers architect complex node-graph interfaces, ranging from workflow editors and data flow diagrams to organizational charts and mindmaps. It provides expert guidance on leveraging the @xyflow/svelte library, specifically optimized for Svelte 5's reactivity model. This skill covers essential implementation patterns including custom node and edge creation, state management via $state.raw, integration of layout algorithms like Dagre, and advanced interactive features such as proximity-based connections and floating edges, ensuring production-grade UI development for graph-heavy applications.

Key Features

Advanced UX patterns like Proximity Connect and Reconnectable Edges
Custom node and edge component registration and styling patterns
1 GitHub stars
Svelte 5 reactivity support using $state.raw for high-performance updates
Hierarchical and DAG layout integration using Dagre algorithms
Comprehensive event handling for interactive diagramming and state persistence

Use Cases

Developing dynamic organizational charts or complex mindmapping applications
Creating interactive data pipeline and processing visualizations
Building visual automation and workflow orchestration platforms

About

Key Features

Advanced UX patterns like Proximity Connect and Reconnectable Edges
Custom node and edge component registration and styling patterns
1 GitHub stars
Svelte 5 reactivity support using $state.raw for high-performance updates
Hierarchical and DAG layout integration using Dagre algorithms
Comprehensive event handling for interactive diagramming and state persistence

Use Cases

Developing dynamic organizational charts or complex mindmapping applications
Creating interactive data pipeline and processing visualizations
Building visual automation and workflow orchestration platforms