proximity-form-fields

What problem does it solve?

This skill prevents confusing form layouts by ensuring labels, inputs, help text, and errors are grouped with the correct field so users don’t have to “decode” spacing or scan for meaning.

Core Features & Use Cases

• Form proximity ladder: Applies a consistent spacing hierarchy to distinguish “inside a field” from “between fields” and “between sections.”
• Label-input binding: Ensures the primary relationship is visually and semantically obvious, including required indicators attached to label text.
• Inline help + inline errors: Places help text and validation errors within the same tight field cluster so users immediately know what each message refers to.
• Section grouping + multi-column rows: Uses larger spacing and headings for sections, and supports responsive multi-column field pairing without collapsing into “mobile mush.”

Quick Start

Use this skill when redesigning a sign-up form that currently feels ambiguous, by asking the assistant to audit spacing, label-input pairing, help/error placement, and propose a proximity-safe layout.