スキル一覧に戻る
YuniorGlez

zustand-expert

by YuniorGlez

Transform your Gemini CLI into a high-performance autonomous agentic environment. This repository provides a curated collection of tactical skills, advanced agent configurations, and automated protocol hooks used by elite engineering teams.

0🍴 2📅 2026年1月25日
GitHubで見るManusで実行

SKILL.md


name: zustand-expert id: zustand-expert version: 1.2.0 description: "Senior State Architect for React 19 and Next.js 16.1+ applications. Specialist in Zustand v5, SSR-safe stores, and slices pattern for large-scale state management."

🧠 Skill: zustand-expert

Description

Senior state architect specializing in Zustand v5 for modern React applications. Expert in solving hydration mismatches, preventing state leakage in SSR (Next.js), and implementing scalable architectures using the Slices Pattern and advanced middleware (Persist, Immer).

Core Priorities

  1. SSR Safety (Anti-Singleton): Preventing shared state between requests in Next.js by using per-request stores via React Context.
  2. Hydration Integrity: Managing persistence and asynchronous rehydration to ensure sub-100ms LCP without flickering.
  3. Modular Scalability: Enforcing the Slices Pattern for complex domain state.
  4. Performance Optimization: Strategic use of selectors and useSyncExternalStore (Zustand v5 native).

🏆 Top 5 Gains in Zustand v5 (2026)

  1. Native useSyncExternalStore: Full support for React 18/19 concurrent rendering with zero "tearing" issues.
  2. Smaller Footprint: Dropped legacy support, leading to a leaner, faster bundle.
  3. Improved Type Safety: Native TypeScript support for combined stores and middleware.
  4. Context-Store Pattern: Official standard for SSR to avoid user-data leakage.
  5. Manual Rehydration Control: skipHydration: true for fine-grained control over when persisted state hits the UI.

Table of Contents & Detailed Guides

1. SSR & Next.js 16 PatternCRITICAL

  • The Provider Pattern (Ref-based store creation)
  • Preventing Singleton data leaks
  • Initializing state from Server Props

2. The Slices PatternHIGH

  • Modularizing large stores
  • Type-safe combined states
  • Sharing state between slices

3. Persistence & HydrationHIGH

  • persist middleware with skipHydration
  • Migration strategies for schema changes
  • Handling Hydration Mismatch in Next.js

4. Middleware & ImmutabilityMEDIUM

  • immer for complex nested state
  • Custom middleware for logging/analytics
  • Testing stores with Vitest/Jest

Quick Reference: The "Do's" and "Don'ts"

Don'tDo
export const useStore = create(...)Use StoreContext for SSR
Monolithic store fileUse Slices Pattern
useStore(state => state) (Full object)Use Atomic Selectors (state.id)
Direct MutationUse immer middleware or functional updates
useEffect for hydration syncUse persist with skipHydration
Store read in RSCUse Props to pass data to Client Components

Optimized for Zustand v5 and React 19.2+. Updated: January 22, 2026 - 15:03

スコア

総合スコア

60/100

リポジトリの品質指標に基づく評価

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

0/10
説明文

100文字以上の説明がある

+10
人気

GitHub Stars 100以上

0/15
最近の活動

3ヶ月以内に更新がある

0/10
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

+5
タグ

1つ以上のタグが設定されている

0/5

レビュー

💬

レビュー機能は近日公開予定です