Forms Agent Skill
React Hook Form, Zod validation, and multi-step wizard flows.
The Skill
Full content, every format. Copy it, download it, or install with one command.
---
description: React Hook Form, Zod validation, and multi-step wizard flows.
homepage: https://yepapi.com/skills/forms
metadata:
tags: [forms, validation, zod, react-hook-form]
---
# Forms
## Rules
- React Hook Form for form state — `useForm()` + `register()` or Controller
- Zod schema for validation — share between client and server
- Error display: inline under each field, red text, associated via `aria-describedby`
- Multi-step forms: wizard pattern with step state, validate each step independently
- File uploads: separate component with preview, drag-and-drop, progress indicator
- Autosave for long forms — debounced save to server/localStorage
- Accessibility: labels, error descriptions, focus management on validation failure
- Disable submit during loading — show spinner, prevent double submissionInstall
Why Use the Forms Skill?
Without this skill, your AI guesses at forms patterns. It might hallucinate deprecated APIs, use outdated conventions, or miss best practices entirely. With it, your AI follows a proven ruleset — every suggestion aligns with current standards.
Drop this skill into your project and your AI instantly knows the rules. Better code suggestions, fewer errors, faster shipping.
Try These Prompts
These prompts work better with the Forms skill installed. Your AI knows the context and writes code that fits.
"Build a multi-step form wizard with React Hook Form, Zod validation, and progress indicator"
"Create a dynamic form builder that generates forms from a JSON schema"
"Add form validation with real-time error messages, debounced server-side checks, and submission handling"
Forms skill — FAQ
It covers React Hook Form, Zod validation, and multi-step wizard patterns. Your AI generates forms with proper validation, error messages, and accessible markup from the start.
Run `npx skills add YepAPI/skills --skill forms` in your project root. This copies the skill file into your repo where your AI coding tool can read it automatically.
The skill uses React Hook Form which defaults to uncontrolled inputs for performance. It only re-renders the fields that change. Zod handles validation with proper error messages.