react-patterns

Generate React feature modules with React Query, Zustand, and Testing Library.

6|1|Updated Mar 30, 2026

Search Tags:#typescript #react #vite #zustand #react-query #testing-library #msw

Ready to run

npx skills add https://github.com/wesleyosantos91/multi-agents --skill react-patterns-wesleyosantos91

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-patterns
Source: https://github.com/wesleyosantos91/multi-agents/tree/main/devin/.devin/skills/react-patterns
Command: npx skills add https://github.com/wesleyosantos91/multi-agents --skill react-patterns-wesleyosantos91

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reduces uncertainty and rework by providing production-ready React patterns for organizing code, managing state, handling async data, and writing reliable tests.

Core Features & Use Cases

Project structure & composition idioms: organizes React code with feature modules, colocation, and small composable components.
State management patterns: uses React Query for server state and Zustand for client state to avoid misuse of local state for remote data.
Production-grade UI quality: includes form validation, error boundaries, MSW mocking, performance optimizations, and accessibility guidance.
Testing approach for confidence: demonstrates Testing Library + Vitest with QueryClientProvider wrappers and hook testing strategies.

Quick Start

Use the react-patterns skill to generate a React (Vite + TypeScript) feature module with React Query hooks, a Zustand store for client state, React Hook Form + Zod validation, MSW handlers for API mocks, and Testing Library tests for key UI behaviors.

Frequently Asked Questions about react-patterns

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

FAQPage Schema

How do I structure a React app with Vite and TypeScript to separate server and client state?▼

Structure your React app by using React Query for server state and Zustand for client state, organizing code into feature modules with colocated, composable components to avoid misusing local state for remote data.

What is the best way to validate forms in a React Vite project?▼

The best way to validate forms in React is using React Hook Form combined with Zod, ensuring production-grade UI quality through structured schema validation within feature modules.

How do I test React Query hooks with Testing Library and Vitest?▼

Test React Query hooks by wrapping them in QueryClientProvider during Vitest testing, using Testing Library strategies to verify key UI behaviors and hook execution outcomes.

How do I mock API requests in React testing environments?▼

Mock API requests in React testing environments by setting up MSW (Mock Service Worker) handlers to intercept network calls and provide reliable test mocks for your components.

Can I use Zustand selectors for client state in feature modularization?▼

Yes, you can use Zustand stores with selectors for client state within feature modules, ensuring structured state management alongside React Query for server state and Error Boundaries for UI stability.

When should I use Error Boundaries in a React application?▼

Use Error Boundaries in React applications to handle UI errors gracefully, ensuring production-grade quality by catching rendering errors within feature modules and preventing full app crashes.