Skill.md検索

グローバルUI状態（サイドバー、テーマ、モーダル）をシンプルに管理し、コンポーネント間で共有できます。 ページネーション、検索フィルタ、タブ選択などの状態をURLに自動同期させ、ブラウザの戻る・進むボタンや画面リロード時に状態が復元されます。 localStorage（ブラウザストレージ）に設定やテーマを保存し、次回訪問時に自動復元できます。 複雑なContext APIを避けて、シンプルなカスタムフック（useSWRImmutable、nuqs）で状態を一元管理できます。 TypeScriptの型安全性を保ちながら、実装パターンが統一されるため、チーム内のコード品質が向上します。 フロントエンド開発者で、UIの状態管理をシンプルに保ちたい人 サイドバーやフィルタなどの状態をURLに反映させたい機能開発者 画面リロード時にユーザーの操作状態を復元したいプロダクト担当者 TypeScript + Next.jsで堅牢な状態管理パターンを構築したい開発チーム クライアント状態管理には3つのパターンがあります。URL復元が必要な場合（ページネーション、検索、フィルタ）はnuqsを使用し、Server ComponentでsearchParamsCacheを使ってパースし、Client ComponentでuseQueryStatesで状態管理します。localStorage永続化が必要な場合（テーマ、ユーザー設定）はuseSWRImmutable + useEffectを組み合わせ、再検証をスキップして高速に状態を取得します。セッション内のみの状態（モーダル表示、選択行）はuseSWRImmutableだけで管理します。重要なルールとして、グローバル状態ではuseSWRImmutableを使用し、デフォルト値にfallbackDataを設定し、再検証なしで更新するにはmutate(newValue, false)を使用します。サーバーから取得するデータ（APIレスポンスのキャッシュ）はmanage-swr-dataスキルで管理し、クライアント内で完結する状態はこのスキルで管理するという使い分けが重要です。