react-hook-form-zod

572

jezweb

Build type-safe validated forms using React Hook Form v7 and Zod v4. Single schema works on client and server with full TypeScript inference via z.infer. Use when building forms, multi-step wizards, or fixing uncontrolled warnings, resolver errors, useFieldArray issues, performance problems with large forms.

shadcn-ui

241

MadAppGang

shadcn/ui component library patterns. Covers CLI usage, installation, component categories, theming with CSS variables, dark mode setup, and integration with React Hook Form + Zod. Use when adding UI components, setting up design systems, or implementing forms with shadcn/ui.

shadcn-ui

126

giuseppe-trisciuoglio

Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.

form-validation

95

aj-geddes

Implement form validation using React Hook Form, Formik, Vee-Validate, and custom validators. Use when building robust form handling with real-time validation.

Tailwind v4 + shadcn/ui

89

blockmatic

Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Includes component composition patterns, accessibility guidelines, and React Hook Form integration. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui dark mode, composing/extending components, implementing forms, ensuring accessibility, or fixing colors not working, theme not applying, CSS variables broken, tw-animate-css errors, or migrating from v3.

form-patterns

76

emanueleielo

Form handling with React Hook Form and Zod validation

dev-engineer

74

wasintoh

Adds logic, state management, TypeScript types, and CRUD operations to UI. Works AFTER ui-first-builder creates the interface. Implements Zustand stores, form handling with React Hook Form + Zod, and prepares for backend connection. Triggers: add logic, add functionality, make it work, state management, form validation, data operations, TypeScript types.

shadcn

56

pproenca

shadcn/ui component library best practices and patterns (formerly shadcn-ui). This skill should be used when writing, reviewing, or refactoring shadcn/ui components to ensure proper architecture, accessibility, and performance. Triggers on tasks involving Radix primitives, Tailwind styling, form validation with React Hook Form, data tables, theming, or component composition patterns.

react

56

pproenca

React 19 performance optimization guidelines for concurrent rendering, Server Components, actions, hooks, and memoization (formerly react-19). Use this skill when writing React 19 components, using concurrent features, or optimizing re-renders. This skill does NOT cover Next.js-specific features like the App Router, next.config.js, or Next.js caching (use the nextjs-16-app-router skill). For client-side form validation with React Hook Form, use the react-hook-form skill.

zod

56

pproenca

Zod schema validation best practices for type safety, parsing, and error handling. This skill should be used when defining z.object schemas, using z.string validations, safeParse, or z.infer. This skill does NOT cover React Hook Form integration patterns (use react-hook-form skill) or OpenAPI client generation (use orval skill).

react-hook-form

56

pproenca

React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, and useFieldArray. This skill should be used when building client-side controlled forms with React Hook Form library. This skill does NOT cover React 19 Server Actions, useActionState, or server-side form handling (use react-19 skill for those).

forms-validation

29

omer-metin

Expert at building robust form experiences. Covers React Hook Form, Zod validation, server actions, progressive enhancement, error handling, and accessible form patterns. Use when "form, react-hook-form, zod, validation, form validation, useForm, form errors, server action form, forms, validation, react-hook-form, zod, server-actions, accessibility" mentioned.

form-mutation

26

cap-collectif

Crée un formulaire React Hook Form connecté à une mutation Relay avec validation yup et gestion d'erreurs. Utiliser pour formulaires avec soumission GraphQL.

react-hook-form-zod

25

ovachiever

Build type-safe validated forms in React using React Hook Form and Zod schema validation. Single schema works on both client and server for DRY validation with full TypeScript type inference via z.infer. Use when: building forms with validation, integrating shadcn/ui Form components, implementing multi-step wizards, handling dynamic field arrays with useFieldArray, or fixing uncontrolled to controlled warnings, resolver errors, async validation issues.

agentic-jumpstart-react

21

webdevcody

React 19 patterns and best practices for TanStack Start applications with shadcn/ui, React Hook Form, Zod, Framer Motion, and TanStack Query. Use when building React components, forms, handling state, data fetching, animations, drag and drop, toasts, modals, or when the user mentions React, hooks, components, or UI.

implement-frontend

18

mblode

Standards for implementing and reviewing React/TypeScript/Next.js features in codebases that use React Hook Form, Zod, React Query or Connect Query, and proto-generated API types. Use when building frontend forms, hooks/components, state flows, and type-safe UI mappings in this stack.

shadcn-ui

12

dirnbauer

Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.

react-hook-form

9

TerminalSkills

Build performant forms in React with React Hook Form. Use when a user asks to handle form validation, build complex multi-step forms, integrate forms with Zod schemas, or reduce form re-renders in React.

react-hook-form-zod

9

jackspace

This skill provides comprehensive knowledge for building type-safe, validated forms in React using React Hook Form and Zod schema validation. Use when: building forms with validation in React, integrating Zod schema validation with React Hook Form, using shadcn/ui Form or Field components, implementing client and server-side validation with a single schema, handling complex validation scenarios (nested objects, arrays, conditional fields, async validation), building multi-step forms or wizards, implementing dynamic form fields with useFieldArray, optimizing form performance and re-renders, ensuring accessible form error handling, or debugging form validation issues. Keywords: react-hook-form, useForm, zod validation, zodResolver, @hookform/resolvers, form schema, register, handleSubmit, formState, useFieldArray, useWatch, useController, Controller, shadcn form, Field component, client server validation, nested validation, array field validation, dynamic fields, multi-step form, async validation, zod refine, z.infer, form error handling, uncontrolled to controlled, resolver not found, schema validation error

backend-zod

9

petbrains

TypeScript-first schema validation library. Use for ALL input validation in TypeScript projects — API inputs, form data, environment variables, config files. Essential companion for tRPC (required), React Hook Form, and any data boundary. Choose Zod when you need runtime validation with automatic TypeScript type inference.

form-react

7

Bbeierle12

Production-ready React form patterns using React Hook Form (default) and TanStack Form with Zod integration. Use when building forms in React applications. Implements reward-early-punish-late validation timing.

component-library

7

Bbeierle12

Comprehensive React component library with 30+ production-ready components using shadcn/ui architecture, CVA variants, Radix UI primitives, and Tailwind CSS. Use when users need to (1) Create React UI components with modern patterns, (2) Build complete component systems with consistent design, (3) Implement accessible, responsive, dark-mode-ready components, (4) Generate form components with React Hook Form integration, (5) Create data display components like tables, cards, charts, or (6) Build navigation, layout, or feedback components. Provides instant generation of customizable components that would otherwise take 20-45 minutes each to hand-code.

contact-form

6

JaivishChauhan

Build production-ready contact forms with React Hook Form, Zod validation, Server Actions, and email services like Resend.

UI Interaction

5

Constellos Claude Code Plugins Ui Interaction

This skill should be used when the user asks to "add client interactivity", "implement form validation", "add event handlers", "use client state", "add Zod validation", "implement React hooks", "add local state", "make component interactive", "add form with validation", "use React Hook Form", or needs guidance on client-side events, form handling, optimistic updates, or when to add "use client" directive.

zod-form-validation

5

kettleofketchup

Zod schema validation and React Hook Form integration for TypeScript frontends. This skill should be used when creating forms, defining API schemas, validating form data, implementing type-safe validation, using ZodResolver with React Hook Form, or migrating legacy forms to the Zod + React Hook Form pattern.

frontend-dev-guidelines

4

DojoCodingLabs

Frontend development guidelines for Next.js + React 19 + shadcn/ui applications. Modern patterns including App Router, Server Components, Client Components, Server Actions, shadcn/ui with Tailwind CSS, React Hook Form, lazy loading, Suspense boundaries, Supabase client integration, performance optimization, and TypeScript best practices. Use when creating pages, components, forms, styling, data fetching, or working with Next.js/React code.

react-spa-engineer

1

kostysh

Comprehensive React SPA development expert for building production-ready single-page applications. Covers component architecture, state management (Zustand, Context), data fetching (TanStack Query v5), forms (React Hook Form + Zod), routing (React Router v7), TypeScript patterns, performance optimization, client-side persistence (IndexedDB/Dexie), testing (Vitest, RTL, Playwright), and accessibility. Use when building React SPAs, implementing features, reviewing code, setting up project architecture, or troubleshooting React client-side applications. Excludes SSR, RSC, Next.js server-side patterns.

web-forms-react-hook-form

agents-inc

React Hook Form patterns - useForm, Controller, useFieldArray, validation resolver, performance optimization