react-state_skill

Overview

This skill provides a ready-to-use Zustand v5 state management pattern for React 18+ projects, focusing on minimal APIs, TypeScript-first inference, and composable middleware. It prescribes module-level store organization, selector patterns, and security-minded persistence rules to build predictable, performant client-side state. The skill also defines a mandatory agent workflow to validate research and implementation steps before and after changes.

How this skill works

The skill generates and enforces store scaffolding using the v5 currying create<State>()((set) => ({...})) syntax, TypeScript interfaces, and small, focused store files per domain. It recommends middleware composition (devtools -> persist -> immer), selector usage with useStore((s) => s.field), and useShallow for object/array selectors to minimize re-renders. The package layout, file size limits, and SOLID module locations are specified so stores remain discoverable and testable.

When to use it

• Implementing global or shared UI state (modals, theme, sidebars, toasts)
• Creating domain-specific stores (auth, cart, preferences) with TypeScript safety
• Persisting selective client-side fields to localStorage/sessionStorage
• Replacing heavy Context patterns when state logic is complex
• Adopting a small-bundle, React 18-native state library for new projects

Best practices

• Always use v5 currying syntax for full TypeScript inference: create<T>()(set => ({ }))
• Select state with useStore((s) => s.field) and wrap object/array selectors in useShallow
• Keep one store per domain and locate stores under modules/[feature]/src/stores/
• Persist only necessary fields; never persist auth tokens—use httpOnly cookies instead
• Compose middleware in the recommended order and enable devtools only in development

Example use cases

• A UI module exposing theme, darkMode, and toggle functions consumed across components
• Cart store with add/remove/selectors and partial persist of items (not sensitive data)
• Auth store that holds user metadata client-side while tokens remain in httpOnly cookies
• Feature module scaffolding with store.ts, store.interface.ts, and a use-store hook for selectors