skills.rest
Chia1104
Chia1104COMMUNITY
Explore all skills by this author →
Website𝕏@chia7423GitHub

zustand

Implements Zustand store patterns for slices, reducers, selectors, and optimistic updates.

1|Updated Aug 11, 2026
Search Tags:#typescript#state management#Zustand#React#optimistic updates#reducer#slices
One-click install
npx skills add https://github.com/Chia1104/agent-air --skill zustand-chia1104
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: zustand
Source: https://github.com/Chia1104/agent-air/tree/main/skills/shared/zustand
Command: npx skills add https://github.com/Chia1104/agent-air --skill zustand-chia1104

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Designing Zustand stores for a large React application leads to inconsistent state shapes, tangled actions, and slow list rendering when heavy detail data is mixed into list payloads. This Skill codifies the LobeHub conventions for structuring stores so state stays predictable and performant. ## Core Features & Use Cases - State Shape Guidance: Separates lightweight list-item arrays from id-keyed detail maps with per-item loading states, sourcing types from @lobechat/types instead of database types. - Action Hierarchy & Optimistic Updates: Defines public actions, internal_* business logic, and internal_dispatch* reducer methods, with a standard optimistic update flow for create and update operations. - Class-Based Slice Composition: Migrates plain StateCreator slices to class-based action implementations composed with flattenActions, including multi-class slices and store-access augmentation types. - Use Case: When adding a new benchmark feature, use this Skill to scaffold the slice with a benchmarkList array, a benchmarkDetailMap record, a typed Immer reducer, and selectors following the established naming conventions. ## Quick Start Use the zustand skill to design the state structure and actions for a new store slice with list and detail views.

Frequently Asked Questions about zustand

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure Zustand store state for list and detail pages?▼

Use a simple array of lightweight list-item types for list views and a Record<string, Detail> map for cached detail pages. Keep list types as subsets that exclude heavy fields rather than extending the detail type, and track per-item loading with an id array.

How to implement optimistic updates in Zustand?▼

Dispatch a temporary entity to the reducer immediately, call the backend service, then refresh for consistency. Create and update operations use this pattern, while delete operations skip optimistic updates because recovery is complex and destructive.

When should I use a reducer versus simple set in Zustand?▼

Use a reducer when managing object lists or maps, performing optimistic updates, or handling complex state transitions. Use simple set for toggling booleans, updating simple values, or setting single state fields.

Can I compose multiple action classes in one Zustand slice?▼

Yes, compose multiple action classes using flattenActions, which binds methods to the original class instances and supports prototype methods and class fields. Do not spread class instances directly, as that loses method bindings.

Why should store types come from a types package instead of the database package?▼

Store types should come from @lobechat/types rather than @lobechat/database to keep frontend state decoupled from database schemas. This lets list types exclude heavy fields and add computed UI fields without inheriting persistence concerns.

Related Skills

Explore More Software Engineering Skills→
duwenjiduwenji

store-data-structures

Design Zustand store structures with list arrays and detail maps for optimistic updates.

Community
Intermediate
mabdulraufmabdulrauf

data-fetching

Centralize API calls through a service layer with Zustand and SWR hooks.

Community
Intermediate
WesleyMarinhoWesleyMarinho

angular-http

Fetch data in Angular using httpResource(), resource(), and HttpClient.

Community
Intermediate
gonzoblascogonzoblasco
1

react-state-management

Implements React state management patterns using Redux Toolkit, Zustand, Jotai, and TanStack Query.

Community
Intermediate