skills.rest
Eng-suso
Eng-susoCOMMUNITY
Explore all skills by this author →
GitHub

zustand-store-ts

Creates TypeScript Zustand stores with subscribeWithSelector middleware and separated state and actions.

Updated Aug 10, 2026
Search Tags:#typescript#state management#store#react#middleware#zustand#selectors
One-click install
npx skills add https://github.com/Eng-suso/BK-GPT --skill zustand-store-ts-eng-suso
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: zustand-store-ts
Source: https://github.com/Eng-suso/BK-GPT/tree/main/.claude/skills/zustand-store-ts
Command: npx skills add https://github.com/Eng-suso/BK-GPT --skill zustand-store-ts-eng-suso

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires zustand, and includes assets (resource) components.

What problem does it solve? Setting up Zustand stores in TypeScript often leads to inconsistent patterns, missing middleware, and unnecessary component re-renders caused by poor selector usage. This Skill enforces a proven store structure so your React state management stays type-safe and performant. ## Core Features & Use Cases - Standardized Store Template: Copy a ready-made template and replace placeholders to scaffold a fully typed store in seconds. - subscribeWithSelector Middleware: Ensures every store supports fine-grained subscriptions outside React components. - State/Action Separation: Defines distinct State and Actions interfaces combined into a single store type for clarity. - Use Case: When adding a new Project store to your app, generate the store with proper selectors, export it from the store index, and add tests following the documented integration steps. ## Quick Start Ask the AI to create a new Zustand store for your chosen domain using the zustand-store-ts patterns with TypeScript types and subscribeWithSelector middleware.

Frequently Asked Questions about zustand-store-ts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Zustand store with TypeScript?▼

Define separate State and Actions interfaces, combine them into a store type, and pass it to create with the subscribeWithSelector middleware. Copy the provided template and replace the StoreName and description placeholders to scaffold it quickly.

How to subscribe to Zustand state outside React components?▼

Use store.subscribe with a selector function and a callback, which requires the subscribeWithSelector middleware. This lets you react to specific state slices, such as a selected ID, without rendering a component.

Why does my Zustand component re-render too often?▼

Destructuring the whole store with useMyStore() subscribes to every state change. Use individual selectors like useMyStore((state) => state.items) so components only re-render when the selected slice changes.

What is subscribeWithSelector middleware in Zustand?▼

subscribeWithSelector is a Zustand middleware that enables selector-based subscriptions via store.subscribe. Wrap your store creator with it so you can listen to specific state slices both inside and outside React.

When should I separate state and actions in Zustand?▼

Separate State and Actions interfaces whenever a store has both data and methods, which is nearly always. This improves type readability, makes testing easier, and keeps the store contract explicit as it grows.

Related Skills

Explore More Software Engineering Skills→
FixPortalFixPortal

scaffold-frontend

Bootstrap Vite + React + TypeScript frontends from canonical templates.

Official
Intermediate
pch007pch007
1

redux

Connect json-render's StateStore to a Redux store for React UI state.

Community
Intermediate
davila7davila7
30.5k

zustand-store-ts

Creates Zustand stores with TypeScript types and subscribeWithSelector middleware.

Community
Basic
algusaemalgusaem

react-state-management

Guide React state management across local, global, and server state.

Community
Advanced