What is the primary difference between this and manage-swr-data?

This skill focuses on client-only UI state and URL synchronization, whereas manage-swr-data is specifically designed for handling and caching data fetched from a server.

Does this skill work with Next.js App Router?

Yes, it is designed with the App Router in mind, providing specific patterns for both Client Components and Server Component state parsing.

Why use nuqs for URL state?

nuqs allows you to treat the URL search parameters as a type-safe state hook, making your application state shareable and bookmarkable with minimal code.

Can I persist global state across browser sessions?

Yes, the skill includes implementation patterns for using useSWRImmutable in conjunction with useEffect to persist and hydrate state from localStorage.

Client State Manager

Name: Client State Manager
Author: nayukata

bynayukata

開発者ツール

Manages type-safe client-side state using SWR and nuqs for seamless global UI and URL synchronization.

概要

The manage-client-state skill provides a standardized workflow for handling frontend state in React and Next.js applications without the boilerplate of Context providers. It utilizes useSWRImmutable for global UI states like sidebars and themes, and nuqs for robust URL-based state management. This approach ensures that UI states are type-safe, performant, and easily persistent via localStorage or shareable URLs, making it ideal for complex dashboards and data-heavy applications.

主な機能

Type-safe global state management using useSWRImmutable
0 GitHub stars
Clear architectural separation between UI state and server-fetched data
Seamless URL synchronization for pagination, filters, and search queries
Server Component integration with searchParamsCache parsing
Persistence patterns for localStorage to maintain user settings

ユースケース

Implementing persistent user preferences such as dark mode or layout settings
Building shareable search and filter interfaces in Next.js applications
Managing global UI components like sidebars and modals without Context API

概要

主な機能

Type-safe global state management using useSWRImmutable
0 GitHub stars
Clear architectural separation between UI state and server-fetched data
Seamless URL synchronization for pagination, filters, and search queries
Server Component integration with searchParamsCache parsing
Persistence patterns for localStorage to maintain user settings

ユースケース

Implementing persistent user preferences such as dark mode or layout settings
Building shareable search and filter interfaces in Next.js applications
Managing global UI components like sidebars and modals without Context API