How does it handle complex form structures?

It leverages React Hook Form's useFieldArray and Zod schema validation to manage dynamic lists and nested objects with full type safety.

Which state libraries does this skill support?

The skill includes specialized patterns for React Query (TanStack Query), Zustand, Jotai, React Hook Form, and URL state management using nuqs or native hooks.

Does it support optimistic UI updates?

Yes, it provides comprehensive boilerplate for React Query mutations, including cache cancellation, snapshotting for rollbacks, and post-mutation invalidation.

Can this be used with Next.js and SSR?

Absolutely. The skill includes specific patterns for prefetching data in server components and hydrating the client-side cache using HydrationBoundary.

State Management Patterns

Name: State Management Patterns
Author: antoineschaller

byantoineschaller

•

開発者ツール

Implements industry-standard state management patterns for modern web applications using React Query, Zustand, Jotai, and URL-state libraries.

This skill equips Claude with standardized implementation patterns for managing the four pillars of application state: server state, client UI state, form state, and URL state. It provides pre-configured templates for TanStack Query (React Query) with optimistic updates, persistent Zustand stores, atomic Jotai atoms, and type-safe forms via React Hook Form and Zod. By following these patterns, developers can ensure their applications remain performant, maintainable, and consistent across different architectural layers, including handling complex SSR hydration and synchronization between the UI and URL parameters.

主な機能

01Atomic and derived state units using Jotai

021 GitHub stars

03URL-synchronized state management for advanced filtering and pagination

04Type-safe form validation using React Hook Form and Zod

05Server state orchestration with TanStack Query and optimistic updates

06Global and persistent client state management via Zustand

ユースケース

01Implementing robust, multi-step forms with real-time validation and error handling

02Creating shareable UI states where filters and searches are persisted in the URL

03Building data-heavy dashboards with complex caching and refetching logic

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add antoineschaller/cortex-skills state-management

For use in Claude.ai and ChatGPT

Download Skill