building-forms_skill

Overview

This skill builds complete form components and data-collection interfaces for web and backend systems. It covers 50+ input types, validation strategies, WCAG 2.1 accessibility patterns, multi-step wizards, and UX best practices to deliver reliable, usable forms. Use it to design contact forms, registration flows, checkouts, surveys, settings pages, and complex dynamic forms.

How this skill works

It maps data types to appropriate input components (e.g., short text → text input, date → date picker, boolean → toggle) and provides validation timing strategies (on-blur default, progressive on-change after first error, debounce for API checks). It enforces accessibility by recommending labels, ARIA attributes, keyboard behaviors, and error announcement patterns. It also supplies patterns for multi-step workflows, conditional fields, autosave, and error handling so you can implement consistent UX and robust server-side validation.

When to use it

• Creating contact, login, registration, checkout, or payment forms
• Implementing surveys, questionnaires, or conditional/question branching
• Adding client-side and server-side validation to user input
• Designing multi-step wizards, save-and-resume flows, or review pages
• Ensuring forms meet WCAG 2.1 AA accessibility requirements
• Building settings pages, inline editing, or bulk edit interfaces

Best practices

• Start with semantic HTML and native inputs when possible to maximize accessibility
• Label every field clearly and never rely on placeholders as labels
• Use on-blur validation by default; switch to on-change for fields with errors or live checks
• Make error messages specific, actionable, and announced to screen readers
• Apply progressive disclosure and smart defaults to reduce cognitive load
• Autosave drafts and support keyboard navigation and visible focus states

Example use cases

• Multi-step registration flow with password strength and conditional steps
• Checkout process with formatted credit card, address input, and validation timing for payment APIs
• Survey with conditional questions, branch logic, and progress indicators
• Settings page with mixed input types, autosave, and undo/redo support
• Contact form with inline validation, clear error guidance, and accessible labels