skills.rest
nayukata
nayukataCOMMUNITY
Explore all skills by this author →
GitHub

manage-client-state

Manage client-side UI state with useSWRImmutable, nuqs, and localStorage.

Updated Oct 30, 2025
Search Tags:#localstorage#type-safety#client-state#nuqs#url-state#useswrimmutable
One-click install
npx skills add https://github.com/nayukata/notify-patch-notes --skill manage-client-state
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: manage-client-state
Source: https://github.com/nayukata/notify-patch-notes/tree/main/.claude/skills/manage-client-state
Command: npx skills add https://github.com/nayukata/notify-patch-notes --skill manage-client-state

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

クライアントサイドの UI 状態をグローバルと URL 状態で型安全に管理します。サイドバーの開閉、テーマ、モーダル表示、ページネーション、検索・フィルターなどのワークフローを統合します。

Core Features & Use Cases

  • グローバル UI 状態の管理: useSWRImmutable を用いたサイドバー、テーマ、モーダルの同期
  • URL 状態の同期: nuqs を用いたページネーション、検索、フィルター、タブの型安全な URL 管理
  • LocalStorage 永続化: 初期値と変更時のローカルストレージ同期
  • 実用シナリオ: サイドバーの開閉、テーマ変更、URL に状態を保存することでページ再訪問時の一貫性を確保

Quick Start

Begin by wiring your UI to use useSWRImmutable for global state and nuqs for URL state, and add localStorage persistence as needed.

Frequently Asked Questions about manage-client-state

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

FAQPage Schema
How do I manage client-side UI state with type safety for sidebar and modal persistence?▼

Manage client-side UI state by using useSWRImmutable for global state like sidebars and modals, enforcing type safety while persisting data across sessions with optional localStorage.

What is the best way to sync pagination and filter state to the URL in a type-safe React dashboard?▼

Syncing pagination and filters to the URL is best handled with nuqs, which provides type-safe URL state management to ensure dashboard consistency across page revisits and URL changes.

Can I use useSWRImmutable and nuqs together to separate global UI state from URL state?▼

Yes, you can use useSWRImmutable for global UI state like themes and modals while using nuqs specifically for URL state like pagination, keeping both state layers type-safe and synchronized.

Does this approach to client state management support localStorage persistence with safe defaults?▼

Yes, client state management supports optional localStorage persistence by applying safe defaults and defensive checks during initialization and state changes to prevent storage errors.

When do I need to sync URL state instead of using global state for my application filters?▼

You need URL state for filters, pagination, and tabs when you want state to persist across page revisits and URL sharing, whereas global state fits ephemeral UI concerns like sidebar toggles.

Related Skills

Explore More Software Engineering Skills→
not-aninot-ani

nuqs

Manage URL state in Next.js with type-safe parsers and NuqsAdapter.

Community
Advanced
feed-mobfeed-mob
1

url-parameter-parser

Extract URL query parameters from CSV files into new columns.

Official
Intermediate
KaakatiKaakati
10

Turbo & Hotwire Patterns

Implement Turbo and Stimulus patterns for real-time Rails UI updates.

Community
Intermediate
zinohomezinohome
1

zustand-state-builder

Implement TypeScript Zustand stores with persistence, devtools, and modular slices.

Community
Intermediate