Create SSR-safe Zustand authentication stores with actions and selectors.
npx skills add https://github.com/aexol-studio/axolotl --skill zustand-stores
Please help me install this Agent Skill. Skill: zustand-stores Source: https://github.com/aexol-studio/axolotl/tree/main/examples/new/.opencode/skills/zustand-stores Command: npx skills add https://github.com/aexol-studio/axolotl --skill zustand-stores
Zust and stores provide a lightweight, type-safe pattern for sharing UI and authentication state across React components with SSR-safe initialization, ensuring server-rendered HTML and client navigation stay in sync without hydration headaches.
Initialize the auth store at startup and read isAuthenticated with useAuthStore((s) => s.isAuthenticated).
High-intent search queries and answers about installing and using this skill.
To manage authentication state with Zustand during SSR, initialize the auth store using server-provided data like window.__INITIAL_AUTH__. This hydrates the initial state safely, keeping server-rendered HTML and client navigation in sync without hydration mismatches.
SSR-safe state initialization is the process of seeding a client-side store with server-rendered data before hydration. It prevents hydration mismatches by ensuring the server-generated HTML and the client's initial state match perfectly upon loading.
You can access Zustand store state outside React components by calling the getState() method directly on the store hook, such as useAuthStore.getState(). This provides centralized access to helpers and current state values.
Yes, you can use Zustand for auth flows in a TypeScript app because it provides a lightweight, type-safe pattern. It allows clear separation of concerns with actions and selectors, making authentication logic easily testable.
Hydration errors occur when the client's initial state differs from the server-rendered HTML. To fix this, ensure SSR-safe initialization by populating your Zustand store with server-provided session data before client hydration begins.
januarfontiConvert client-side data fetching in Next.js to React Server Components.
lDuangRefactor React component libraries into explicit variants and compound components.
robotostudioImplement UI state transitions in React apps using the View Transition API with Next.js routing support.
markus41Develop React functional components, custom hooks, and context providers with React Query and react-hook-form.
