Can I create custom nodes and edges with this skill?

Yes, the skill covers the configuration of built-in node types and provides patterns for implementing custom node logic, custom styles, and various edge connection types.

Is reactive state supported in these diagrams?

Absolutely. The skill emphasizes using Svelte stores (writable and derived) to ensure the flow diagram stays perfectly in sync with your application's underlying data.

Does this skill handle diagram persistence?

Yes, it includes patterns for saving and restoring flow states using local storage or external databases via the useSvelteFlow hook and toObject() methods.

What is Svelte Flow Fundamentals?

It is a specialized Claude Code skill designed to help developers build interactive, node-based interfaces and diagrams specifically for Svelte applications using the @xyflow/svelte framework.

Svelte Flow Fundamentals

Name: Svelte Flow Fundamentals
Author: TheBushidoCollective

byTheBushidoCollective

•

Design Tools

Builds highly customizable node-based user interfaces and interactive flow diagrams using the Svelte Flow framework.

Svelte Flow Fundamentals provides a comprehensive toolkit for developers to integrate visual programming interfaces, workflow editors, and complex graph visualizations into Svelte applications. It streamlines the implementation of core Svelte Flow components—including nodes, edges, and interactive controls—while offering best practices for reactive state management using Svelte stores. Whether you are building a simple organizational chart or a complex data processing pipeline, this skill ensures your implementation follows professional patterns for performance and interactivity.

Key Features

01Programmatic viewport control and flow persistence for saving and restoring state

02Reactive flow state management using Svelte writable and derived stores

0397 GitHub stars

04Integrated UI utilities including MiniMaps, Controls, Backgrounds, and Panels

05Implementation of standard and custom node types with specific handle configurations

06Advanced edge styling including bezier, straight, step, and smoothstep connections

Use Cases

01Creating interactive organizational charts or dependency graphs

02Developing node-based data processing or ETL pipeline visualizations

03Building visual workflow automation builders and logic editors

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han svelteflow-fundamentals

For use in Claude.ai and ChatGPT

Download Skill