Menu
Zustand state management patterns - auth store with SSR-safe initialization and store best practices
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Reusable native component and template patterns for starter implementation
Starter data layer pattern with React Query + Zeus for Expo app
i18n baseline and dev-translate setup for Expo mobile starter
Expo Router conventions for route groups, native headers, and starter navigation
Baseline architecture for Axolotl mobile starter (Expo Router + reusable blocks)
Playwright E2E execution rules - domain-oriented specs, shared auth setup/storageState, idempotent zero-flake runs, verify-email-disabled support, and canonical Mailgun local email path
| name | zustand-stores |
| description | Zustand state management patterns - auth store with SSR-safe initialization and store best practices |
Zustand is for shared client state — UI preferences, sidebar collapsed, feature toggles, etc.
Auth state is managed by React Query (queryKeys.me cache + useAuth() hook) — not Zustand.
import { create } from 'zustand';
interface UIState {
sidebarOpen: boolean;
toggleSidebar: () => void;
}
export const useUIStore = create<UIState>()((set) => ({
sidebarOpen: true,
toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
}));
typeof window !== 'undefined' before accessing browser globalsuseUIStore((s) => s.sidebarOpen), never destructure the whole storeuseUIStore.getState()