skills.rest
arbazkhan971
arbazkhan971COMMUNITY
Explore all skills by this author →
Website𝕏@arb5zGitHub

forms

Implement multi-step form validation with Zod schemas and file upload checks.

26|8|Updated Mar 19, 2026
Search Tags:#accessibility#validation#zod#forms#multi-step#file upload#react-hook-form
One-click install
npx skills add https://github.com/arbazkhan971/godmode --skill forms-arbazkhan971
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: forms
Source: https://github.com/arbazkhan971/godmode/tree/main/skills/forms
Command: npx skills add https://github.com/arbazkhan971/godmode --skill forms-arbazkhan971

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Implements reliable, accessible form architectures to eliminate fragile form state, inconsistent validation, poor file upload handling, and accessibility regressions that cause broken UX and security gaps.

Core Features & Use Cases

  • Shared client/server validation schemas (Zod) to prevent schema drift and enforce server-side security.
  • Recommended state management (React Hook Form) for complex or large forms, sessionStorage persistence for multi-step wizards, and focus management for accessibility.
  • Robust file upload checks (MIME, extension, size, count), async validation with debouncing and cancellation, and an a11y checklist for labels, error summaries, and keyboard navigation.
  • Use case: implement a multi-step registration or checkout flow with file attachments, real-time uniqueness checks, and an accessibility audit.

Quick Start

Use the forms skill to audit and implement a multi-step registration form with Zod validation, React Hook Form state management, sessionStorage persistence, and full accessibility fixes.

Frequently Asked Questions about forms

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

FAQPage Schema
How do I build accessible multi-step forms with shared Zod validation?▼

Build accessible multi-step forms by applying shared client/server Zod schemas to prevent drift, using React Hook Form for state management, and implementing sessionStorage persistence with focus management for accessibility.

What's the best way to handle file uploads with MIME and size validation in React?▼

Handle file uploads by enforcing robust checks for MIME types, file extensions, sizes, and counts, integrating these validations directly within your form architecture to close security gaps and improve UX.

Does this form validation approach work with Vue and Svelte, or just React?▼

This form validation approach applies to React, Vue, Svelte, and other front-end projects, allowing you to implement robust architectures for registration, checkout, settings, and surveys across multiple frameworks.

How do I implement async validation with debouncing and cancellation for form inputs?▼

Implement async validation by applying debouncing and cancellation techniques to handle real-time uniqueness checks, ensuring efficient client/server validation without overwhelming the network during user input.

Why do my multi-step forms lose state on page refresh, and how do I fix it?▼

Multi-step forms lose state without persistence mechanisms; fix this by implementing sessionStorage persistence to maintain wizard progress and applying focus management to preserve accessibility across steps.

Related Skills

Explore More Software Engineering Skills→
tech-with-sethtech-with-seth
4

create-form

Enforce consistent Zod form validation across React client and server.

Official
Intermediate
sncollectivesncollective

tusd-v2

Configure tusd v2 servers for resumable uploads with S3 storage and HTTP hooks.

Official
Advanced
coastdigitalgroupcoastdigitalgroup
2

accessible-modal-dialog

Implement accessible modal dialogs with focus trapping and ARIA attributes.

Official
Intermediate
AratKruglikAratKruglik
9

react-forms

Implement React forms with react-hook-form, Formik, or TanStack Form.

Community
Intermediate