102.3K+Download
Skip to the usage guide
Form Designby Owl-Listener

Form Design Skill.

Specify the path from the first field to a successful submission, including corrections and return visits.

  • UX
  • Design Guidance
Download OpenDesignView Usage Guide
Source Review · Form DesignSKILL.md
Task UX Produces • A field sequence with grouping and input types • Labels, instructions, and validation behavior • Multi-step, focus, error-summary, and progress rules Before You Start An agent that can read the form brief, the required fields and validation rules, and any existing form screens.
Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Form Design: Make Data Entry Clear

Specify field order, labels, input types, validation and correction for a complete form.

Source-based workflowNot an execution benchmark

The Working Approach

Form Design covers a form end to end. It addresses layout, labels, helper text, input types, validation, multi-step progress, and accessibility. The source favors a clear reading order and field widths that communicate the expected input.

Its detailed behavior guidance includes validation on blur, errors connected to fields, retained input during back navigation, and a review step for high-stakes submissions. These are design decisions to adapt to the actual data and users, not evidence that an untested form will improve completion.

Expected Deliverables

  • A field sequence with grouping and input types
  • Labels, instructions, and validation behavior
  • Multi-step, focus, error-summary, and progress rules
See the Example Brief

From Brief to Review

  1. 01
    Reduce and Order Fields

    Identify necessary information and group related questions in a clear reading sequence.

  2. 02
    Specify Entry Behavior

    Choose inputs, persistent labels, helper text, and validation timing.

  3. 03
    Handle Completion and Correction

    Define retained data, back navigation, error focus, and review before consequential submission.

02 When to Use It

When to Use It

Use it to design a new form or address confusing fields, validation and progress through an existing one.

A Good Fit

  • Long Application FormsBreak related questions into coherent steps without losing progress.
  • Field-Level FrictionClarify confusing instructions, input formats, and validation messages.

Limits to Check

  • No Guaranteed Conversion LiftCompletion improvements require observation and measurement.
  • Not All Product ErrorsCross-flow network and permission strategy extends beyond one form.

Bring These Inputs

  • Required DataList fields, formats, and reasons they are needed.
  • Validation RulesProvide real client and server constraints.
  • Completion ContextExplain consequences, device use, and whether people return later.

03 Decisions That Matter

Decisions That Matter

  1. Correction Is Designed

    Focusable summaries and field-linked messages help people recover efficiently.

  2. Progress Is Preserved

    Back navigation and partial completion need explicit state behavior.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Load this task's SKILL.md from the designer-skills repository in your agent's supported skill location. No universal installer command is established by the entry file.

Upstream Source File
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/form-design/SKILL.md

Provide the required fields and real validation rules. The output is a form specification; implementation and user testing remain separate.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use form-design to redesign this multi-step project brief. Remove unjustified fields, group related questions, define persistent labels and blur validation, and preserve input when going back. Specify an accessible linked error summary and a final review step.

Inspect the Result

Check the actual output against these observable criteria.

  • Every field has a persistent programmatic label.
  • Errors explain correction and connect to the field.
  • Back navigation preserves entered data.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
Owl-Listener
Repository
Owl-Listener/designer-skills
Skill File
interaction-design/skills/form-design/SKILL.md
License
MIT
Reviewed Snapshot
2026-10-07 · 9a6930cf84a8
Editorial Source Summary
Specify field order, labels, input types, validation and correction for a complete form.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Can placeholder text replace a label?

The source says no; labels must remain available after typing.

When should field validation occur?

The source recommends blur rather than validating every keystroke; adapt exceptions to real interaction needs.

Does a multi-step form need saved progress?

The source recommends retained data and progress-saving behavior for longer flows.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/form-design/SKILL.md