# zustand-state-management

Задаёт правила архитектуры сторов Zustand в React и TypeScript: от нарезки слайсов до SSR и тестов. Помогает избежать лишних ререндеров и ошибок гидратации.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 959 установок · ★ 286
- Автор: Mindrally
- Лицензия: Apache-2.0 · policy=mirror · лицензия открытая, файл — в исходнике
- Исходник: https://github.com/Mindrally/skills/tree/HEAD/zustand-state-management/SKILL.md
- Обновлён: 2026-10-08
- HTML: https://affpapa.org/nevibecode/skills/zustand-state-management

## Что делает

Скилл внедряет строгие правила проектирования хранилищ Zustand в связке с React и TypeScript. Он запрещает превращать клиентский стор в свалку серверных ответов или держать в нём состояние единичных кнопок. Локальный UI остаётся в `useState`, а серверные запросы уходят в TanStack Query или SWR. Стор остаётся чистым. Большие хранилища скилл делит на типизированные предметные слайсы, объединяя их на внешней границе.

Особое внимание уделено селекторам. Чтобы исключить повторные рендеры при возврате объектов или кортежей, скилл требует использовать `useShallow` из `zustand/react/shallow`. В экшенах запрещены анонимные сеттеры и глубокие мутации без `immer`. Браузерные токены или пароли сохранять через `persist` нельзя: чувствительные данные не должны оседать в открытом хранилище браузера.

При работе с Next.js и React Server Components скилл изолирует хранилища. Серверные компоненты не должны читать браузерные сторы. Это предотвращает рассинхронизацию. Для рендеринга на сервере создаются отдельные vanilla-сторы под каждый запрос, что исключает утечку данных между разными пользователями.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill zustand-state-management -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/zustand-state-management/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/zustand-state-management/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill zustand-state-management -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/zustand-state-management/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill zustand-state-management -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/zustand-state-management/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Mindrally/skills zustand-state-management
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/zustand-state-management/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill zustand-state-management -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/Mindrally/skills --path zustand-state-management
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/zustand-state-management/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill zustand-state-management -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/Mindrally/skills/tree/HEAD/zustand-state-management/SKILL.md

## Когда брать
- разделить монолитный стор приложения на типизированные слайсы
- устранить лишние ререндеры компонентов через селекторы и `useShallow`
- настроить `persist` с миграциями без сохранения токенов в браузер
- изолировать клиентские сторы от React Server Components и SSR
- протестировать экшены стора напрямую без рендеринга компонентов

## Примеры запросов агенту
- Спроектируй Zustand-стор для корзины заказов с типизированными экшенами и селектором через useShallow.
- Настрой сохранение параметров фильтра через persist с миграциями и версионированием.
- Переведи глобальный стор на изолированные слайсы и напиши модульные тесты для экшенов.

## Похожие
- [state-management](https://affpapa.org/nevibecode/skills/state-management.md) — скилл · 783 установки
- [frontend-state-management](https://affpapa.org/nevibecode/skills/frontend-state-management.md) — скилл · 480 установок
- [zustand](https://affpapa.org/nevibecode/skills/pproenca-zustand.md) — скилл · 446 установок
- [React State Management taste](https://affpapa.org/nevibecode/prompts/react-state-management-taste.md) — промпт · ★ 174597
- [zustand-patterns](https://affpapa.org/nevibecode/skills/zustand-patterns.md) — скилл · 1400 установок
- [zustand-5](https://affpapa.org/nevibecode/skills/zustand-5.md) — скилл · 911 установок

Из того же набора: [mindrally/skills](https://affpapa.org/nevibecode/by/mindrally/skills.md) — 168 карточек

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md