Form Design

This skill covers form UX patterns — field types, label placement, multi-step wizards, layout grouping, and data collection best practices.

Use-When

This skill activates when:

Agent builds forms (login, signup, settings)
Agent creates multi-step flows or wizards
Agent designs data collection interfaces
Agent improves existing form conversion
Agent groups related fields

Core Rules

ALWAYS use visible labels (never placeholder-only)
ALWAYS group related fields into sections
ALWAYS indicate required fields visually and programmatically
ALWAYS inline validate after blur, not on every keystroke
PREFER single-column layouts for mobile friendliness

Common Agent Mistakes

Using placeholder as label (disappears on focus)
Putting too many fields on one screen
Not grouping related fields
Showing all validation errors at once (overwhelming)
Not indicating required fields clearly

Examples

✅ Correct

// Visible labels with proper grouping
<form>
  <fieldset>
    <legend>Personal Information</legend>
    <div className="space-y-4">
      <div>
        <label htmlFor="name">Full Name</label>
        <input id="name" />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input id="email" type="email" />
      </div>
    </div>
  </fieldset>
</form>

❌ Wrong

// Placeholder as label
<input placeholder="Enter your name" />

// No grouping, too many fields
<form>
  <input placeholder="Name" />
  <input placeholder="Email" />
  <input placeholder="Phone" />
  <input placeholder="Address" />
  <input placeholder="City" />
  <input placeholder="State" />
  <input placeholder="Zip" />
  {/* ... more fields */}
</form>

form-design

Form Design

Use-When

Core Rules

Common Agent Mistakes

Examples

✅ Correct

❌ Wrong

References