zustand
You are an expert in Zustand, the small, fast, and scalable state management library for React. You help developers manage global state without boilerplate using Zustand's hook-based stores, selectors for performance, middleware (persist, devtools, immer), computed values, and async actions — replacing Redux complexity with a simple, un-opinionated API in under 1KB.
Best use case
zustand is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
You are an expert in Zustand, the small, fast, and scalable state management library for React. You help developers manage global state without boilerplate using Zustand's hook-based stores, selectors for performance, middleware (persist, devtools, immer), computed values, and async actions — replacing Redux complexity with a simple, un-opinionated API in under 1KB.
Teams using zustand should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/zustand/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How zustand Compares
| Feature / Agent | zustand | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
You are an expert in Zustand, the small, fast, and scalable state management library for React. You help developers manage global state without boilerplate using Zustand's hook-based stores, selectors for performance, middleware (persist, devtools, immer), computed values, and async actions — replacing Redux complexity with a simple, un-opinionated API in under 1KB.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Zustand — Minimal React State Management
You are an expert in Zustand, the small, fast, and scalable state management library for React. You help developers manage global state without boilerplate using Zustand's hook-based stores, selectors for performance, middleware (persist, devtools, immer), computed values, and async actions — replacing Redux complexity with a simple, un-opinionated API in under 1KB.
## Core Capabilities
### Store
```typescript
import { create } from "zustand";
import { persist, devtools } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";
interface Todo { id: string; text: string; done: boolean }
interface TodoStore {
todos: Todo[];
filter: "all" | "active" | "done";
addTodo: (text: string) => void;
toggleTodo: (id: string) => void;
removeTodo: (id: string) => void;
setFilter: (filter: "all" | "active" | "done") => void;
fetchTodos: () => Promise<void>;
}
const useTodoStore = create<TodoStore>()(
devtools(
persist(
immer((set) => ({
todos: [],
filter: "all",
addTodo: (text) => set((state) => {
state.todos.push({ id: crypto.randomUUID(), text, done: false });
}),
toggleTodo: (id) => set((state) => {
const todo = state.todos.find(t => t.id === id);
if (todo) todo.done = !todo.done;
}),
removeTodo: (id) => set((state) => {
state.todos = state.todos.filter(t => t.id !== id);
}),
setFilter: (filter) => set({ filter }),
fetchTodos: async () => {
const response = await fetch("/api/todos");
const todos = await response.json();
set({ todos });
},
})),
{ name: "todo-storage" }, // localStorage persistence
),
{ name: "TodoStore" }, // Redux DevTools label
),
);
// Usage in components — automatic re-render only when selected state changes
function TodoList() {
const todos = useTodoStore((s) => s.todos);
const filter = useTodoStore((s) => s.filter);
const toggleTodo = useTodoStore((s) => s.toggleTodo);
const filtered = todos.filter(t =>
filter === "all" ? true : filter === "done" ? t.done : !t.done
);
return (
<ul>
{filtered.map(t => (
<li key={t.id} onClick={() => toggleTodo(t.id)}
style={{ textDecoration: t.done ? "line-through" : "none" }}>
{t.text}
</li>
))}
</ul>
);
}
// Access outside React
const { addTodo, todos } = useTodoStore.getState();
useTodoStore.subscribe((state) => console.log("State changed:", state.todos.length));
```
## Installation
```bash
npm install zustand
```
## Best Practices
1. **Selectors** — Always select specific fields: `useStore(s => s.count)`; prevents unnecessary re-renders
2. **Immer middleware** — Use immer for nested state updates; mutate draft instead of spreading
3. **Persist** — Use `persist` middleware for localStorage/sessionStorage; automatic hydration on page load
4. **DevTools** — Wrap with `devtools()` in development; inspect state changes in Redux DevTools extension
5. **Async actions** — Define async actions directly in the store; `set()` works inside async functions
6. **Outside React** — Use `getState()` and `subscribe()` for non-React code (API clients, WebSocket handlers)
7. **Multiple stores** — Create separate stores per domain (auth, cart, ui); keeps each store focused
8. **No providers** — Zustand doesn't need Context providers; stores are global singletons, import and use anywhereRelated Skills
zoho
Integrate and automate Zoho products. Use when a user asks to work with Zoho CRM, Zoho Books, Zoho Desk, Zoho Projects, Zoho Mail, or Zoho Creator, build custom integrations via Zoho APIs, automate workflows with Deluge scripting, sync data between Zoho apps and external systems, manage leads and deals, automate invoicing, build custom Zoho Creator apps, set up webhooks, or manage Zoho organization settings. Covers Zoho CRM, Books, Desk, Projects, Creator, and cross-product integrations.
zod
You are an expert in Zod, the TypeScript-first schema declaration and validation library. You help developers define schemas that validate data at runtime AND infer TypeScript types at compile time — eliminating the need to write types and validators separately. Used for API input validation, form validation, environment variables, config files, and any data boundary.
zipkin
Deploy and configure Zipkin for distributed tracing and request flow visualization. Use when a user needs to set up trace collection, instrument Java/Spring or other services with Zipkin, analyze service dependencies, or configure storage backends for trace data.
zig
Expert guidance for Zig, the systems programming language focused on performance, safety, and readability. Helps developers write high-performance code with compile-time evaluation, seamless C interop, no hidden control flow, and no garbage collector. Zig is used for game engines, operating systems, networking, and as a C/C++ replacement.
zed
Expert guidance for Zed, the high-performance code editor built in Rust with native collaboration, AI integration, and GPU-accelerated rendering. Helps developers configure Zed, create custom extensions, set up collaborative editing sessions, and integrate AI assistants for productive coding.
zeabur
Expert guidance for Zeabur, the cloud deployment platform that auto-detects frameworks, builds and deploys applications with zero configuration, and provides managed services like databases and message queues. Helps developers deploy full-stack applications with automatic scaling and one-click marketplace services.
zapier
Automate workflows between apps with Zapier. Use when a user asks to connect apps without code, automate repetitive tasks, sync data between services, or build no-code integrations between SaaS tools.
zabbix
Configure Zabbix for enterprise infrastructure monitoring with templates, triggers, discovery rules, and dashboards. Use when a user needs to set up Zabbix server, configure host monitoring, create custom templates, define trigger expressions, or automate host discovery and registration.
yup
Validate data with Yup schemas. Use when adding form validation, defining API request schemas, validating configuration, or building type-safe validation pipelines in JavaScript/TypeScript.
yt-dlp
Download video and audio from YouTube and other platforms with yt-dlp. Use when a user asks to download YouTube videos, extract audio from videos, download playlists, get subtitles, download specific formats or qualities, batch download, archive channels, extract metadata, embed thumbnails, download from social media platforms (Twitter, Instagram, TikTok), or build media ingestion pipelines. Covers format selection, audio extraction, playlists, subtitles, metadata, and automation.
youtube-transcription
Transcribe YouTube videos to text using OpenAI Whisper and yt-dlp. Use when the user wants to get a transcript from a YouTube video, generate subtitles, convert video speech to text, create SRT/VTT captions, or extract spoken content from YouTube URLs.
youtube-marketing
Create, optimize, and manage YouTube content for channel growth, audience building, and monetization. Use when someone asks to "grow on YouTube", "optimize YouTube videos", "YouTube SEO", "YouTube Shorts strategy", "YouTube API integration", "automate YouTube uploads", "YouTube analytics", "YouTube thumbnail", or "YouTube content strategy". Covers long-form video, Shorts, SEO, thumbnail design, YouTube Data API, analytics, monetization, and growth strategies.