← ClaudeAtlas

form-ux-architecturelisted

Use when designing or auditing form structure and validation UX: field grouping, required vs optional inputs, validation timing, client/server validation split, submission lifecycle, recovery, multi-step forms, and high-risk data entry. Do NOT use for labels and announcements alone (use `a11y`), validation-message wording (use `microcopy`), API schema design (use `api-design`), or stored data modeling (use `data-modeling`).
jacob-balslev/skills · ★ 0 · API & Backend · score 71
Install: claude install-skill jacob-balslev/skills
# Form UX Architecture ## Coverage Design form structure and validation behavior. Covers field grouping, labels as structure handoff, required vs optional decisions, progressive disclosure, defaults, input formats, client-side validation, server-side validation, validation timing, submit lifecycle, error recovery, multi-step forms, review steps, autosave, and high-risk data entry. ## Philosophy Forms are not data dumps. A form is a guided conversation that asks only for information the system truly needs, at the moment the user can answer it, with correction paths that preserve trust. Client-side validation is a user-experience aid, not a security boundary. The server must validate every submitted field even when the client appears correct. ## Method 1. Name the user goal and the minimum data needed to complete it. 2. Remove fields that are not needed now or cannot be acted on. 3. Group fields by user mental model, not database table. 4. Decide required, optional, defaulted, derived, and deferred fields. 5. Choose validation timing: on submit, on blur, on change, or after async check. 6. Split client-side validation from server-side validation and map server errors back to fields. 7. Define submit, pending, success, failure, retry, and partial-save behavior. 8. Hand off labels and announcements to `a11y`, wording to `microcopy`, and endpoint shape to `api-design`. ## Evals This skill ships a comprehension-eval artifact at [`examples/evals/form-ux-architecture.json`](