Creates Zustand stores for client-side state management in React applications.
npx skills add https://github.com/gabriellst/codm --skill store-gabriellst
Please help me install this Agent Skill. Skill: store Source: https://github.com/gabriellst/codm/tree/main/.claude/skills/store Command: npx skills add https://github.com/gabriellst/codm --skill store-gabriellst
src/stores/ for app-wide state or routes/[route]/-stores/ for route-private state, with correct file placement and naming. - Middleware Patterns: Applies persist (with partialize), immer, computed selectors, and reset actions following codified project patterns (STR-01 through STR-P10). - State Placement Decision Tree: Enforces the rule that server data goes to TanStack Query, bookmarkable state goes to URL search params, form state goes to TanStack Form, and only ephemeral cross-component UI state goes to Zustand. - Use Case: You need a modal open flag and a multi-select list shared between a toolbar and a table on the products route. The Skill creates a route-scoped store with typed State/Actions interfaces, simple setters, and a reset action. ## Quick Start Create a Zustand store for the products route that tracks selected row IDs, a delete-modal open flag, and a grid/list view mode.High-intent search queries and answers about installing and using this skill.
Define separate State and Actions interfaces, combine them into a store type, then call create with a setter callback: export const useXStore = create<XStore>()(set => ({ ...initialState, setValue: (value) => set({ value }) })). Use one simple setter per state field.
Use URL search params for bookmarkable, shareable state like filters, pagination, and selected tabs. Use Zustand for ephemeral cross-component state like modal visibility, selections, and typing indicators that make no sense in a URL.
Wrap the store creator with the persist middleware using the double-invocation form: create<XStore>()(persist(set => ({...}), { name: 'key-storage' })). Use the partialize option to persist only specific fields while keeping the rest ephemeral.
No. Server data belongs in TanStack Query hooks, which provide data, isPending, and isError as the state. Mirroring fetched data into Zustand creates synchronization bugs and is flagged as a bad practice in this Skill's registry.
This happens when you read state via useStore.getState() inside JSX, which is not reactive. Use the hook with a selector instead: const value = useStore(s => s.value), which subscribes the component to that slice of state.
Route-scoped stores go in routes/[route]/-stores/useXStore.ts or a nested -stores/ folder within -components/. Global stores shared across the whole app belong in packages/app/react/src/stores/ and are exported from its index.
zuzu59Prescribe Zustand, TanStack Form, Router URL state, and Convex data access patterns.
Eng-susoCreates TypeScript Zustand stores with subscribeWithSelector middleware and separated state and actions.
Layer-FiBuilds validated React forms using TanStack Form with pre-bound field components.
aashahinConfigure client-side routing in React using React Router's declarative BrowserRouter mode.