Zustand State

Zustand state management for React and vanilla JavaScript. Use when creating stores, using selectors, persisting state to localStorage, integrating devtools,...

Security Scan

This is a documentation/instruction-only skill that provides usage patterns and examples for the Zustand state library; its requested footprint and instructions match that purpose and do not ask for extra credentials or installs.

Purpose & Capability

Name and description match the provided materials: the files are documentation and code examples for using Zustand in React and vanilla JS. There are no environment variables, binaries, or install steps required that would be unrelated to a docs/tutorial skill. Note: the skill's source/homepage are missing which reduces traceability but does not conflict with the skill's stated purpose.

Instruction Scope

SKILL.md and reference files contain code snippets and guidance for creating stores, middleware, persistence (localStorage), devtools, testing, and TypeScript patterns. The instructions do not direct the agent to read unrelated system files or exfiltrate data, nor do they instruct network calls to third-party endpoints (the example fetch('/api/data') is illustrative of typical usage). No vague 'gather whatever context you need' phrasing grants broad discretion.

Install Mechanism

No install spec is present; this is instruction-only documentation. Nothing will be downloaded or written to disk by an installer, so install-risk is minimal.

Credentials

The skill declares no required environment variables, credentials, or config paths. The examples mention localStorage and an illustrative asyncStorage abstraction (expected for persistence examples) but do not require access to secrets or unrelated services.

Persistence & Privilege

always is false and the skill does not request persistent system presence or modify other skills' configs. It is an on-demand, user-invocable documentation skill with normal autonomy settings.

Assessment

This skill is a set of documentation and example code for Zustand — it appears coherent with its description and does not request secrets or install anything. Before installing, consider: 1) the source/homepage is missing, so if you prefer official or tracked sources use the upstream Zustand docs or the package repository; 2) code snippets illustrating persistence (localStorage/asyncStorage) will store data in the browser if you copy them into an app — review what you persist to avoid saving sensitive data; 3) this skill does not execute code by itself (it only provides examples), but an agent might generate or suggest code based on these examples, so review generated code before running it. If you need provenance guarantees, prefer a skill that links to an official repo or maintainer.

Zustand State Management

Minimal state management - no providers, minimal boilerplate.

Quick Reference

import { create } from 'zustand'

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useBearStore = create<BearState>()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

// In component - select only what you need
const bears = useBearStore((state) => state.bears)
const increase = useBearStore((state) => state.increase)

State Updates

// Flat updates (auto-merged at one level)
set({ bears: 5 })
set((state) => ({ bears: state.bears + 1 }))

// Nested objects (manual spread required)
set((state) => ({
  nested: { ...state.nested, count: state.nested.count + 1 }
}))

// Replace entire state (no merge)
set({ bears: 0 }, true)

Selectors & Performance

// Good - subscribes only to bears
const bears = useBearStore((state) => state.bears)

// Bad - rerenders on any change
const state = useBearStore()

// Multiple values with useShallow (prevents rerenders with shallow comparison)
import { useShallow } from 'zustand/react/shallow'

const { bears, fish } = useBearStore(
  useShallow((state) => ({ bears: state.bears, fish: state.fish }))
)

// Array destructuring also works
const [bears, fish] = useBearStore(
  useShallow((state) => [state.bears, state.fish])
)

Access Outside Components

// Get current state (non-reactive)
const state = useBearStore.getState()

// Update state
useBearStore.setState({ bears: 5 })

// Subscribe to changes
const unsub = useBearStore.subscribe((state) => console.log(state))
unsub() // unsubscribe

Vanilla Store (No React)

import { createStore } from 'zustand/vanilla'

const store = createStore((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

store.getState().bears
store.setState({ bears: 10 })
store.subscribe((state) => console.log(state))

Additional Documentation

• Middleware: See references/middleware.md for persist, devtools, immer
• Patterns: See references/patterns.md for slices, testing, best practices
• TypeScript: See references/typescript.md for advanced typing patterns

Key Patterns

Pattern	When to Use
Single selector	One piece of state needed
useShallow	Multiple values, avoid rerenders
getState()	Outside React, event handlers
subscribe()	External systems, logging
Vanilla store	Non-React environments