skills.rest
johnnystefan
johnnystefanCOMMUNITY
Explore all skills by this author →
GitHub

react-19

Enforce React 19 component patterns with React Query, Zustand, and Zod validation.

Updated Mar 26, 2026
Search Tags:#react#hooks#zustand#react-query#admin-dashboard#component-patterns#form-validation
One-click install
npx skills add https://github.com/johnnystefan/test-saas-business --skill react-19-johnnystefan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-19
Source: https://github.com/johnnystefan/test-saas-business/tree/main/skills/react-19
Command: npx skills add https://github.com/johnnystefan/test-saas-business --skill react-19-johnnystefan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It keeps React 19 component development across the admin dashboard and customer app consistent by enforcing container/presentational separation, React Query for data, Zustand for client state, and strict form validation so teams do not drift into ad hoc patterns.

Core Features & Use Cases

  • Container/presentational separation ensures data fetching, loading states, and error handling stay inside containers that render pure presentation components, preventing tangled JSX.
  • Hook and form conventions mandate custom React Query hooks, Zustand stores, and Zod-backed React Hook Form to provide stable server data, client cache, and validated user input for bookings, members, and inventory flows.
  • Behavior rules cover code splitting, component sizing, semantic HTML, ARIA labels, and naming conventions so teams can build accessible, maintainable features without prop drilling or unnecessary inline reactivity.

Quick Start

Compose a React 19 container and presentation pair that relies on a React Query hook, Zustand store, and Zod-validated form as described above.

Frequently Asked Questions about react-19

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

FAQPage Schema
How do I structure React 19 components for a scalable admin dashboard?▼

Structure React 19 components using container and presentational separation. Containers manage React Query for server state, Zustand for client state, and Zod-validated React Hook Form, rendering pure presentation components to prevent tangled JSX and scattered hooks.

What is the best way to manage server and client state in React 19?▼

The best way to manage state in React 19 is separating server and client concerns. Use React Query for server state and Zustand for client cache, enforcing consistent data fetching and local state logic across dashboard and customer app features.

How do I validate forms in React 19 with Zod and React Hook Form?▼

Validate forms in React 19 by integrating Zod schemas with React Hook Form. This combination provides stable, validated user input for complex flows like bookings, members, and inventory, preventing ad hoc validation logic across your application.

Do I need React Query and Zustand to maintain consistent React 19 patterns?▼

Yes, you need React Query for server state and Zustand for client state. Combining these with container and presentational component separation enforces strict architectural rules, preventing teams from drifting into inconsistent, ad hoc dashboard development patterns.

How do I prevent prop drilling when building React 19 dashboard features?▼

Prevent prop drilling by encapsulating data fetching and local caches inside container components using React Query and Zustand. This architecture isolates loading and error states from presentational components, ensuring maintainable, accessible, and cleanly separated code.

What accessibility and behavior rules should I follow for React 19 components?▼

Follow React 19 behavior rules covering code splitting, component sizing, semantic HTML, ARIA labels, and naming conventions. These constraints ensure teams build accessible, maintainable features without prop drilling or unnecessary inline reactivity.

Related Skills

Explore More Software Engineering Skills→
tim-o-privatetim-o-private

frontend-patterns

Enforce React and TypeScript frontend standards for UI patterns, state management, and accessibility.

Official
Intermediate
NotysotyNotysoty
9

React Component Reviewer

Review React components for performance, accessibility, and architecture issues.

Community
Intermediate
mgd34msumgd34msu
6

state-management

Guide state architecture decisions for TanStack Query, Zustand, React Hook Form, and URL patterns.

Community
Intermediate
PatternsDevPatternsDev
235

presentational-container-pattern

Separate data logic from UI rendering in React components.

Official
Intermediate