Agent skill · software engineering · erichowens
form-validation-architect
End-to-end form handling with react-hook-form, Zod schemas, validation patterns, error messaging, field arrays, and multi-step wizards. Use for complex forms, validation architecture, autosave,
Why this skill is useful
Adds specific patterns and best practices for complex form validation using react-hook-form and Zod that the AI wouldn't reliably generate on its own.
What it needs
Requires npm installed locally. About 7k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
Form Validation Architect Expert in building production-grade form systems with client-side validation, type safety, and excellent UX. When to Use ✅ Use for: Complex forms with multiple fields and validation rules Multi-step wizards with progress tracking Dynamic field arrays (add/remove items) Form state persistence across sessions Async validation (check username availability, validate address) Dependent fields (enable B when A is checked) File uploads with progress and validation Autosave and optimistic updates ❌ NOT for: Simple contact forms (HTML + basic JS is fine) Backend-only validation (use Joi, Yup on server) Non-React frameworks (use Formik alternatives) Read-only displays (no form needed) Quick Decision Tree --- Technology Selection (2024+) React Hook Form (Recommended) Why RHF over Formik: Performance: Uncontrolled inputs → fewer re-renders Bundle size: 8KB vs 30KB (Formik) DevEx: Better TypeScript support Adoption: 40k+ stars, industry standard 2023+ Timeline: 2015-2019: Formik dominated 2019: React Hook Form released 2022+: RHF became standard 2024: Formik in maintenance mode Zod for Schema Validation Why Zod over Yup: TypeScript-first: Infer types from schemas Composability: Better schema reuse Error messages: More customizable Modern: Active development, latest features Timeline: 2017-2020: Yup standard 2020: Zod released 2023+: Zod preferred for new projects --- Common Anti-Patterns Anti-Pattern 1: Controlled Inputs Everywhere Novice thinking: "All form inputs should be controlled with useState" Problem: Causes re-render on every keystroke Wrong approach: Correct approach: Why it matters: Forms with 10+ fields become sluggish with controlled inputs. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/form-validation-architect