skills.rest
wonkpentink
wonkpentinkCOMMUNITY
Explore all skills by this author →
GitHub

form-validation-schemas

Create Yup validation schemas for React forms with react-hook-form.

Updated Mar 1, 2026
Search Tags:#validation#forms#react-hook-form#yup#regex-patterns#nested-schemas#conditional-validation
One-click install
npx skills add https://github.com/wonkpentink/agent-skills-fe --skill form-validation-schemas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: form-validation-schemas
Source: https://github.com/wonkpentink/agent-skills-fe/tree/main/skills/form-validation-schemas
Command: npx skills add https://github.com/wonkpentink/agent-skills-fe --skill form-validation-schemas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Declarative and robust validation for React forms, enabling reusable Yup schemas to enforce field types, required rules, and consistent error messaging across the app.

Core Features & Use Cases

  • Declarative field validation with Yup types (string, number, boolean) and standard constraints
  • Conditional validation with when() to adapt rules based on other fields
  • Nested objects and arrays to model complex forms (addresses, contacts, multi-step flows)
  • Regex-based pattern validation and reusable patterns for consistency
  • Seamless integration with react-hook-form via yupResolver and TypeScript typings

Quick Start

Create a Yup schema file, import it into your form, and wire it to react-hook-form with yupResolver to enable automatic validation.

Frequently Asked Questions about form-validation-schemas

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

FAQPage Schema
How do I build a Yup validation schema for nested objects and arrays in React forms?▼

Build Yup validation schemas for nested objects and arrays by declaratively defining field types and constraints. This approach models complex form structures like addresses, contacts, and multi-step workflows using nested schema definitions.

How do I integrate Yup schemas with react-hook-form?▼

Integrate Yup schemas with react-hook-form by importing your schema and wiring it to the form hook using yupResolver. This enables automatic validation and TypeScript typings for your form fields.

Can I apply conditional validation rules based on other fields using Yup?▼

Apply conditional validation in Yup using the when() method to adapt rules based on other fields. This allows your schema to dynamically enforce different constraints depending on sibling field values.

What's the best way to enforce consistent regex pattern validation across multiple forms?▼

Enforce consistent regex pattern validation by creating reusable Yup schemas with declarative pattern definitions. This ensures standard constraints and consistent error messaging are maintained across your entire application.

Does Yup support custom error messages for declarative field validation?▼

Yup supports custom error messages within its declarative field validation system. You can define specific messages alongside field types, required rules, and constraints to provide consistent feedback across your React forms.

Related Skills

Explore More Software Engineering Skills→
tanaka-mambingetanaka-mambinge

react-form-validation

Validate React form inputs using react-hook-form and Yup schemas.

Community
Intermediate
arolariuarolariu
6

zustand-store

Generate Zustand stores with IndexedDB persistence and TypeScript strict typing.

Community
Intermediate
berkcangumusisikberkcangumusisik
11

form-gen

Generate React form components with TypeScript types and validation schemas.

Community
Intermediate
Parallel-7Parallel-7
17

zod

Document Zod schemas for validation and TypeScript type inference.

Official
Intermediate