react-hook-form-with-zod
React Hook Form With Zod
Use this skill for React Hook Form authoring and review. Start with sound RHF structure, then bring in Zod when the user needs schema validation, typed parsing, shared client/server validation, or modernization of stale Zod-backed forms.
Use This Skill When
- Building or reviewing React Hook Form forms
- Choosing between
register,useController,Controller, anduseFieldArray - Setting
defaultValues,formState,useFormState,setValue,reset,trigger,setError, or submit/error flows - Structuring deeply nested forms with
FormProvideranduseFormContext - Reviewing
watchversususeWatchsubscription choices - Handling numeric, date, checkbox, or custom widget input values in RHF
- Improving accessibility and error rendering for forms
- Adding Zod validation to an RHF form when schemas or shared validation are needed
- Debugging nested errors, field arrays, controlled inputs, or server validation roundtrips
- Reviewing or modernizing outdated React Hook Form + Zod examples
Out Of Scope
More from mkgp-dev/codex-skills
tanstack-query-best-practices
Best-practice guidance for designing, reviewing, debugging, and modernizing TanStack Query v5 usage across React, Preact, Solid, Vue, Svelte, and Angular. Use this skill whenever the user is working with TanStack Query or React Query, `QueryClient` setup, `useQuery`, `useMutation`, `useInfiniteQuery`, query keys, invalidation, optimistic updates, prefetching, hydration, cache tuning, stale UI, or server-state boundaries and needs current guidance instead of stale v4-era patterns.
9zod-best-practices
Core Zod schema design, validation, migration, and review guidance for TypeScript applications. Use this skill whenever the user is writing Zod schemas, reviewing Zod code, modernizing deprecated Zod patterns, choosing parsing or error-handling APIs, reasoning about type inference, composing advanced schemas, or asking for current best practices that should avoid stale Zod guidance.
8tanstack-router-best-practices
Best-practice guidance for designing, reviewing, debugging, and modernizing TanStack Router routing in React apps, especially file-based route trees, `Link` and `useNavigate`, `validateSearch`, `beforeLoad`, loaders, `notFoundComponent`, auth guards, code splitting, and TanStack Query integration. Use this whenever the user is working with `@tanstack/react-router`, TanStack Start routing, route organization, URL state, or navigation behavior and needs current v1 guidance instead of stale class-based or React Router patterns.
8zustand-state-management
Best-practice guidance for designing, reviewing, and modernizing Zustand state in modern TypeScript React apps. Use this skill whenever the user is writing or reviewing `create`, `createStore`, `useStore`, `useShallow`, `persist`, `devtools`, `subscribeWithSelector`, `createWithEqualityFn`, slices, Next.js store setup, hydration behavior, or selector-related rerender problems in Zustand v5 code.
7changelog-maintenance
Best-practice guidance for creating, reviewing, and maintaining high-signal `CHANGELOG.md` entries for versioned software projects. Use this skill whenever the user wants to add or rewrite changelog entries, organize release history, turn completed work into structured version notes, decide what belongs in `Added`/`Changed`/`Fixed`/`Deprecated`/`Removed`/`Security`, or improve noisy release notes into maintainable repository changelogs.
7shadcn-ui-best-practices
Best-practice guidance for authoring, reviewing, debugging, and modernizing shadcn/ui usage in React applications. Use this skill whenever the user is working with shadcn/ui components, `components.json`, Dialog or Sheet flows, Field or FieldGroup forms, semantic tokens, theming, Tailwind v4 integration, or wants to replace ad hoc Tailwind-heavy UI with maintainable component-first patterns.
2