Skills
.Work. You
Rest

composable-svelte-navigation

Community

State-driven navigation for Composable Svelte UI

Software Engineering#routing#navigation#modal#state-driven#motion-one#presentation-state
Authorjonathanbelolo
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides structured patterns to manage navigation overlays (modals, sheets, drawers, alerts) and URL routing in a state-driven way, avoiding ad-hoc UI transitions.

Core Features & Use Cases

  • State-driven overlays using PresentationState lifecycle (idle, presenting, presented, dismissing)
  • Child composition with ifLetPresentation and seamless parent observation to react to completion or cancellation
  • Scoped UI composition via scopeToDestination to render Modals, Sheets, Drawers, Alerts, and Popovers
  • URL routing integration with browser history synchronization and destination-based serialization
  • Real-world use cases include complex admin dashboards, multi-step forms, and nested navigation flows

Quick Start

Install the core composable-svelte utilities and initialize a store with a destination overlay. Bind UI components to the destination store using scopeToDestination and dispatch show/hide actions to demonstrate a basic modal flow.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: composable-svelte-navigation
Download link: https://github.com/jonathanbelolo/composable-svelte/archive/main.zip#composable-svelte-navigation

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.