How does this skill handle TypeScript with multiple slices?

It provides patterns for defining individual slice interfaces and composing them into a single RootStore type using intersection types, ensuring full type safety across the entire application.

How does selective persistence work with slices?

The skill demonstrates how to use the 'partialize' option within the Zustand persist middleware to specify exactly which state properties from which slices should be saved to storage.

When should I switch to the Zustand slices pattern?

You should transition to the slices pattern when your store exceeds 150 lines of code, contains more than 10 actions, or when multiple developers need to work on different parts of the state simultaneously.

Can one slice access the state or actions of another slice?

Yes, by using the 'get()' function provided to the StateCreator, a slice can access properties from other slices merged into the same root store at runtime.

Zustand Slices for Scalable State

Name: Zustand Slices for Scalable State
Author: Agentient

byAgentient

0•

Developer Tools

Organizes large Zustand stores into modular, type-safe slices for improved scalability and maintainability in React applications.

This skill provides a standardized architectural pattern for scaling Zustand state management in complex React applications by breaking down monolithic stores into manageable, feature-specific slices. It enables developers to maintain high code quality through TypeScript type composition, spread-based store merging, and cross-slice communication via runtime access. By implementing these best practices, teams can avoid common pitfalls like circular dependencies and oversized files, while benefiting from selective state persistence and better separation of concerns across large-scale frontend projects.

Key Features

01Modular store composition using the Zustand Slices pattern

02Comprehensive TypeScript type safety for combined slice interfaces

03Selective state persistence configuration per feature domain

04Cross-slice action support via standardized get() access

05Architectural guidance to prevent circular dependencies and store bloat

060 GitHub stars

Use Cases

01Refactoring monolithic Zustand stores that exceed 150 lines or 10 actions

02Implementing domain-driven state logic with specific persistence requirements

03Organizing complex state in multi-developer environments where features need isolation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agentient/vibekit zustand-slices-pattern-for-scalability

For use in Claude.ai and ChatGPT

Download Skill