skills.rest
javierhbr
javierhbrCOMMUNITY
Explore all skills by this author →
GitHub

react-fsd-zustand-ui

Enforce Feature-Sliced Design, Zustand state management, and correct useEffect usage in React applications.

Updated Feb 17, 2026
Search Tags:#state management#react#zustand#useEffect#fsd#ui patterns
One-click install
npx skills add https://github.com/javierhbr/random-poc --skill react-fsd-zustand-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-fsd-zustand-ui
Source: https://github.com/javierhbr/random-poc/tree/main/custom-skills/react-fsd-zustand-ui
Command: npx skills add https://github.com/javierhbr/random-poc --skill react-fsd-zustand-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the development of React applications by enforcing architectural best practices (Feature-Sliced Design), ensuring correct useEffect usage, and implementing efficient Zustand state management for complex UI states.

Core Features & Use Cases

  • Architectural Guidance: Enforces Feature-Sliced Design (FSD) principles for maintainable code organization.
  • State Management: Guides the use of Zustand for shared client state, avoiding global state for local UI needs.
  • Effect Handling: Promotes correct useEffect usage, treating it as an escape hatch for synchronization, not for derived state or event handling.
  • UI States: Ensures robust handling of loading, error, empty, and success states for asynchronous operations.
  • Use Case: Refactor a complex React feature to adhere to FSD, optimize state management with Zustand, and ensure all async operations display appropriate loading, error, and empty states.

Quick Start

Use the react-fsd-zustand-ui skill to refactor the UserProfile component to follow FSD principles and manage its state with Zustand.

Frequently Asked Questions about react-fsd-zustand-ui

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

FAQPage Schema
How do I organize React state management with Zustand and Feature-Sliced Design?▼

Organize React state with Zustand by reserving it strictly for shared client state, while Feature-Sliced Design structures your codebase into maintainable layers to prevent state synchronization issues and architectural drift.

When should I use useEffect for state synchronization in React?▼

Use useEffect in React strictly as an escape hatch for synchronizing with external systems, not for deriving state or handling events, ensuring cleaner component logic and avoiding unnecessary re-renders.

What is the best way to handle asynchronous UI states in React using FSD?▼

Handle asynchronous UI states in React by explicitly managing loading, error, empty, and success conditions within Feature-Sliced Design boundaries to ensure robust user feedback during data fetching.

Can I use global state for local UI needs in a React FSD architecture?▼

Avoid global state for local UI needs in a React FSD architecture; instead, keep component-specific state local and use Zustand exclusively for shared client state to maintain strict layer boundaries.

How do I refactor a React component to follow Feature-Sliced Design principles?▼

Refactor a React component by applying Feature-Sliced Design layer rules to separate concerns, migrating shared state to Zustand, and correcting useEffect usage to align with architectural best practices.

Related Skills

Explore More Software Engineering Skills→
AdemKaoAdemKao

fsd-slice

Generate standardized Feature-Sliced Design folder structures for React TypeScript projects.

Community
Intermediate
wsxwj123wsxwj123
7

artifacts-builder

Bundle React-based frontends into a single HTML artifact.

Community
Advanced
M-Abdullah07M-Abdullah07
1

react-state-management

Coordinate React state across local, global, and server layers.

Community
Advanced
SHAJAR5110SHAJAR5110

state-management-expert

Configure Redux Toolkit and Zustand stores for TypeScript React apps.

Community
Advanced