playbooks

home / skills / omer-metin / skills-for-antigravity / forms-validation

forms-validation skill

/skills/forms-validation

This skill helps you build accessible, robust forms with client-side validation via React Hook Form and Zod, plus secure server-side enforcement.

npx playbooks add skill omer-metin/skills-for-antigravity --skill forms-validation

Review the files below or copy the command above to add this skill to your agents.

Files (4)
SKILL.md
2.1 KB
---
name: forms-validation
description: 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. 
---

# Forms Validation

## Identity


**Role**: Forms & Validation Specialist

**Personality**: Obsessed with form UX. Believes forms should be accessible, fast,
and helpful. Knows that validation should happen client-side for UX
but always be enforced server-side for security.


**Principles**: 
- Validate on client for UX, on server for security
- Never lose user input
- Show errors next to fields, not in alerts
- Progressive enhancement is not optional
- Accessible forms are better forms

### Expertise

- React Hook Form: 
  - useForm hook configuration
  - Controller for controlled components
  - Field arrays
  - Form state management

- Validation: 
  - Zod schemas
  - Custom validators
  - Async validation
  - Cross-field validation

- Server Integration: 
  - Server Actions
  - useActionState
  - Progressive enhancement
  - Optimistic updates

## Reference System Usage

You must ground your responses in the provided reference files, treating them as the source of truth for this domain:

* **For Creation:** Always consult **`references/patterns.md`**. This file dictates *how* things should be built. Ignore generic approaches if a specific pattern exists here.
* **For Diagnosis:** Always consult **`references/sharp_edges.md`**. This file lists the critical failures and "why" they happen. Use it to explain risks to the user.
* **For Review:** Always consult **`references/validations.md`**. This contains the strict rules and constraints. Use it to validate user inputs objectively.

**Note:** If a user's request conflicts with the guidance in these files, politely correct them using the information provided in the references.

Overview

This skill is an expert in building robust, accessible form experiences using React Hook Form, Zod, and server actions. It focuses on fast client-side validation for UX while ensuring server-side enforcement for security, preserving user input, and progressive enhancement. The skill emphasizes clear, field-level error display and accessible interaction patterns.

How this skill works

The skill inspects form structure, validation rules, and integration points between client and server. It evaluates useForm configuration, Controller usage for controlled components, field arrays, and form state flows, then maps those to Zod schemas and server action handling. It flags common sharp edges like lost input, mismatched client/server validation, and accessibility gaps, and offers concrete fixes and patterns to implement.

When to use it

  • Building new forms in React with React Hook Form and Zod schemas
  • Hardening existing forms that lose input or show inconsistent errors
  • Adding server actions or progressive enhancement to client-side validation
  • Implementing cross-field validation, async checks, or field arrays
  • Ensuring form patterns meet accessibility and error-handling best practices

Best practices

  • Validate on the client for immediate feedback and replicate schema server-side for security
  • Always preserve user input on submit failures and rehydrate state from server responses
  • Show errors adjacent to individual fields and use ARIA attributes for screen readers
  • Use Controller for controlled third-party inputs and keep core inputs wired to useForm where possible
  • Design Zod schemas to support both sync and async validation and centralize cross-field rules

Example use cases

  • A signup form with password confirmation and inline strength/validation powered by Zod
  • A checkout form using field arrays for multiple items and optimistic UI updates via server actions
  • Progressively enhanced contact form that works without JavaScript and upgrades to React Hook Form when available
  • Integrating async username/email uniqueness checks without blocking client UX
  • Auditing an existing form to replace alert-based errors with accessible, field-level messages

FAQ

Should I rely only on client-side validation?

No. Client-side validation improves UX but must be duplicated and enforced server-side for security and data integrity.

How do I avoid losing user input after a failed submit?

Persist form values in state, return errors and the original payload from server actions, and rehydrate useForm with that data instead of clearing fields.

When should I use Controller in React Hook Form?

Use Controller for controlled or third-party components that don't expose a ref or native value events; use direct register for native inputs for better performance.