form_builder

Build accessible React forms with React Hook Form and Zod validation.

43|11|Updated Dec 27, 2025

Search Tags:#accessibility #frontend #react #validation #ui/ux #forms

Ready to run

npx skills add https://github.com/vuralserhat86/antigravity-agentic-skills --skill form-builder-vuralserhat86

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: form_builder
Source: https://github.com/vuralserhat86/antigravity-agentic-skills/tree/main/skills/form_builder
Command: npx skills add https://github.com/vuralserhat86/antigravity-agentic-skills --skill form-builder-vuralserhat86

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the creation of accessible, user-friendly forms, ensuring efficient data collection and a positive user experience across various platforms.

Core Features & Use Cases

Component Selection: Provides guidance on choosing the right input type based on data.
Validation Strategies: Implements robust validation timing and error handling.
Accessibility: Ensures WCAG 2.1 AA compliance for all form elements.
Use Case: When building a new user registration page, use this skill to select appropriate input fields (email, password), implement inline validation for immediate feedback, and ensure the form is fully accessible to screen readers.

Quick Start

Use the form_builder skill to create a React registration form with email and password fields, including validation.

Frequently Asked Questions about form_builder

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

FAQPage Schema

How do I build accessible React forms with validation?▼

Build accessible React forms using React Hook Form and Zod for validation, applying WCAG 2.1 patterns and over 50 input types. The skill provides decision trees for component selection, validation timing, and error handling to streamline data collection.

What is the best way to implement multi-step form wizards in React?▼

Multi-step wizards in React are built using provided UX best practices and accessible component patterns. The skill supplies decision trees for input selection and validation strategies, ensuring complex flows like checkout processes remain user-friendly and accessible.

How do I add WCAG 2.1 accessibility to form components?▼

Add WCAG 2.1 AA compliance to form components by applying the skill's built-in accessibility patterns. It ensures all form elements, from contact forms to surveys, are fully accessible to screen readers and follow strict UI/UX standards.

Can I use this skill for checkout processes and registration flows?▼

Yes, you can use this skill for checkout processes, registration flows, surveys, and settings pages. It provides tailored input types, inline validation for immediate feedback, and accessibility patterns to ensure a positive user experience across various platforms.

When should I use inline validation for immediate feedback in forms?▼

Use inline validation for immediate feedback based on the skill's validation timing guidance. It implements robust validation strategies and error handling patterns, ensuring users get accurate, real-time responses during data entry in registration or checkout flows.

Do I need React Hook Form and Zod to build accessible forms?▼

You need React Hook Form and Zod to build accessible forms using this skill, as it relies on them for validation strategies. The skill leverages these dependencies to implement robust validation timing, error handling, and UI/UX best practices.