Back to Details

durable-ui

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Durable UI

持久化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.
持久化UI是一种让客户端状态和交互具备韧性的实践。状态应该在页面重新加载、浏览器会话中得以保留，并且在合适的情况下可以通过URL共享。下拉菜单、模态框这类交互元素应该支持用户预期的关闭方式（点击外部、按Escape键、点击背景层）。多步骤流程绝不应该丢失进度。持久化UI填补了UI偏好设置、导航上下文和交互模式这些属于客户端层面的空白。

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
  • Building optimistic UI updates with rollback on error (toggles, list mutations, Inertia integration)
  • Restoring scroll position after navigation, back/forward, and within scrollable containers
  • Implementing toast notification queues with auto-dismiss, pause-on-hover, and aria-live
  • Building debounced search with AbortController cancellation for client-side and server-side filtering
在以下场景中可以使用这项技能：
  • 在localStorage中持久化UI偏好设置（侧边栏折叠、深色模式、已关闭的横幅）
  • 将筛选器、标签页或分页状态同步到URL查询参数
  • 将表单草稿自动保存到localStorage，并支持返回时恢复
  • 构建可在重新加载和导航后保留进度的多步骤向导表单
  • 实现下拉菜单、上下文菜单和弹出框在点击外部或按Escape键时关闭
  • 通过点击背景层或按Escape键关闭模态框、对话框和确认框
  • 确定状态的存储位置（客户端localStorage vs URL vs 服务器会话 vs 数据库）
  • 构建
    useLocalStorage
    、
    useQueryState
    、
    useDurableUrl
    、
    useDurableStorage
    、
    useFormDraft
    、
    useWizardDraft
    或
    useClickOutside
    钩子/组合式函数/状态存储
  • 处理localStorage值的跨标签页同步
  • 结合Inertia.js导航守卫实现未保存更改警告
  • 管理模态框关闭后的焦点返回、焦点捕获，以及列表项删除后的焦点定位
  • 构建带有错误回滚的乐观UI更新（切换、列表变更、Inertia集成）
  • 在导航、前进/后退操作后恢复滚动位置，以及在可滚动容器内恢复滚动位置
  • 实现带有自动关闭、悬停暂停和aria-live的提示通知队列
  • 构建带有AbortController取消功能的防抖搜索，用于客户端和服务器端筛选

Rules

规则

Read individual rule files for detailed explanations and code examples:
  • rules/principles.md - Decision framework: when to use localStorage vs URL params vs session vs database
  • rules/local-storage.md - localStorage patterns with examples for React, Vue, and Svelte
  • rules/url-state.md - URL query parameter sync with pushState/replaceState patterns
  • rules/form-persistence.md - Auto-save form drafts with restore, expiry, and unsaved-changes warnings
  • rules/multi-step-forms.md - Multi-step wizard persistence with per-step drafts and aggregate submission
  • rules/click-outside.md - Close dropdowns, context menus, modals, and dialogs on outside click, backdrop click, or Escape
  • rules/focus-management.md - Focus return after modal close, focus trapping, and focus after list item deletion
  • rules/optimistic-ui.md - Optimistic updates with rollback on error for toggles, list mutations, and Inertia actions
  • rules/scroll-restoration.md - Scroll position restoration after navigation, back/forward, and within scrollable containers
  • rules/toast-notifications.md - Toast notification queues with auto-dismiss, pause-on-hover, and Inertia flash integration
  • rules/debounced-search.md - Debounced search with AbortController cancellation for client-side and server-side filtering
  • rules/react.md - Complete React hook implementations (useLocalStorage, useQueryState, useFormDraft)
  • rules/vue.md - Complete Vue composable implementations (useLocalStorage, useQueryState, useDurableUrl, useDurableStorage, useFormDraft)
  • rules/svelte.md - Complete Svelte store implementations (localStorageStore, queryStateStore, formDraftStore)
阅读各个规则文件以获取详细说明和代码示例：
  • rules/principles.md - 决策框架：何时使用localStorage vs URL参数 vs 会话 vs 数据库
  • rules/local-storage.md - localStorage模式，包含React、Vue和Svelte的示例
  • rules/url-state.md - 结合pushState/replaceState模式的URL查询参数同步
  • rules/form-persistence.md - 带有恢复、过期和未保存更改警告的表单草稿自动保存
  • rules/multi-step-forms.md - 支持分步草稿和聚合提交的多步骤向导持久化
  • rules/click-outside.md - 实现下拉菜单、上下文菜单、模态框和对话框在点击外部、背景层或按Escape键时关闭
  • rules/focus-management.md - 模态框关闭后的焦点返回、焦点捕获，以及列表项删除后的焦点定位
  • rules/optimistic-ui.md - 带有错误回滚的乐观更新，适用于切换、列表变更和Inertia操作
  • rules/scroll-restoration.md - 导航、前进/后退操作后，以及可滚动容器内的滚动位置恢复
  • rules/toast-notifications.md - 带有自动关闭、悬停暂停和Inertia flash集成的提示通知队列
  • rules/debounced-search.md - 带有AbortController取消功能的防抖搜索，用于客户端和服务器端筛选
  • rules/react.md - 完整的React钩子实现（useLocalStorage、useQueryState、useFormDraft）
  • rules/vue.md - 完整的Vue组合式函数实现（useLocalStorage、useQueryState、useDurableUrl、useDurableStorage、useFormDraft）
  • rules/svelte.md - 完整的Svelte状态存储实现（localStorageStore、queryStateStore、formDraftStore）