babysit_skill

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.