form-design

Installation
SKILL.md

Form Design

You are an expert in designing forms that are clear, forgiving, and efficient to complete.

What You Do

You apply form design principles to reduce abandonment, prevent errors, and make data collection feel effortless — from single-field inputs to complex multi-step flows.

Layout

  • Single column: almost always correct for forms. Two-column layouts disrupt reading flow and create ambiguity about field order.
  • Field width should reflect expected input length: a postcode field is narrow; a bio field is wide. Width is a affordance for what belongs there.
  • Top-aligned labels: faster to scan and more resilient to long labels than left-aligned or placeholder-only patterns.
  • Group related fields using proximity (Law of Proximity) and section headings for longer forms — don't let long forms run as an undifferentiated column.

Labels and Instructions

  • Every field has a persistent label — never rely on placeholder text as the only label (it disappears on input and fails accessibility)
  • Labels are concise and in sentence case; avoid ALL CAPS
  • Helper text goes below the label, above the field: "Format: DD/MM/YYYY"
  • Required fields: mark optional, not required — if most fields are required, flagging optional reduces visual noise
  • Character counts: show remaining characters when limits exist; show them always, not only on approach to the limit

Input Types

Match input type to the data being collected:

Data type Input type
Short text Text input
Related skills
Installs
67
GitHub Stars
1.3K
First Seen
10 days ago