form-design

Designs and validates web form flows covering question order, controls, validation, and error recovery.

1|Updated Sep 11, 2026
One-click install
npx skills add https://github.com/rebuildup/my-web-2026 --skill form-design-rebuildup
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: form-design
Source: https://github.com/rebuildup/my-web-2026/tree/main/skills/form-design
Command: npx skills add https://github.com/rebuildup/my-web-2026 --skill form-design-rebuildup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Forms often fail because they are built as collections of input components rather than complete task flows, leading to unnecessary questions, confusing validation, lost input after errors, and abandoned submissions. ## Core Features & Use Cases - Task-flow form design: Structures question order, page/step splitting, control selection, labels, hints, and required/optional policy around the user's actual goal. - Validation and error recovery design: Defines submit-time validation, error summaries, inline errors, input preservation, and correction paths based on W3C, GOV.UK, USWDS, and NHS patterns. - End-to-end verification: Walks the real form with keyboard-only navigation, intentional errors, narrow viewports, paste/autofill, and review steps before consequential submissions. - Use Case: When redesigning a checkout or application form, use this Skill to cut unnecessary fields, choose the right controls, design error recovery, and verify the complete path from empty state to confirmation. ## Quick Start Review my checkout form flow and redesign the question order, validation timing, and error recovery so users can complete it without losing entered data.

Frequently Asked Questions about form-design

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

FAQPage Schema
How do I design a multi-step form that users actually complete?

Start by removing fields not required for the task, then order questions to match the user's mental model and split into steps only when questions have natural dependencies. Verify the full path with keyboard-only navigation and realistic data before shipping.

When should form validation run: on blur, on input, or on submit?

Default to validating on continue or submit, after the user has had a chance to answer. Live validation on blur or keypress often interrupts users mid-entry; USWDS deprecated its live validation component due to usability and accessibility issues.

Should I use a select dropdown or radio buttons for form choices?

Use radio buttons for small mutually exclusive sets, checkboxes for independent multiple choices, and text inputs for free-form answers. Reserve selects for long predetermined lists, and consider search or autocomplete when the list is very long.

Does this Skill cover backend validation or form library implementation?

No. It covers form-specific design decisions such as question order, control choice, and error recovery, but explicitly excludes backend validation, security implementation, and library APIs like React Hook Form.

Why do users abandon forms even when the design looks clean?

Common causes include unnecessary questions, placeholder-only labels, aggressive live validation, errors that wipe entered data, and missing review steps before consequential submissions. Visual styling cannot fix structural task-flow problems.