building-forms

Design accessible web forms with WCAG 2.1 AA compliance and validation strategies.

9|2|Updated Mar 12, 2026

Search Tags:#accessibility #react #validation #zod #forms #web-forms

Ready to run

npx skills add https://github.com/hongmaple0820/agent-academy --skill building-forms-hongmaple0820

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: building-forms
Source: https://github.com/hongmaple0820/agent-academy/tree/main/skills/design/building-forms
Command: npx skills add https://github.com/hongmaple0820/agent-academy --skill building-forms-hongmaple0820

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a practical framework for designing, building, and validating web forms, ensuring accessibility, usability, and robust data capture across apps.

Core Features & Use Cases

Systematic input component selection based on data type, constraints, and UX goals
Validation strategies including on blur, on change, debounced, progressive, and cross-field patterns
Accessibility patterns (WCAG 2.1 AA, ARIA attributes, keyboard navigation, focus management)
Support for multi-step and dynamic forms, autosave/draft recovery, and error handling
Use cases include contact forms, registration flows, checkout processes, surveys, and settings pages

Quick Start

Start by reviewing the decision tree to choose input components, then implement a basic form using a popular pattern (e.g., React Hook Form + Zod) and progressively add accessibility checks and i18n-ready error messages.

Frequently Asked Questions about building-forms

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

FAQPage Schema

How do I build accessible web forms that meet WCAG 2.1 AA compliance?▼

Accessible web forms require proper ARIA attributes, keyboard navigation, and focus management. This Skill applies WCAG 2.1 AA patterns to ensure real-world forms like registration and checkout flows are usable across modern front-end stacks.

What's the best way to choose input components for a React form?▼

Choosing React form inputs depends on data type, constraints, and UX goals. This Skill uses a decision tree to systematically select input components, ensuring robust data capture for surveys, settings pages, and contact forms.

How do I implement validation timing with Zod in web forms?▼

Zod validation timing in web forms can be implemented on blur, on change, debounced, or progressively. This Skill applies cross-field validation patterns to ensure robust data capture across multi-step and dynamic forms.

Can I use this approach to build multi-step forms with autosave and draft recovery?▼

Multi-step forms with autosave and draft recovery are supported. This Skill implements dynamic form patterns, comprehensive error handling, and i18n-ready error messages to produce production-ready forms.

Does this form design pattern work for checkout and registration flows?▼

Checkout and registration flows are primary use cases. This Skill designs robust, accessible web forms tailored for these real-world scenarios, applying systematic input selection and validation strategies across modern front-end stacks.

Why does web form validation fail on cross-field dependencies?▼

Cross-field validation fails without proper timing strategies and dependency checks. This Skill implements progressive validation, debounced checks, and cross-field patterns to handle complex form dependencies and prevent validation errors.