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

Ready to run

npx skills add https://github.com/wonkpentink/agent-skills-fe --skill form-validation-schemas

💬 Prompt for ChatGPT / Claude Chat▼

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.