composable-svelte-navigation_skill

Overview

This skill provides navigation and animation patterns for Composable Svelte applications, focusing on modals, sheets, drawers, alerts, and navigation flows. It enforces state-driven lifecycle animations using Motion One and PresentationState to ensure predictable, testable, and composable UI transitions. Use it to build tree-based navigation, optional child composition, parent observation, and URL-state routing.

How this skill works

State is the single source of truth: non-null child state means presented, null means dismissed. PresentationState models lifecycle phases (idle → presenting → presented → dismissing → idle) and reducers drive presentation events, while components run Motion One animations and dispatch completion events. Helper utilities scope stores to destinations, compose optional children with ifLetPresentation, and sync browser history to app state for URL routing.

When to use it

• Implementing modals, sheets, drawers, alerts, or any appear/disappear lifecycle UI
• Animating expand/collapse (accordions), toast/alert enter/exit, or page transitions
• Composing optional child screens (detail view, modal form) that parent observes
• Scoping component stores to destination types for clean local reducers
• Synchronizing app navigation with the browser URL for deep links and back/forward

Best practices

• Always use Motion One + PresentationState for lifecycle animations; avoid CSS transitions for appear/disappear behavior
• Reserve CSS @keyframes only for infinite loops like spinners and shimmer loaders
• Model optional screens as nullable child state so navigation becomes a tree
• Use parent observation to react to child completion (save/cancel) and dismiss child state explicitly
• Use scopeToDestination to derive scoped stores with dismiss() and map child effects back to parent actions
• Guard reducer transitions so showing/dismissing only happens from valid PresentationState phases

Example use cases

• A modal form: parent opens destination, component animates with animateModalIn/Out, parent observes save to append an item and dismiss
• Sheet drawer: present sheet state, run animateSheetIn/Out, and dismiss via scoped store.dismiss() from UI
• Accordion: expand/collapse handled by PresentationState and animateAccordionExpand/Collapse for height transitions
• URL-driven post view: syncBrowserHistory maps selectedPostId to a destination so direct links open the correct screen
• Nested flows: parent composes add/edit child reducers with ifLetPresentation and maps child actions back via PresentationAction