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.

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

01Advanced UX patterns like Proximity Connect and Reconnectable Edges

02Custom node and edge component registration and styling patterns

031 GitHub stars

04Svelte 5 reactivity support using $state.raw for high-performance updates

05Hierarchical and DAG layout integration using Dagre algorithms

06Comprehensive event handling for interactive diagramming and state persistence

Use Cases

01Developing dynamic organizational charts or complex mindmapping applications

02Creating interactive data pipeline and processing visualizations

03Building visual automation and workflow orchestration platforms

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add linehaul-ai/linehaulai-claude-marketplace svelte-flow

For use in Claude.ai and ChatGPT

Download Skill