Form Design Skill: Better Fields, Errors and Flow

What is the form-design skill?

The form-design skill lives in the interaction-design plugin of Owl-Listener's designer-skills repository. It frames the agent as an expert in forms that are clear, forgiving and efficient, from a single input to a long multi-step flow.

Its description says to use it when the artifact is a form. Product-wide error strategy is handed to error-handling-ux, and first-run signup is handed to onboarding-design, both named in the file.

Layout and labels it enforces

• A single column is almost always correct, because two columns disrupt reading flow and blur the order of fields.
• Field width follows expected input length, so a postcode box is narrow and a bio box is wide.
• Labels sit above the field and stay visible. Placeholder text is never the only label, since it vanishes on input.
• Optional fields are marked optional when most fields are required, which cuts visual noise.
• Helper text goes below the label and above the field.

Picking the right input

The skill carries a table that maps data to controls. Radio buttons suit up to five options, a select or combobox suits six or more, checkboxes handle multiple choices, and dates use a picker or day, month and year segments.

Who the form-design skill is for

Best for

• Checkout, signup, contact and quote forms where completion rate matters, Related: page-cro.
• Agents that default to placeholder-only fields or errors dumped at the top of the page.
• High-stakes forms such as payments, medical or legal, where the skill asks for a review step before submission.

Not for

• A full accessibility audit. The skill lists the basics only, Related: fixing-accessibility.
• Product-wide error handling or first-run onboarding, which the file routes to other skills. Related: polish.
• Visual styling of inputs. It sets behaviour and structure, not colour or type.

Use it with UiChemy

If the form belongs on a WordPress site, let the agent apply these rules to the design first. UiChemy then brings the page across: Composer edits it visually in Elementor or Gutenberg. Click Get Started on uichemy.com.

How to install Form Design Skill: Better Fields, Errors and Flow

/plugin marketplace add Owl-Listener/designer-skills
/plugin install interaction-design@designer-skills

1. Add the marketplace

   Run /plugin marketplace add Owl-Listener/designer-skills inside Claude Code. The README says this step only tells the agent where the skills live and installs nothing yet.

2. Install the interaction-design plugin

   Run /plugin install interaction-design@designer-skills. The form-design skill ships inside this plugin. You can also type /plugin, open the Discover tab, tick the plugin and press enter.

3. Using Gemini CLI instead

   The README says each plugin is also a Gemini CLI extension. Clone the repository, create .gemini/extensions in your project root and copy the cloned .gemini/extensions contents into it.

4. Ask for the skill by task

   Try a prompt such as: use form-design to build the checkout form in this component. Name the file so the agent edits the right code.

Check that it loaded

Ask the agent to design a signup form with five fields. It should use one column, top-aligned labels, inline errors below each field and a validation message that explains the fix.

Read the official instructions on GitHub

Key features

• Single-column layoutSingle column is the default, since two-column forms disrupt reading flow and create doubt about which field comes next.
• Width signals input lengthA postcode field is narrow and a bio field is wide, so the box itself tells the user what belongs there.
• Persistent top-aligned labelsEvery field keeps a visible label above it. Placeholder text alone is rejected because it disappears and fails accessibility.
• Input type tableShort text, long text, radio buttons for five or fewer options, select for six or more, checkboxes, date pickers, masked numbers and password with a show toggle.
• Validation on blurFields validate when the user leaves them, not on every keystroke. Errors appear directly below the field and say how to fix the problem.
• Useful error wordingMessages explain the failure, for example that an email address must include an at sign, instead of a bare invalid notice.
• Multi-step formsShow real progress, keep each step a complete unit, allow back navigation without data loss, save progress and confirm before discarding input.
• Accessibility basicsProgrammatic labels, errors tied to fields with aria-describedby, focus order that matches visual order and a keyboard-focusable error summary.
• Completion best practicesRemove every optional field you can, default to the common answer, test with real data and measure which field users leave on.

Frequently asked questions