form-design

Create accessible forms with Zod and React Hook Form validation workflows.

3|Updated May 28, 2026

Search Tags:#accessibility #frontend #validation #zod #forms #react-hook-form

Ready to run

npx skills add https://github.com/mahg-es/araya --skill form-design-mahg-es

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: form-design
Source: https://github.com/mahg-es/araya/tree/main/skills/form-design
Command: npx skills add https://github.com/mahg-es/araya --skill form-design-mahg-es

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Poorly designed forms frustrate users, cause data entry errors, and hurt conversions. This Skill provides accessible, validated forms with real-time validation, clear error messages, keyboard navigation, and accessible markup to guide users to successful completion.

Core Features & Use Cases

Real-time validation with accessible error states and keyboard-friendly navigation.
Schema-driven forms with a validation library (e.g., Zod) and a form library (e.g., React Hook Form) to ensure data integrity.
Use Case: Login, registration, settings, checkout, and data-entry workflows that require robust UX and reliable data capture.

Quick Start

Create a new accessible form using React Hook Form and Zod with real-time validation, proper labels, and accessible error messages.

Frequently Asked Questions about form-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build accessible forms with real-time validation in React?▼

To build accessible forms with real-time validation in React, use schema-driven definitions with Zod and React Hook Form to ensure data integrity, proper labeling, and accessible error messages. This approach provides keyboard-friendly navigation and robust submission handling for UI workflows like login and checkout.

What is the best way to manage form validation schemas and error states?▼

The best way to manage form validation schemas and error states is by using a validation library like Zod paired with React Hook Form. This schema-driven method ensures data integrity, delivers real-time validation, and provides clear, accessible error messages to guide users to successful completion.

Can I use Zod and React Hook Form for checkout and settings workflows?▼

Yes, you can use Zod and React Hook Form for checkout, settings, registration, and login workflows. They handle real-time validation and accessible error states effectively, ensuring robust UX and reliable data capture for frontend data-entry workflows requiring keyboard accessibility.

How do I add keyboard accessibility and proper labeling to validated forms?▼

To add keyboard accessibility and proper labeling to validated forms, integrate schema definitions with React Hook Form and Zod. This ensures keyboard-friendly navigation, accessible markup, and clear error messages, which are essential for guiding users through data entry without frustration.

Why does poor form design hurt conversions and cause data entry errors?▼

Poor form design hurts conversions and causes data entry errors because it frustrates users with unclear validation and inaccessible markup. Implementing schema-driven forms with real-time validation, accessible error states, and keyboard navigation guides users to successful completion and improves data capture.