form-builder

Create accessible forms by integrating React Hook Form with Zod or Yup schemas for validation, adding ARIA attributes, labels, and focus management. This Skill provides production-ready patterns for real-time validation, error display, and keyboard navigation across simple, dynamic, and multi-step forms.

Both Zod and Yup schemas work with React Hook Form in this Skill. Choose one based on your preference—Zod offers TypeScript-first validation with explicit error handling, while Yup provides a mature, schema-based approach. The Skill supports async and cross-field validation with either schema.

Use form arrays and conditional logic to build dynamic fields that add or remove based on user input. Multi-step wizards are supported through state management patterns, persistence, and step-by-step validation, allowing complex forms to break into manageable workflows.

Implement form persistence by storing state in localStorage or a database, then restore it on page reload. This Skill includes state management patterns with React Hook Form and form context to maintain data across steps and sessions.

Yes, the Skill handles server errors through error propagation patterns that display inline or form-level messages after submission. Integrate async validation and error callbacks to surface backend validation failures alongside client-side checks.

Test accessibility using ARIA attributes, focus management, and keyboard navigation patterns. The Skill covers field tests, validation tests, submission tests, and a11y-specific tests to ensure forms meet accessibility standards and validation logic works correctly.