skills.rest
jvsandhu
jvsandhuCOMMUNITY
Explore all skills by this author →
GitHub

react_expert

Implements React 19 components, hooks, state management, and validated forms with TypeScript.

Updated Jan 14, 2026
Search Tags:#typescript#state management#frontend#react#server components#react hook form#zod validation
One-click install
npx skills add https://github.com/jvsandhu/agentic-skills --skill react-expert-jvsandhu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react_expert
Source: https://github.com/jvsandhu/agentic-skills/tree/main/skills/react_expert
Command: npx skills add https://github.com/jvsandhu/agentic-skills --skill react-expert-jvsandhu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-hook-form, zod, @hookform/resolvers, and includes references (resource) components.

What problem does it solve? Building production-grade React applications requires navigating Server Components, hooks, state management, performance optimization, and form validation, which is error-prone without structured guidance. ## Core Features & Use Cases - React 19 Architecture: Guides Server/Client component splits, the use() hook, Suspense, form actions with useActionState, and error boundaries. - State & Data Fetching: Covers Context, Zustand, Redux, and TanStack Query patterns with TypeScript strict typing. - Form Validation: Provides React Hook Form plus Zod schema validation patterns, including dynamic fields with useFieldArray, multi-step wizards, async validation, and shadcn/ui integration. - Use Case: When building a signup flow, use this Skill to scaffold a type-safe multi-step form with Zod schemas shared between client and server, accessible error display, and debounced async username checks. ## Quick Start Ask the agent to build a React 19 login form with Zod validation and Server Component data fetching using TypeScript.

Frequently Asked Questions about react_expert

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

FAQPage Schema
How do I validate React forms with Zod and React Hook Form?▼

Define a Zod schema, infer its TypeScript type with z.infer, and pass zodResolver(schema) to useForm. Register inputs with register() or use Controller for custom components, then display errors from formState.errors.

How do I use React 19 Server Components with data fetching?▼

Keep data fetching in Server Components and pass data to Client Components as props. Use the use() hook with Suspense boundaries for async data in Client Components, or integrate TanStack Query for client-side fetching.

Zustand vs Redux vs Context for React state management?▼

Use local state or Context for simple sharing, Zustand for lightweight global state, and Redux Toolkit for complex applications needing devtools and middleware. The Skill covers all three with TypeScript patterns.

Why does my React form show uncontrolled to controlled warnings?▼

This happens when defaultValues are missing in useForm. Always set defaultValues for every registered field so inputs start controlled, preventing the warning and inconsistent validation behavior.

How do I build a multi-step form wizard in React?▼

Combine per-step Zod schemas into a full schema, then use trigger() with the current step's field names to validate before advancing. Store the step in local state and render fields conditionally.

When should I not use React Hook Form Controller?▼

Avoid Controller for standard HTML inputs since register() is simpler and faster. Reserve Controller for third-party components like React Select or date pickers that do not expose a ref.

Related Skills

Explore More Software Engineering Skills→
Marwan78888Marwan78888
16

react-expert

Implement React 19+ patterns with Server Components and modern hooks.

Community
Advanced
lucasilverentandlucasilverentand
3

hono-deployment

Deploy Hono applications across multiple runtimes and hosting platforms.

Community
Advanced
PrasadTelasulaPrasadTelasula

component-testing

Test React components with React Testing Library and Playwright for frontend correctness.

Community
Intermediate
open-circleopen-circle
1.2k

formisch

Implement schema-based form state management and validation across eight JavaScript frameworks.

Official
Intermediate