a5c-ai/babysitter
Overview
This skill provides practical patterns and TypeScript-ready examples for building Zustand stores, middleware composition, persistence, slices, and DevTools integration. It focuses on type-safe store creation, selector optimization, async actions, and smooth React integration to reduce boilerplate and improve runtime performance. Use it to standardize state management across small to medium React apps or to migrate from heavier solutions.
How this skill works
The skill generates concrete store templates and patterns: basic stores, middleware-wrapped stores (devtools, persist, immer), slice composition for modular state, and async action examples. It explains selector strategies (including shallow comparisons and computed selectors) and shows how to wire subscriptions and optimize component re-renders. All examples use TypeScript interfaces and StateCreator signatures so the output is ready to drop into a codebase.
When to use it
- When you need a lightweight global state solution with strong TypeScript support.
- When you want persistent client state (localStorage) with minimal setup.
- When splitting large state into reusable slices for modular architecture.
- When migrating from Redux or Context to a simpler, performant store.
- When optimizing component re-renders with selectors and shallow comparisons.
Best practices
- Define clear TypeScript interfaces for store shape and actions to keep type-safety end-to-end.
- Use selectors and shallow comparisons to limit component re-renders.
- Wrap complex nested updates with immer to keep code readable and immutable-friendly.
- Persist only the minimal state subset (partialize) to avoid storing ephemeral data.
- Split responsibilities into slices to improve testability and maintainability.
Example use cases
- Cart store for e-commerce with add/remove/update, totals, and persistence across sessions.
- User store with preferences persisted and DevTools for debugging authentication flows.
- App store composed from auth and UI slices for a Next.js or T3-stack project.
- Data fetching store with loading/error handling and an async fetch action.
- Selector-driven components that read computed values like item counts to reduce renders.
FAQ
Yes. Compose middleware by wrapping the StateCreator in order (e.g., devtools(persist(immer(createSlice)))) and configure options like persist name and partialize.
How do slices help with scaling state?
Slices keep related state and actions colocated and let you merge them into one store. This improves organization, testability, and incremental refactors.
When should I prefer selectors over reading full state?
Use selectors when components only need specific fields or computed values. That minimizes re-renders and improves performance, especially with derived values.
