Durable UI

Durable UI is the practice of making client-side state and interactions resilient. State should survive page reloads, browser sessions, and — where appropriate — be shareable via URL. Interactive elements like dropdowns and modals should be dismissable in the ways users expect (click outside, Escape, backdrop click). Multi-step flows should never lose progress. Durable UI fills the gap for UI preferences, navigation context, and interaction patterns that belong on the client.

When to Use

Use this skill when:

• Persisting UI preferences in localStorage (sidebar collapsed, dark mode, dismissed banners)
• Syncing filters, tabs, or pagination state to URL query parameters
• Auto-saving form drafts to localStorage with restore-on-return
• Building multi-step wizard forms that preserve progress across reloads and navigation
• Making dropdowns, context menus, and popovers close on outside click or Escape
• Closing modals, dialogs, and confirms via backdrop click or Escape
• Deciding where state should live (client localStorage vs URL vs server session vs database)
• Building useLocalStorage, useQueryState, useDurableUrl, useDurableStorage, useFormDraft, useWizardDraft, or useClickOutside hooks/composables/stores
• Handling cross-tab synchronization of localStorage values
• Implementing unsaved-changes warnings with Inertia.js navigation guards
• Managing focus return after modal close, focus trapping, and focus after list item deletion