# Frontend State Zustand

> Standardized guidelines and patterns for Frontend State Zustand.

- Skill: `valec3/frontend-state-zustand` (Agent Skill)
- Install (CLI): `npx skillmds add valec3/frontend-state-zustand`
- Raw SKILL.md: https://api.skillmd.com/api/skills/valec3/frontend-state-zustand/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: valec3 (https://skillmd.com/u/valec3)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/valec3/frontend-state-zustand

---


# Frontend State Zustand

## When to use this skill
- Managing global client state
- Simpler alternative to Redux
- Sharing state across components

## Workflow
- [ ] Create store with `create`
- [ ] Define state and actions
- [ ] Use selectors to prevent re-renders
- [ ] Split into slices for large stores
- [ ] Persist with middleware if needed

## Instructions

### Basic Store
```typescript
import { create } from 'zustand';

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

export const useStore = create<Store>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 }))
}));

// Usage
function Counter() {
  const count = useStore(state => state.count);
  const increment = useStore(state => state.increment);
  
  return <button onClick={increment}>{count}</button>;
}
```

### Slices Pattern
```typescript
const createUserSlice = (set) => ({
  user: null,
  setUser: (user) => set({ user })
});

const createCartSlice = (set) => ({
  items: [],
  addItem: (item) => set((state) => ({ 
    items: [...state.items, item] 
  }))
});

export const useStore = create((set) => ({
  ...createUserSlice(set),
  ...createCartSlice(set)
}));
```

## Resources
- Use selectors to optimize
- Split large stores into slices
- Persist with zustand/middleware/persist