---
name: valec3/frontend-state-zustand
source: https://app.decimal.ai/s/valec3-frontend-state-zustand@1/SKILL.md
source_sha256: 42dc379c2119
---

# 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