Coordinate React Hook Form and Zod forms with automatic API error mapping.
npx skills add https://github.com/chinomartinez/SmartPocket --skill frontend-forms
Please help me install this Agent Skill. Skill: frontend-forms Source: https://github.com/chinomartinez/SmartPocket/tree/main/.agents/skills/frontend-forms Command: npx skills add https://github.com/chinomartinez/SmartPocket --skill frontend-forms
React Hook Form + Zod patterns for SmartPocket forms, enabling consistent validation, error handling, and API integration across create/edit flows with a modern, low-boilerplate pattern.
Configure a new form using the Modern Form Pattern to validate with Zod, map API errors to fields automatically, and coordinate create/edit workflows with a single form state.
High-intent search queries and answers about installing and using this skill.
You can handle API errors in React Hook Form by integrating a useFormErrorHandler hook that auto-maps server-side validation errors to specific form fields. This pattern automatically displays API errors via FormMessage components without requiring manual field updates.
The best way to sync React Hook Form values without useEffect is using the watch() function for value-based synchronization. This approach aligns reactive data updates and edit data directly within the form state, avoiding side-effect boilerplate.
You can unify create and edit form mutations with TanStack Query by using an activeMutation pattern. This approach manages loading states and form resets in a single place, allowing one form state to coordinate both creation and editing workflows.
To set up Zod validation with React Hook Form, you configure a schema resolver that connects Zod type-safety rules to the form state. This pattern enforces consistent validation across create and edit flows while maintaining strict type-safety.
Form reset issues when closing a React modal usually occur due to uncentralized state management. Implementing a centralized reset on modal close pattern ensures the form state is properly cleared and synchronized with the activeMutation lifecycle.
Yes, you can display form errors across three layers simultaneously. This pattern routes API errors to field-level FormMessage components, inline notifications, and toast popups, providing comprehensive user feedback for both client-side and server-side validation failures.
Bbeierle12Build React forms with React Hook Form and Zod validation.
webdevcodyScaffold create/edit form flows in TanStack Start apps with shared Zod schemas.
xyqyearIntegrate sonner toast notifications with shadcn/ui components in React.
tanaka-mambingeValidate React form inputs using react-hook-form and Yup schemas.
