stores

Centralize UI state in typed Zustand stores under src/stores.

1|Updated Jan 12, 2026

Search Tags:#typescript #react #zustand #state-management #stores #ui-state

Ready to run

npx skills add https://github.com/jorggerojas/next-skeleton-page --skill stores

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: stores
Source: https://github.com/jorggerojas/next-skeleton-page/tree/main/.cursor/skills/stores
Command: npx skills add https://github.com/jorggerojas/next-skeleton-page --skill stores

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The UI state is often scattered across components, leading to prop drilling and inconsistent behavior. This skill provides a standardized approach to centralize UI-related state using Zustand stores stored under src/stores/.

Core Features & Use Cases

UI state only: dedicated stores for modals, sidebars, loading indicators, and toggles to keep server data separate.
Export pattern: centralize exports from src/stores/index.ts for convenient imports.
Guided usage: examples show how to interact with the store in components and how to create new stores following the pattern.

Quick Start

Create a new UI store file under src/stores, export it from the index, and use it in a component to control a modal.

Frequently Asked Questions about stores

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

FAQPage Schema

How do I centralize UI state in a Next.js project to stop prop drilling?▼

You can centralize UI state in Next.js by defining small, typed Zustand stores under src/stores and exporting them from a central index file. This pattern eliminates prop drilling for modals, sidebars, and loading indicators.

What is the best way to manage modals and sidebars in React without prop drilling?▼

The best way to manage modals and sidebars in React is using dedicated Zustand stores. This approach keeps UI toggles centralized and accessible across components, ensuring predictable behavior without passing props down the tree.

Should I put server data and UI state in the same Zustand store?▼

You should not put server data and UI state in the same store. This pattern separates UI state, like loading indicators and toggles, into dedicated Zustand stores to keep server data management isolated and predictable.

How do I create a new typed Zustand store for a loading indicator?▼

To create a typed Zustand store for a loading indicator, define a small store file under src/stores, export it from src/stores/index.ts, and use it in your component to control the loading state predictably.

Can I use Zustand for state management across multiple pages in a TypeScript app?▼

Yes, you can use Zustand for state management across multiple pages in a TypeScript app. By centralizing exports from src/stores/index.ts, you ensure consistent and typed UI state access throughout your project.