skills.rest
jonathanbelolo
jonathanbeloloCOMMUNITY
Explore all skills by this author →
GitHub

composable-svelte-navigation

Compose state-driven overlays and URL routing for Composable Svelte apps.

3|Updated Oct 26, 2025
Search Tags:#routing#navigation#modal#state-driven#motion-one#presentation-state
One-click install
npx skills add https://github.com/jonathanbelolo/composable-svelte --skill composable-svelte-navigation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: composable-svelte-navigation
Source: https://github.com/jonathanbelolo/composable-svelte/tree/main/.claude/skills/composable-svelte-navigation
Command: npx skills add https://github.com/jonathanbelolo/composable-svelte --skill composable-svelte-navigation

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about composable-svelte-navigation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage animated modals and drawers in Svelte without ad-hoc UI transitions?▼

State-driven navigation manages animated modals and drawers in Svelte by tracking the PresentationState lifecycle (idle, presenting, presented, dismissing) to avoid ad-hoc UI transitions. This provides structured patterns for overlay composition.

What is the best way to handle parent-child observation for navigation overlays in Svelte?▼

The best way to handle parent-child observation for navigation overlays is using ifLetPresentation for seamless child composition. This allows parents to react to the completion or cancellation of presented overlays.

How do I sync browser history with Svelte URL routing for state-driven destinations?▼

You can sync browser history with Svelte URL routing by binding UI components to a destination store using scopeToDestination. This enables destination-based serialization and URL routing integration for navigation flows.

Can I use Motion One animations with Svelte presentation state lifecycles?▼

Yes, you can use Motion One animations with Svelte presentation state lifecycles. This Skill requires Motion One to animate overlays across the idle, presenting, presented, and dismissing phases.

How do I build nested navigation flows for multi-step forms in Svelte?▼

You build nested navigation flows for multi-step forms by applying state-driven patterns across component lifecycles and scoped stores. This synchronizes optional overlays and complex navigation flows for administrative dashboards.

Related Skills

Explore More Software Engineering Skills→
Jonathan0823Jonathan0823
7

ts-vue-svelte

Provide TypeScript best-practice patterns for Vue 3 and Svelte 5 applications.

Community
Advanced
pradyumnasagarpradyumnasagar
6

agent-handoff

Automate inter-skill data transfer and provenance capture via JSON Material Passports.

Community
Advanced
Arnutt-NArnutt-N

modal-manager

Coordinate consistent modal and dialog components across HR-IMS frontends.

Community
Advanced
zuzu59zuzu59

intercepted-route-using-tanstack-start

Implement intercepted modal routing with masked URLs in TanStack Start.

Community
Intermediate