Build forms that users complete without confusion, anxiety, or abandonment. The goal is not to collect every possible field; it is to remove every unnecessary obstacle between the user and their goal.

Consult the form validation patterns reference for validation timing, error placement, multi-field dependencies, async validation, recovery design, conversion measurement, field-level drop-off, and field-by-field optimization guidance. Consult the live validation UX reference for blur-vs-real-time timing, reward-early/punish-late behavior, and copy-paste-friendly validation. Consult the error recovery reference for what happens after validation or submission fails. Consult the disabled buttons UX reference when deciding whether to block submit buttons or keep them enabled with error explanation. Consult the component anatomy reference for button, input, checkbox, radio, toggle, dropdown, and textarea anatomy guidance. Consult the self-evident interface design reference when a form depends on too much helper text, instructions, or onboarding; prefer clearer grouping, defaults, constraints, examples, and inline feedback.

MANDATORY PREPARATION

Users start this workflow with /forms. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first. Additionally gather: what goal the user is trying to achieve, which fields are truly required, and what causes abandonment in the current flow.

Assess Form Needs

Understand the form's purpose and context: