Zustand 5

This gives you solid Zustand 5 patterns for React state management without the boilerplate of Redux. You get basic stores, selectors with the new useShallow hook to prevent unnecessary renders, persist middleware for localStorage, async actions, and the slices pattern for organizing larger stores. The Immer middleware examples are genuinely useful if you're tired of spreading objects everywhere. It covers the practical stuff like accessing state outside React and using DevTools. If you're reaching for Context API and prop drilling is annoying you, or Redux feels like overkill, these patterns are a good middle ground. Clean, typed examples throughout.

skills.sh installs: 207
GitHub stars: 665
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add gentleman-programming/gentleman-skills --skill zustand-5 --agent claude-code

Installs into .claude/skills of the current project.

Files

Basic Store

import { create } from "zustand";

interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

const useCounterStore = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

// Usage
function Counter() {
  const { count, increment, decrement } = useCounterStore();
  return (
    <div>
      <span>{count}</span>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

Persist Middleware

import { create } from "zustand";
import { persist } from "zustand/middleware";

interface SettingsStore {
  theme: "light" | "dark";
  language: string;
  setTheme: (theme: "light" | "dark") => void;
  setLanguage: (language: string) => void;
}

SKILL.md on GitHub