skills.rest
jason23452
jason23452COMMUNITY
Explore all skills by this author →
GitHub

zustand

Installs and configures Zustand stores for React SPA Vite and Next.js projects.

Updated Jun 28, 2026
Search Tags:#state management#store#react#nextjs#vite#zustand#bootstrap
One-click install
npx skills add https://github.com/jason23452/my-skill --skill zustand-jason23452
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: zustand
Source: https://github.com/jason23452/my-skill/tree/main/frontend/status/zustand
Command: npx skills add https://github.com/jason23452/my-skill --skill zustand-jason23452

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires zustand, and includes scripts (resource) components.

What problem does it solve? Setting up Zustand state management correctly differs between React SPA Vite and Next.js projects, and mistakes like module-level singleton stores in server-rendered Next.js apps cause shared-state bugs across requests. This Skill detects the project target, installs the dependency with the right package manager, and scaffolds store modules, providers, and entry wrappers that follow each framework's rules. ## Core Features & Use Cases - Target Detection: Distinguishes React SPA Vite from Next.js (App Router and Pages Router) using dependencies, config files, and entry files, and refuses unsupported frameworks like Vue, Nuxt, or Svelte. - Automated Bootstrap: Installs zustand with the detected package manager (pnpm, npm, yarn, or bun), creates typed store modules, and for Next.js generates a vanilla store factory plus a client provider wired into the App Router layout or Pages Router _app. - Placement Rules: Places shared stores in shared/store and feature-owned stores in features/<feature>/store for feature-based layouts, keeping app composition layers free of state. - Verification: Runs a verification script that checks the dependency, store creation pattern, client provider, and entry wrapper. - Use Case: After scaffolding a Next.js App Router project, run this Skill to get a per-request Zustand store with a client provider already wrapped around the root layout, verified and ready for feature stores. ## Quick Start Use the zustand skill to add Zustand state management to my React Vite or Next.js project and verify the setup.

Frequently Asked Questions about zustand

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

FAQPage Schema
How do I set up Zustand in a Next.js App Router project?▼

Create a vanilla store factory with createStore from zustand/vanilla, then wrap it in a client provider component marked 'use client' that holds the store in a ref. Wrap the root layout's children with that provider so each request gets a fresh store instance.

How do I add Zustand to a React Vite project?▼

Install zustand with your package manager and create hook-based store modules using create; no root provider is needed in a plain React SPA. Place shared stores in src/shared/store and feature-owned stores in src/features/<feature>/store for feature-based layouts.

Does Zustand work with React Server Components in Next.js?▼

Zustand must only be used from client components in Next.js; do not read or write store state inside React Server Components. For server-rendered apps, use a per-request vanilla store with a client provider instead of a module-level singleton.

Can I use Zustand with Vue, Nuxt, or Svelte projects?▼

No, this setup applies only to React SPA Vite and Next.js projects. A generic Vite project without React evidence is not supported, and Vue, Nuxt, Svelte, Angular, Remix, or React Native projects need a different state management approach.

When should I use Zustand persist middleware?▼

Only add persist middleware when persistence is explicitly requested. Persist the smallest safe subset of state, avoid storing secrets in browser storage, and keep Next.js hydration behavior explicit to prevent mismatches.

Related Skills

Explore More Software Engineering Skills→
Impertio-StudioImpertio-Studio
3

vite-agents-project-scaffolder

Scaffold Vite projects with config, env, and directory templates.

Official
Advanced
mabdulraufmabdulrauf

data-fetching

Centralize API calls through a service layer with Zustand and SWR hooks.

Community
Intermediate
Gentleman-ProgrammingGentleman-Programming
618

playwright

Automate Playwright end-to-end tests using Page Objects and robust selectors.

Official
Intermediate
sandeshbagmaresandeshbagmare

react-state-management

Guide React state management with Redux Toolkit, Zustand, Jotai, and React Query.

Community
Intermediate